부끄럽지만 polyfill이란 단어를 실시간 zoom 강의를 들으면서 처음 들었다…
왜 처음들어 보았는지 그리고 이 polyfill이란게 무엇인지 찾아보았다. 브라우저에서 지원하는 코드도 있지만 사장되거나 최신으로 업데이트 된 기능은 지원되지 않는 경우가 있다. 이런 경우 브라우저에서 지원하지 않는 코드를 사용 가능한 코드 조각이나 플러그인으로 반환한 코드가 필요한데 이것을 폴리필이라고 한다. 말 그대로 폴리필(충전재) 처럼 비어있는 곳을 채워주는 역할을 한다.
일반적으로 인기 있는 브라우저는 있지만 사람들마다 다양한 브라우저와 브라우저 버전을 사용하고 있으며, 각 브라우저에는 나머지 기능 집합이 약간씩 다르다. 이게 브라우저용 웹개발을 어려운 작업으로 만들 수 있다. 인기 있는 브라우저의 최신 버전은 이전 브라우저에서 할 수 없는 많은 작업을 수행할 수 있지만 여전히 이전 브라우저를 지원해야 할 수도 있다. Polyfill.io나 core-js를 사용하면 누락된 기능을 polyfill로 다시 생성하여 다양한 브라우저를 더 쉽게 지원할 수 있다. 지원하는 브라우저와 지원하지 않는 브라우저에서 최신 기능을 사용할 수 있다.
즉, 정리하자면 개발자는 스크립트에 새로운 함수를 추가하거나 수정해서 스크립트가 최신 표준을 준수할 수 있게 작업할 수 있다. 이렇게 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트를 "폴리필(Polyfill)"이라고 한다.
흔히 Babel을 사용하면 되는거 아니냐고 주장할 수 있다. 하지만 조금 경우가 다를 수 있다.
Babel은 트랜스파일러이다. ES6에서 쓰이는 최신 문법을 쓸 수 없기 때문에 ES5로 문법을 바꿔주는 역할을 한다. Polyfill과의 차이점은 Polyfill은 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나 새롭게 구현을 해서 누락된 새로운 기능을 메꿔주는 역할을 한다.
예를 들어 ES6에서 새롭게 등장한 Promise와 같이 ES5에서 변환할 수 있는 대상이 없는 경우엔 에러가 발생하기 때문에 이 경우엔 Polyfill이 사용된다.