React CRA 프로젝트 빌드(Webpack, Babel)

React의 Create React App(CRA)는 빠르게 프로젝트를 시작할 수 있도록 도와주는 기능입니다.

CRA로 만든 프로젝트에서 프로덕션 환경에 배포할 준비가 되면 npm run build 명령어를 통해서 최적화된 정적 파일을 생성합니다.

빌드 과정에서 핵심적인 역할을 하는 도구가 Webpack과 Babel입니다.

npm run build 동작 과정과 Webpack과 Babel에 대해서 공부한 내용을 정리했습니다.

맞지 않는 내용이나 추가적인 고견이 있으시면 댓글을 달아주시면 감사하겠습니다.

npm run build 동작 과정

1. 환경 설정

빌드 과정이 시작되면 애플리케이션의 환경 설정이 production 모드로 전환됩니다.
NODE_ENV=production이 설정되면, React와 관련된 개발 전용 코드가 제거되고, 최적화 설정이 적용됩니다.

2. Webpack 설정 로드

React 애플리케이션 빌드에는 Webpack이 주로 사용되며, 번들링에 필요한 각종 설정 파일과 플러그인을 로드합니다.
Webpack은 src/index.js 파일을 진입점으로 삼아 애플리케이션의 모듈과 모든 의존성을 분석하여 번들링을 진행합니다.

3. 모듈 번들링

Webpack이 애플리케이션의 모든 파일을 순회하면서 의존성 트리를 생성합니다.
JavaScript, CSS, 이미지 파일 등 다양한 파일 형식을 로더(Loader)를 통해 번들에 포함시킵니다.

4. 트랜스파일링 및 폴리필 추가 (Babel)

Babel은 최신 JavaScript(ES6+), JSX 문법을 구형 브라우저에서도 작동할 수 있는 호환 코드로 변환합니다.
필요한 경우 폴리필을 추가하여, 브라우저 호환성을 강화합니다.

5. 최적화 과정

코드 압축(Uglification): 읽기 쉬운 코드가 압축되고 난독화되어 파일 크기를 줄입니다.
Tree Shaking: 사용하지 않는 코드를 제거하여 최적화합니다.
코드 스플리팅(Code Splitting): Webpack이 필요한 청크로 코드를 분리하여 페이지 로딩 속도를 개선합니다.
캐싱을 위한 해시 추가: 빌드 결과물에 해시를 추가해, 캐싱 관리를 원활하게 합니다.

6. 정적 파일 생성

최적화가 완료되면, 최종 파일들이 정적 파일 형태로 build 폴더에 생성됩니다.
이 폴더에는 index.html, JavaScript 번들 파일, CSS 파일, 이미지 파일 등이 포함됩니다.

7. 빌드 결과물 배포

build 폴더에 생성된 파일들은 최종 배포를 위한 정적 파일로, 웹 서버에 업로드되어 실제 사용자가 접근할 수 있도록 배포됩니다.

빌드 생성 파일 구조

npm run build 를 실행하면 다음과 같은 구조의 파일이 생성됩니다.

/build
  ├── index.html              # 엔트리 포인트
  ├── static
  │   ├── css                 # 번들링된 CSS 파일
  │   ├── js                  # 번들링된 JavaScript 파일
  │   └── media               # 이미지, 폰트 등 정적 리소스
  └── asset-manifest.json     # 파일 맵핑 정보

index.html : 최종 HTML 파일로, JS 및 CSS 번들 파일이 링크됩니다.
static/ : 최적화된 CSS, JS, 이미지 파일이 저장되는 디렉터리입니다.
asset-mainfest.json : 번들된 파일과 원본 파일의 매핑 정보를 담고 있어, 캐싱 및 배포 시 사용됩니다.

Webpack의 역할

Webpack은 모듈 번들러로, 프로젝트에 포함된 모든 자원을 하나의 번들 파일 또는 여러 개의 분리된 파일로 묶습니다.

Webpack 수행하는 작업은 하단과 같습니다.

1. 모듈 번들링

React 컴포넌트, 스타일(CSS), 이미지 등 모든 파일을 의존성 그래프로 분석하고 번들링 합니다.
코드 스플리팅: 필요할 경우 번들을 분리하여 초기 로딩 속도를 개선합니다.

2. 최적화

트리 쉐이킹(Tree Shaking): 사용되지 않는 코드를 제거하여 번들 크기를 줄입니다.
압축(Minification): JavaScript와 CSS 파일을 압축해 파일 크기를 최소화합니다.

3. 파일 출력

최적화된 결과물을 build/static/ 폴더에 저장합니다.

Babel의 역할

CRA의 빌드 과정에서 Babel은 최신 JavaScript 문법을 브라우저 호환성을 위해 변환합니다.

특히, React 프로젝트에서는 JSX(JavaScript XML)를 일반 JavaScript로 컴파일하는 게 중요합니다.

Babel이 수행하는 작업은 하단과 같습니다.

1. JSX 변환

JSX 문법을 일반적인(PURE) JavaScript로 변환합니다.

2. ES6+ 문법 변환

화살표 함수, 클래스, 비구조화 할당 등 최신 문법을 지원하지 않는 브라우저에서도 사용할 수 있도록 변환합니다.

3. 폴리필 추가

브라우저에서 지원되지 않는 기능(예: Promise, Array.includes)은 Babel 단독으로 추가되지 않습니다. core-js와 같은 별도 폴리필 라이브러리를 Babel 설정에 통합하여 사용할 수 있습니다.

Webpack과 Babel의 협력

Webpack과 Babel은 React 애플리케이션의 빌드 과정에서 서로 다른 역할을 수행하며 긴밀히 협력합니다.

Webpack이 모든 파일을 읽어 들이고 적절한 로더(예: babel-loader)를 통해 JavaScript를 Babel에 전달합니다.
Babel은 JavaScript 코드를 변환하여 브라우저 호환성을 보장합니다.
Webpack은 변환된 결과물과 기타 자원을 결합해 최종 번들 파일을 생성합니다.

정리

React CRA의 빌드 과정은 Webpack과 Babel의 유기적인 협력으로 이루어집니다. Webpack은 프로젝트의 모든 자원을 관리하고 최적화된 번들을 생성하며, Babel은 최신 JavaScript 문법과 JSX를 브라우저 호환성 있는 코드로 변환합니다. 이 과정을 통해 개발자는 번거로운 설정 없이도 현대적인 JavaScript와 React의 이점을 활용할 수 있습니다.

감사합니다.

턱걸이를 좋아하는 코덕