제2편. Webpack과 Babel의 역할과 차이 + TypeScript 개요

현대 자바스크립트 개발에서는 Babel, Webpack, TypeScript를 함께 사용하는 경우가 많습니다. 이 글에서는 이들 각각의 역할과 차이, 그리고 왜 함께 사용하는지를 명확히 설명하고 TypeScript의 작동 원리를 소개합니다.

2-1. Babel은 무엇이고 왜 필요한가

Babel은 **트랜스파일러(Transpiler)**입니다.
최신 자바스크립트(ES6 이상)를 구형 브라우저가 이해할 수 있는 ES5 문법으로 변환해 줍니다.
주요 기능:
- 문법 변환 (예: let → var)
- polyfill 주입 (예: Promise, includes)
- JSX, TypeScript 등도 자바스크립트로 변환 가능

Babel 없이는 최신 문법을 쓰더라도 IE나 구형 브라우저에서는 아예 작동하지 않을 수 있습니다.

2-2. Webpack은 무엇이고 어떤 역할을 하나

Webpack은 **모듈 번들러(Module Bundler)**입니다.
여러 개의 자바스크립트, CSS, 이미지 파일 등을 하나의 번들 파일로 묶어줍니다.
주요 역할:
- 의존성 분석 (import, require)
- 정적 자산 로딩 (CSS, 이미지)
- 코드 스플리팅, 캐싱 최적화

Webpack은 코드 실행을 위한 포장(번들)이고, Babel은 코드의 변환입니다. 목적이 다릅니다.

2-3. Babel + Webpack 조합이 필요한 이유

Babel만 사용하면 파일이 변환되긴 하지만, 파일 분할·최적화는 할 수 없습니다.
Webpack만 사용하면 최신 문법을 이해하지 못해 빌드가 실패할 수 있습니다.
따라서 두 도구를 함께 사용하면:
1. Babel이 코드를 변환하고
2. Webpack이 결과물을 최적화하여 번들링

예: .jsx, .ts → Babel이 변환 → Webpack이 번들 생성

2-4. TypeScript는 왜 브라우저가 실행 못 하는가

브라우저는 TypeScript 문법을 이해하지 못합니다.
interface, type, enum, 타입 주석 등은 런타임에 존재하지 않는 문법입니다.
따라서 TypeScript를 자바스크립트로 변환(transpile) 해야 합니다.
이 과정을 Babel 또는 TypeScript 컴파일러(tsc)가 수행합니다.

2-5. TypeScript를 변환하는 3가지 방법

tsc 단독 사용
- tsconfig.json으로 구성
- .ts, .tsx 파일을 .js로 변환
- 가장 기본적이고 단순한 방식
Babel + TypeScript preset
- Babel이 .ts, .tsx를 파싱하여 JS로 변환
- @babel/preset-typescript 필요
- 타입 검사 없이 빠르게 변환 가능
Webpack + Babel + TypeScript
- 실무에서 가장 많이 사용
- 타입은 tsc --noEmit으로 따로 검사하고
- 코드 변환은 Babel, 번들링은 Webpack이 처리

요약

Babel은 문법 변환기, Webpack은 파일 번들러(유사 파일 통합)이다.
이 둘을 조합하면 최신 문법을 사용하면서도 최적화된 번들 파일을 만들 수 있다.
TypeScript는 브라우저가 직접 실행할 수 없기 때문에 반드시 자바스크립트로 변환해야 한다.

심화학습

Q1. Webpack 없이 Babel만 사용하는 것이 실무에서 문제가 될 수 있는 이유는?
Babel은 변환만 수행할 뿐, 여러 파일을 하나로 묶는 기능이 없습니다. 따라서 성능 최적화, 캐싱, 코드 분할 등 Webpack이 제공하는 기능이 빠지게 되어 실무에서는 비효율적입니다.

Q2. Babel과 TypeScript의 관계는 무엇인가? 경쟁 관계인가 보완 관계인가?
보완 관계입니다. Babel은 빠르고 유연한 코드 변환을 제공하고, TypeScript는 정적 타입 검사에 강점이 있습니다. 실무에서는 Babel로 트랜스파일하고, tsc로 타입만 검사하는 방식을 병행하기도 합니다.

Q3. TypeScript를 직접 브라우저에서 실행할 수 있는 방법은 없을까?
브라우저는 TS 문법을 인식하지 못하지만, 개발 시에는 esbuild, vite 같은 도구로 즉석 변환하여 실행하는 환경도 구성할 수 있습니다. 하지만 배포 단계에서는 반드시 JS로 변환되어야 합니다.

제2편. Webpack과 Babel의 역할과 차이 + TypeScript 개요