시작은 가볍게 마무리는 묵직하게

필자는 팀 프로젝트에서 채팅서비스를 도입하여 온라인에서 사용자끼리 상품 거래를 할 수 있도록 클라이언트에서 공부해야 할 기술 스택을 찾고 있다가 sockJS를 알게 되었다. 그리고 다음과 같은 이유로 sockJS를 프로젝트에서 사용하기로 하였다. sockJS websocket과 비슷한 기능을 제공하는 브라우저 javascript 라이브러리다. 그렇다면 그냥 websocket에서 제공하는 기능을 사용하면 되는데 굳이 sockJS를 도입하기로 결심을 한 것일까? 직접 sockJS의 깃헙 주소로 들어간 결과 해당 라이브러리 summary 부분에서 장점을 친절하게 설명하고 있었다. 브라우저와 웹 서버 사이에서 짧은 지연시간, 그리고 크로스 브라우징을 지원하는 API라는 것이다. 이것을 통해 필자가 애용하는 크롬..

웹팩을 실행하여 여러 모듈을 하나의 번들링 파일로 만들 때 자바스크립트에서 에러가 발생하면 브라우저의 콘솔에는 번들링된 하나의 파일 첫째줄에서 에러가 떴다고 알려주기 때문에 어떤 모듈의 몇 번째 줄에서 에러가 떴는지 정확히 알기 쉽지 않다. 쉽게 에러를 트래킹하기 위해 웹팩에서는 source map이라는 모듈을 사용한다. 이것은 에러가 발생하거나 디버깅할 때 번들링하기 전의 파일인 원래 소스 코드로 맵핑해주는 기능을 제공한다. 해당 기능은 다양한 옵션이 있으며 개발모드와 배포모드마다 옵션을 달리해야 적절한 기능을 사용할 수 있다. devtool이라는 key에 source map의 옵션을 적는데 source map의 옵션은 너무나도 많다. devtool을 설정하지 않거나 옵션을 적지 않았을 경우 빌드와 재..

번들링 파일이 포함하고 있는 모듈 시각화하기 지금까지 번들링한 파일들이 어떠한 모듈을 포함하고 있는지 시각적으로 확인한 적이 없으며 확인할 필요가 있다. 왜냐하면 중복된 라이브러리를 각 모듈이 포함하고 있으면 이것은 웹팩 성능 저하를 초래할 수 있기 때문이다. 또한 그와 동시에 번들링한 파일의 크기도 알고 싶을 수도 있다. 이러한 역할을 해주는 플러그인이 바로 webpack-bundle-analyzer이다. 이 플러그인은 웹팩을 실행하거나 npm명령을 입력하면 현재 프로젝트의 번들링 파일이 어떠한 모듈을 포함하고 있고 크기는 얼마인지 번들링 파일별로 확인할 수 있다. 이 플러그인은 다음과 같이 설치한다. npm install --save-dev webpack-bundle-analyzer 또한 설치 후 웹..

코드 압축 기본적으로 웹팩의 mode를 production으로 했을 경우 js파일만 파일이 압축된다. 하지만 서비스를 배포하는데 있어서 조금이라도 렌더링속도 개선 및 코드 난독화를 위해서는 js뿐만 아니라 css, html 등 다양한 소스 코드를 압축할 필요가 있다. css코드 압축 css의 경우 css-minimizer-webpack-plugin이라는 플러그인을 다음과 같이 설치하여 사용한다. npm install --save-dev css-minimizer-webpack-plugin 설명하기에 앞서 이제 webpack.config.js 혹은 webpack.common.js를 웹팩 설정파일이라고 바꿔 칭하겠다. 다음과 같이 웹팩 설정파일에 코드를 추가한다. // ... const CssMinimizer..

웹팩 코드 스플리팅 우선 이해하기 쉽게 싱글페이지 어플리케이션(SPA)를 예로 들고자 한다. SPA는 최초 웹사이트 페이지를 로딩할 때 특별한 설정을 하지 않은 이상 해당 웹앱의 모든 리소스를 다 불러온다. 이로 인해 웹사이트의 초기 로딩 시간이 오래 걸리며 유저가 모든 페이지를 이용하는 것도 아닌데 유저가 이용하는 페이지와 무관한 소스를 요청한다. 이것은 불필요한 로딩 시간을 기다려야 하기 때문에 사용자 경험(UX)을 나쁘게 하는 요인이 될 수 있다. 그래서 초기 로딩시간을 개선하기 위해 나온 것이 웹팩의 코드 스플리팅이다. SPA라고 해도 해당 라우터를 방문했을 때 관련된 모듈들만을 로딩하는 것이다. 코드 스플리팅을 하는 방법 중 require.ensure와 dynamic import를 사용하여 웹사..

dev-server 웹팩의 번들링 대상 파일이 변경되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩 실행 후 브라우저를 자동으로 수정된 코드를 반영하여 렌더링해준다. 지금부터 webpack의 dev-server를 데브 서버라고 하겠다. 설치방법은 npm install --save-dev webpack-dev-server 을 터미널에 입력한다. 한편 데브 서버는 일반 웹팩 빌드와 다른 점이 있다. 데브 서버를 실행하여 웹팩 빌드를 하는 경우 결과물이 파일 탐색기나 프로젝트 폴더에서 보이지 않는다. 구체적으로 말하자면 웹팩으로 빌드한 결과물은 메모리에 저장되고 파일로 생성되지 않기 때문에 눈으로 볼 수 없다는 것이다. 또한 개발 서버를 종료하면 번들링한 결과물도 사라진다. 개발 서..