[javascript] 트랜스파일러

학습자료 : https://youtu.be/s-1BTCSAV84?si=qHl70dQiqpYWSR-F

트랜스파일러란?

• 프로그래밍 언어 코드를 다른 언어 또는 문법으로 변환하는 도구.
• Babel, SWC, esbuild 등이 해당.
• React JSX, 타입스크립트로 작성된 코드를 브라우저에서 실행 가능하도록 js로 변경해줌.

컴파일러와 트랜스파일러의 차이점?

• 컴파일러
  • 프로그래밍 언어 → 기계어/바이트 코드 변환.
  • 실행 가능한 프로그램 생성 목적.
• 트랜스파일러
  • 프로그래밍 언어 → 다른 언어/구형 문법 변환.
  • 다양한 환경 지원, 최신 문법 사용 목적.
• ES6 화살표 함수 (=>)를 구형 브라우저 지원을 위해 function 키워드로 변환.

트랜스파일러와 폴리필의 차이점?

• 실행시점
  • 트랜스파일러 : 빌드 타임
  • 폴리필 : 런타임
• 역할
  • 트랜스파일러 : 문법 변환
  • 폴리필 : API 지원 (기능 추가 / 보완)
• 즉 트랜스파일러는 최신 문법 혹은 미지원 문법 → 구형 / 호환 문법으로 변환. (TS -> JS)
• 폴리필: ES6를 미지원하는 브라우저에서 Promise 사용시 유사한 기능을 하는 호환 함수 동작으로 변경

React 프로젝트에서 트랜스파일러를 사용하는 이유는?

• 브라우저는 표준 자바스크립트만 실행 가능.
• JSX 문법, 타입스크립트는 표준 자바스크립트가 아님.
• 빌드 시 JSX → 표준 JavaScript, TypeScript → 표준 JavaScript 변환 필요.

트랜스파일러가 없다면?

• 타입스크립트 개발 불가 → 개발 편의성, 안정성 저하.
• JSX 사용 불가 → 컴포넌트 가독성 저하등의 문제