next.js에서 web API를 사용하기. (ReferenceError : regeneratorRuntime is not defined)

음성 인식을 위해 비동기적 처리가 되어있는 패키지를 사용하려고 하던 중 만난 에러

 아래의 에러메세지에서 알 수 있듯이 원인은 regeneratorRuntime을 찾지 못하는 것인데 먼저 이 regeneratorRuntime은 어떤 친구인지부터 알아보자.

 먼저, async/await은 비동기를 처리하는 것은 다들 알고 있을것이다.(모른다면 이전 글에서 찾아보면 정리한 글이 있다.)
 하지만 이 async/await은 ES6 문법, 비교적 최신의 문법이고 구형 브라우저나 이전의 코드에서는 동작하지 않게 될 것 이다. 이를 해결하기 위한 것이 바로 Babel에서 런타임에서 실행시키는 regeneratorRuntime 이라는 친구인 것이다. 왜인지를 아는 것이 중요한 것은 어느 부분을 수정해서 에러를 잡을 수 있는지를 캐치할 수 있기 때문!

 먼저, 위의 두 패키지를 devDependencies에 추가해준다.

 그리고 프로젝트 root경로에 .babelrc 를 만들고 위와 같이 코드를 추가 해준다. 그럼 당장에 에러는 다 해결이 될 것이다.
 그런데, 혹시 next/font를 사용하고 있다면 그것은 또 다른 에러를 불러온다.(아래의 그림과 같은 에러가 보인다면 Read more에 있는 url 주소로 들어가 보면 왜 발생하는지, 어떻게 해결하는지 나온다. :: next/font를 사용하던가 .babelrc를 사용하던가...)