Parcel 완벽 가이드 | Zero Config 번들러·HMR·자동 최적화·실전 활용
이 글의 핵심
Parcel은 엔트리 HTML부터 의존성 그래프를 수집해 변환·번들링하는 도구입니다. 내부 파이프라인·캐시·프로덕션 빌드에서 자주 막히는 지점을 정리합니다.
이 글의 핵심
Parcel로 Zero Config 번들링을 구현하는 완벽 가이드입니다. 자동 변환, HMR, Code Splitting, Tree Shaking까지 실전 예제로 정리했습니다.
실무 경험 공유: 프로토타이핑 시 Parcel을 사용하면서, 설정 없이 즉시 시작해 개발 시간이 크게 단축된 경험을 공유합니다.
들어가며: “번들러 설정이 복잡해요”
실무에서 마주치는 문제들
Webpack 설정이 어려워요
수백 줄의 설정이 필요합니다. Parcel은 Zero Config입니다. 빠른 프로토타이핑이 필요해요
설정에 시간을 쓰고 싶지 않습니다. Parcel은 즉시 시작합니다. 자동 최적화가 필요해요
수동 설정이 번거롭습니다. Parcel은 자동으로 최적화합니다.
1. Parcel이란?
핵심 특징
Parcel은 Zero Config 웹 애플리케이션 번들러입니다. 주요 장점
- Zero Config: 설정 파일 불필요
- 빠름: Rust 기반
- 자동 변환: Babel, PostCSS 자동
- HMR: 즉시 반영
- Code Splitting: 자동
1.1 Parcel 2 파이프라인 개요(내부 관점)
Parcel 2는 엔트리 자산(HTML/JS/…)에서 출발해 의존성 그래프를 만들으며, 각 파일에 대해 Transformer가 AST/바이너리를 다음 단계로 넘깁니다. Resolver가 node_modules·별칭·package.json exports를 해석하며, Bundler가 그래프를 청크로 묶습니다. “설정이 없다”는 것은 합리적인 기본 파이프라인이 내장돼 있다는 뜻이며, 커스터마이징은 .parcelrc로 파이프라인에 노드를 끼워 넣는 방식입니다.
캐시: 대규모 프로젝트에서 빌드 속도는 디스크 캐시 히트율에 크게 좌우됩니다. CI에서는 캐시 디렉터리를 키(lockfile+Parcel 버전)와 함께 저장소에 붙입니다.
2. 설치 및 기본 사용
설치
npm install -D parcelHTML 파일
<!-- src/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./index.tsx"></script>
</body>
</html>package.json
{
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html"
}
}실행
npm run dev3. TypeScript
// src/index.ts
const message: string = 'Hello Parcel!';
console.log(message);자동으로 TypeScript를 변환합니다. tsconfig.json만 있으면 됩니다.
4. React
npm install react react-dom
npm install -D @types/react @types/react-dom// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')!).render(<App />);// src/App.tsx
export default function App() {
return <h1>Hello Parcel + React!</h1>;
}5. CSS
기본 CSS
// src/index.tsx
import './styles.css';CSS Modules
// src/App.tsx
import styles from './App.module.css';
export default function App() {
return <h1 className={styles.title}>Hello</h1>;
}PostCSS
npm install -D postcss autoprefixer// .postcssrc
{
"plugins": {
"autoprefixer": {}
}
}6. 이미지 & Assets
// 자동으로 처리됨
import logo from './logo.png';
<img src={logo} alt="Logo" />7. 환경 변수
.env
API_URL=https://api.example.com
APP_TITLE=My App사용
const apiUrl = process.env.API_URL;
const appTitle = process.env.APP_TITLE;8. Code Splitting
Dynamic Import
// 자동으로 Code Splitting됨
button.addEventListener('click', async () => {
const module = await import('./heavy-module');
module.doSomething();
});9. 최적화
Production Build
parcel build src/index.html --no-source-maps.parcelrc
{
"extends": "@parcel/config-default",
"optimizers": {
"*.js": [@parcel/optimizer-terser]
}
}10. Plugins
npm install -D @parcel/transformer-sass// .parcelrc
{
"extends": "@parcel/config-default",
"transformers": {
"*.scss": [@parcel/transformer-sass]
}
}11. 프로덕션 빌드와 소스맵
parcel build는 미니파이·트리 쉐이킹·에셋 해시 파일명을 한 흐름에서 처리합니다. 장애 분석을 위해 소스맵을 남길지는 배포 정책과 보안(내부 경로 노출)을 함께 봅니다. 정적 호스팅(S3·Cloudflare Pages)에서는 캐시 헤더와 파일명 해시 조합으로 롱 캐시를 쓰는 경우가 많습니다.
12. 트러블슈팅
| 증상 | 점검 |
|---|---|
| HMR은 되는데 빌드만 실패 | 프로덕션에서만 쓰는 process.env.NODE_ENV 분기·동적 import 경로 |
| 동일 저장소인데 CI만 느림 | 캐시 미스·콜드 스타트·node_modules 재설치 |
| CSS 순서가 프로덕션에서만 깨짐 | import 순서·코드 스플리팅 청크 경계 — 크리티컬 CSS 분리 검토 |
| WASM/네이티브 에셋 누락 | .parcelrc에 해당 Transformer 등록 여부 |
| 브라우저 목록과 맞지 않는 폴리필 | browserslist·package.json targets |
정리 및 체크리스트
핵심 요약
- Parcel: Zero Config 번들러
- 빠름: Rust 기반
- 자동 변환: Babel, PostCSS
- HMR: 즉시 반영
- Code Splitting: 자동
- TypeScript: 네이티브 지원
구현 체크리스트
- Parcel 설치
- HTML 엔트리 생성
- TypeScript 설정
- React 통합
- CSS 처리
- 환경 변수 설정
- Code Splitting
- 프로덕션 빌드
같이 보면 좋은 글
- Vite 완벽 가이드
- Webpack 완벽 가이드
- esbuild 완벽 가이드
이 글에서 다루는 키워드
Parcel, Bundler, Build Tools, Zero Config, HMR, Frontend, TypeScript
자주 묻는 질문 (FAQ)
Q. Webpack과 비교하면 어떤가요?
A. Parcel이 훨씬 간단하고 빠릅니다. Webpack은 더 많은 제어를 제공합니다.
Q. Vite와 비교하면 어떤가요?
A. 비슷하게 빠르고 간단합니다. Vite가 더 현대적이고 생태계가 큽니다.
Q. 프로덕션에서 사용해도 되나요?
A. 네, 하지만 대규모 프로젝트는 Webpack이나 Vite가 더 적합할 수 있습니다.
Q. 학습 곡선은 어떤가요?
A. 낮습니다. 거의 설정이 필요 없습니다.