번들러 학습 이유
프론트엔드를 처음 공부를 시작하며 프레임워크, 라이브러리, CI/CD, 번들러, 패키지 매니저 등의 처음 접해보는 단어들이 있습니다.
저의 경우, 무슨 프레임워크(Vue, Anguler, React)를 중 어떤 것을 학습하면 좋을지 비교/고민하며 자연스레 프레임워크, 라이브러리 등의 단어를 이해하게 되었습니다.(React의 경우 이해를 위해 프레임워크로 편재)
React를 채택하고 CRA(create-react-app)을 통해 프로젝트를 처음으로 생성하며 접해보았던 기억이 납니다.
그러나 번들러, 패키지매니저의 경우 정확히 어떤 역할을 하는지, 혹은 어떤 것이 좋은지에 대해 알지도 못하고 무작정 프로젝트를 진행 했었습니다.
그중 번들러에 대해 알아보려고합니다.
번들러란?
번들러는 브라우저에 사용하기 위한 자바스크립트 파일을, 종속성을 이용해 단일 파일로 묶는 도구입니다.
대표적으로 Webpack, Rollup, esbuild, Pacel, Vite 등이 있습니다.
번들러의 등장과 필요성
웹의 초창기에는 지금의 웹서비스들 처럼 규모가 크지도 않았으며, 당연히 필요한 파일수도 훨씬 적었습니다.
웹이 발전해나가며 자연스레 웹서비스들의 규모도 방대해지고, 지금은 서비스에 필요한 파일 등의 개수도 방대해졌습니다.
파일의 개수가 증가함에 따라 유지보수, 실행 등 몇가지 문제가 발생 하게 됩니다.
-
중복된 변수명으로 인한 충돌 위험성
ex) A.js 의 test 라는 변수와 B.js의 test라는 변수의 충돌 위험 -
네트워크 전송 속도 지연
사용자가 URL를 입력하면 서버로 부터 요청한 데이터를 반환 받습니다. 웹 서비스를 구성하는 파일의 양이 많다면, 사용자의 요청에 응답하는 시간도 자연스레 길어지게 됩니다.
위 같은 문제는 한 파일안에 모든 스크립트를 작성하면 일부분은 해결 되겠지만, 유지보수 측면에서는 최악의 경험을 겪게 될 것 입니다.
번들러의 효과
-
네트워크 병목 현상 해결
여러개의 파일들을 의존성을 확인하여 하나의 파일로 번들 해줍니다. 파일 최적화를 통해 네트워크 전송 지연을 개선합니다. -
모듈 단위의 코딩이 가능
이는 가독성과 유지보수를 크게 향상 시킵니다. -
어플리케이션 프로덕션 환경 최적화
ESLint나 Prettier를 사용하여 코드 포맷터를 사용 하신 경험이 있을 것 입니다. 가독성 향상을 위해 포맷터는 자동 정렬 등의 기능이 사용 됩니다. 번들러는 이러한 기능 사용할 때 생기는 공백등을 제거하며 파일을 최적화 합니다.
마치며
CRA를 이용하여 프로젝트를 진행할 땐 같이 설치 되어있던 Webpack을 뭔지도 모르고 사용 했었습니다.
초반 프로젝트 셋팅시나 개발 서버 구동에 있어 답답함을 느껴 요새는 Vite라는 번들러를 사용합니다.
Vite는 Esbuild 기반인 Go 언어 번들러로써,
javaScript 기반 번들러보다 적게는 10배 많게는 100배 빠르게 사전 번들링 합니다.
아직은 번들러들을 깊게 다뤄보지 못 했다고 생각이 듭니다.
Vite 등의 일부 번들러들은 SSR과 같은 렌더링을 지원하곤 합니다. 번들러에 대한 이해가 높아지는 시점에 번들러를 통해 Vite와 Vite SSR과 같은 렌더링에 대한 글을 다룰 예정입니다.
