Persistence

const proxy = require('http-proxy-middleware'); module.exports = function(app) { app.use( proxy('/posts', { target:'https://target.domain.com', changeOrigin: true }) ); };흔히 cors 문제를 해결하기 위해 프록시를 사용할 수 있는데, http-proxy-middleware를 사용해서 위처럼 설정하면 /posts로 시작하는 API는 target 필드에 설정한 서버로 호출하게 된다. 즉 /posts/1 을 호출하면, https://target.domain.com/posts/1 을 호출하게 된다. const proxy = requir..

토큰이란 무엇인가? 웹개발에서 토큰이란 세션을 나타내는 임의 값일 뿐이다. 예를 들어 "abc123" 과 같은 문자열도 토큰이 될 수 있다. 토큰의 목적은 서버가 사용자를 기억하고 분별하게 하려는 것이다. JWT란 무엇인가? JSON Web Token은 웹에서 사용하기 쉽도록 일정한 형태로 구조화한 토큰이다. JWT는 JSON 데이터를 담고 있어서 JWT를 복호화하면 JSON 데이터를 얻게 된다. JWT는 헤더, 페이로드, 시그니처 3부분으로 구성돼있는데 특히 이 시그니처 부분은 서버에서 암호화한 서명으로, , 시크릿 키가 없으면 복호화할 수 없다. 그러므로 내가 다른 사용자의 ID를 훔쳐서 나에게 발급된 JWT에 훔친 ID를 페이로드로 수정하여 서버에게 보낸다하더라도, 시그니처가 내 정보에 기반해서 돼..

canonical tag란 비슷하거나 중복된 페이지들에 대해 서치 엔진에게 어떤 페이지가 메인 버전 (canonical version) 이라고 알려주는 태그이다. 그럼 어떤 것이 중복된 페이지일까? 같은 컨텐츠를 가졌음에도 불구하고 검색 엔진이 다르게 취급하는 url들이 많이 있다. http://site.com https://site.com https://site.com/index.html https://www.site.com http 프로토콜이 다르거나, 뒤에 pathname이 붙거나, 앞에 www가 붙거나, 쿼리 파라미터가 붙는 등 모두 같거나 비슷한 페이지를 서빙함에도 불구하고 검색 엔진은 다른 것으로 취급하고, 이 때 중복 컨텐츠의 문제가 생긴다. 중복 컨텐츠 문제는 왜 문제일까? 검색 엔진이 인..

Blob Blob 객체는 파일류의 불변하는 미가공 데이터를 나타낸다. 텍스트와 이진 데이터 형태로 읽을 수 있으며, ReadableStream으로 변환해서 스트림 메서드를 사용할 수도 있다. File이 Blob에 기반한 인터페이스로, Blob 인터페이스를 상속해 확장한 것이다. File File 인터페이스는 파일에 대한 정보를 제공하고 자바스크립트가 접근할 수 있는 메서드를 제공한다. 서버에서 파일을 다운로드하려면 단순히 파일을 응답으로 보내주는 것뿐만 아니라, 헤더에 Content-Disposition 필드가 필요하다. Content-Disposition 헤더의 타입에는 inline, attachment 2가지 종류가 있는데, inline은 컨텐츠를 display하는 것이고 attachment는 다운로..

공통점 둘 다, 사이트 URL에 대응하는 HTML을 생성하고 SEO를 향상시킨다. Static Rendering 차이점은 static rendering은 빌드 타임에 일어나고, server rendering은 유저가 요구할 때마다 일어난다는 것이다. 미리 빌드 타임에 각 URL에 대한 모든 HTML 파일들을 다 만들어 놓고, s3나 웹서버에 push 해놓고 유저가 요청할 때 미리 만들어둔 것을 전송한다. 예를 들어 s3 cloudfront를 사용하면 요청이 오면 cloudfront를 사용해 캐시된 버전이 있는지 확인하고 없으면 s3 요청을 한다. 장점 모든 요청 가능한 리퀘스트에 대응하는 응답을 다 만들어둔다. 그렇기 때문에 당연히 응답 속도가 매우 빠르다. 단점 요청 가능한 리퀘스트를 미리 예측할 수 ..

