Javascript

[JS] Babel , Polyfill

Yujzu 2025. 2. 16. 23:47

 

# 트랜스파일러

 

트랜스파일러 특징 속도 사용 사례
Babel 가장 널리 쓰이는 트랜스파일러, 커스텀 가능 느림 😢 Webpack 기반 프로젝트
SWC Rust 기반, Babel보다 20배 빠름 ⚡ 빠름 🚀 Next.js 기본 트랜스파일러
esbuild Go 언어 기반, 초고속 빌드 매우 빠름 🔥 Vite 기본 트랜스파일러
TSC TypeScript 코드 변환 (JSX 지원 X) 보통 😐 TS 프로젝트에서 Babel 없이 사용 가능

 

 

# 트랜스파일러(Transpiler) vs. 컴파일러(Compiler)

- 둘 다 코드 변환을 한다는 점에서는 같으나  '어디로 변환하느냐'가 다름

 

트랜스파일러 : 같은 수준(high-level)의 프로그래밍 언어 간 변환

- A 언어를 B 언어로 바꾸지만, 둘 다 사람이 읽을 수 있는 코드

ex) Babel ( ES6-> ES5) , TSC (TS -> JS)

 

컴파일러 : 고수준 -> 저수준 언어(기계어) 로 변환

- 사람이 읽을 수 있는 코드 → CPU가 이해할 수 있는 코드로 변환

ex) GCC (C → Assembly), Java Compiler (Java → Bytecode)

 

* Babel은 엄밀히 말하면 "트랜스파일러"이지만, 넓은 의미에서는 "컴파일러"라고도 할 수 있다..

Babel처럼 프로그래밍 언어의 다른 버전(ES6 → ES5)으로 변환하는 경우도 컴파일러라고 부르기도 하기 때문..

 

# Babel 

: Babel은 JavaScript 컴파일러로, 최신 JavaScript 코드를 구버전 브라우저나 환경에서 실행할 수 있도록 변환(transpile)해주는 도구이다.

- 최신 문법을 사용해도 모든 브라우저에서 돌아가게 해주는 번역기 같은 역할

 

[ 주요 기능 ] 

- 최신 ECMAScript 기능을 지원하지 않는 브라우저가 많다.

- let, const, async/await, optional chaining, 화살표 함수 등의 최신 기능들은 구형 브라우저에서는 지원하지 않는다.

- Babel은 이런 최신 문법을 ES5 문법으로 변환하여 구형 브라우저가 이해할 수 있도록 한다.

 

- JavaScript 코드 변환: ES6 이상의 최신 문법을 이전 버전(ES5)으로 변환합니다.

- 플러그인 시스템: 다양한 플러그인을 사용하여 원하는 JavaScript 문법을 변환하거나 기능을 추가할 수 있습니다.

- 설정 파일: .babelrc나 babel.config.js 파일에서 변환 규칙을 설정할 수 있습니다.

 

[  사용 ]

- 보통 Webpack + Babel 을 함께 사용하여 트랜스파일링 + 번들링을 수행한다.

- Vite, Nextjs 같은 툴은 자체적으로 트랜스파일링을 지원한다. (Babel 필요 없음)

 

 

 

# Polyfill

: Polyfill은 특정 기능이 지원되지 않는 환경(구버전 브라우저 등)에서 해당 기능을 사용할 수 있도록 구현한 코드이다.

- 지원하지 않는 기능을 모방한 코드를 제공

 

[ 주요 기능 ]

- Promise, fetch, Array.prototype.includes 등은 ES6에서 도입된 기능으로 구형 브라우저에서는 지원하지 않는다.

 

[ 사용 방법 ]

1. Babel 같은 트랜스파일러로 최신 문법을 변환한다.

2. Polyfill을 추가해서 없는 기능을 흉내 낸다.

 

ex. Polyfill을 사용하면 includes 메서드가 없을 경우 이를 추가해준다.

// includes() Polyfill (MDN 제공 코드)
if (!Array.prototype.includes) {
  Array.prototype.includes = function (searchElement, fromIndex) {
    return this.indexOf(searchElement, fromIndex) !== -1;
  };
  console.log("includes() Polyfill 적용됨!");
}

const arr = [1, 2, 3];
console.log(arr.includes(2)); // true (구형 브라우저에서도 정상 동작!)

 

- API 제공: 구형 브라우저에서 최신 웹 API(예: Promise, fetch, Object.assign)가 없을 경우 이를 제공해줍니다.

- 라이브러리: Polyfill을 제공하는 라이브러리들이 있습니다. 예를 들어, core-js나 babel-polyfill이 유명합니다.

 

# Babel 과 Polyfill 의 관계

Babel은 JavaScript 문법을 변환하는 도구인 반면, Polyfill은 기존의 브라우저에서 지원하지 않는 API나 기능을 추가하는 코드입니다.

Babel을 사용할 때, 최신 문법을 변환하는 것 외에도, 필요한 Polyfill을 추가해줘야 합니다. 이를 위해 Babel의 @babel/preset-env 설정을 사용하면, 대상 브라우저에 맞는 Polyfill을 자동으로 추가할 수 있습니다.

 

[ 설치 및 사용 ]

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

 

// .babelrc 파일 예시
{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "entry",
      "corejs": 3
    }]
  ]
}

 

- 위 설정은 Babel이 최신 문법을 ES5로 변환하고, core-js를 사용해 필요한 Polyfill을 추가하도록 설정합니다. useBuiltIns: "entry"는 Polyfill을 import 'core-js';와 같이 명시적으로 추가하라는 의미입니다.

결론

  • Babel: 최신 문법을 구형 브라우저에서 실행할 수 있도록 변환하는 도구입니다.
  • Polyfill: 구형 브라우저에서 지원하지 않는 기능을 추가하는 코드입니다.
  • Babel은 Polyfill을 자동으로 관리하거나, 개발자가 수동으로 Polyfill을 추가하여 최신 JavaScript 기능을 사용할 수 있게 돕습니다.