🗣️ babel과 같은 트랜스파일러의 역할을 설명해주세요.
-
의도: 프론트엔드 개발 환경을 구축하는 방법에 대해 알고 있는지, CRA나 Vite 같은 스캐폴딩 도구의 도움 없이 맨땅에서부터 직접 구현한 경험이 있는지 확인하는 질문
- 스캐폴딩 도구(Scaffolding Tool) : 개발자들이 소프트웨어 애플리케이션을 더 빠르고 쉽게 구축할 수 있도록 돕는 도구이다. 일반적으로 애플리케이션의 기본 구조를 자동으로 생성해주며, 이를 통해 개발자는 반복적인 작업을 줄이고 실제 비즈니스 로직에 집중할 수 있다.
-
팁: 비슷한 개념인 폴리필에 대해서도 대답하면 좋다.
-
나의 답안
트랜스파일러는 소스 코드를 한 프로그래밍 언어에서 다른 프로그래밍 언어로 변환하는 도구입니다.
트랜스파일러는 최신 프로그래밍 언어 기능을 사용하면서도, 해당 기능을 지원하지 않는 환경에서도 실행할 수 있도록 도와주는 역할을 합니다.
예를 들어, 최신 자바스크립트(ES6) 문법을 사용하여 코딩한 후, 이를 구형 브라우저에서 사용할 수 있는 구버전 자바스크립트(ES5)로 변환합니다.트랜스파일러는 언어를 변환하는 역할도 수행하기 때문에, 특정 플랫폼이나 런타임 환경에서 실행이 가능하도록 합니다.
예를 들어, 타입스크립트로 작성한 코드를 자바스크립트로 변환하여 브라우저에서 실행할 수 있게 합니다.또한 트랜스파일러는 개발자들이 더 나은 문법과 기능을 제공하는 언어로 코딩할 수 있게 하여 생산성을 높입니다.
코드 변환 과정에서 최적화를 수행하거나 정적 분석을 하여 코드 품질을 향상시키기도 합니다. -
주어진 답안 (모범 답안)
바벨같은 트랜스파일러의 역할은 최신 자바스크립트 코드를 이전 버전의 브라우저에서도 실행될 수 있도록 코드를 변환하는 것입니다.
최근에는 시간이 지남에 따라 ECMAScript의 표준이 빠르게 발전하고 있으며, 덕분에 자바스크립트도 여러 기능들이 지속해서 추가되고 있습니다.
그런데 만약 유저의 브라우저가 이러한 자바스크립트의 신규 기능을 지원하지 않는다면 어떻게 될까요?이러한 상황을 보조하기 위해 트랜스파일러를 사용합니다.
개발자는 최신 신규 기능으로 코드를 작성하지만, 바벨같은 트랜스파일러가 보편적인 브라우저에서도 실행할 수 있는 코드로 다운그레이드하여 변환해 줍니다.또 비슷하게는 폴리필이 있을 수 있습니다.
이전에는 인터넷 익스플로러 브라우저를 지원해야 하는 경우가 있어서 폴리필을 이용해 익스플로러 브라우저 호환성을 지켜내기도 했었습니다.
제가 알기로는 ECMAScript에 새 기능을 추가하려면 이러한 폴리필 코드 또한 제공해야 한다고 알고 있습니다.
📝 개념 정리
🌟 트랜스파일러의 개념
-
소스 코드를 한 프로그래밍 언어에서 다른 프로그래밍 언어로 변환하는 도구
-
"트랜스파일러"라는 용어는 "변환하다"라는 의미의 "transform"과 "컴파일러(compiler)"의 합성어이다.
-
소스 코드의 의미나 기능을 유지하면서 다른 언어로 바꾸는 데 사용되며, 같은 수준의 추상화를 유지하는 경우가 대부분이다.
-
이는 컴파일러가 고수준 언어를 저수준 언어(기계어 등)로 변환하는 것과 구별된다.
🌟 트랜스파일러의 역할
-
언어의 최신 기능 사용
-
최신 프로그래밍 언어 기능을 사용하면서도, 해당 기능을 지원하지 않는 환경에서도 실행할 수 있도록 도와준다.
-
예를 들어, 최신 자바스크립트(ES6+) 문법을 사용하여 코딩한 후, 이를 구형 브라우저에서 사용할 수 있는 구버전 자바스크립트(ES5)로 변환한다.
-
-
언어 간 변환
-
A 언어로 작성된 코드를 B 언어로 변환하여 특정 플랫폼이나 런타임 환경에서 실행 가능하게 한다.
-
예를 들어, TypeScript로 작성된 코드를 JavaScript로 변환하여 브라우저에서 실행할 수 있게 한다.
-
-
개발 생산성 향상
-
개발자들이 더 나은 문법과 기능을 제공하는 언어로 코딩할 수 있게 하여 생산성을 높인다.
-
그런 다음, 이를 목표 환경에서 실행 가능한 언어로 변환하여 배포한다.
-
-
코드의 이식성
- 특정 언어나 프레임워크에 종속되지 않도록, 한 언어로 작성된 코드를 다른 언어로 변환하여 여러 플랫폼에서 사용할 수 있게 한다.
-
최적화 및 정적 분석
- 트랜스파일러는 코드 변환 과정에서 최적화를 수행하거나 정적 분석을 통해 코드 품질을 향상시킬 수 있다.
🌟 트랜스파일러의 예
-
Babel
-
자바스크립트 트랜스파일러
-
최신 ECMAScript(ES6 이상) 코드나 JSX 등을 구버전의 자바스크립트(ES5)로 변환한다.
-
이를 통해 최신 자바스크립트 문법을 사용하는 코드를 구형 브라우저에서도 실행할 수 있게 한다.
-
-
TypeScript Compiler (tsc)
-
TypeScript 코드를 JavaScript로 변환한다.
-
TypeScript는 정적 타입 검사를 제공하고, ES6 이상의 자바스크립트 기능을 사용할 수 있게 하지만, 브라우저는 TypeScript를 직접 실행할 수 없기 때문에 트랜스파일링이 필요하다.
-
-
CoffeeScript
-
CoffeeScript 코드를 JavaScript로 변환한다.
-
CoffeeScript는 자바스크립트의 간결한 구문을 제공하며, 이를 통해 생산성을 높일 수 있다.
-
-
Sass
-
Sass(SCSS) 코드를 CSS로 변환한다.
-
Sass는 CSS의 상위 집합으로서, 변수, 중첩 규칙, 믹스인 등 고급 기능을 제공한다.
-
-
Elm
-
Elm 언어로 작성된 코드를 JavaScript로 변환한다.
-
Elm은 함수형 언어로, 안정성과 성능을 중시한다.
-
🌟 트랜스파일러의 동작 방식
-
파싱(Parsing)
-
소스 코드를 구문 트리(Abstract Syntax Tree, AST)로 변환한다.
-
이 트리는 코드의 문법적 구조를 표현한다.
-
-
변환(Transformation)
-
구문 트리(AST)를 다른 구문 트리로 변환한다.
-
이 과정에서 원본 언어의 구문을 목표 언어의 구문으로 변환한다.
-
-
코드 생성(Code Generation)
- 변환된 구문 트리를 기반으로 목표 언어의 소스 코드를 생성한다.
🌟 트랜스파일러 사용의 장단점
-
장점
-
최신 언어 기능 사용 : 더 나은 문법과 기능을 사용할 수 있다.
-
코드 이식성 : 여러 플랫폼에서 코드를 실행할 수 있다.
-
유지보수 : 타입스크립트와 같은 트랜스파일러는 코드의 유지보수를 쉽게 만들어준다.
-
-
단점
-
빌드 시간 증가 : 추가적인 변환 과정이 필요하기 때문에 빌드 시간이 늘어날 수 있다.
-
디버깅 어려움 : 변환된 코드와 원본 코드가 다를 수 있어 디버깅이 어려울 수 있다.
-
