17. 폴리필

2026년 4월 10일

자바스크립트

🏗️ 1. 바벨 (Babel): 자바스크립트 번역기

바벨은 **트랜스파일러(Transpiler)**입니다. 최신 자바스크립트 문법(ES6+)을 구형 엔진도 이해할 수 있는 구 표준(ES5) 코드로 재작성해 줍니다.

역할: 문법의 변환 (Syntax Transformation)
예시: 화살표 함수(=>)를 일반 함수(function)로 바꾸거나, 클래스(class)를 프로토타입 기반의 함수로 변환합니다.
작업 시점: 개발자가 코드를 배포하기 전, 빌드 단계(Webpack, Vite 등)에서 실행됩니다.

🛠️ 2. 폴리필 (Polyfill): 누락된 기능 땜질

폴리필은 누락된 새로운 기능을 구현해 놓은 스크립트입니다. 바벨이 '문법'을 고친다면, 폴리필은 존재하지 않는 '함수나 메서드'를 직접 만들어 넣어줍니다.

역할: API 보충 (Feature Filling)
예시: 구형 브라우저에 없는 Promise, Object.assign, Array.from, includes 같은 메서드를 직접 정의하여 사용할 수 있게 합니다.
작업 시점: 브라우저에서 스크립트가 로드될 때 실행됩니다.

📊 3. 바벨 vs 폴리필 한눈에 비교

구분	바벨 (Babel)	폴리필 (Polyfill)
성격	트랜스파일러 (도구)	스크립트 (코드)
처리 대상	새로운 문법 (Syntax)	새로운 객체/메서드 (API)
변환 예시	`const` → `var`, `() =>` → `function`	`Promise`, `Array.prototype.includes`
실행 환경	개발 환경 (Build Time)	사용자 브라우저 (Runtime)

🌐 4. 주요 폴리필 라이브러리

core-js: 가장 대중적인 폴리필 라이브러리로, 필요한 기능만 골라서 사용할 수 있습니다.
polyfill.io: 접속한 사용자의 브라우저 정보를 감지해, 해당 브라우저에 부족한 폴리필만 동적으로 제공하는 서비스입니다.

🎙️ 기술 면접 대비 (Interview Questions)

Q1. 바벨만 있으면 최신 자바스크립트 기능을 모두 쓸 수 있나요? (중급)

답변: 아니요, 그렇지 않습니다. 바벨은 화살표 함수나 클래스 같은 문법적 변환은 처리할 수 있지만, Promise나 Symbol처럼 런타임에 존재하는 새로운 객체나 메서드는 변환할 수 없습니다. 따라서 이러한 API를 지원하지 않는 구형 브라우저를 위해서는 반드시 폴리필을 함께 사용해야 합니다.

Q2. 모든 폴리필을 다 넣으면 성능에 문제가 없을까요? (심화)

답변: 모든 폴리필을 무분별하게 포함하면 번들 파일의 크기가 커져 초기 로딩 속도가 느려질 수 있습니다. 이를 최적화하기 위해 browserslist 설정을 통해 지원할 브라우저 범위를 명시하거나, core-js의 필요한 모듈만 가져오는 방식, 또는 polyfill.io 같은 서비스를 활용해 사용자 맞춤형 폴리필만 제공하는 것이 효율적입니다.

💡 Tech Lead의 한 줄 인사이트

최근에는 구형 브라우저(IE 등)의 지원이 중단되는 추세라 폴리필의 비중이 줄어들고 있지만, Vite나 Webpack 같은 빌드 도구에서 target 설정을 어떻게 하느냐에 따라 서비스의 호환성이 결정됩니다. 내가 타겟팅하는 유저의 환경을 먼저 파악하는 것이 우선입니다.