호환성 판단 기준

문법 변환과 API 보완을 분리하기

Babel은 코드 모양을 바꾸고, Polyfill은 실행 환경에 없는 기능을 채워 넣습니다. 오류 종류를 보면 필요한 처방이 달라집니다.

syntax + runtime
Babel

구형 브라우저가 문법을 읽지 못할 때

대상

const, 화살표 함수, JSX, class 같은 소스 문법

설정

@babel/preset-env와 browserslist 기준으로 변환 범위를 결정

Polyfill

실행 중 없는 기능을 호출할 때

대상

Promise, fetch, includes 같은 런타임 API

설정

core-js와 useBuiltIns로 필요한 기능만 포함

지원 범위

팀이 실제로 지원할 브라우저를 먼저 정하고 설정에 반영합니다.

번들 크기

전체 Polyfill보다 사용 기반 주입으로 불필요한 코드를 줄입니다.

실기기 확인

구형 환경에서 빌드 결과를 열어 문법 오류와 런타임 오류를 나눠 봅니다.