[Bundler] 프론트엔드에서 모듈 번들러(Module Bundler)

📌 모듈 번들러는 왜 등장했을까?

(1) 모듈은 무엇인가?

모듈은 어플리케이션을 구성하는 개벌적 요소로 재사용 가능한 코드 조각을 이야기 한다.
일반적으로 모듈은 "💾 파일단위"로 분리를 한다. 이때, 모듈 성립에 중요한 요건은 "💾  파일스코프"를 가질 수 있어야 한다는 점 이다. 파일 스코프를 가지는 모듈의 모든 자산은 "💰Private" 이며 캡슐화되어 다른 모듈에서 접근 할 수 없도록 되어있는 것이다. 

하지만 기본적으로 모듈은 "재사용 가능"해야하므로 이를 선택적으로 "📡Public" 하게 오픈할 수 있도록 되어있다. 
그것이 바로 "📦Export" 로 표현한다. 또, 공개한 자산 중 이를 일부/전체를 선택하여 자신의 스코프로
불러들여 사용하는 것을 "📜Import"라 표현한다.

 

(2) 모듈을 사용했을 때의 장점

- 코드의 단위를 명확하게 분리하여 애플리케이션을 구성할 수 있다.

- 재사용성이 좋아지므로 개발효율성과 유지보수성을 높이는데 도움을 준다.

 

(3) 자바스크립트 진영에서 모듈이 태어나게된 역사는?

처음 자바스크립트는 웹페이지의 보조적 성격으로 만들어진 언어이기 때문에 모듈 시스템을 태초에 지원하지 않았다.
개인적으로 파일을 나누어 <script /> 태그로 나눈다고 해도 독립적인 스코프가 아니라 모든 파일이 한 곳에 있는 것과 같이 동작하므로 스코프 오염이 일어나기 쉽다. 하지만 애초에 제한적인 성격으로 태어났기에 문제가 도드라지지 않았지만,
자바스크립트라는 언어 자체를 브라우저 환경 외에서 사용을 하려고 하니, 문제가 제기되어 이를 해결하기 위한 움직임이 시작된 것이다. 

결국 이를 해결하기 위해 "CommonJS"와 "AMD"가 제안되었는데 Node.js 진영에서는 "CommonJS"를 채택했다.
클라이언트 사이드에서의 자바스크립트 모듈은 "ESM"을 채택하였다.

// ESM
import A from "react";
export { A };
export default A;

// CommonJS
module.export = A;
const A = require("express");

 

(4) 번들러는 무엇인가?

번들러는 모듈 코드를 하나의 파일 혹은 여러개의 파일로 만들어주는 도구로 모듈화된 코드를 브라우저에서 잘 동작할 수 있도록 영어 단어 뜻 그대로의 "묶음"을 만들어주는 도구라 할 수 있다. 

 

(5) 왜 모듈 번들러를 사용할까?

결국 "모듈 번들러"를 사용하는 궁극적인 이유는 브라우저에서 요구되는 기능이 많아져 더욱 좋은 경험을 사용자에게 제공하기 위해서이다. 단순하게 모듈번들러를 사용한다고 해서 사용자 경험이 개선되는 것은 아니지만,
"더욱 빠르게 서비스를 제공"하는 목적에서 이러한 모듈 번들러를 사용하게 되면 좀 더 경량화 된 서비스, 최적화된 컨텐츠를 사용자에게 제공할 수 있기 때문이다. 

 

- 모든 브라우저에 동일하게 컨텐츠를 제공하기 위해서 사용한다. (바벨 등으로 트렌스파일링 제공)

- 코드의 종속성 관리에 도움을 준다.

- 종속성, 순서, 이미지, CSS 에셋을 로드하는데 도움을 준다.

- 코드 스플리팅, 트리쉐이킹 등을 통해 경량화된 파일을 유저가 다운로드 받을 수 있도록 한다.

 

---

📌 모듈번들러는 한가지가 아니다!

대격변의 시대가 있었던만큼, 모듈번들러의 종류는 다양하지만 많이 사용하는 것을 꼽아보자면 아래와 같다.

비교적 Vite, Turbopack 은 최근에 들어 각광을 받고 열심히 사용되고 있는 모듈 번들러 종류라 할 수 있다.

1. Webpack : 코드의 통합
2. Rollup : 코드의 확장성
3. Esbulid : 자바스크립트 언어 한계 극복
4. Vite : Esbulid + Rollup의 확장판으로 성능과 번들 유연성을 모두 가지기 위한 통합판
5. Turbopack : Rust로 작성된 Vite의 대항마이자 Webpack의 후속자(?!)

 

- 참고로 Turbopack과 Turborepo는 다른 것이므로 이 점을 헷갈리지 않도록 주의하자. (같은 회사에서 나온데다 이름까지 비슷해서 역할이 헷갈릴 우려가 있다.)

- Turborepo는 모노레포를 지원하기 위한 도구이다.

 

위의 내용을 바탕으로 직접 구성해보았던 웹팩부터 시작하여 차례로 각 장단점을 써보려고 한다.

 

 

출처

- 자바스크립트 딥다이브 

- TOAST UI :  https://ui.toast.com/fe-guide/ko_BUNDLER

번들러

- 요즘 IT :  https://yozm.wishket.com/magazine/detail/1261/