[WEB] Polyfill: 과거와 현재를 잇는 마법의 조각 🪄

Polyfill에 대해 톺아보자 🪄

웹 개발을 하다 보면 최신 브라우저에서는 잘 작동하는 기능이 구형 브라우저에서 “응, 그런 거 몰라” 하며 무시되는 경험을 한 번쯤 해보셨을 겁니다. 바로 이때 등장하는 해결사가 Polyfill이에요.

 

Polyfill은 최신 웹 기능을 지원하지 않는 환경에서도 호환되도록 만들어주는 코드 조각입니다. 현대적인 JavaScript나 CSS 기능을 구형 브라우저에서도 사용할 수 있게 해주는 일종의 백업 플랜인 셈이죠.

---

🌟 Polyfill이란?

Polyfill은 브라우저가 기본적으로 지원하지 않는 기능을 구현해주는 JavaScript 코드 또는 플러그인입니다.

다른 말로 하면, “없으면 만들어준다”는 식으로 구형 환경에서 최신 기능을 사용할 수 있도록 해주는 마법 같은 도구입니다.

 

예시: Promise, fetch, Object.assign 같은 기능은 최신 브라우저에서는 기본 지원되지만, 구형 브라우저에서는 사용할 수 없습니다. 이런 경우, Polyfill을 사용해 브라우저가 해당 기능을 이해하도록 도와줍니다.

 

🔍 Polyfill이 필요한 이유는?

브라우저 간 호환성 문제 해결 🎯

• 모든 브라우저가 최신 표준을 똑같이 지원하지는 않습니다. 예를 들어, 구형 Internet Explorer(IE)는 최신 JavaScript 기능을 지원하지 못합니다.
• Polyfill은 최신 기능을 구현해 브라우저 간 일관성을 유지합니다.

레거시 시스템 지원 🔄

• 기업 환경이나 오래된 시스템에서는 여전히 구형 브라우저를 사용하는 경우가 많습니다. Polyfill은 이런 시스템에서도 최신 기능을 사용할 수 있게 해줍니다.

더 빠른 개발 주기 🚀

• 브라우저 지원 여부를 고민하지 않고 최신 기능을 사용할 수 있으니, 개발 속도를 높일 수 있습니다.

---

🗄️ Polyfill vs Transpiler

Polyfill과 Transpiler는 구형 브라우저 지원과 관련이 있지만, 그 역할이 다릅니다.

항목	Polyfill	Transpiler
목적	특정 기능을 브라우저에서 사용할 수 있게 만듦	최신 코드를 구형 브라우저에서도 작동하도록 변환
동작 방식	기존 API를 추가하거나 구현	코드를 변환하여 구형 브라우저에서도 이해 가능
예시	Promise, fetch	Babel, TypeScript

---

📋 주요 Polyfill 예제

1., Promise Polyfill

Promise는 비동기 작업을 처리하기 위한 최신 JavaScript 기능입니다. 하지만 IE11 같은 브라우저에서는 지원하지 않죠.

 

👉 Polyfill 적용

npm install promise-polyfill

 

코드 사용 예시

import Promise from 'promise-polyfill';

if (!window.Promise) {
  window.Promise = Promise;
}

2. Fetch Polyfill

fetch는 HTTP 요청을 간편하게 처리할 수 있는 기능입니다. 하지만 IE에서는 사용할 수 없습니다.

 

👉 Polyfill 적용

npm install whatwg-fetch

 

코드 사용 예시

import 'whatwg-fetch';

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

---

💺 Object.assign Polyfill

Object.assign은 객체를 병합하는 데 유용하지만, 구형 브라우저에서는 지원되지 않습니다.

 

👉 Polyfill 코드 직접 구현

if (typeof Object.assign !== 'function') {
  Object.assign = function(target, ...sources) {
    if (target == null) throw new TypeError('Cannot convert undefined or null to object');
    for (const source of sources) {
      if (source != null) {
        for (const key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
    }
    return target;
  };
}

---

🗃️ 대표 Polyfill 라이브러리

1. core-js

최신 JavaScript 기능에 대한 Polyfill을 제공하고 있습니다.

npm install core-js

import 'core-js/stable';
import 'regenerator-runtime/runtime';

 

2. polyfill.io

Polyfill을 CDN으로 제공해, 필요한 기능만 동적으로 로드합니다.

<script src="https://polyfill.io/v3/polyfill.min.js?features=Promise,fetch"></script>

 

3. Babel Polyfill

Babel을 사용하는 프로젝트에서 최신 JavaScript 기능을 사용할 수 있도록 도와줍니다.

 

npm install @babel/polyfill

import '@babel/polyfill';

---

⚠️ Polyfill 적용 시 주의사항

1. 불필요한 Polyfill을 최소화하라 🛠️
   • 모든 Polyfill을 무조건 포함하면 번들 크기가 커질 수 있습니다. 꼭 필요한 기능만 추가하세요.
   • polyfill.io와 같은 동적 로딩 서비스를 활용해 필요할 때만 로드하세요.
2. 브라우저 지원 전략을 명확히 하라 🚀
   • 모든 브라우저를 지원해야 하는지, 특정 브라우저만 타겟으로 할지 먼저 결정하세요.
   • 프로젝트의 브라우저 지원 정책을 browserslist로 정의하는 것도 좋은 방법입니다.

---

🔖 실전 팁: Polyfill 활용한 브라우저 지원

Babel과 Polyfill의 조합

Babel은 최신 JavaScript 코드를 변환(Transpile)하고, Polyfill은 부족한 기능을 채워줍니다.

 

설정 예시 (webpack + Babel)

npm install core-js regenerator-runtime @babel/preset-env

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage', // 필요한 폴리필만 추가
        corejs: 3,
      },
    ],
  ],
};

 

---

🚁 Polyfill의 미래: 점점 사라지는 역할?

최신 브라우저 채택률이 높아지면서 Polyfill의 필요성이 줄어들고 있습니다. 하지만 여전히 구형 브라우저를 지원해야 하는 경우가 많아 완전히 사라지지는 않을 것입니다. 앞으로는 Polyfill을 최소화하면서 더 나은 웹 환경을 구축하는 것이 중요해질 거예요.

 

Polyfill은 최신 기술과 구형 브라우저 간의 다리 역할을 합니다.

“모두를 위한 웹”을 만들기 위해, Polyfill은 여전히 유효한 도구입니다. 하지만 불필요한 Polyfill 추가는 번들 크기를 키우고 성능에 영향을 줄 수 있으니, 꼭 필요한 경우에만 사용하는 것이 중요합니다.

 

🌷 전설의 개발자가 되어봅시당! 🌷