폴리필(Polyfill)이란?
최신 기능을 지원하지 않는 브라우저에서도 해당 기능을 사용할 수 있도록 하는 코드 또는 스크립트. 즉, 구형 브라우저가 최신 JavaScript 기능을 이해할 수 있도록 "대체 코드"를 제공하는 역할을 한다.
💡 폴리필이 필요한 이유
웹 개발에서는 최신 기술(예: fetch, Promise, ES6+ 기능 등)이 계속 추가되지만,
모든 브라우저가 이를 바로 지원하는 것은 아니다.
오래된 브라우저에서는 최신 기능을 사용할 수 없기 때문에
폴리필을 사용해서 해당 기능을 흉내내도록 한다.
예시 : fetch API (ES6 기능)
fetch API는 최신 브라우저에서는 기본적으로 지원하지만,
Internet Explorer(IE) 같은 오래된 브라우저에서는 지원하지 않는다.
이럴 때, fetch를 지원하지 않는 브라우저에서도 사용할 수 있도록 폴리필을 추가한다.
🖥️ html
<!-- fetch API 폴리필 -->
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@3.6.2/dist/fetch.umd.min.js"></script>이런 방법을 통해 구형 브라우저에서도 fetch()를 사용할 수 있다.
🛠 폴리필 vs 트랜스파일러
-
폴리필(Polyfill)
- 구형 브라우저에서 최신 기능을 흉내 냄.
- 런타임에 실행되는 추가 코드 제공.
- core-js, whatwg-fetch 등의 도구.
- fetch(), Promise, Array.includes() 지원 추가.
➡️ 추가 코드를 실행해 기능을 만들어준다.
-
트랜스파일러(Transpiler)
- 최신 코드(ES6+)를 구형 코드(ES5)로 변환.
- Babel, SWC 등의 도구.
- ES6 const, let을 ES5 var로 변환.
- 빌드 단계에서 코드 자체를 변환.
➡️ 코드를 변환한다.
🍋🟩 대표적인 폴리필 라이브러리
✅ core-js → 다양한 최신 JavaScript 기능을 폴리필로 제공
✅ whatwg-fetch → fetch() API 폴리필
✅ es6-promise → Promise 폴리필
적용 방법
1. CDN 방식으로 추가
🖥️ html
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.25.3/minified.js"></script>2. NPM 패키지 설치
🖥️ sh
npm install core-js
js
import 'core-js/stable';
import 'regenerator-runtime/runtime';➡️ 폴리필은 최신 기능을 지원하지 않는 브라우저에서 대체 코드로 기능을 제공하는 스크립트, 주로 구형 브라우저 호환성 문제를 해결하기 위해 사용한다.
대표적인 폴리필 라이브러리는 core-js, whatwg-fetch, es6-promise.
트랜스파일러(Babel)와 함께 사용하면 최신 코드를 모든 브라우저에서 실행 가능.
