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

요즘 개발자 블로그나 유튜버 개발자 채널 등을 보면 svelte를 소개하는 게시물을 적잖이 접한다. 국내에서 프론트엔드 프레임워크로 React, vue가 대중적인 인기를 끌고 있고 현재 기업의 웹 서비스도 두 프레임워크를 중심으로 도입하고 있는 곳이 많이 있는 한편 최근에는 svelte로 구현되어 있는 웹 서비스도 있으며 심지어 개발자 채용을 보면 svelte 개발자를 찾는 기업도 적잖이 보았다. 이렇게 svelte가 무서운 기세(?)로 핫해지는 이유는 뭘까 궁금해서 공식사이트에서 설명하는 svelte는 무엇인지 알아보았고 최근에는 공식 사이트 튜토리얼을 통해 svelte를 공부하고 있다. 그럼 svelte는 무엇인가? 구글로 검색하면 바로 확인할 수 있듯이 Rich Harris가 개발하였으며 Svelt..

DOM 우선 가상 DOM을 이해하기 전에 DOM의 의미를 짚고 넘어갈 필요가 있다. Document Object Model의 준말이며 HTML과 XML의 문서이자 그것들을 위한 프로그래밍 인터페이스다. 여기서 프로그래밍 인터페이스를 간략히 설명하자면 HTML이나 XML에 어떠한 속성과 엘리먼트들이 존재해야 하는지 기술만 해놓고 실제 구현은 각 구현하는 곳에서 다르게 구현할 수 있도록 약속을 정의해놓은 것이라고 보면 된다. 다시 DOM으로 돌아와서 DOM은 프로그래밍 인터페이스이기 때문에 다양한 브라우저에서 해당 인터페이스를 구현한다. 즉, 브라우저가 DOM을 읽고 그 DOM에 해당하는 것들을 만들 수 있으며 한편 DOM은 자바스크립트로 제어할 수 있기 때문에 DOM에서 정의한 문서의 구조를 수정할 수 있..

필자는 팀 프로젝트에서 채팅서비스를 도입하여 온라인에서 사용자끼리 상품 거래를 할 수 있도록 클라이언트에서 공부해야 할 기술 스택을 찾고 있다가 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..