babel 7.x.x ReferenceError: regeneratorRuntime is not defined async, await react 에러 발생하는 경우

TOC

0. 환경

1. babel과 async, await

2. polyfill 대신

0. 환경

제 개발 환경은 아주 짧은 주기로 변화하고 있습니다.

작성한지 2달도 안지난 제 코드는 코드 냄새가 진동해 못볼 지경이라 다시 작성하고 있을 정도입니다.

현재는 클린 코드를 참고하며 코드를 작성하고 있고 여러 기능들을 추가하다 보니 사용하는 npm module의 수도 많아지고 있죠. (나중에는 더욱 바뀔 것 같습니다.)

환경은
react + webpack + eslint이며 사용하는 언어는 javascript입니다.

1. babel과 async, await

오늘은 API를 활용해 웹앱을 만들던 도중
async, await을 사용하면서
ReferenceError: regeneratorRuntime is not defined 에러를 만나게 되었습니다.
아마 promise도 같은 에러가 뜰 것 같군요

이를 해결하려고 뒤져보니 크게 두 가지 정도의 해법이 보이더군요

1. pollyfill로 대체한다.
2. 다른 방법을 찾는다.

기존에 제가 알고 있던 방법은 pollyfill을 추가해주면 문제가 해결되는 것으로 알고 있었고 예전 stackoverflow의 글을 찾아보아도 pollyfill을 사용하라고 나와 있었습니다.

(pollyfill의 자세한 내부 움직임은 알기 어렵죠 최신 사양의 기술을 es5까지만 지원하는 브라우저에서 돌게끔 해주는 black boxification(대충 다 때려박은 상자처럼 만드는 것)처럼 만들어져있다고 생각합니다. 마치 jQuery처럼..? 하지만 사용하지 않을 수도 없죠..)

그래서 찾아보았더니

babel@7.4.0 부터는 polyfill이 아닌 core-js와 regenerator-runtime을 설치해서 사용하는 것을 권고하더군요!

2. polyfill 대신

결론은 polyfill 대신 사용해야 할 것이 무엇이냐?

답은 아래의 두 npm module입니다.

사용방법은 간단합니다.
https://babeljs.io/docs/en/babel-polyfill

npm i core-js
npm i regenerator-runtime

shell을 통해 설치를 해주시고

yarn이라면

yarn add core-js
yarn add regenerator-runtime

import "core-js/stable";
import "regenerator-runtime/runtime";

그 다음 설치한 두 npm을 메인이 되는 js 파일에 import 해주시면 됩니다.

예를 들면 index.js나 App.js 처럼요

그럼 7.4.x의 경우 문제가 해결이 되실..되시길 바랍니다.