Parcel 완벽 가이드 | Zero Config 번들러·HMR·자동 최적화·실전 활용

2026년 4월 7일 · 10분 읽기 · 수정 2026년 4월 7일 초급

이 글의 핵심

Parcel로 Zero Config 번들링을 구현하는 완벽 가이드입니다. 자동 변환, HMR, Code Splitting, Tree Shaking까지 실전 예제로 정리했습니다.

실무 경험 공유: 프로토타이핑 시 Parcel을 사용하면서, 설정 없이 즉시 시작해 개발 시간이 크게 단축된 경험을 공유합니다.

들어가며: “번들러 설정이 복잡해요”

실무 문제 시나리오

시나리오 1: Webpack 설정이 어려워요
수백 줄의 설정이 필요합니다. Parcel은 Zero Config입니다.

시나리오 2: 빠른 프로토타이핑이 필요해요
설정에 시간을 쓰고 싶지 않습니다. Parcel은 즉시 시작합니다.

시나리오 3: 자동 최적화가 필요해요
수동 설정이 번거롭습니다. Parcel은 자동으로 최적화합니다.

1. Parcel이란?

핵심 특징

Parcel은 Zero Config 웹 애플리케이션 번들러입니다.

주요 장점:

Zero Config: 설정 파일 불필요
빠름: Rust 기반
자동 변환: Babel, PostCSS 자동
HMR: 즉시 반영
Code Splitting: 자동

2. 설치 및 기본 사용

설치

npm install -D parcel

HTML 파일

<!-- 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 dev

3. 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]
  }
}

정리 및 체크리스트

핵심 요약

Parcel: Zero Config 번들러
빠름: Rust 기반
자동 변환: Babel, PostCSS
HMR: 즉시 반영
Code Splitting: 자동
TypeScript: 네이티브 지원

구현 체크리스트

같이 보면 좋은 글

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. 매우 낮습니다. 거의 설정이 필요 없습니다.