# 프론트엔드에서 컴파일러와 트랜스파일러란 무엇인가?

자바스크립트는 여러 곳(브라우저, Node.js)에서 실행되고 있습니다. 각 실행 환경에서는 이해하는 문법에 차이가 있는데요. 우리가 실행하고자하는 환경에서 이해할 수 있는 문법으로 변경이 필요합니다.

{% hint style="info" %}

## 컴파일 방식

* 정적 컴파일(Go, C)
* 인터프리터(Pyhton, JS)
* JIT(V8)
  * 현실적으로는 인터프리터도 컴파일이 있습니다.
    {% endhint %}

## 트랜스파일 vs 컴파일 vs  폴리필

{% hint style="info" %}

* 트랜스파일
  * 유사한 두 언어 사이에서 변환
  * A → B 언어로 변환하거나 최신 버전의 코드를 이전 버전의 코드로 변환(TypeScript → JavaScript, ES6+ → ES5)
  * 트랜스파일은 문법만 변환, 폴리필(새로운 메서드나 객체)은 추가로 필요할 수 있다.
* 컴파일
  * 고급 언어를 컴퓨터가 이해하는 기계어로 변역
  * vs 트랜스파일
    * 컴파일이 영어를 한국어로 번역해 주는 번역이라면, 트랜스파일은 옛 우리말을 현대 한국어로 번역
* 폴리필
  * 브라우저에서 지원하지 않는 코드를 사용가능한 코드로 변환한 코드
    {% endhint %}

## 어떤 도구?

### [Babel](https://babeljs.io/docs/)

* Javascript 컴파일러/트랜스파일러
* 최신 자바스크립트 문법 →(변환 = 컴파일/트랜스파일) 브라우저가 이해할 수 있는 코드
* 변환할 대상을 선정하고 변환식(plugin)에 따라 변경
  * browserslist(.browserslistrc, package.json, babel)를 설정하거나 @babel/preset-env를 사용해서 브라우저 목록 골라냅니다.
* 대표적인 preset
  * @babel/preset-env: 최신 ES 스펙 변환해주는 프리셋
  * @babel/preset-react: jsx와 같은 react 문법 변환해주는 프리셋
  * @babel/preset-typescript: 타입스크립트 문법을 변환해주는 프리셋

{% hint style="info" %}

* preset은 plugin 목록
* plugin은 변환식&#x20;
  {% endhint %}

### [esbuild](https://esbuild.github.io/)

* Go를 기반으로 빠른 속도와 번들링까지 가능한 트랜스파일러
* Babel(트랜스파일러), Terser(mangler, compressor) 대신해서 사용할 수 있습니다.
* JS, CSS, TS, JSX를 자체 트랜스파일할 수 있습니다.
  * TS 트랜스파일할 때 타입 에러를 알려주지는 않습니다.(tsc로 검사해야한다)
  * 커스텀한 Typescript 파서는 성능을 올려줍니다

{% hint style="info" %}

* minify: mangler + compressor
* mangler: 변수명, 함수명, 속성명 짧게 표기
* compressor: 불필요한 코드 제거, 표현 단순화
  {% endhint %}

### [SWC](https://swc.rs/)

* Rust를 기반으로 빠른 속도와 쉬운 사용을 목표로 하는 플랫폼(**S**peedy **W**eb **C**ompiler)
* 현재는 컴파일 위주로 사용, 번들링은 개발 중, minify역할도 가능
* swc-loader형태로 다른 번들러에 추가됩니다.

## Reference

* <https://esbuild.github.io/>
* <https://tech.kakaoent.com/front-end/2022/220217-learn-babel-terser-swc/>
* <https://swc.rs/>
* <https://babeljs.io/docs/>
* <https://ko.javascript.info/polyfills>
