문제

프로젝트 하면서 웹에디터를 사용해보려고 찾다가
Toast-UI 에디터를 찾게 되었다.

그래서 사용해보기 위해서 리액트 환경에서 @toast-ui/react-editor를 설치 후
실행을 시켜보는데 에러코드가 발생했는데

이러한 내용으로 찾아본 결과
해당 내용은 TOAST-UI Editor 공식 깃허브에도 나와있는 이슈였다
https://github.com/nhn/tui.editor/issues/2137

라이브러리 내부적인 사정으로 위의 사진에서와 같이 소스맵(Source Map)과 관련된 이슈로 보인다.

소스맵이란?

소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다. 보통 서버에 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축합니다. 그런데 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅을 할 수 있을까요?

정답은 바로 소스 맵을 이용해 배포용 파일의 특정 부분이 원본 소스의 어떤 부분인지 확인하는 것입니다. 이러한 편의성을 제공하는 것이 소스 맵입니다.

해결

=> 소스맵은 개발환경에서 쓰이기 때문에 큰 무리 없이 해당 문제를 에러코드를 제거하기 위해서 package.json파일에서 start 관련한 내용을 바꿔주면 된다.

// package.json 파일

"scripts": {
    "start": "GENERATE_SOURCEMAP=false react-scripts start",
    ...
}, ...