resolutions package.json에 resolutions라는 필드가 있는데, 여기서는 package.json에 있는 의존성들의 특정 버전이나 range를 지정할 수 있다. package.json에는 일반적으로 semantic versioning을 사용하여 range로 패키지 버전을 설정하는데 왜 커스텀 버전을 설정할 필요가 있는걸까? 예를 들어 프로젝트가 A 패키지에 의존하고 있다고 가정하자. 그런데 A는 또 다른 패키지인 B에 의존하고 있다면, 여기서 B에 서브 의존성(또는 하위 의존성)이 있다고 할 수 있다. package.json 파일에는 우리가 직접적으로 의존하고 있는 A의 버전만 관리할 수 있을 뿐, 간접적으로 의존하고 있는 B에 대해서는 지정하지 않는다. 만약 A의 package.j..

많은 자바스크립트 프로젝트들이 모노레포로 운영되고 있다. 모노레포는 여러 프로젝트들을 한 군데 저장함으로써 코드 consistency를 쉽게 유지하도록 해준다. 예를 들어 각자 다른 프로젝트 A, B가 각자 다른 레포에 저장되어 있고 B가 A에 디펜던시가 있는 상황을 가정해보자. A의 코드가 업데이트된다면 B에서 사용되고 있는 A는 어떻게 될까? 업데이트된 A의 코드가 리모트 환경에 업데이트가 되지 않았거나, 올라와 있다고 하더라도 B에서 이 최신 코드를 Pull해오지 않는다면 A와 B에서 쓰이는 A 사이의 싱크가 맞지 않게 된다. 모노레포를 사용하여 A와 B를 같은 코드베이스에서 사용하게 된다면 이런 문제를 해결할 수 있다. 다만 모노레포의 단점은 그 만큼 빌드 시간이 오래 걸릴 수 있고(예를 들어 B..

HTML을 다운로드하다가 스크립트 태그를 만나면 HTML은 파싱하는 과정을 중단하고 스크립트를 즉시 실행한다. 만약 외부 스크립트라면 그 스크립트 파일을 다운로드하는 동안 HTML 파싱이 중단된다. 여기에 2가지 문제점이 있다. 스크립트는 스크립트 코드 밑에 있는 DOM element들을 보지 못하므로 핸들링하지 못한다. 만약 스크립트가 아주 크고 이 태그가 페이지 상단에 위치한다면 로딩되는 동안 렌더링 블로킹이 일어나 유저들은 페이지 컨텐트을 보지 못한다. 여기에 대한 workaround로 스크립트 태그를 바디 태그 안의 최하단에 위치시키는 방법도 있다. 그러면 최소한 페이지 컨텐트가 보이고 나서 스크립트 로딩이 시작될 것이다. 다만 이는 미봉책일 뿐이고 HTML이 아주 긴 경우에는 그 만큼 스크립트 ..

Window랑 Document는 같은 것이 아니다. Window는 Document를 포함하고 있다. Window는 브라우저를 켰을 때 맨 먼저 로드되는 전역 객체이다. 스크립트가 실행되고 있는 그 창에 대한 정보를 갖고 있는 전역 객체이다. 그러니까 브라우저를 켰을 때 보이는 그 창 = Window 라고 개념적으로 생각하면 될 듯하다. 예를 들어 window를 콘솔에 쳐보면 이 객체가 기본적으로 갖고 있는 프로퍼티들 중에 innerHeight, innerWidth 등이 있다. 또 이 창이 포함하고 있는 iframes, document도 있다. iframe 또한 하나의 window로 간주되며, 하위에 있는 iframe은 window.iframes로 접근할 수 있다. 그리고 이 iframe들은 documen..

HTTP 트랜잭션은 상태가 없다(stateless). 각 요청 및 응답은 독립적으로 일어난다. 하지만 웹사이트는 사용자의 상태를 남기고 싶어한다. 예를 들어서 로그인하지 않고도 장바구니에 담은 기록이 유지되도록 하고 싶을 수 있다. 상태를 유지하려면 웹사이트는 각 사용자에게서 오는 HTTP 트랜잭션을 식별할 방법이 필요하다. HTTP가 사용자를 식별하는 방법에는 아래와 같은 것들이 있는데, 쿠키에 대해서만 보려고 한다. 식별 정보가 있는 HTTP 헤더 클라이언트 IP 주소 추적 사용자 로그인 인증 URL에 식별자를 포함하는 fat url 쿠키 쿠키 쿠키는 일종의 클라이언트 상태 정보로, 사용자를 식별하기 위해 서버가 생성하여 브라우저에게 전달하는 것이다. 브라우저는 받은 쿠키를 갖고 있다가 유효한 서버에..

프로젝트를 할 때 라이브러리를 포함한 외부 패키지를 갖다 쓰는 것은 흔한 일이다. 이미 만들어져있는 코드를 가져다가 사용만 하는 것이기 때문에, 프로젝트가 이 외부 패키지들에게 '의존하고 있다'고 표현해도 될 것이다. 프로젝트가 의존하고 있는 패키지들의 목록이 열거된 파일이 package.json이며, 이 파일의 dependencies 라는 객체에 패키지명과 미니멈 버전들이 나열돼 있다. Semantic Versioning 예시를 들어보자. "dependencies": { "graphql": "^15.3.0" } package.json 파일에 위처럼 써있다면 이 프로젝트는 graphql 패키지에 의존하고 있음을 나타내는 것이다. 그리고 graphql 패키지의 버전은 ^15.3.0 이라고 쓰여있는데, 이 ..

히스토리 타입 브라우저 히스토리 해시 히스토리 메모리 히스토리 브라우저 히스토리와 해시 히스토리는 둘 다 브라우저 환경에서 사용된다. 브라우저 히스토리와 해시 히스토리는 현재 location이 브라우저의 주소창에 띄워져있는 것과 일치하도록 한다. const browserHistory = createBrowserHistory() const hashHistory = createHashHistory() 이 두 개의 가장 큰 차이는 url의 어떤 부분으로부터 로케이션 객체를 생성하느냐이다. 브라우저 히스토리는 전체 url을 사용하는 반면, 해시 히스토리는 url에서 첫번째 해시 심볼 이후에 나타난 부분만 사용한다. url = 'http://www.example./com/path/name?key=value#has..

history 객체에서 가장 중요한 정보는 location이고, 이 location은 URL로부터 뽑아낼 수 있는 정보들(pathname, search, hash)와 그 외 추가적인 것들(key, state)로 구성돼있다. (URL 기초에 대한 포스팅은 여기) key는 각 location에 따른 유니크한 값이다. state는 URL에는 존재하지 않는 데이터를 해당 location에 붙이고 싶을 때 사용된다. 회사에서 location state를 사용했던 유스케이스는, SPA에서 새로고침하면 redux state가 클리어되고 이에 따라 api를 재요청하는 부분을 개선하고자 location state를 부분적으로 사용했던 것이었다. location state를 사용하면 새로고침하더라도 state가 클리어되지..

URL이란? URL(Uniform resource locator)이란, 리소스 식별자이다. resource locator라는 말에서 알 수 있듯이, 리소스가 어딨는지 알려주는 아이라는 것이다. 우리는 웹에서 무수한 리소스들을 주고 받는다. 이미지, 텍스트, 동영상 등 모든 콘텐츠 소스를 리소스라고 보면 된다. 그런데 우리가 웹에서 보는 이 '리소스'들은 어디에서 오는 것인가? 그 리소스들의 주소를 알려주는 것이 URL이다. HTTP 간단하게 HTTP를 짚고 넘어가자. HTTP란 HyperText Transfer Protocol의 약어로, 인터넷 상에서 데이터를 주고 받기 위한 프로토콜의 일종이다. 프로토콜이란 규약이라는 뜻인데, 인터넷 통신을 하기 위해서는 정해진 형식이 있어야 하고, 널리..

The Bundler 번들러란 번들러란 웹개발자가 하위 툴 그룹을 관리하는 데 도움을 주는 도구. 플러그인을 사용하여 하위 툴을 관리하는 meta-tool이라고 생각할 수 있다. 번들러가 필요한 이유는 자바스크립트 모듈의 특성때문이다. 원래 브라우저에서는 모듈을 지원하지 않는다. (2017년부터 브라우저에서도 Import를 사용할 수 있지만 단순히 다른 경로의 자바스크립트를 불러오는 기능만 한다) 흔히 import, export 구문으로 모듈 시스템을 활용하는 것은 브라우저가 아닌 자바스크립트 런타임 Node.js 위에서 가능한 일이다. 이러한 기능을 브라우저에서도 사용하기 위해서는 번들러를 사용해야 하는데, 번들러는 이 모듈들을 하나의 파일로 묶어(bundle) 브라우저에서 돌아가도록 한다. 예를 들어..