<JavaScript> 브라우저 호환성과 폴리필(Polyfill)

브라우저 호환성이 중요한 이유

 

웹 개발을 하다 보면 다양한 브라우저에서 같은 코드가 다르게 작동하는 경우를 종종 발견할 수 있습니다.

이렇게 발생하는 문제를 해결하기 위해서는 브라우저 호환성에 대한 이해가 필요합니다.

때로는 최신 기능을 사용하고 싶지만, 모든 브라우저에서 지원하지 않는 경우도 있죠.

이런 문제를 미리 인지하고 대응할 수 있으면 웹 페이지를 더욱 안정적으로 운영할 수 있어요.

 

브라우저 호환성 확인 방법

 

브라우저 호환성을 확인하려면 어떻게 해야 할까요?

각 브라우저 별로 지원하는 기능이 다르기 때문에, 사용하려는 기능이 구형인지 아닌지를 체크해야 합니다.

이를 위해 MDN Web Docs나 caniuse.com 같은 사이트를 참고하면 도움이 돼요.

여기서 원하는 기능이 브라우저별로 구현되어 있는지 확인할 수 있어요.

 

폴리필(Polyfill)이란?

 

폴리필이란 특정 기능이 지원되지 않는 구현 환경에서 해당 기능과 동일하게 작동하는 코드를 말해요.

즉, 최신 기능을 구형 브라우저 등에서도 사용할 수 있도록 도와주는 역할을 합니다.

 

예를 들어, ES6의 Promise 기능이 구형 브라우저에서 지원되지 않는 경우 폴리필(Promise polyfill)을 사용하면 해당 기능을 구형 브라우저에서도 사용할 수 있어요.

 

 

폴리필 사용 방법

폴리필을 사용하려면 우선 필요한 폴리필 라이브러리를 찾아서 프로젝트에 추가해야 해요.

예를 들어 Promise 폴리필을 사용하려면 다음과 같이 작성할 수 있어요.

if (typeof Promise === 'undefined') {
  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/promise-polyfill@8.2.0/dist/polyfill.min.js';
  document.head.appendChild(script);
}

코드는 먼저 해당 기능(Promise)이 있으면 폴리필을 사용하지 않고, 없다면 폴리필을 로딩하는 방식으로 작성했어요.

 

또 다른 방법으로는 Babel 같은 트랜스파일러와 함께 폴리필을 사용하는 방법도 있죠.

Babel은 최신 JavaScript 기능을 구형 브라우저에서도 동작하도록 변환해주는 도구이고, 이와 함께 폴리필을 적용하면 코드 변환과 폴리필을 동시에 처리할 수 있어요.

 

Babel의 @babel/preset-env 프리셋을 사용하면 지정한 브라우저에서 지원하지 않는 기능들에 대해 알아서 폴리필을 적용해줘요. .babelrc 파일의 설정을 다음처럼 수정하면 됩니다.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

 

감사합니다.