웹 입문

Babel과 Polyfill

현대 JavaScript는 ES6(ECMAScript 2015) 이후 const, let, 화살표 함수(= ), async/await, class, 스프레드 문법(...) 등 강력한 기능이 빠르게 추가되어 왔습니다. React, Vue 같은 최신 프레임워크도 이러한 문법을 적극 활용합니다.

Babel의 필요성와 Babel의 동작 방식 (간략)를 중심으로 Babel과 Polyfill의 판단 흐름을 읽습니다.

핵심 흐름

1

Babel 이란?

Babel은 최신 JavaScript (ES2015+) 코드를 구형 JavaScript 환경(주로 ES5)에서 동작할 수 있도록 변환해주는 트랜스파일러(Transpiler)입니다.

2

Polyfill 이란?

Polyfill (폴리필)은 구형 브라우저가 지원하지 않는 최신 JavaScript 기능(메서드, 객체 등)을 사용 가능한 형태로 구현해 놓은 코드 조각입니다.

3

Babel과 Polyfill의 관계 요약

역할 Babel (트랜스파일러) Polyfill (런타임 주입) ...

4

Babel·Polyfill 정리

정리 단계에서는 변환 대상 문법과 런타임 보완 범위를 분리해 번들 정책을 결정하는 것이 중요합니다.