Polyfill 이란?

폴리필은 브라우저가 지원하지 않는 기능들을 사전에 채워 넣어(PolyFill), 개발자가 해당 기능을 사용할 수 있게 하는 역할입니다.

예를 들어 크롬 브라우저에서는 지원하는 기능이지만, IE11 버전의 브라우저에서 지원하지 않는 DOM API나 Object의 Method들을 꼽을 수 있고, 그중 Element.append() method 나 Element.classList.add() method의 multiple parameter 가 있습니다. 이 외에도 커버할 수 있는 많은 기능이 있습니다. (본문 하단 링크의 웹사이트 참조)

간단하게 살펴보자면 아래와 같이 기본적으로 IE에선 Element.append() method를 지원하지 않습니다. (IE11 에선 appendChild() 함수를 사용합니다.)

21번 라인. Element의 append method에서 에러 발생 (in IE11)

 

이때 개발자가 작성한 Script를 파싱 하기 전인 곳에 Polyfill script를 로드하여 사전에 기능을 채워 넣어 Element.append() method를 사용할 수 있습니다.

9번 라인. 추가된 Polyfill script

 

Polyfill script에 classList도 추가하여 classList.add() method의 Multiple parameter도 사용할 수 있습니다.

classList.add 함수에 Multiple parameter를 넣었습니다.

하지만 IE11 에서는 classList.add() 함수의 Multiple parameter를 지원하지 않습니다.

Polyfill script에 classList를 추가하여 2개의 class를 한 method 실행으로 할 수 있습니다. (Multiple parameter)

 

위와 같이 필요한 기능만 선택하여 Polyfill script를 polyfill.io/v3/url-builder/ 에서 구성하여 Export 할 수 있습니다.

 

IE11를 호환하는 작업을 하게 되며 알게 된 Polyfill인데.. 일부 스크립트가 호환이 필요할 때 사용하면 요긴한 기능이라고 생각합니다. (하지만 스크립트 전반적으로 호환이 필요하다면 Webpack 같은 pre-builder가 필요할 듯싶습니다.)
하지만 IE 호환을 위해 사용하고 싶진.... 않네요... 🤐

 

 

 

피드백은 언제나 환영합니다!