Babel 이란

✅ Babel이란?

Babel은 JavaScript 컴파일러로, 최신 JavaScript 문법을 구형 브라우저나 환경에서도 사용할 수 있도록 구버전 JavaScript 코드로 변환해 주는 도구입니다.

---

🔧 왜 Babel이 필요한가?

문제:

• 최신 JavaScript(예: ES6+, ES2020 등)는 오래된 브라우저나 환경에서 지원되지 않음
• 예를 들어, async/await, let, const, class, import/export, optional chaining 같은 문법은 구형 브라우저에서 동작하지 않음

해결:

• **Babel이 이 문법들을 구버전 코드로 변환(transpile)**해서 브라우저 호환성 문제를 해결해 줌

---

📦 Babel 주요 기능

기능	설명
코드 트랜스파일	최신 JS → ES5 스타일로 변환
플러그인 시스템	다양한 문법, 기능을 플러그인으로 지원
프리셋(preset)	특정 환경(예: @babel/preset-env, @babel/preset-react)에 맞는 설정 모음
소스맵 생성	디버깅 시 원본 코드와의 매핑 제공

 

---

🛠️ Babel 구성 요소

• babel-cli: 터미널에서 Babel 명령어를 실행할 수 있게 해주는 도구
• @babel/core: Babel의 핵심 라이브러리
• @babel/preset-env: 대상 브라우저에 맞게 필요한 변환만 적용
• babel-loader: Webpack과 연동해 Babel을 적용할 수 있도록 해줌

 

🌐 Babel은 어디서 사용되나?

• React, Vue 같은 프론트엔드 프레임워크
• Webpack, Parcel과 함께 빌드 도구로
• Node.js 서버 개발에서도 최신 문법을 쓰기 위해 사용 가능