폴리필(polyfill)

✅ 폴리필(polyfill)이란?

옛날 브라우저에서 최신 기능이 작동하지 않을 때,
그 기능을 흉내 내서 동작하게 만들어주는 "보조 스크립트"예요.

---

📌 쉽게 비유하자면

✨최신 기능을 못 알아듣는 브라우저에게
“이런 식으로 하면 똑같이 동작해~” 하고 가르쳐주는 통역사 같은 자바스크립트 코드예요.

---

🧠 예시: :focus-visible

• :focus-visible은 Chrome, Firefox에서는 잘 작동하지만
• Safari의 일부 버전에서는 지원하지 않음
• → 이때 focus-visible 폴리필을 추가하면, Safari에서도 마치 지원하는 것처럼 동일한 효과가 적용됨

---

✅ 폴리필 사용 방법 (예: focus-visible)

👉 focus-visible 폴리필 GitHub

html

복사편집

<script src="https://unpkg.com/focus-visible"></script>

• 위처럼 <script> 태그로 넣으면
• 지원하지 않는 브라우저에서만 자동으로 동작
• → :focus-visible을 흉내 내주는 JS가 동작해서 같은 결과를 만들어줘요

---

💬 자주 쓰이는 폴리필 예

기능폴리필 예

fetch	구형 브라우저에서 AJAX 사용 위해
Promise	ES6 이전 브라우저에서 비동기 지원
IntersectionObserver	스크롤 감지기능 폴리필
focus-visible	접근성 개선용 CSS 포커스 폴리필

 

---

✅ 요약

질문대답

폴리필이 뭐야?	브라우저가 모르는 최신 기능을 흉내 내주는 보조 코드예요
왜 써?	구형 브라우저에서도 최신 기능처럼 동작하게 하려고
어떻게 써?	보통 <script>로 추가하거나 npm으로 설치