front-end developer

지난 포스팅(Babel Polyfill을 적용하는 방법들)에서 @babel/plugin-transform-runtime 플러그인에 corejs 옵션을 줘서 폴리필하는 방법을 소개했었는데 최근에 @babel/preset-env의 useBuiltIns, corejs 옵션으로도 폴리필을 적용할 수 있다는걸 알게 되어서 각 방법에 어떠한 차이가 있는지 간단히 조사해 보았다. 먼저 Promise 를 사용하는 코드를 작성했다. class Controller { constructor() { new Promise(resolve => { setTimeout(resolve, 1000); }) .then(() => { console.log("Complete!!", Promise); }); } } 그리고 각각의 방법을 적용한..

babel은 기본적으로 es6(ecma2015) 문법으로 작성한 코드를 es5 환경에서 동작할 수 있도록 문법적인 변환을 해주지만 es5에 존재하지 않는 es6의 메서드나 생성자들까지 지원해주지는 않는다. 그래서 es5로 동작하는 하위 브라우저를 지원하는 서비스를 개발할 때에는 폴리필을 추가하여 개발 편의성을 향상시킬 수 있다. 폴리필을 추가하는 방법은 다양한데 대표적인 몇가지 방법을 소개한다. 전역에 폴리필 추가하기 (전역 오염 O) babel 7.4.0 이후부터 @babel/polyfill이 deprecated 되고 core-js와 regenerator-runtime을 직접 사용하는 방식을 제안하고 있다. 아래처럼 2개의 스크립트를 불러오면 전역 스코프에 폴리필이 추가되어 IE 하위 브라우저에서도 P..