01 / 15
SESSION 26 · Part 5 웹 개발

빌드 도구 —
코드를 배포용으로 포장하기

번들링 · Vite · 트랜스파일 · HMR

02 / 15
🎯

이 세션에서
배우는 것

📦
번들링
수백 개의 JS/CSS 파일을 하나로 합쳐 왜 필요한지 이해
⚡
Vite
초고속 개발 서버와 프로덕션 빌드의 역할과 장점
🔄
개발 vs 프로덕션
개발 서버(HMR)와 최적화된 배포 빌드의 차이
03 / 15
📦

왜 번들링이 필요한가?

현대 웹 앱은 수백~수천 개의 파일로 이루어진다. 각 파일마다 HTTP 요청이 발생하면 너무 느리다.

✕ 번들링 없음
  • 파일 300개 = 요청 300번
  • 브라우저가 순서 맞춰 기다림
  • 페이지 로딩이 매우 느림
  • 배포 시 파일 관리 복잡
✓ 번들링 후
  • 파일 3개 = 요청 3번
  • 최소한의 HTTP 요청
  • 빠른 페이지 로딩
  • 최적화된 배포 파일
04 / 15

번들링 처리 과정

소스 파일
수백 개
→
트랜스파일
(Babel)
→
의존성 분석
& 합치기
→
Minify
압축
→
배포용
최적 파일
🔄
트랜스파일
최신 JS 문법을 구형 브라우저도 이해할 수 있게 변환 (Babel)
🗜️
Minify
공백·주석·긴 변수명 제거 → 파일 크기를 최소화
✂️
Tree Shaking
실제로 사용하지 않는 코드를 배포 파일에서 제거
05 / 15
⚡

Vite —
더 깊게 이해하기

Vite가 기존 Webpack보다 개발 서버 시작이 10~100배 빠른 이유가 있다.

1
Webpack의 방식 — 전체 번들 후 시작
개발 서버를 켜기 전 수백 개의 파일을 모두 번들링해야 했다. 프로젝트가 커질수록 시작 시간이 수십 초로 늘어난다.
2
Vite의 방식 — 브라우저 Native ESM 활용
번들링 없이 브라우저가 직접 ES Module import를 처리하도록 맡긴다. 서버는 요청받은 파일만 변환해 돌려준다.
3
사전 번들링 — node_modules만 미리
React·Lodash 같은 외부 라이브러리만 esbuild로 미리 번들. esbuild는 Go로 작성되어 Babel보다 100배 빠르다.
4
HMR — 변경 파일만 교체
파일 저장 시 전체가 아닌 바뀐 모듈만 찾아 교체. 프로젝트 크기와 무관하게 HMR 속도가 일정하다.
06 / 15
⚡

Vite — 초고속 빌드 도구

개발 중 HMR(핫 모듈 교체), 배포 시 Rollup으로 최적화.

# Vite 프로젝트 생성
npm create vite@latest my-app -- --template react

# 개발 서버 시작 (HMR 포함)
npm run dev

# 배포용 빌드 생성
npm run build
🚀
개발 서버 (dev)
브라우저 Native ESM 활용으로 즉각 시작. HMR로 저장 즉시 반영
📦
프로덕션 빌드 (build)
Rollup으로 최적화 번들 생성. Minify + Tree Shaking 적용
07 / 15
📦

빌드 —
실제로는 어떻게?

npm run build를 실행하면 Vite(Rollup) 내부에서 이런 일들이 순서대로 벌어진다.

진입점 분석
main.jsx 시작
→
의존성 그래프
import 추적
→
트랜스파일+번들
JSX→JS, 파일 합치기
→
Minify+출력
dist/ 폴더 생성

핵심: 결과물 dist/ 폴더의 JS·CSS 파일을 서버에 올리면 배포 완료. 소스 코드는 사라지지 않는다.

08 / 15
🔥

HMR — 저장하면 바로 반영

Hot Module Replacement: 페이지를 새로고침 없이 변경된 모듈만 교체.

1
코드 수정 후 저장
편집기에서 파일을 저장한다
2
변경된 모듈 감지
Vite 개발 서버가 변경된 파일을 즉시 감지
3
해당 모듈만 교체
전체 페이지 새로고침 없이 변경된 컴포넌트만 교체
4
상태 유지
입력창 내용, 스크롤 위치 등 앱 상태가 사라지지 않음
09 / 15
📱

