Polyfill

등장배경 

과거 ES3이 공개되었을 때 여러 웹 브라우저들의 독자 표준이 정리되어 있지 않은 상황이었다. 그래서 이 시절에는 어느 브라우저를 사용하든 잘 동작하는 JavaScript 코드를 짜는 브라우저 간 호환성(크로스 브라우징)을 확보하는 것이 웹 개발자들에게 큰 고민거리중 하나 였다. 

 

이런 호환성 문제를 호환하기 위해 여러 라이브러리(Prototype, jQuery 등)가 개발되었고, 또 각 브라우저 개발사들이 ECMAScript표준을 따라 브라우저를 만들기 시작하였다. 

 

ES5가 공개된 2009년부터 브라우저 간 호환성 문제가 조금씩 해결되기 시작하였지만, ES6(ES2015)가 나오면서 또 다른 문제점에 봉착하게 되었다. ES6(ES2015)에서는 엄청나게 많은 문법과 기능(클래스, 모듈, 분할, 템플릿 문자열, 반복자, 프록시 등)이 추가되면서 최신 버전의 JavaScript를 지원하지 않는 브라우저가 다시 발생되기 시작한 것이다.

 

브라우저를 이용하는 사용자들은 구형 브라우저를 업데이트하지 않고 사용하는 일들이 빈번하고, 최신 버전의 브라우저를 사용한다고 하더라도, 각 브라우저마다 업데이트 주기가 다르므로 브라우저마다 지원하는 JavaScript 기능이 조금씩 다르다는 문제점에 봉착하게 된다.

 

이런 문제를 해결하기 위해, 2가지 도구가 탄생하게 되었는데, 바로 트랜스파일러(Transpiler)와 폴리필(Polyfill)이다. 

---

트랜스파일러(Transpiler)

트랜스파일러는 최신 버전 JavaScript의 문법을 똑같이 동작하는 이전 버전 JavaScript의 문법으로 바꾸어주는 도구이다. 이를 이용해 개발자는 최신 버전으로 코딩을 하고, 실제로 배포할 코드는 구형 브라우저에서도 잘 동작하도록 변환해 줄 수 있다.

 

Babel, TypeScript 등이 이에 속한다. 

 

폴리필(Polyfill)

JavaScript를 실행하는 구동 환경에는 여러가지 문법과 기능이 추가되는데 이를 어느 브라우저 환경에서도 사용할 수 있도록 똑같이 구현해놓은 라이브러리를 폴리필(Polyfill)이라 한다. 폴리필을 사용하기 위해서는 몇 가지 순서가 필요한데,그 순서는 다음과 같다.   

 

1. 크로스브라우징 여부 확인하기

자신이 JavaScript를 통해 구현한 코드가 어느 브라우저에서도 지원이 되는지 확인하기 위해서는 구글링에 도움을 받는 것이 좋다. 아래의 주소는 JavaScript, CSS 등 브라우저 지원여부 (크로스 브라우징 여부) 를 확인할 수 있는 웹사이트이다.   

 

http://caniuse.com 

Can I use... Support tables for HTML5, CSS3, etc

2. polyfill 구현하기 

크로스브라우징 여부를 확인했다면 브라우저에 상관없이 동일한 개발 환경을 지원할 수 있도록 코드나 플러그인을 제공하는 Polyfill 라이브러리를 사용하거나 직접 구현을 해줘야 한다. 

 

아래 그림을 보면 크롬에서는 Array.prototype.fill() 함수를 지원하지만, IE에서는 지원하지 않는 것을 확인할 수 있다.

 

- 크롬 브라우저 -

- IE 브라우저 -

한가지 예시를 들었지만, 이런 상황들은 빈번하게 발생할 수 있다. 그러므로 이를 통제하기 위해서는 폴리필(Poliyfill)을 구현해야 한다. 여기서 구현 방법은 2가지로 나눠볼 수 있는데 이는 다음과 같다. 

 

 (1) 직접 구현하기 

MDN 웹사이트에 기록되어 있는 Document를 살펴보면 페이지 하단에 '폴리필' 카테고리에 구현된 소스가 존재한다. 이를 이용하면 보다 효율적으로 폴리필을 구현할 수 있다. 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

Array.prototype.fill()

- 폴리필 소스 -

 (2) 라이브러리 사용하기 

 

npm 내에 기술된 라이브러리들은 점점 더 방대하게 증가하고 있다. npm 웹사이트에 접속하여 해당 환경에 알맞은 폴리필 라이브러리를 설치해 적용하면 된다. 

 

React를 현재 공부하고 있는 필자는 npm을 통해 react-app-polyfill 라이브러리를 설치하여 적용하였다. 

---

폴리필(Poliyfil) vs 트랜스파일러(Babel, TypeScript)

 

Babel과 Poliyfill은 구분되어야 하는 개념인데, Babel은 JavaScript의 Syntax가 아닌 것들에 대해서 JavaScript에서 사용할 수 있게 만들어 준다면, Poliyfill은 JavaScript의 Syntax로 읽히지만 정의되어 있지 않은 객체들을 정의해주는 개념을 말한다. 

 

예를들어 Promise 객체는 기존에 존재하지 않는 ES6에서 추가된 객체로, ES6 이전에서 new Promise()를 하는 경우 JavaScript의 Syntax 이지만 정의되지 않는 function 이라는 의미에서 'Promise is not a function' 의 결과를 보여준다. 이때 Poliyfill 개념을 이용해 Promise를 사용할 수 있도록 정의해준다. 

 

Polyfill : JavaScript의 Syntax가 아닌 것들에 대해서 정의되어 있지 않는 객체들을 정의하는 놈 

Babel : JavaScript의 Syntax가 아닌 것들에 대해서 사용하게 만들어 주는 놈

 

---