안녕하세요 폴리필(polyfill)에 대한 포스팅입니다.
바벨과 폴리필에대해서 처음 공부할 때 비슷해서 꽤 헷갈렸습니다.
먼저 작용하는 시점에 대해서 알아야할 필요가 있었습니다.
- 컴파일 타임 & 런 타임
이 글에서
컴파일-타임은 바벨이 컴파일하는 시점
런-타임은 브라우저에서 실행되는 시점이라고 생각하면 됩니다.
웹에서의 런 타임 환경에는 DOM, Ajax, setTimeout 과같이 브라우저에서 제공하는 API같은 WebAPI와 이벤트루프, 콜백큐 등이 포함됩니다.
- 폴리필 (polyfill) ?
바벨은 지금까지 사용해봤지만 폴리필은 뭘까요?
폴리필은 런-타임에 필요한 기능을 주입하는 것입니다.
다시말해 브라우저에서 실행되는 시점에 필요한 기능을 주입한다는 것인데요
먼저 Babel에 대해서 보면
Babel은 구 브라우저에서도 최신자바스크립트 코드를 작동하도록 변환해주는 컴파일러(혹은 트랜스파일러)입니다.
Babel은 컴파일-타임에 코드를 구 브라우저에서 사용가능하게 변환하지만, ES6이상에서 새롭게 추가된 Promise, Map, Set 같은 전역객체들이나 String.padStart등 전역 객체에 추가된 메서드등 컴파일-타임의 코드변환으로는 해결하기 어렵기 때문에 폴리필(polyfill) 이 필요한 것입이다.
즉, 구 브라우저에서 최신 자바스크립트 코드를 사용하기 위해 Babel을 이용했지만, 일부 기능들은 polyfill로 추가해줘야 하는 것입니다.
- 폴리필 (polyfill) 사용 법
- ~@babel/polyfill 모듈 사용 - deprecated~
- core-js에서 필요한 폴리필 가져오기 npm : core-js
- @babel/preset-env 프리셋 이용하기
세 가지 방법외에 다른 방법도 있지만
이번 포스팅에서는 @babel/preset-env 프리셋을 이용하는 방법을 이용해 실습해보겠습니다.
@babel/polyfill - deprecated상태
간단히 위에서 언급한 패키지들에대해서 설명하면, @babel/polyfill 모듈은 바벨에서 공식으로 제공했던 폴리필 패키지인데, 현재는 deprecated상태입니다.
해당 모듈을 가져오면 모든 모듈내의 모든 폴리필이 추가됩니다. 따라서 단점으로 번들파일이 불필요하게 커집니다.
core-js에서 폴리필 가져오기
core-js는 폴리필을 위한 자바스크립트 표준모듈입니다.
npmjs:core-js
npmjs.com에서 core-js를 검색하면 간단한 사용법이 나옵니다. core-js모듈에서 필요한 폴리필만 가져오는 방법입니다.
import 'core-js/features/promise';
import 'core-js/features/object/values';
import 'core-js/features/array/includes';그저 코드 최상단에 이런 식으로 import문만 적어주면됩니다.
코드의 크기가 작지만, 폴리필을 빠짐없이 작성해야하기 때문에 실수가 발생할 수도 있습니다.
- @babel/preset-env 프리셋 이용하기
@babel/preset-env을 이용해보겠습니다. 지원할 브라우저 정보와 일부옵션을 지정하면 자동으로 필요한 기능들을 주입해줍니다.
자동 주입되는 필요한 기능들은 컴파일에 필요한 바벨변환 플러그인들과 core-js 폴리필들입니다.
번들파일의 크기에 민감하지만 않다면 가장 간편한 방법입니다.
1. 먼저 npm을 이용해 프리셋을 설치합니다.
npm i @babel/preset-env2. 폴리필 테스트를 위한 적당한 코드를 작성합니다.
// code.js
const p = Promise.resolve(10);
const obj = {
a : 10,
b : 20,
c : 30
};
const arr = Object.values(obj)
const exist = arr.includes(20);3. .babelrc 설정파일을 작성합니다.
// .babelrc
{
"presets": [
["@babel/preset-env",{
"targets": ">= 0.25%, not dead"
}]
]
}.babelrc 설정파일을 살펴보겠습니다.
preset속성에 @babel/preset-env를 작성하고 두 번째 요소에 옵션을 적었습니다. targets는 대상 브라우저의 버전을 작성하는데, 이 때의 작성문법은 github:browserlist를 참고하면됩니다.
위 코드의 targets 옵션에는 "시장점유율이 0.25%이상, 업데이트가 종료되지 않은 브라우저를 대상" 으로 적었습니다.
앱을 만들기 전에 어떤 브라우저까지 지원할지를 결정한 뒤 사이트를 참고해 작성해야겠습니다.
@babel/prest-env는 적당한 번들파일 크기를 유지해주면서 폴리필을 하나씩 추가하는 부담을 줄여줍니다.
개인적으로 프로젝트를 만들 때 자주 사용할 것 같습니다!
읽어주셔서 감사합니다!
