1. 바벨(Babel)
1️⃣ Babel 이란?
최신 자바스크립트 코드를 옛 브라우저나 오래된 환경에서도 실행되도록 변환(transpile)해 주는 도구
최신 자바스크립트를 구버전 환경에서도 동작하게 변환해 주는 도구
2️⃣ Babel의 필요성
1) 문제 상황
자바스크립트는 계속 발전하면서 ES6(ES2015)나 ES7, ES8 …처럼 새로운 문법과 기능이 나옴
⚠️ 하지만 ❌ 오래된 브라우저(특히 IE)나 ❌ 구형 Node.js는 최신 문법을 이해하지 못함
3️⃣ Babel이 하는 일
1) 최신 문법을 구버전 JS로 바꿔줌
예)
// ES6
constadd = (a, b) => a + b;⬇️ Babel로 변환
var add = function(a, b) {
return a + b;
};2) Polyfill 적용
브라우저가 지원하지 않는 기능을 추가
예:
Promise, Map, Array.from 등4️⃣ 사용 방법
보통 다음과 함께 사용됨
- Webpack
- Vite
- Rollup
- Create React App 내부에도 기본 탑재
설정 파일 예 (
.babelrc){
"presets":["@babel/preset-env"]
}5️⃣ Babel 구성 요소
구성 요소 | 역할 |
core | Babel의 핵심 변환 엔진 |
CLI | 터미널에서 Babel 실행 |
preset-env | 브라우저 환경에 맞게 자동으로 필요한 변환 적용 |
Plugins | 특정 문법을 변환하도록 추가 기능 제공 |
6️⃣ 필기 정리
Share article