Babel은 **최신 JavaScript(또는 JSX/TS)**를 구형 브라우저/런타임이 이해하는 코드로 변환하는 트랜스파일러입니다.

🔄 동작

1. Parse — AST 생성
2. Transform — plugin이 AST 수정
3. Generate — 코드 출력

• plugin 묶음 (@babel/preset-env, @babel/preset-react, @babel/preset-typescript)
• 개별 변환 (decorators, optional chaining 등)

⚙️ preset-env

• target browsers (browserslist)에 맞춰 필요한 syntax만 변환
• @babel/plugin-transform-runtime — helper 중복 제거, polyfill 분리

🩹 Polyfill

• ??, ?. → 구문 변환

• Promise, Array.prototype.at → core-js 등

• modern: 필요한 polyfill만 import (useBuiltIns: 'usage')

• Next.js, CRA — Babel 설정 내장 (.babelrc 확장)

• TypeScript: Babel은 타입 제거만, type check는 tsc

• Babel 대체 (Next.js default compiler SWC)

🔗 참고 자료

• Babel Docs — Babel 공식 문서 홈이다.
• Usage — CLI와 설정으로 코드를 변환하는 방법을 설명한다.
• Presets — @babel/preset-env 등 preset 구성을 설명한다.
• Config Files — .babelrc, babel.config 형식을 설명한다.