2. 바벨(Babel)

박은서

Jan 12, 2026

Contents

1. 바벨(Babel)1️⃣ Babel 이란?2️⃣ Babel의 필요성 3️⃣ Babel이 하는 일 4️⃣ 사용 방법 5️⃣ Babel 구성 요소 6️⃣ 필기 정리

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️⃣ 필기 정리

Contents

1. 바벨(Babel)1️⃣ Babel 이란?2️⃣ Babel의 필요성 3️⃣ Babel이 하는 일 4️⃣ 사용 방법 5️⃣ Babel 구성 요소 6️⃣ 필기 정리

Java Script

2. 바벨(Babel)

박은서

Jan 12, 2026

Contents

1. 바벨(Babel)1️⃣ Babel 이란?2️⃣ Babel의 필요성 3️⃣ Babel이 하는 일 4️⃣ 사용 방법 5️⃣ Babel 구성 요소 6️⃣ 필기 정리

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️⃣ 필기 정리

Contents

1. 바벨(Babel)1️⃣ Babel 이란?2️⃣ Babel의 필요성 3️⃣ Babel이 하는 일 4️⃣ 사용 방법 5️⃣ Babel 구성 요소 6️⃣ 필기 정리