[React] 프론트엔드 빌드 과정: 컴파일링과 번들링 이해하기

빌드 프로세스

번들링 + 컴파일링 = "빌드(Build)" 과정

목적은 개발자가 작성한 코드를 브라우저에서 효율적으로 실행할 수 있는 형태로 변환하고 최적화하는 것

 

컴파일링과 번들링의 목적

 

• 컴파일링: 브라우저가 이해할 수 없는 코드(JSX, TS)를 JavaScript로 변환
• 번들링: 여러 파일을 하나로 합치고 최적화하여 로딩 성능 개선

 

 

웹 개발에서 번들링/컴파일이 필요한 3가지 핵심 이유

1. 브라우저는 JSX, TypeScript 같은 최신 문법을 이해하지 못함

// 브라우저가 이해 못하는 JSX
const element = <h1>Hello</h1>;

// 변환 필요
const element = React.createElement('h1', null, 'Hello');

 

2. 수많은 자바스크립트 파일을 각각 로드하면 성능이 느림

 

• 100개 파일 → 100번 네트워크 요청
• 번들링으로 1-2개 파일로 합쳐서 로딩 속도 개선
• HTTP 요청 최소화: 파일 병합으로 네트워크 최적화

3. npm 모듈들은 서로 의존관계가 복잡해서 수동으로 관리하기 어려움

• 번들러가 자동으로 의존성 파악하고 순서 맞춰서 불러옴

 

 

빌드 과정

 

• 디펜던시 분석: import/export 관계 파악
• 코드 변환: JSX → JavaScript, TypeScript → JavaScript
• 모듈 번들링: 여러 파일을 하나로 병합
• 최적화: 코드 압축, 트리 쉐이킹

---

개발 코드

                         ↓ [바벨/TypeScript]

 순수 JavaScript

             ↓ [웹팩/Vite]

번들링된 파일

             ↓ [브라우저]

실행    

---

 

 

빌드 전 후 코드

 

- 개발단계

 

• 3개의 분리된 파일로 개발 (UserProfile.jsx, Avatar.jsx, dateUtils.js)
• JSX 문법 사용
• import/export로 모듈 연결

 

// UserProfile.jsx
import React from 'react';
import { Avatar } from './components/Avatar';
import { formatDate } from './utils/dateUtils';

const UserProfile = ({ user }) => {
  return (
    <div className="profile">
      <Avatar src={user.avatarUrl} />
      <h2>{user.name}</h2>
      <p>가입일: {formatDate(user.joinDate)}</p>
    </div>
  );
};

// Avatar.jsx
export const Avatar = ({ src }) => {
  return <img className="avatar" src={src} alt="프로필 사진" />;
};

// dateUtils.js
export const formatDate = (date) => {
  return new Date(date).toLocaleDateString('ko-KR');
};

 

- 컴파일 단계

 

• JSX가 React.createElement() 호출로 변환
• 여전히 파일은 분리된 상태

 

const UserProfile = ({ user }) => {
  return React.createElement("div", { className: "profile" },
    React.createElement(Avatar, { src: user.avatarUrl }),
    React.createElement("h2", null, user.name),
    React.createElement("p", null, "가입일: ", formatDate(user.joinDate))
  );
};

 

- 번들링 단계

 

• 모든 파일을 하나의 IIFE(즉시 실행 함수)로 병합
• 의존성 관계 해결
• 최적화 및 압축

 

(() => {
  // Avatar 컴포넌트 코드
  // UserProfile 컴포넌트 코드
  // dateUtils 코드
  // 기타 필요한 모듈들
})();

 

 

이러한 과정을 통해 브라우저는 하나의 최적화된 JavaScript 파일만 받아서 실행하게 됩니다.

 

 

[참고] IIFE는 Immediately Invoked Function Expression의 약자

// IIFE 예시
(() => {
    // 여기에 있는 코드가 즉시 실행됨
    const x = 1;
    const y = 2;
    console.log(x + y);
})();

// 번들링된 결과물도 이런 형태:
(() => {
    // Avatar 코드
    const Avatar = ({src}) => { /*...*/ }
    
    // UserProfile 코드 
    const UserProfile = ({user}) => { /*...*/ }
    
    // 모든 코드가 하나의 스코프 안에 안전하게 보관됨
})();

 

통합 개발 도구

 "프론트엔드 빌드 도구" 또는 "프론트엔드 툴체인"이라고 부르는 도구에는 CRA, Vite 가 대표적이다.

 

1. Create React App (CRA)

 

• 웹팩(번들러)과 바벨(컴파일러)이 통합
• 웹팩, 바벨 설정 자동화
• 별도 설정 불필요

 

2. Vite

• 더 빠른 개발 환경
• vite.config.js로 설정
• 개발 시: ESBuild로 컴파일 (매우 빠름)
• 배포 시: Rollup으로 번들링
• 컴파일+번들링 설정을 하나의 구성으로 관리