Polyfill
정의
폴리필은 브라우저에서 지원하지 않는 코드를 사용 가능한 코드 조각이나 플러그인으로 변환한 코드를 의미한다. 하위 브라우저가 지원하는 자바스크립트 코드를 사용해 자바스크립트의 최신 기능을 똑같이 구현하는 방식이다.
자바스크립트는 각 버전별로 지원하는 메소드가 상이하고 브라우저별로 지원하는 API의 범위가 다르기 때문에 코드가 모든 브라우저에서 정상적으로 작동할 수 있도록 폴리필을 지원하는 플러그인이나 라이브러리를 사용해야 한다.
예시
ES1의 isNaN(value)는 값이 NaN인지 여부에 따라 boolean 값을 리턴해주는 메소드이고 모든 버전의 브라우저에서 지원한다.
| Function | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| isNaN | Yes | Yes | Yes | Yes | Yes |
이에 반해 ES6의 Number.isNaN(value)는 동일한 기능을 하는 메소드이지만 브라우저별 버전에 따라 지원 여부가 다르다.
| Function | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| isNaN | Yes | 12.0 | 32 | 9 | 22 |
//polyfill을 생성하는 예시 코드 if (!Number.isNaN) { Number.isNaN = function isNaN(x) { return x !== x; }; }
모든 버전의 브라우저에서 정상적으로 작동할 수 있도록 작성된 위와 같은 코드를 폴리필이라고 한다. polyfill은 '충전 솜을 채워넣는다'는 의미로 추가적으로 주입되는 코드를 뜻한다.
ES6에만 있는 기능을 ES6를 지원하지 않는 브라우저에서 사용하고 싶을때 아래 폴리필 목록을 참고해서 호환성을 맞출 수 있다.
Transpile
정의
트랜스파일은 코드를 A 언어에서 B 언어로 변환하는 것을 말하고 최신 버전의 코드를 이전 코드로 변환하는 과정도 이에 속한다. 브라우저 혹은 브라우저의 버전 별로 지원하는 자바스크립트의 버전이 다르기 때문에 최신 문법을 사용하여 작성된 코드는 특정 브라우저에서 해석이 불가능하므로 트랜스파일을 거쳐서 이전 문법의 코드로 변환하는 것이다. 대표적인 트랜스파일러로 Babel이 있다.
예시
//원본 코드
let total = 10;
let sum = total ?? 100;//트랜스 파일 후
"use strict";
let total = 10;
let sum = total !== null && total !== void 0 ? total : 100;위 코드는 Babel의 사이트에서 트랜스파일된 결과이다.
https://babeljs.io/repl
차이
Polyfill과 Transpile는 사용하는 비슷한 목적으로 사용하기 때문에 같은 개념 처럼 보이나 폴리필은 지원하지 않은 기능을 대체할 수 있도록 코드를 추가하는 것이고 트랜스파일은 코드 자체를 이전 버전으로 변환시키는 과정이다. 예를 들어 화살표 함수는 ES6부터 도입된 문법으로 지원하지 않는 브라우저에서 사용하기 위해서는 폴리필을 사용할 수 없고 트랜스파일러를 사용하여 코드 자체를 변환시켜야 한다.
참고문서
