[ASAC 06] Javascript 프레임워크 동작원리(1) - Javascript Transpiler

이 글은 ASAC 06기를 수강하며 강의 자료 참고 및 추가 자료 수집을 통해 작성된 글입니다.

Compile과 Transpile

https://www.geeksforgeeks.org/difference-between-transpiler-and-compiler/

Difference Between Transpiler and Compiler - GeeksforGeeks

 

 

컴파일(Compile) 는 고수준 언어(ex. 자바)를 기계가 이해할 수 있는 저수준 언어(기계어)로 변환하는 것이다. 컴파일을 해주는 주체가 컴파일러이다.

• 컴파일 에러는 문법 에러로, 고수준 언어에서 문법에 맞지 않는 경우 컴파일이 불가능하여 발생하는 에러이다.

트랜스파일(Transpile)은 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것(고수준 언어 A -> 고수준 언어 B)이다.
같은 언어에 대해서 여러 버전이 있을 때, 어떤 언어를 다른 버전의 언어로 변환(언어 A -> 언어 A')하는 것 또한 트랜스파일이라고 할 수 있다. 예를 들어 고버전 JS 혹은 TS를 저버전 JS로 변환하는것이 트랜스파일링이라고 할 수 있다. 역시 트랜스파일을 해주는 주체가 트랜스파일러이다.

• 자바스크립트 트랜스파일러로 Babel이 있다. 버전 자동화 도구로 사용한다.

컴파일러와 트랜스파일러는 엄밀히 따지자면 다른 것이지만, 컴파일러를 포괄적인 의미로 통용해서 사용하기도 한다.

Javascript Transpiler

Babel + Polyfill

특정 버전의 자바는 특정 버전의 JVM에서 동작시킬 수 있는 반면에, 특정 버전의 자바스크립트는 다양한 ES버전(ECMAScript, 자바스크립트 버전을 명시)의 웹 브라우저에서 동작되기 때문에 자바스크립트의 버전 호환성 문제가 발생한다.

 

자바스크립트 버전이 올라감에 따라 추가되는 문법 때문에 하위 버전을 지원하는 웹 브라우저에서 상위 버전의 자바스크립트 파일을 실행시키려고 하면 동작하지 않는다.

 

다양한 버전의 웹 브라우저에서 모두 동작하게 하려면, 개발한 자바스크립트 파일이 최소 버전을 지원하도록 하면 된다.
자바스크립트는 상위 버전을 지원하는 웹 브라우저에서 하위 버전으로 작성된 코드를 실행할 수 있는 호환성을 가지도록 설계되었다.

Javascript Backward Compatibility : https://medium.com/@mateusz.kirmuc/js-compatibility-6c59a8f21975

JS compatibility

 

 

즉, 배포 전에 고버전의 JS(혹은 TS)파일을 저버전 JS로 변환하는 과정이 필요하다.

Babel은 자바스크립트의 트랜스파일러이다. Babel을 사용하면 저버전 ES 버전으로 변환이 가능하다.

하지만 일부분 트랜스파일링이 불가능한 로직들이 존재하는데(상위 버전에 추가되어 하위 버전으로 치환이 불가능한 문법), 이 경우에는 별개 구현을 통해 Polyfill로 주입이 가능하다.

 

개발자들은 최신 ES 문법을 사용하려고 하지만, 사용자의 웹 브라우저가 업데이트 되지 않아서 실행이 불가능한 간극을 Babel과 Polyfill이 메꿔주는 것이다.

jQuery와 Babel의 차이점

jQuery도 브라우저 호환성을 위해 사용하고, Babel도 브라우저 호환성을 위해 사용하기 때문에 혼동 가능성이 있다.

• jQuery = Cross-Browser 지원을 위한 라이브러리
• Babel = 자바스크립트의 버전을 변환시켜주는 트랜스파일러

Typescript Loader

자바스크립트의 동적 타이핑 허용으로 인해 IDE에서 바로 오류를 확인하기가 힘들다. 타입스크립트는 자바스크립트에 타입이라는 확장 문법을 제공하여 개발의 편의를 가져온다. 그러나 타입스크립트 코드를 자바스크립트 엔진으로 돌릴 수 없으므로, 자바스크립트 런타임에 구동되기 위해서는 자바스크립트로의 변환이 필요하다.

 

타입스크립트 로더는 타입스크립트로 작성된 TS파일을 자바스크립트 파일 JS로 변환시켜주는 트랜스파일러이다.

TS 파일을 배포하기 위해서는 다음과 같은 과정을 거치게 된다.

• TS -> Typescript Loader(Transpiler) -> JS(상위 버전) -> Babel(Transpiler) -> JS(하위 버전)

하지만 트랜스파일러를 2번이나 거쳐야하기 때문에 성능 문제가 발생할 수 있다.

(그래서 별다른 오류가 없는 경우 .ts 확장자를 .js 확장자로 바꾸고 IDE에게 책임을 맡긴다고 한다. IDE에서 초기 설정을 잘 해야 한다.)