[React]Toast UI source map 에러

[서론]

프로젝트에서 Toast UI Editor로 작업을 하던 중 실행에는 문제가 없었지만 거슬리는 에러를 발견했다..

[에러 내용]

Failed to parse source map from 'D:\project\codiary\client\node_modules\@toast-ui\editor\dist\purify.js.map' file: Error: ENOENT: no such file or directory, open 'D:\project\codiary\client\node_modules\@toast-ui\editor\dist\purify.js.map'

[해결]

// package.json
  "scripts": {
    "start" : "GENERATE_SOURCEMAP=false react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

package.json파일에서 start 관련한 내용을 위와같이 바꿔주면 된다.

여기서
'GENERATE_SOURCEMAP'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.
라는 에러가 나올 경우는

// package.json
  "scripts": {
    "start" : "set \"GENERATE_SOURCEMAP=false\" && react-scripts start",
    "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

위와같이 package.json 파일에서 start와 빌드의 내용을 위와같이 수정해주면 된다. 사실 빌드파일까지 바꿀 필요는 없고 npm start할 때 나타나는 에러를 지우려면 start부분만 카피해도 무방할 듯 하다.

나는 윈도우 환경을 쓰기 때문에 에러 해결이 리눅스 기반이 많아서 왜 윈도우에서 안되는지 고생 꽤나 했다....

[에러 원인]

자세한 내용은 공식 github에서 친절하게 설명해준다.
https://github.com/nhn/tui.editor/issues/2137

대충 읽어보면 라이브러리 내부적인 사정인 듯 하다.. 정확히 뭐라고 하는지는 잘 모르겠지만 에러코드에서 소스맵(Source Map)이라는 뭔가를 말하는걸 봐선 이에 대한 오류인 듯 싶다.

여기서 소스맵이란,
리액트는 웹팩을 통해 파일들을 압축하여 배포함으로써 성능을 최적화 한다.
이 때, 내부적으로 소스맵(Source Map)이란걸 만들어, 압축한 파일과 실제 원본 파일을 매핑하여 디버깅이 가능하도록 한다.
출처: https://curryyou.tistory.com/469 [카레유:티스토리]
라고는 하는데.. 아직 react가 내부적으로 어떻게 동작하는지 정확히 이해를 하고 있지 못해서 그런지 잘 모르겠다.

누군가에겐 이 포스트가 도움이 되길 바라며..!