트랜스파일러(Transpiler)
소스 코드를 동일한 수준의 추상화를 유지하면서 다른 형식의 소스 코드로 변환하는 도구이다.
주로 최신 문법을 구버전 문법으로 변환하거나, 한 프로그래밍 언어를 다른 언어로 변환하는 데 사용된다.
개발자가 최신 기능을 사용하면서도 다양한 실행 환경에서 코드를 문제없이 실행할 수 있도록 도와준다.
주요 기능 및 특징
코드 변환
- 개발자가 작성한 소스 코드나 의존성에 포함된 코드를 읽어들여 변환된 형태의 JavaScript 코드로 출력한다.
이를 통해 최신 JavasScript 문법을 구버전 JavaScript로 변환하거나, TypeScript를 JavaScript로 변환할 수 있다.
추상 구문 트리(Abstract Syntax Tree, AST) 사용
- 소스 코드를 추상 구문 트리로 파싱하여 변환 작업을 수행한다.
추상 구문 트리는 코드의 구문적 구조를 트리 형태로 표현한 것으로, 코드 변환 과정에서 매우 유용하다.
추상 구문 트리의 특성
- 코드의 구조를 표현하는 데이터 구조로, 탭이나 공백과 같은 공백 문자는 포함하지 않는다.
- 일반적으로 추상 구문 트리에는 코드 주석이 포함되지 않는다. 다만, 일부 트랜스파일러나 도구에서는 주석을 유지하기도 한다.
다양한 대상에게 적용 가능
- CSS와 같은 다른 언어의 코드도 변환할 수 있다. 예를 들어 Sass나 Less와 같은 CSS 전처리기를 사용하여 작성된 코드를 표준 CSS로 변환한다.
번들러와의 연계
- 트랜스파일러와 번들러는 협력하여 소스 코드를 최적화된 형태로 변환하고 패키징하는 데 사용된다.
두 도구는 서로 다른 역할을 수행하며, 번들러는 주로 코드의 의존성을 관리하고 파일을 결합하는 데 사용되고, 트랜스파일러는 코드를 변환하는 데 중점을 둔다.
1. Entry Point 설정: 번들러가 지정된 진입점 파일(보통 index.js 또는 main.js)을 로드한다.
2. Dependency Graph 생성:
-
Resolve 단계: 번들러는 진입점 파일에서 시작하여
import또는require구문을 분석한다. -
모듈 경로 결정: 번들러는 각 의존성 모듈의 경로를 확인하고, 해당 파일을 로드합니다. 이 과정에서 모든 모듈의 의존성을 재귀적으로 추적하여 전체 의존성 그래프를 생성한다.
3. 트랜스파일링:
- 의존성 그래프가 생성된 후, 각 모듈의 소스 코드를 트랜스파일러(Babel, TypeScript 등)를 사용하여 변환한다. 최신 JavaScript 문법이나 TypeScript, JSX 등의 코드를 호환 가능한 형태로 변환한다.
4. 번들 생성:
- 변환된 모든 모듈을 하나의 파일 또는 여러 파일로 결합합니다. 이 과정에서 최적화 작업도 수행되어 불필요한 코드가 제거되고 필요한 코드만 포함한다.
코드 최적화
- 트랜스파일러 설정을 통해 불필요한 코드가 포함되지 않도록 최적화하면 Tree Shaking의 효율성을 높일 수 있다. 하지만 잘못된 트랜스파일링 설정은 Tree Shaking을 방해할 수 있다.
💡 Tree Shaking이란?
불필요한 코드를 제거하여 최종 번들 크기를 줄이는 기술이다. 이는 ES6 모듈 시스템의 특성을 활용하여, 실제로 사용되지 않은 코드(import되었지만 사용되지 않는 코드)를 식별하고 제거한다.
- ES6 모듈 유지: 트랜스파일러가 코드를 변환할 때, ES6 모듈 시스템을 유지하도록 설정해야 한다.
예를 들어 Babel을 사용할 때는modules: false로 설정하여 ES6 모듈을 Common JS 모듈로 변환하지 않도록 한다.
그 이유는 CommonJS 모듈은 Tree Shaking이 제대로 작동하지 않기 때문이다.
{
"presets": [
["@babel/preset-env", { "modules": false }]
]
}- 불필요한 코드 제거: 트랜스파일러는 사용되지 않는 코드가 포함되지 않도록 설정해야 한다. 예를 들어 TypeScript 설정에서
removeComents: true옵션을 사용하여 주석을 제거하고, 불필요한 디버그 코드를 제외할 수 있다.
위와 같이 트랜스파일러 설정을 올바르게 하면 Tree Shaking이 더 잘 작동하여 번들 크기를 크게 줄일 수 있다. 이는 애플리케이션의 로딩 속도와 성능을 향상시키는 데 중요한 역할을 한다.
브라우저 호환성
- 트랜스파일러로 구버전 브라우저에서 최신 JavaScript 기능을 지원하지 않는 문제를 해결할 수 있다.
ex) Optional Chaining(userInfo?.name)이나 Array.prototype.at(memberList.at(-1))과 같은 최신 JavaScript 기능을 구버전 브라우저에서도 사용할 수 있도록 변환한다.
📝 정리하기
트랜스파일러는 최신 언어 기능을 구버전 환경에서도 사용할 수 있도록 변환해주는 도구로 코드 변환, 최적화, 브라우저 호환성 확보 등 다양한 목적으로 사용된다.
트랜스파일러의 올바른 설정과 사용을 통해 개발자는 최신 기술을 사용하면서도 다양한 환경에서 안정적으로 동작하는 애플리케이션을 만들 수 있다.
🙃 도움이 되었던 자료들
Compiling (and Transpiling) Explained
Babel: Javascript Compiler
