초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC

Babel(트랜스파일러), Terser(미니파이어), SWC의 개념과 역할을 컴파일러 이론부터 설명해 초보 개발자도 이해할 수 있게 다룬다. Next.js 모노레포 도입 과정에서 빌드 시간이 5~10분 걸린 문제를 해결하기 위해 SWC를 탐구한 실전 경험이 배경이다.

핵심 포인트 - Babel의 역할: 최신 JS 문법(ES6+)을 구버전 브라우저가 이해할 수 있는 오래된 JS로 변환하는 트랜스파일러. 컴파일러의 하위 개념 — 유사한 두 언어 사이 변환 - Terser의 역할: JS 코드를 미니파이(난독화·최소화)하는 도구. 공백/주석 제거, 변수명 단축으로 번들 크기 절감 - SWC(Speedy Web Compiler): Rust로 작성된 JS/TS 컴파일러. Babel과 Terser를 모두 대체 가능. Next.js 12부터 정식 도입 - 속도 차이의 이유: Rust는 메모리 안전성 보장과 동시에 네이티브 속도. 병렬 처리 내장으로 JS 기반 Babel 대비 최대 17배(단일코어) ~ 70배(멀티코어) 빠름 - Next.js에서 SWC: Next.js 12부터 기본값. 공식 벤치마크 기준 빌드 최대 5배, HMR 최대 3배 빠름 - 실전 동기: 카카오페이지 모노레포 빌드 테스트 1회당 5~10분 소요 → SWC 도입으로 빌드 시간 단축 시도

상세 정리 - 컴파일러 개념: 한 언어로 작성된 코드를 다른 언어로 변환. 트랜스파일러는 유사 언어 간 변환(고급→고급). Babel은 최신JS→구JS 변환 - Babel 플러그인 생태계: @babel/preset-env(브라우저 타겟별 변환), @babel/preset-react(JSX 변환), @babel/preset-typescript(TS 변환) - Terser 동작: 공백/줄바꿈 제거, 주석 제거, 변수명 단축(a, b, c...), 도달 불가능 코드 제거, 상수 인라인 - SWC는 Babel과 Terser 모두를 대체: swc/core로 트랜스파일, swc-minify로 미니파이 - SWC 설정: Next.js에서는 next.config.js의 swcMinify: true로 Terser 대신 SWC 미니파이어 활성화 - 비교 벤치마크: Babel 단독 대비 SWC 17배 빠름(단일 코어), 병렬 처리 시 70배. 실제 빌드에서는 프로젝트마다 다름 - Rust 선택 이유: 가비지 컬렉터 없는 메모리 관리로 GC pause 없음, WebAssembly 컴파일 가능 - 현재 상태: SWC는 Next.js 외에도 Vite(vite-plugin-swc), Jest(jest-swc-transform) 등에서 활용

왜 읽나: Babel, Terser, SWC의 역할과 작동 원리를 컴파일러 개념부터 체계적으로 이해하고, Next.js 프로젝트에서 SWC 도입으로 빌드 속도를 크게 개선하는 방법을 파악할 수 있다.