[WebDev][Babel] Babel 소개: 최신 자바스크립트를 모든 브라우저에서 실행하기

babel

1. Babel이란?

---

Babel은 자바스크립트 컴파일러(JavaScript Compiler) 로, 최신 ECMAScript(ES6+) 코드가 구형 브라우저에서도 정상적으로 실행되도록 변환해주는 도구다.

---

2. Babel이 필요한 이유

---

자바스크립트는 꾸준히 발전하며 새로운 문법(예: let, const, async/await, 화살표 함수 등)이 추가됨. 하지만 구형 브라우저는 최신 문법을 지원하지 않음. 이 문제를 해결하기 위해 Babel이 필요함.

Babel의 주요 역할:

✅ 최신 자바스크립트 문법을 구형 브라우저에서도 동작 가능하도록 변환
✅ JSX(React에서 사용) 및 TypeScript 코드도 변환 가능
✅ 코드 최적화 및 플러그인 확장을 통한 개발 환경 개선

---

3. Babel의 핵심 개념

---

(1) 트랜스파일링(Transpiling)

Babel은 최신 문법을 구문적으로 변환(transpile) 함. 즉, 브라우저가 이해할 수 없는 최신 코드를 이전 버전의 자바스크립트로 변환함.

💡 예제: ES6 화살표 함수 변환
Before (ES6 코드)

const greet = (name) => `Hello, ${name}!`;

 

After (Babel 변환 후 코드)

"use strict";

var greet = function(name) {
  return "Hello, " + name + "!";
};

 

이처럼 최신 문법을 구형 브라우저가 이해할 수 있는 코드로 변환함.

(2) Babel Presets (프리셋)

Babel은 특정 문법을 변환하기 위해 프리셋(preset) 을 사용함.

• @babel/preset-env: 최신 ES6+ 코드를 브라우저 지원 범위에 맞춰 변환
• @babel/preset-react: JSX 문법을 변환
• @babel/preset-typescript: TypeScript 문법을 변환

---

728x90

반응형

4. Babel 설치 및 사용법

---

(1) Babel 설치

Babel을 사용하려면 @babel/core, @babel/cli, @babel/preset-env 등을 설치해야 함.

npm init -y  # package.json 생성
npm install --save-dev @babel/core @babel/cli @babel/preset-env

(2) Babel 설정 파일 생성

프로젝트 루트 디렉토리에 .babelrc 파일을 만들고 아래 내용을 추가함.

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

 

위 설정은 최신 자바스크립트 문법을 변환하도록 Babel에 지시하는 역할을 함.

(3) Babel 실행

변환할 파일(script.js)이 있다고 가정하고 실행하면 변환된 코드가 생성됨.

npx babel script.js --out-file script-compiled.js

 

이제 script-compiled.js 파일이 변환된 코드로 저장됨.

---

5. Babel + Webpack 연동

---

Webpack과 함께 Babel을 사용하면, 개발 환경에서 자동으로 최신 문법을 변환할 수 있음.

(1) Babel 관련 패키지 추가

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

(2) webpack.config.js 설정

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  mode: 'development',
};

 

이제 Webpack이 .js 파일을 번들링할 때 Babel을 사용하여 변환함.

---

6. Babel과 TypeScript

---

Babel은 TypeScript 코드도 변환할 수 있음.

npm install --save-dev @babel/preset-typescript

 

.babelrc 설정에 TypeScript 프리셋 추가

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

 

이제 Babel을 사용해 TypeScript 코드도 변환 가능함.

---

7. Babel의 한계와 대안

---

한계

• Babel은 최신 문법을 변환하지만 새로운 내장 객체(예: Promise, Set)는 변환하지 않음 → Polyfill 필요
• 일부 변환된 코드는 성능 저하를 유발할 수 있음

대안

• SWC: Babel보다 빠르게 코드 변환 가능
• esbuild: 번들링과 트랜스파일링을 동시에 수행

---

8. 결론

---

Babel은 최신 자바스크립트 기능을 지원하지 않는 브라우저에서도 코드가 정상적으로 실행될 수 있도록 도와주는 필수적인 도구임. 특히 Webpack과 함께 사용하면 최신 웹 개발 환경을 구축하는 데 매우 유용함.