Babel

---

Babel의 주요개념

최신 JavaScript 문법 지원

• JavaScript는 계속해서 새로운 문법과 기능이 추가되고 있습니다.
  하지만, 모든 브라우저가 최신 JavaScript 기능을 지원하지 않기 때문에 Babel을 사용하여 최신 문법을 구형 브라우저에서도 실행할 수 있는 코드로 변환합니다.

폴리필(poltfill)

• JavaSript의 새로운 기능 중 일부는 단순한 문법 변환만으로는 사용할 수 없습니다.
• 폴로필을 사용하여 새로운 기능을 구현하는 코드를 추가합니다.
• 예를 들어 promise나 Map과 같은 기능은 Babel의 폴리필을 통해 구형 브라우저에서도 사용할 수 있게 됩니다.

Babel의 사용 예시

1. 프로젝트 생성
   먼저 새로운 Node.js 프로젝트를 생성합니다.

mkdir my-project
cd my-project
npm init -y

2. Babel 설치
   Babel을 사용하기 위해 필요한 패키지를 설치합니다.

npm install --save-dev @babel/core @babel/cli @babel/preset-env

3. Babel 설정 파일 추가
   프로젝트 루트 디렉토리에 .babelrc라는 설정 파일을 추가하고, Babel이 어떤 변환을 할지 지정합니다.

{
	"presets": ["@babel/preset-env"]
}

4. JavaScript 파일 작성
   최신 JavaScript 문법을 사용하는 파일을 작성합니다.
   (ex: src/index.js 파일을 만듭니다.)

// src/index.js
const greet = () => {
	console.log("Hello, Babel!");
}

greet();

5. Babel로 코드 변환

• Webpack : Babel을 Webpack과 함께 사용하면, 프로젝트 빌드 과정에서 자동으로 JaveScript 코드를 변환할 수 있습니다.
• ESLint : Babel을 ESLint와 함께 사용하면, 최신 문법을 사용하면서도 코드 품질을 유지할 수 있습니다.

---

요약

• Babel은 최신 JavaScript 코드를 구형 브라우저에서도 실행할 수 있도록 변환해 주는 컴파일러 입니다.
• Babel을 사용하면 최신 문법과 기능을 사용할 수 있고, 프로젝트 설정을 통해 쉽게 적용할 수 있습니다.