본문 바로가기

Webpack4

매일 쓰는 babel-loader에 질렸다면 (ts-loader, esbuild-loader) 이 글은 모두 모여라 기술 블로그에도 업로드 되었습니다. 지금까지 Webpack을 사용한 자바스크립트 프로젝트를 진행하며 babel을 트랜스파일러로 사용해왔습니다. 웹팩의 튜토리얼 문서에서 만날 수 있는 첫 번째 트랜스파일러이자 과거와 현재를 아울러 많은 사랑을 받고 있기 때문에, 대부분의 개발자 분들께서 한 번쯤은 사용해 본 기억이 있는 프로그램입니다. 그런데 얼마 전 팀 프로젝트를 진행하며 새로운 로더를 설치해서 사용하게 되었습니다. 결론부터 이야기하면 굉장히 만족스러웠는데, 왜 다른 로더를 사용하게 되었고, 그 결과가 어떻게 작용했는지에 대해 적어보도록 하겠습니다. 그 전에 먼저 바벨에 대해 간단히 알아봅시다. 바벨이란? 바벨은 최신 버젼의 자바스크립트 문법을 이전 버전에서도 사용할 수 있는 문법으.. 2022. 10. 9.
웹 페이지 최적화하기 - 2 이전 글에서 이어집니다. 지난 포스트에서는 최적화를 왜 해야하는지 알아보고, 자바스크립트 파일의 최적화를 진행하였습니다. 크게 아래의 세 가지 방법을 적용하였습니다. 자바스크립트 파일 크기 줄이기 코드 사이의 공백 지우기, 변수 이름 줄이기 (난독화) 사용하지 않는 모듈 빼기 (트리 셰이킹) CSS 파일을 분리하여 최적화하기 우리는 자바스크립트 파일의 크기를 줄임으로서 페이지와 처음으로 상호작용 할 수 있는 속도를 앞당겼습니다. 훌륭한 일을 해냈지만, 웹 페이지의 로딩 속도는 여전히 느릴 가능성이 큽니다. 아직 큰 산이 남아있기 때문입니다. 이미지 최적화 하기 웹 사이트에서 이미지는 뗄래야 뗄 수 없는 요소입니다. 전 세계 어느 사이트를 가더라도 이미지가 포함되지 않은 사이트를 찾기는 어렵습니다. 이미지.. 2022. 9. 7.
웹 페이지 최적화하기 - 1 프로그래머들의 바이블이라고 불리는 개발 서적들에서 공통적으로 볼 수 있는 재밌는 점이 하나 있습니다. 바로 성능에 대한 견해인데요. 많은 사람들이 성능은 굉장히 중요한 요소라고 생각하고, 실제로도 아니라고 할 순 없지만 성능 개선이라고 하면 이렇게 말하는 것을 들은 적 있으실 것 같습니다. 최적화를 할 때 두 가지 규칙을 따르라. 첫 번째, 하지 마라. 두 번째, (전문가 한정) 아직 하지 마라. 물론 이 말은 최적화가 나쁘다는게 아니라 쓸데없는 코드 레벨의 최적화를 지양하라는 의미입니다. '성능이 좋은' 코드를 짜려고 가독성과 재사용성과 같은 다른 중요한 요소들을 포기하지 말고, '좋은' 코드를 짜는데 집중하라는 뜻입니다. 그러나 하지 말라면 더 하고 싶은법입니다. 이제부터 이 규율을 어기고, 함께 최.. 2022. 9. 4.
Webpack 빠르게 흝어보기 웹팩이란? 웹팩(Webpack)은 HTML, CSS, JavaScript 와 같은 코드들과 이미지, 동영상, 오디오 등 웹 페이지를 구성하는 자원들을 하나의 결과물로 묶어주는 모듈 번들러입니다. 여러 파일들이 상호작용하는 기존의 웹 환경에선 자바스크립트의 언어적 특성 때문에 발생하는 변수의 유효 범위 문제나, 개발과 배포시에 이루어지는 반복적인 작업에 대한 자동화의 필요성 등을 느끼게 되었는데요, 이러한 문제들을 해결하기 위해 AMD, Common.js, Grunt, Gulp 등과 같은 도구들을 이용해 왔습니다. 또한 좋은 사용자 경험을 위해 웹 사이트의 로딩 속도를 끌어올리려는 많은 시도가 있었는데, 그 중에서도 대표적인 것이 바로 서버에 요청하는 파일의 숫자를 가능한 줄이는 것이었습니다. 위에서 언급.. 2022. 3. 15.

티스토리툴바