[트랜스파일러] 자바스크립트 세계의 번역가

728x90

트랜스파일러(Transpiler) 

트랜스파일러(Transpiler)는 소스 코드를 다른 언어가 아닌 같은 계열의 언어로 변환해 주는 컴파일러입니다. 주로 최신 문법의 코드를 구형 환경에서도 동작 가능하도록 변환하는 데 사용됩니다. 예를 들어, 브라우저가 아직 지원하지 않는 ES6+ 문법을 ES5 문법으로 변환하여 구형 브라우저에서도 실행할 수 있도록 도와줍니다.
이러한 작업을 통해 개발자는 최신 문법을 자유롭게 사용할 수 있고, 사용자들은 다양한 환경에서 애플리케이션을 사용할 수 있게 됩니다. 대표적인 트랜스파일러인 Babel, TypeScript, SWC, esbuild 등의 특징도 함께 정리해드리겠습니다.

 

---

1.  트랜스파일러란?

트랜스파일러(Transpiler)는 같은 계열의 프로그래밍 언어 간에 변환을 수행하는 컴파일러입니다. "Translator + Compiler"의 합성어로, 우리가 작성한 최신 문법의 소스 코드를 낮은 버전의 문법이나 다른 형식의 동일 계열 언어로 변환합니다.

 

즉, C → 어셈블리처럼 완전히 다른 언어로 바꾸는 일반적인 컴파일러와 달리,

• JavaScript 최신 버전 → JavaScript 구버전
• TypeScript → JavaScript
• JSX → JS

처럼 언어 레벨은 동일하지만 표현 방식이 다른 코드로 변환하는 것이 핵심입니다.

트랜스파일러가 필요한 이유

1. 브라우저 호환성 유지 : 최신 문법(예: async/await, class, optional chaining 등)을 구형 브라우저에서도 사용할 수 있도록 변환합니다.
2. 개발 편의성 향상 : TypeScript, JSX 등 새로운 문법이나 도구를 사용할 수 있게 합니다.
3. 성능 최적화 : 코드 번들 크기 축소, 빠른 빌드, 병렬 처리 등 빌드 퍼포먼스를 향상시킬 수 있습니다.

Transpile vs Compile vs Interpret?

구분	설명	예시
Compile	고급 언어 → 저급 언어(기계어 등)	C → Assembly
Interpret	한 줄씩 실행하며 동작	Python, JavaScript
Transpile	고급 언어 A → 고급 언어 B (또는 같은 언어의 다른 버전)	ES6 JS → ES5 JS

 

---

2.  대표적인 자바스크립트 트랜스파일러

a.  Babel (바벨)

가장 널리 사용되는 자바스크립트 트랜스파일러이며, ES6 이상의 문법을 ES5로 변환하여 구형 브라우저에서도 실행 가능하게 만들어줍니다.

 

주요 기능

• 최신 JS 문법 → 구버전 JS로 변환
• JSX → JS 코드 변환 (React 개발 필수)
• 플러그인 시스템을 통해 다양한 기능 확장 가능

사용 예

npm install --save-dev @babel/core @babel/cli @babel/preset-env

// .babelrc
{
  "presets": ["@babel/preset-env"]
}

npx babel src --out-dir dist

 

b.  TypeScript (트랜스파일러로서의 역할)

TypeScript는 자바스크립트에 정적 타입을 추가한 언어이지만, 트랜스파일러의 역할도 수행합니다. .ts 파일을 .js 파일로 변환하는 과정에서 트랜스파일링을 수행합니다.

 

주요 기능

• 타입 검사
• 최신 문법 지원 및 변환
• JSX 변환도 가능

사용 예

tsc app.ts

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react"
  }
}

c.  SWC (Speedy Web Compiler)

Rust로 작성된 고성능 트랜스파일러입니다. Babel보다 훨씬 빠르며, 최근에는 Next.js, Vite 등 많은 프레임워크가 SWC로 넘어가는 추세입니다.

 

특징

• 빠른 속도 (Rust 기반)
• Babel과 유사한 트랜스파일링 기능
• TypeScript, JSX, 최신 JS 문법 지원

사용 예

npm install --save-dev @swc/core @swc/cli

// .swcrc
{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "target": "es5"
  }
}

d.  esbuild

또 다른 초고속 트랜스파일러이자 번들러입니다. 역시 Go 언어로 작성되어 매우 빠릅니다. 트랜스파일뿐 아니라 번들링, 압축, 트리 쉐이킹까지 수행하는 올인원 빌드 도구입니다.

 

특징

• 매우 빠른 속도 (Go 기반)
• 간편한 CLI와 API
• TS, JSX 지원

사용 예

npm install --save-dev esbuild

esbuild app.tsx --bundle --outfile=out.js --target=es5

 

---

3.  트랜스파일러 선택 기준

항목	Babel	TypeScript	SWC	esbuild
속도	느림	보통	매우 빠름	매우 빠름
JSX 지원	O	O	O	O
TypeScript 지원	플러그인 필요	기본 지원	O	O
번들링 기능	X (단독 X)	X	일부	O
플러그인 생태계	매우 풍부	보통	적음	적음
최근 트렌드	사용 많음	광범위하게 사용	급부상	급부상

 

---

4.  마무리

트랜스파일러는 최신 문법을 구형 환경에서도 실행 가능하게 만드는 번역기입니다.

• Babel : 오래된 프로젝트와 호환성이 중요할 때 적합
• TypeScript : 타입 안정성과 동시에 트랜스파일 기능 필요할 때
• SWC, esbuild : 속도가 중요하거나 대규모 프로젝트에서 빠른 빌드가 필요할 때 유리

최신 프로젝트에서는 esbuild 또는 SWC를 번들러와 함께, 타입이 필요하다면 TypeScript, 복잡한 커스터마이징이 필요하다면 Babel을 고려하면 좋습니다.

함께 보면 좋은 자료

외부 사이트 :

• 공식 사이트 - Babel
• 공식 사이트 - TypeScript
• 공식 사이트 - SWC
• 공식 사이트 - esbuild

블로그 글 :

[컴파일러] 사람이 쓴 코드를 기계어로 바꾸는 번역가

[인터프리터] 한 줄씩 읽고 실행하는 언어의 실행자

[모듈 번들러] 프론트엔드 필수 도구의 개념과 대표 번들러 비교

 

---

반응형