Next.JS를 사용해 웹을 만들어가다보면, 어느 순간 Hydration 이슈를 마주치게 된다. 이번엔 그 상황이 언제, 왜 생겨나는지를 파악해보고, 이걸 피해가를 방법을 알아보자. Problem of Hydration 하이드레이션이란, 리엑트에서 서버사이드 렌더링 혹은 SSG(스태틱 사이트 제네레이션)을 실행한 HTML 결과물을 받아온 뒤, 브라우 …

구글에서 개발한 WebP는 이미지를 손실 압축하는 대신 용량을 획기적으로 줄여주는 이미지 포맷입니다. JPEG 포맷보다 압축률이 30% 정도 높다고 하지만, 제가 생각하는 최대의 장점은 PNG를 사용해야만 했던, 투명도가 있는 이미지도 압축할 수 있다는 점입니다. 다만 이런 WebP 포맷 사용의 단점은, IE와 …

리액트는 타입스크립트로 짜인 코드가 아니다. 이것은 타입스크립트와 리액트를 동시에 사용하려고 할 때, 특히 타입스크립트를 제대로 써 보고자 할 때 걸림돌로 작용한다. 리액트와 같이 타입스크립트로 짜여지지 않은 프로젝트를 위해, 타입스크립트 커뮤니티에서는 DefinitelyTyped라는 프로젝트를 운영하고 있다. 이 …

Typescript 승 자바스크립트의 타입 없는 자유로움에서 비롯된 여러 버그들을 마주치다 보면, 정적 타입이 있는 언어들이 부러워질 때가 가끔 있다. 그런 우리 자바스크립트 개발자에겐 Flow와 Typescript가 있다. 그래서 하나씩 시도해보았다. 해보지 않고는 제대로 느끼지 못하기 때문에. 참고) 아래 내용은 …

이제 아는 사람은 다 알고 쓰는 사람은 다 쓰는 그것들 Redux를 쓰기로 결정한 후 구조를 어떻게 잡을지 고민하다가, ducks pattern을 보고 이 구조를 따라가기로 했다. 이 패턴의 포인트는 string으로 선언된 Action type이 알고보면 대부분 action creator와 reducer에서만 …

이번엔 GraphQL을 처음 접한 순간부터, 토이 프로젝트(서버)를 만드는 동안 내가 겪었던 착오와 오해, 햇갈렸던 개념들을 복습해보고자 한다. GraphQL이 대체 뭔가 하는 질문에 대해서는 다른 글을 보길 바란다. GraphQL을 전혀 모르는 상태에서 이 글을 본 다면 큰 도움이 되진 않을 것 같다. Specification GraphQL은 라이브러리다? Gra …

Part 1에서는 Flux에서 Redux로 갈 때의 장점이 무엇인지, 어떤 방식으로 동작하기에 그런 장점을 얻는지에 대해 알아보았다. 이번 글은 Flux의 구조를 유지하면서도 큰 변화 없이 Redux의 장점-주로 테스트 가능성-을 얻어오기 위한 코드의 변화에 대해 서술하려고 한다. 좋다. 현재 코드의 기능을 건드 …

PostCSS에 대한 소개는 앞선 글에서 진행했으니, 이제 설정 방법을 알아보자. 설치 npm install postcss poscss-loader --save-dev 웹팩 설정 module: { rules: [ { test: /\.p?css$/, // 순수한 CSS 파일과 구분하고 싶다면 pcss를 사용해도 좋다. …

JS로 Transcompile되는 CoffeeScript나 TypeScript같이, CSS를 편하게 작성하기 위한 새로운 문법 역시 지속적으로 제시되어왔다. Sass가 있었고, less, stylus도 있다. 그중 가장 최근에 등장한 PostCSS를 알아보자. PostCSS란 무엇인가 PostCSS는 JS 플러그인을 사용하여 CSS를 변환시 …