실생활에서
이렇게 쓰여요

우리가 매일 사용하는 앱과 서비스 속에 이 개념이 녹아 있다.

⚡
Vite 기반 React 프로젝트
국내외 대부분의 신규 React 프로젝트가 Vite를 채택. npm create vite 한 줄로 즉시 시작
📧
Gmail
Webpack으로 번들된 대규모 SPA. 수천 개의 파일이 번들링을 거쳐 몇 개의 파일로 제공됨
🐌
번들링 없이는
React 앱을 번들 없이 배포하면 수백 개의 네트워크 요청 → 수 초의 로딩 지연 발생

💡 이 개념이 없다면 개발자가 파일을 직접 합치고 압축하는 수작업을 매번 반복해야 한다.

10 / 15
💡

자주 하는
오해 바로잡기

이렇게 생각하기 쉽지만, 실제로는 조금 다릅니다.

❌ 흔한 오해
  • 번들링은 선택사항이다
  • Vite = Webpack, 같은 것이다
  • npm run build를 하면 소스코드가 사라진다
✓ 실제로는
  • 운영 환경에서 번들링은 필수 — 성능과 보안 모두 이유가 있다
  • Vite는 ESM+esbuild 방식, Webpack은 CommonJS+Babel — 접근법이 다르다
  • 소스코드는 그대로, dist/ 폴더에 배포용 파일이 추가로 생성된다
11 / 15
🧳

번들링은
짐 꾸리기와 같다

여행 전 옷·책·도구를 각각 들고 다니는 대신 캐리어 하나에 담아 이동.

🧳 여행 짐 비유
짐 하나하나
=
개별 JS/CSS 파일 — 따로 들고 다니면 불편
캐리어에 담기
=
번들링 — 하나로 압축해 효율적으로
필요 없는 짐 빼기
=
Tree Shaking — 쓰지 않는 코드 제거
진공 압축 포장
=
Minify — 파일 크기 최소화
12 / 15
🤖

이걸 알면
AI와 이렇게 대화해요

이 개념을 이해하면 Claude나 ChatGPT를 훨씬 잘 활용할 수 있다.

👤
Vite 프로젝트 처음 셋업하고 싶어요.
🤖
Vite 공식 사이트에 가이드가 있습니다. 어떤 프레임워크를 사용하실 건가요?
👤
React + TypeScript + Vite 프로젝트 생성부터 첫 실행까지 단계별로 알려줘.
🤖
1) npm create vite@latest my-app -- --template react-ts 실행 → 2) cd my-app && npm install → 3) npm run dev → localhost:5173 열기. 각 단계 설명과 폴더 구조도 함께 드릴게요.
13 / 15
✅

이렇게
이해하셨나요?

✅
맞게 이해하셨어요
HMR은 파일 저장 시 페이지 새로고침 없이 변경된 모듈만 교체해 반영한다
❌
이렇게는 아니에요
빌드 도구는 코드를 자동으로 작성해주는 도구다
✅
맞게 이해하셨어요
번들링은 수많은 파일을 몇 개로 합쳐 HTTP 요청 횟수를 줄이는 과정이다
❌
이렇게는 아니에요
Vite와 Webpack은 동일한 방식으로 동작하며 성능 차이가 없다

💪 빌드 도구를 이해하면 프로젝트 설정 오류의 절반은 직접 해결할 수 있게 됩니다!

14 / 15
📌

핵심 정리

📦
번들링
여러 파일을 하나로
HTTP 요청 최소화
🔄
트랜스파일
최신 JS → 구형 브라우저
호환 문법으로 변환
🗜️
Minify
공백·주석 제거
파일 크기 최소화
⚡
Vite
초고속 개발 서버
Rollup 배포 번들
🔥
HMR
저장 즉시 반영
새로고침 불필요
✂️
Tree Shaking
미사용 코드 제거
번들 크기 최적화
15 / 15
🚀

다음 세션
Session 27 · 서버와 클라이언트

화면에 보이는 프론트엔드가 준비됐다면, 이제 데이터를 다루는 백엔드로 —
서버의 개념과 역할을 Part 6에서 시작한다.

💡 기억할 것: 빌드 도구는 캐리어 — 코드를 배포용으로 효율적으로 포장한다.

슬라이드 목록