[React] Bundle

최근 CRA가 종료되어서 CRA 였던 프로젝트들을 Vite로 묶어가는 과정중에 있다. 그러다보니 Bundle이라는 부분에 대해 명확하게 알고 있어야 기존의 프로젝트 속성 그리고 다른 OS환경과의 연동관의 문제점을 발견해야했다.

번들은 React 자체 기능은 아니고, React 앱을 웹에서 실행 가능하게 묶어주는 과정이다.

💡 React에서 "번들(bundle)"이란?

여러 개의 JavaScript, CSS, 이미지 파일 등을

👉 하나(또는 몇 개)의 최종 실행 가능한 파일로 묶는 작업

예를 들어 React 앱에 다음처럼 다양한 파일이 있다면:

src/
├── App.tsx
├── List.tsx
├── styles.css
├── utils.ts
 
 

 

번들링 후에는

dist/
├── index.html
├── assets/index-12345.js
├── assets/style-aaa.css
 
 

 

 

번들링이 필요한 이유?

1. 브라우저는 모듈 시스템을 완벽히 이해 못 함
2. import/export로 나뉜 파일을 하나로 모아야 안정적 실행 가능
3. CSS, 이미지도 함께 묶어서 로딩 효율화
4. 프로덕션 환경에선 압축 + 최적화(minify, tree-shaking) 까지 해줌

💡 개발 vs 빌드(번들)

상태	설명	도구
개발 중	파일이 따로 있고 실시간 수정 가능	Vite dev 서버 등
빌드 후	하나의 번들로 압축돼서 배포용으로 최적화됨	yarn build

 

한 줄 요약

번들링은 React 앱을 브라우저에서 실행 가능하게

하나의 JS/CSS로 압축하고 최적화하는 과정