트랜스파일러(Transpiler)
트랜스파일러에 대해 알아봅시다
정의
트랜스파일러(Transpiler)는 소스 코드를 한 프로그래밍 언어에서 다른 프로그래밍 언어로 변환하는 컴파일러(Compiler)이며, 'Transcompiler’ 또는 'source-to-source compiler'라고도 불립니다. 대표적으로 Babel, TypeScript Compiler(tsc), SWC 등이 이에 해당합니다.
앞서 컴파일러라는 용어가 많이 나왔는데 간단하게 컴파일러에 대해 이해해보도록 하겠습니다.
컴파일러(Compiler)란?
고급 프로그래밍 언어로 작성된 소스 코드를 기계어 코드로 변환하여 컴퓨터가 실행할 수 있도록 해주는 프로그램입니다. 고급 프로그래밍 언어로는 C, C++, Java, Python 등이 이에 해당합니다. 웹 브라우저에서는 주로 인터프리터와 JIT 컴파일러를 복합적으로 사용합니다.
저급 프로그래밍 언어를 기계어로 변환하는 것은 컴파일러인가요?
저급 프로그래밍 언어를 기계어로 변환하는 것도 컴파일러의 역할 중 하나이지만, 저급 프로그래밍 언어에는 어셈블리어와 같은 언어가 포함되고 이를 기계어로 변환하는 것은 주로 assembler(어셈블러)라는 용어를 사용합니다.
코드 변환 프로세스
위의 프로세스를 통해 트랜스파일러가 어떤 시점에 어떻게 동작하는지 이해해봅시다. 여기서는 TypeScript로 작성된 React 코드를 변환하는 과정을 가정합니다.
TypeScript로 작성된 코드를 TypeScript compiler(tsc)를 사용하여 JavaScript로 변환하면, 여전히 JSX 문법이 포함된 JavaScript 코드를 얻을 수 있습니다. 그런 다음, 이 JSX 문법을 포함한 코드를 Babel을 사용하여 Vanilla JavaScript로 변환하고, ES6 문법이 포함되어 있다면 프리셋과 플러그인에 따라 ES5 문법으로 변환합니다. 마지막으로, 웹 브라우저 엔진에 포함된 JIT 컴파일러가 다운로드된 JavaScript 코드를 기계어로 변환하여 브라우저 화면에 표현하게 됩니다.
웹 브라우저에서는 컴파일러와 인터프리터를 같이 사용한다고 했는데 아닌가요?
네, 맞습니다. 앞서 주로 설명한 트랜스파일러와 컴파일러만을 포함하려 했기 때문에 일부 프로세스를 생략했습니다. 실제로는, 파서를 통해 추상 구문 트리(Abstract Syntax Tree, AST)를 생성한 후, 인터프리터를 통해 바이트코드로 변환하여 즉시 실행합니다. 이후에 JIT 컴파일러는 자주 사용되는 코드를 기계어 코드로 변환하여 캐싱하고, 같은 코드가 실행될 때 빠르게 수행될 수 있도록 합니다.
트랜스파일러의 활용하기
트랜스파일러는 언어 간 호환성(기존 코드베이스를 다른 언어로 변환하여 다른 환경에서 활용 가능), 최적화(성능이 좋은 언어로 변환), 문법적 변환(예를 들어, ES6를 ES5로 변환하는 Babel), 학습 및 이해(하나의 언어로 작성된 코드를 다른 언어로 변환)에 도움을 줄 수 있습니다.
트랜스파일러 응용하기
기본적인 활용 방법인 문법 변환 혹은 언어 간 변환을 제외하고도 제시된 트랜스파일러를 응용하여 새로운 문제를 해결할 수도 있습니다. 대표적인 예시로 Toss Bank의 로깅 개선을 위한 활용을 사례로 들 수 있습니다.
Toss Bank는 Babel과 SWC를 사용하여 로깅 작업을 자동화했습니다. Clickable 요소에 data-click-log 속성을 반복적으로 추가하는 과정에서 발생할 수 있는 휴먼 에러와 가독성 문제를 해결하기 위해, 이벤트 핸들러를 갖고 있는 Clickable 요소에 자동으로 data-click-log 속성을 주입하는 플러그인을 만들었습니다. 이를 통해 Toss Bank 팀은 인위적으로 속성을 추가하는 과정에서 발생하는 오류를 줄이고, 코드의 가독성을 향상시킬 수 있었습니다. 자세한 내용은 해당 링크를 참고해주세요.