Polyfill 은 구형 브라우저에서 지원하지 않는 기능을 제공하는 코드를 의미합니다. ES6의 Promise 같은 객체들은 ES5에 존재하지 않으므로 구문 변환 뿐만 아니라 해당 객체들을 정의하는 코드인 바벨 폴리필(babel polyfill) 을 추가해야 합니다. 1. 아주 먼 옛날.. @babel/polyfill 과거에는 @babel/polyfill 패키지를 직접 전역 스코프에 가져오는(import) 방식으로 바벨 폴리필을 추가하여 사용하기도 했습니다. @babel/polyfill 은 내부적으로 core-js/stable 와 regenerator-runtime 를 포함하고 있는데요, 현재는 @babel/polyfill 은 core-js/stable 을 직접 import 하는 방식을 사용하기 위해서 ..

Babel polyfill - core-js 에 대하여 React Boilerplate 를 작성할 때 사용하던 babel polyfill 에 대해서 깊게 알아봤다. useBuiltIns 옵션에 있는 usage 와 entry 가 단순히 usage 는 필요한 polyfill 만 추가로 넣어주니까 이것만 사용하면 되겠다 싶었고 이전 프로젝트에서는 그대로 사용했다. 지금 사용중인 react ts boilerplate 에서 최근 코드스쿼드 슬랙에서 앨런이 공유해준 ES2022 문법중 하나인 at 메서드를 사용해보려는 과정에서 오류가 났었다. 이유는 core-js 를 다운받지 않아서 였다. 그래서 단순히 다운을 받아서 해결했다. 문득 궁금했다. core-js 를 왜 다운받아야 하는거지? node_modules 에..

webpack + babel-loader 를 사용하던 중, 위와같은 에러메세지 발생 해결 .babelrc 에 preset-env 옵션으로 "modules" : "cjs" 추가 { "presets": [ [ "@babel/preset-env", { "useBuiltIns": "usage", "modules": "cjs", "corejs": { "version": 3, "proposals": true } } ], ["@babel/preset-react", { "runtime": "automatic" }] ] } - cjs 는 commonjs 와 같은 것으로, 바벨이 ES Module 코드를 CommonJS 모듈의 문법으로 변환하여 두 모듈을 같이 사용할 수 있도록 함. - 바벨은 _interopRequire..