[2026] Babel 완벽 가이드 | JavaScript 트랜스파일러·Presets·Plugins·실전 활용

2026년 4월 7일 · 14분 읽기 · 수정 2026년 4월 7일 중급

이 글의 핵심

Babel로 JavaScript를 트랜스파일하는 완벽 가이드입니다. Presets, Plugins, Polyfills, Webpack/Vite 통합까지 실전 예제로 정리했습니다.

실무 경험 공유: Babel로 최신 JavaScript를 구형 브라우저에서 실행하면서, 브라우저 호환성 문제가 100% 해결된 경험을 공유합니다.

들어가며: “구형 브라우저를 지원해야 해요”

실무 문제 시나리오

시나리오 1: 최신 JavaScript를 사용하고 싶어요
구형 브라우저는 지원하지 않습니다. Babel로 변환합니다. 시나리오 2: Polyfill이 필요해요
Promise, Array.from 등이 없습니다. Babel이 자동으로 추가합니다. 시나리오 3: JSX를 사용하고 싶어요
브라우저는 JSX를 이해하지 못합니다. Babel로 변환합니다.

1. Babel이란?

핵심 특징

Babel은 JavaScript 트랜스파일러입니다. 주요 장점:

최신 JavaScript: ES2024 → ES5
JSX: React 지원
TypeScript: 타입 제거
Polyfills: 자동 추가
Plugins: 확장 가능

2. 설치 및 기본 설정

설치

npm install -D @babel/core @babel/cli @babel/preset-env

.babelrc

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

실행

npx babel src --out-dir dist

3. Presets

@babel/preset-env

아래 코드는 json를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not dead"]
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

@babel/preset-react

npm install -D @babel/preset-react

아래 코드는 json를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

@babel/preset-typescript

npm install -D @babel/preset-typescript

아래 코드는 json를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

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

4. Plugins

@babel/plugin-transform-runtime

npm install -D @babel/plugin-transform-runtime
npm install @babel/runtime

아래 코드는 json를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3
      }
    ]
  ]
}

@babel/plugin-proposal-decorators

npm install -D @babel/plugin-proposal-decorators

아래 코드는 json를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "2023-05" }]
  ]
}

5. Polyfills

core-js

npm install core-js

아래 코드는 json를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

수동 Import

import 'core-js/stable';
import 'regenerator-runtime/runtime';

6. Webpack 통합

npm install -D babel-loader

아래 코드는 javascript를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

7. Vite 통합

Vite는 기본적으로 esbuild를 사용하지만, Babel을 추가할 수 있습니다.

npm install -D @vitejs/plugin-react

아래 코드는 typescript를 사용한 구현 예제입니다. 필요한 모듈을 import하고. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['@babel/plugin-proposal-decorators'],
      },
    }),
  ],
});

8. 실전 예제: React 라이브러리

babel.config.js

다음은 javascript를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: ['> 1%', 'last 2 versions', 'not dead'],
        },
        modules: false,
        useBuiltIns: 'usage',
        corejs: 3,
      },
    ],
    [
      '@babel/preset-react',
      {
        runtime: 'automatic',
      },
    ],
    '@babel/preset-typescript',
  ],
  plugins: [
    [
      '@babel/plugin-transform-runtime',
      {
        corejs: 3,
      },
    ],
  ],
  env: {
    test: {
      presets: [
        [
          '@babel/preset-env',
          {
            targets: {
              node: 'current',
            },
          },
        ],
      ],
    },
  },
};

9. 브라우저 타겟

.browserslistrc

> 1%
last 2 versions
not dead

package.json

아래 코드는 json를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

정리 및 체크리스트

핵심 요약

Babel: JavaScript 트랜스파일러
Presets: 설정 묶음
Plugins: 변환 규칙
Polyfills: 자동 추가
Webpack/Vite: 통합 가능
브라우저 타겟: 유연한 설정

구현 체크리스트

같이 보면 좋은 글

Webpack 완벽 가이드
TypeScript 완벽 가이드
Vite 완벽 가이드

이 글에서 다루는 키워드

Babel, Transpiler, JavaScript, TypeScript, Polyfill, Build Tools, Frontend

자주 묻는 질문 (FAQ)

Q. TypeScript와 함께 사용해야 하나요?

A. TypeScript는 타입 체크를 하고, Babel은 변환을 합니다. 함께 사용하면 좋습니다.

Q. esbuild와 비교하면 어떤가요?

A. esbuild가 훨씬 빠릅니다. Babel은 더 많은 변환 옵션을 제공합니다.

Q. 번들 크기가 커지나요?

A. Polyfill을 추가하면 커질 수 있습니다. useBuiltIns: ‘usage’로 최소화할 수 있습니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, 거의 모든 프론트엔드 프로젝트에서 사용하고 있습니다.