테마
트랜스파일러와 번들러 선택 가이드
프로젝트의 유형(애플리케이션/라이브러리), 규모, 마이크로프론트엔드 요구사항에 따라 최적의 트랜스파일러-번들러 조합이 달라지며, 팀의 상황에 맞는 도구를 선택하는 것이 핵심이다.
학습 목표
- 프로젝트 유형(애플리케이션, 라이브러리, 마이크로프론트엔드)별 추천 도구 조합을 판단할 수 있다
- 마이크로프론트엔드에서 도구 선택 시 고려해야 할 핵심 기준을 설명할 수 있다
- 패키지 매니저 + 빌드 시스템 + 번들러 3단 조합을 설계할 수 있다
- 도구 선택의 트레이드오프를 이해하고 팀에 맞는 선택을 할 수 있다
1. 도구 선택의 핵심 기준
도구를 선택할 때 고려해야 할 기준은 크게 6가지이다.
| 기준 | 설명 | 중요도 |
|---|---|---|
| 프로젝트 유형 | 애플리케이션인가, 라이브러리인가 | 매우 높음 |
| 마이크로프론트엔드 요구 | Module Federation 등 런타임 통합이 필요한가 | 높음 |
| 빌드 속도 | 개발 환경의 DX(개발자 경험)에 직접 영향 | 높음 |
| 생태계와 안정성 | 플러그인 가용성, 커뮤니티 지원, 문서화 수준 | 중간 |
| 팀의 숙련도 | 기존 도구에 대한 팀의 경험과 학습 비용 | 중간 |
| 마이그레이션 비용 | 기존 프로젝트에서 새 도구로 전환하는 데 드는 비용 | 상황별 |
2. 프로젝트 유형별 추천 도구 조합
2.1 새 애플리케이션 프로젝트
| 도구 | 역할 |
|---|---|
| Vite | 개발 서버 + 프로덕션 빌드 |
| SWC (또는 esbuild) | 트랜스파일 (Vite 내장 esbuild 또는 plugin-react-swc) |
| Rollup | Vite 내부에서 프로덕션 번들링 자동 수행 |
Vite는 빠른 개발 환경과 간단한 설정으로 새 프로젝트의 기본 선택지가 되었다. React, Vue, Svelte 등 주요 프레임워크 모두 Vite 기반 시작 템플릿을 제공한다.
2.2 기존 Webpack 프로젝트
기존 Webpack 프로젝트에서는 전면 교체보다 점진적 개선이 현실적이다.
babel-loader→swc-loader교체 (트랜스파일 속도 대폭 향상)terser-webpack-plugin→esbuild-minimizer교체 (압축 속도 향상)- Webpack 5의
cache옵션 활성화 (재빌드 속도 향상)
2.3 라이브러리 개발
| 방식 | 도구 조합 | 적합한 경우 |
|---|---|---|
| Rollup 직접 사용 | Rollup + @rollup/plugin-terser | 세밀한 출력 제어 필요 |
| Vite 라이브러리 모드 | Vite (내부 Rollup) | 간단한 설정으로 빠르게 |
| esbuild 단독 | esbuild | 매우 간단한 유틸리티 패키지 |
| tsup | esbuild 래퍼 | TypeScript 라이브러리, 설정 최소화 |
2.4 마이크로프론트엔드 프로젝트
마이크로프론트엔드에서는 Module Federation이 핵심 요구사항인 경우가 많다. 현재 Module Federation을 공식 지원하는 번들러는 Webpack이 유일하다.
마이크로 애플리케이션 (런타임 통합 필요)
→ Webpack + Module Federation + swc-loader
공유 라이브러리 패키지
→ Vite 라이브러리 모드 또는 Rollup
디자인 시스템 패키지
→ Vite 라이브러리 모드 + Storybook3. 마이크로프론트엔드에서의 도구 선택 기준
마이크로프론트엔드 아키텍처에서는 일반 프로젝트와 다른 추가 기준이 필요하다.
3.1 핵심 판단 포인트
| 기준 | 고려 사항 |
|---|---|
| 런타임 통합 | Module Federation이 필요하면 Webpack 필수 |
| 빌드 타임 통합 | npm 패키지로 공유하면 번들러 자유 선택 |
| 독립 배포 | 각 마이크로앱이 독립 빌드/배포할 수 있는지 |
| 공유 의존성 | React 등 공통 라이브러리의 중복 로딩 방지 |
| 팀 자율성 | 각 팀이 도구를 독립적으로 선택할 수 있는지 |
3.2 통합 방식별 도구 선택
4. 패키지 매니저 + 빌드 시스템 + 번들러 3단 조합
모노레포 기반 마이크로프론트엔드 프로젝트에서는 세 단계의 도구가 협력한다.
4.1 추천 조합
| 구성 요소 | 추천 도구 | 선택 이유 |
|---|---|---|
| 패키지 매니저 | pnpm | Phantom Dependency 방지, 디스크 효율, 빠른 설치 |
| 빌드 시스템 | TurboRepo 또는 NX | 스마트 캐싱, 병렬 실행, 태스크 파이프라인 |
| 마이크로앱 번들러 | Webpack + SWC | Module Federation 지원, swc-loader로 속도 확보 |
| 라이브러리 번들러 | Vite 또는 Rollup | 깔끔한 출력, 빠른 개발 환경 |
4.2 실제 프로젝트 구조 예시
my-monorepo/
├── package.json # pnpm workspace 루트
├── pnpm-workspace.yaml
├── turbo.json # TurboRepo 태스크 설정
├── apps/
│ ├── host/ # 호스트 앱 (Webpack + MF)
│ │ └── webpack.config.js
│ ├── micro-app-a/ # 마이크로앱 A (Webpack + MF)
│ │ └── webpack.config.js
│ └── micro-app-b/ # 마이크로앱 B (Webpack + MF)
│ └── webpack.config.js
└── packages/
├── ui-components/ # 디자인 시스템 (Vite 라이브러리 모드)
│ └── vite.config.ts
├── shared-utils/ # 공유 유틸리티 (Rollup 또는 tsup)
│ └── rollup.config.js
└── types/ # 공유 타입 (빌드 불필요)
└── tsconfig.json5. 도구 전체 비교표
5.1 트랜스파일러 비교
| 항목 | Babel | esbuild | SWC |
|---|---|---|---|
| 구현 언어 | JavaScript | Go | Rust |
| 속도 | 기준 (1x) | ~100x | ~70x |
| 플러그인 | 매우 풍부 | 제한적 | 제한적 |
| 타입 검사 | 없음 | 없음 | 없음 |
| Browserslist | 지원 | 제한적 | 지원 |
| 안정성 | 매우 안정 | 안정 (0.x) | 안정 |
| 추천 용도 | 특수 변환 필요 시 | Vite 내부 엔진 | Webpack/Next.js 로더 |
5.2 번들러 비교
| 항목 | Webpack | Rollup | esbuild | Vite |
|---|---|---|---|---|
| 출시 | 2012 | 2015 | 2020 | 2020 |
| 설정 복잡도 | 높음 | 중간 | 낮음 | 매우 낮음 |
| Module Federation | 공식 지원 | 없음 | 없음 | 커뮤니티 플러그인 |
| HMR | 지원 | 제한적 | 미지원 | 내장 |
| Tree Shaking | 지원 | 최고 수준 | 지원 | Rollup 기반 |
| 개발 서버 | webpack-dev-server | 별도 필요 | 내장 (기본적) | 내장 (매우 빠름) |
| 코드 분할 | 완전 지원 | 지원 | 제한적 | Rollup 기반 |
| 추천 용도 | MFE, 대규모 앱 | 라이브러리 | 작은 도구 | 새 앱, 라이브러리 |
6. 도구 선택 시 주의사항
6.1 정답은 없다
모든 프로젝트에 들어맞는 단 하나의 최적 조합은 존재하지 않는다. 프로젝트의 요구사항, 팀의 경험, 기존 인프라를 종합적으로 고려해야 한다.
6.2 반드시 팀과 함께 결정한다
도구 선택은 한 사람이 결정할 사안이 아니다. 팀원 모두가 해당 도구를 사용하게 되므로, 토론과 검증을 거쳐 합의해야 한다. 특히 다음을 확인해야 한다.
- 성능이 정말 빠른지 직접 벤치마크했는가?
- 필요한 플러그인/기능이 모두 지원되는가?
- 프로덕션에서 이슈가 발생하지 않는가?
- 팀원들의 학습 비용이 감당 가능한가?
6.3 점진적 전환을 고려한다
기존 프로젝트에서 도구를 전면 교체하는 것은 위험하다. 로더를 교체하거나(babel-loader → swc-loader), 새 패키지부터 새 도구를 적용하는 등 점진적 마이그레이션 전략이 안전하다.
핵심 정리
| 개념 | 핵심 내용 |
|---|---|
| 새 애플리케이션 | Vite + SWC가 현재 가장 추천되는 조합 |
| 마이크로프론트엔드 앱 | Webpack + Module Federation + swc-loader |
| 라이브러리 | Rollup 또는 Vite 라이브러리 모드 |
| 기존 프로젝트 | babel-loader → swc-loader 교체로 점진적 개선 |
| 모노레포 조합 | pnpm + TurboRepo + (Webpack/Vite 혼용) |
| 선택 원칙 | 팀과 함께 결정, 점진적 전환, 실제 벤치마크 수행 |
다음 단계
- 다음 챕터 ../07-서버사이드-통합/01-통합-기술-발전-과정.md에서 마이크로프론트엔드의 서버 사이드 통합 기술의 발전 과정과 주요 패턴을 학습한다.