104%

서론 이 글은 SSR 프레임워크인 Next.js를 커스텀해서 성능을 향상시킨 라이브러리를 구현한 내용을 담은 글을 요약, 번역한것입니다. 이해를 돕기 위해 많은 의역이 들어갈 수 있으니 참고해주세요. 웹에서의 성능 고성능을 유지하려면 클라이언트에게 적은 양의 코드를 보내야 한다. 우리는 우리가 hydrate해야 하는(static 하지 않고 유저와 상호작용 해야 하는 리액트 컴포넌트) 컴포넌트만 클라이언트에게 보내는 방식으로 성능을 끌어올렸다. 나머지 부분은 서버에서 렌더링한 그대로 놔둔다. The Cost Of JavaScript In 2018 위 내용에서 가장 중요한것은 다음과 같다. 자바스크립트의 비용은 로드할때 뿐만아니라, 파싱하고 실행하는것까지 포함된다. 우리가 최적화 하려고 하는것은 클라이언트에..

hydration = 수화 수화란 우리 몸에 수분을 보충하는 행위를 뜻한다. 리액트에서 왜 hydration이라는 용어를 사용하는건지는 아래 내용을 살펴보고 다시 한번 생각해보자. 리액트는 DOM에 리액트 컴포넌트를 렌더링해주는 render 메소드를 제공한다. ReactDOM.render(element, container[, callback]) 컨테이너 DOM에 리액트 엘리먼트를 렌더링하는 함수이다. 이 render함수는 컨테이너의 자식으로 리액트 컴포넌트를 넣어주는데, 기존에 이미 렌더링 된 리액트 컴포넌트가 있다면 새로 렌더링 하는게 아니라 업데이트만 해준다. 그리고 렌더링이 완료되면 세번쨰 인자로 전달된 콜백이 실행되게 할 수 있다. 즉 ReactDom의 render메소드는 컴포넌트를 렌더링한 후에..

처음 웹페이지에 접속하면 브라우저는 서버로 요청을 보내 html, css, js 등의 파일을 다운로드 받고 파싱해서 화면에 보여준다. 이러한 브라우저 로딩과정은 다운로드, 파싱, 스타일, 레이아웃, 페인트, 합성 총 6단계로 나누어진다. 다운로드 유저가 브라우저에서 www.naver.com를 입력했을때, 브라우저는 naver의 서버로 html을 요청해서 응답을 받는다. 파싱 다운받은 html을 파싱한다. 파싱을 하면서 DOM Tree를 만들게 되는데, 파싱 도중에 link태그를 만나면 서버에서 CSS파일 다운로드하고 파싱해서 CSSOM Tree를 만든다. 스타일 HTML과 CSS의 파싱이 완료되면 DOM Tree와 CSSOM Tree를 합쳐서 Render Tree를 생성한다. DOM Tree에는 CSS로..

CRA에선 어떻게 이미지를 처리하는가? 10KB미만의 이미지 파일은 data URI의 형태로 변환되어 html에 포함된다. url-loader가 이미지 파일을 만나면 data URI 형태로 변경해주기 때문에 가능한것이다. 이렇게 하면 http 요청수를 줄일 수 있고, bmp, gif, jpg, jpeg, png에만 적용되고 svg는 제외된다. 물론 10KB라는 수치도 변경이 가능하다고 한다. data URI란 간단히 말하면 작은 크기의 파일을 문서내에 인라인으로 포함하기 위해서 사용된다. 아이콘을 base64로 인코딩하여 data URI형태로 문서에 인라인 하는 방식을 많이 사용한다. SVG는 왜 제외 됬는가? 이슈 내용을 살펴보면 CRA가 버전 0.8로 업데이트 되면서 url-loader를 사용하여 1..

서론 Redux Saga -> Firebase Cloud Functions -> Express -> Multer의 과정을 거쳐서 이미지 파일을 FormData에 담아서 업로드 하던 도중 request.body가 비어 있는 이슈가 발견 되었다. 단서 I have been suffering from the same problem for a few days, turns out that firebase team has put the raw body of multipart/form-data into req.body with their middleware. If you try console.log(req.body.toString()) BEFORE processing your request with multer, y..

현재나는 my-app 패키지에서 개발을 하고 있고, some-dep 패키지를 yarn add 커맨드를 통해서 설치했다고 해보자. 근데, 이 some-dep에서 버그가 발생했다. 이런 상황에서 node_modules에 있는 some-dep에 직접 들어가서 버그를 고친다음에 테스트를 하면 일시적으로 잘 되긴 할 것 이다. 근데 저 some-dep 패키지를 다시 설치하게 되면 내가 수정한부분이 삭제되기 때문에 버그를 고치고 커밋을 한 뒤, some-dep git repository에 push를 해야한다.(내 패키지가 아니라면 PR을 날려야한다.) 이런 과정들이 매우 귀찮기 때문에 우리는 다른 방법을 찾아야한다. 바로 npm link이다. Symbolic Link(심볼릭 링크, 바로가기 파일) 줄여서 Symli..

도구 없이 모노레포를 구성하려고 하면 매우 귀찮다. 서로 의존하고 있는 패키지들을 npm link로 손수 연결해줘야 하기 떄문이다.(심볼릭 링크란?) 그래서 이런 작업들을 자동화 해주는 도구들을 소개한다. yarn workspace? lerna? yarn에서는 workspace기능을 제공한다. workspace란 한국말로 '작업공간'이라는 뜻인데, 이 '작업공간'안에 들어있는 여러개의 패키지를 관리해주는 기능이라서 이런 이름이 지어진 것 같다. lerna로도 패키지 관리를 할 수 있긴 하지만 yarn에서 workspace가 나오고 난 이후부터는 패키지 관리는 workspace로 하는 것이 보편화 되어 있다. 그래서 요즘은 보통 모노레포를 구성할때 yarn의 workspace와 lerna를 같이 사용하게 ..

이전 버전에서는 리액트만으로 상태관리하기가 굉장히 힘들었다. 부모와 자식간의 상태 교환만 가능했기 때문에 프로젝트 규모가 커질 수록 상태관리가 어려워 유지보수 하기가 점점 어려워진다. 이걸 극복하기 위해서 Redux나 Mobx를 사용하는데 이런 상태관리 라이브러리들의 기반이 되는 리액트의 Context API를 살펴보자. 리액트 16.3 이후 버전부터 이 Context API가 사용하기 쉽게 개편됬다고 한다. 그래서, 지금은 단순히 전역상태 관리만 필요한 프로젝트라면 리덕스를 굳이 쓰지 않아도 괜찮은것같지만, 나중에 비동기 처리를 하게 될지도 모르기 때문에 그냥 처음부터 리덕스를 쓰는게 나은것같다.(개인적인 의견) 정적 Context 사용해보기 src/contexts/color.js 먼저 저장창고 역할을..