트랜스파일러란?
트랜스파일러는 소스 코드를 분석하여 다른 형태의 소스 코드로 변환하는 도구를 뜻합니다. 중요한 부분은 주로 비슷한 수준의 추상화나 동작을 가진 언어들 간에 코드를 변형하는 데 사용됩니다. 트랜스파일러의 사용 목적을 이해하기 위해 대표적인 트랜스파일러인 Babel의 역할을 살펴보겠습니다.
트랜스파일러와 컴파일러는 다릅니다!
컴파일러 역시 코드를 해석해 다른 코드로 변환하는 개념이지만, 고수준 언어를 저수준 언어로 변환한다는 차이점이 있습니다. 예를 들어 C 코드를 어셈블리어로, 자바스크립트를 C++로 변환하는 작업이 컴파일에 해당합니다.
Babel (바벨)
바벨은 자바스크립트 진영에서 널리 사용되는 대표적인 트랜스파일러로, 주로 자바스크립트 코드를 구형 자바스크립트 버전으로 변환하는 데 사용됩니다. 이를 통해 개발자는 최신 자바스크립트 기능을 사용하면서도 구형 브라우저에서 호환되는 코드를 작성할 수 있습니다.
예를 들어, 구형 브라우저는 ES6 문법을 이해하지 못합니다. 따라서 새롭게 추가된 화살표 함수(arrow function)는 지원하지 않습니다.
// Error
const greet = () => {
console.log('Hello, World!');
};
greet();
하지만 바벨을 사용하여 코드를 ES5 문법으로 바꿔준다면 문제 없이 실행이 가능합니다.
// Good
var greet = function() {
console.log('Hello, World!');
};
greet();
하지만 바벨의 역할은 여기서 끝이 아닙니다!
바벨은 이외에도 프리셋/플러그인 시스템과 폴리필 기능을 제공하여 개발자에게 다양한 이점을 줍니다.
프리셋/플러그인 시스템
ES6 문법을 ES5로 변환할 수 있는 이유는 바벨의 프리셋/플러그인 시스템 덕분입니다. 바벨 사용 시 @babel/core와 함께 프리셋 또는 플러그인을 설치하여 다음과 같이 설정할 수 있습니다.
module.exports = {
presets: [
'@babel/preset-env', // 최신 JavaScript를 구버전으로 변환
'@babel/preset-react', // JSX와 React 변환
'@babel/preset-typescript' // TypeScript 코드 변환
],
plugins: [
'@babel/plugin-transform-react-jsx', // JSX 변환
'@babel/plugin-proposal-class-properties' // 클래스 속성 문법 변환
]
};폴리필
폴리필은 ‘솜을 채워 넣는다’는 의미에서 유래된 용어로, 특정 기능이 구형 브라우저에 존재하지 않을 때 해당 기능을 구현하여 채워 넣는 역할을 합니다. 그럼 이런 기능은 왜 필요할까요?
예를 들어, 화살표 함수는 ES6에 추가된 기능이지만, function으로 다시 선언하면 ES5에서도 사용할 수 있습니다.
그러나 ES5에 존재하지 않는 기능(예: async/await)은 ES5 문법을 활용하여 기능을 구현해야 합니다.
즉 이를 대신할 코드를 삽입해 주는 것이 폴리필이 필요한 이유 입니다.
Babel vs SWC
이제 바벨과 더불어 최근 주목받고 있는 SWC를 비교해 보겠습니다.
SWC (Speedy Web Comiler)
SWC는 성능을 극대화하도록 설계된 컴파일러로, Rust 언어로 작성되었습니다. 바벨은 싱글 쓰레드인 반면 SWC는 병렬 처리가 가능하고
메모리 관리가 탁월하여 큰 장점을 지닙니다.
이러한 구조 덕분에 SWC는 코드 변환뿐 아니라 대규모 프로젝트에서 빌드 성능을 높이는 데 중요한 역할을 합니다. 특히, SWC는 자바스크립트, TypeScript, JSX 등을 빠르게 변환할 수 있어 최근 많은 개발자가 Babel을 대체해 사용하는 추세입니다.
| 항목 | Babel | SWC |
|---|---|---|
| 언어 | JavaScript | Rust |
| 속도 | 느림 (JavaScript로 작성되어 동적 언어 특성) | 빠름 (Rust로 작성되어 컴파일된 네이티브 코드로 동작) |
| 플러그인/기능 확장성 | 매우 유연하고 많은 플러그인과 옵션 제공 | 기능이 제한적이지만, 일부 플러그인 및 기능 확장이 가능 |
| 병렬 처리 | 기본적으로 병렬 처리 지원 안 함 (이벤트 루프 기반 싱글스레드) | 병렬 처리 지원 (멀티코어 CPU에서 성능 향상) |
| 호환성 | 매우 높음 (오랜 시간 동안 다양한 환경에서 안정성 확보) | 일부 호환성 문제 발생 가능 (특히 구형 브라우저나 특정 JavaScript 기능) |
| 타입스크립트 지원 | 지원 (별도 @babel/preset-typescript 필요) | 기본적으로 TypeScript 지원 (별도 설정 필요 없음) |
| 용도 | 다양한 기능을 지원하며, 복잡한 프로젝트에 적합 | 빠른 빌드 속도가 필요한 프로젝트에 적합 (성능 우선) |
| 메모리 관리 | 상대적으로 메모리 사용이 많을 수 있음 | 메모리 관리가 효율적이며, 성능 최적화가 잘 되어 있음 |
| 출력 코드 최적화 | 상대적으로 최적화가 덜함 (그러나 플러그인으로 일부 개선 가능) | 코드 최적화에 강점, 더 작은 출력 코드 생성 가능 |
왜 SWC는 트랜스파일러가 아니라 컴파일러인가?
SWC가 컴파일러로 불리는 이유는 단순히 코드 문법을 변환하는 데서 그치지 않고, 타입스크립트의 타입 정보 처리와 코드 최적화까지 수행하기 때문입니다. Rust로 구현된 SWC는 빠른 성능과 효율적 메모리 관리로 코드 크기와 실행 속도를 개선하는 컴파일러 수준의 최적화 작업을 포함합니다. 트랜스파일러가 같은 수준의 언어 간 변환에 집중하는 반면, SWC는 언어 구조와 성능을 최적화하므로 컴파일러로 분류됩니다.
마지막
바벨, SWC와 같은 트랜스파일러는 자바스크립트 진영에서 필요한 도구라고 생각됩니다.
그 이유는 브라우저는 자바스크립트 엔진을 통해 자바스크립트만 해석할 수 있으므로, TypeScript, JSX, SCSS 등 다른 문법을 지원하려면 트랜스파일러가 필요하기에 현대 웹개발에서는 반드시 필요한 도구라고 생각됩니다.
https://im-developer.tistory.com/230
https://www.daleseo.com/swc/
