트랜스파일링

소스 코드를 같은 레벨의 다른 언어나 구버전으로 변환하는 것입니다.

컴파일 vs 트랜스파일

컴파일
→ 고수준 언어 → 저수준 언어로 변환
Java → 바이트코드
C    → 기계어

트랜스파일
→ 같은 레벨의 언어로 변환
TypeScript  → JavaScript
ES6+        → ES5
JSX         → JavaScript

대표적인 트랜스파일링

1. Babel - 최신 JS → 구버전 JS

// 입력 (ES6+ 최신 문법)
const greet = (name) => `Hello, ${name}!`;

// 출력 (ES5 구버전 - 구형 브라우저 호환)
var greet = function(name) {
    return 'Hello, ' + name + '!';
};

2. TypeScript → JavaScript

// 입력 (TypeScript)
interface User {
    name: string;
    age: number;
}

const getUser = (user: User): string => {
    return user.name;
};

// 출력 (JavaScript)
const getUser = (user) => {
    return user.name;
};
// → 타입 정보 전부 제거

3. JSX → JavaScript

// 입력 (JSX)
const Button = () => (
    <button className="btn">클릭</button>
);

// 출력 (JavaScript)
const Button = () => React.createElement(
    'button',
    { className: 'btn' },
    '클릭'
);

왜 필요한가?

브라우저마다 지원하는 JS 버전이 다름

최신 Chrome  : ES2023 지원 O
구형 IE11    : ES5만 지원 X

개발자는 최신 문법으로 편하게 개발
         ↓ 트랜스파일
모든 브라우저에서 동작하는 코드

번들러와의 관계

번들러 (Webpack, Vite)
└── 트랜스파일러를 플러그인으로 연동
    ├── Babel    (JS 변환)
    ├── tsc      (TS 변환)
    └── esbuild  (JS/TS 변환, 매우 빠름)

번들링 과정에서 트랜스파일링이 함께 실행됨

트랜스파일링은 "개발 편의성과 브라우저 호환성을 동시에 챙기기 위한 변환 과정" 입니다. 개발자는 최신 문법으로 편하게 작성하고, 트랜스파일러가 호환성을 알아서 처리합니다.