🤯 1st Issue

❓ 문제 발생

게시판 등록 기능을 구현하기 위해 toast-ui editor를 사용하던 중, install이 되지 않음

❗ 원인

내가 사용 중이던 react 18.2.0과 toast-ui의 version이 맞지 않아 충돌이 난 것!

✅ 해결

--force를 추가하는 방법으로 우회하여 install 완료

npm install @toast-ui/react-editor --force

하지만 --force는 이미 설치되어 있는 패키지의 버전 충돌 등에도 불구하고 해당 패키지를 강제로 설치하는 방법이므로, 가능한 안전한 개발 환경을 유지하기 위해서 --force 플래그를 사용하지 않고, 의존성 관리를 신중하게 해야함 !

---

🤯 2nd Issue

❓ 문제 발생

위에서 강제 설치한 파일을 push & merge 후 다른 팀원이 pull할 경우, 아래의 오류 발생

ERROR in ./src/pages/board/BoardRegist.js 8:0-48
Module not found: Error: Can't resolve '@toast-ui/react-editor' in 'C:\Lecture\MingleFront\Mingle-Front\src\pages\board'
ERROR in ./src/pages/board/BoardRegist.js 9:0-50
Module not found: Error: Can't resolve '@toast-ui/editor/dist/toastui-editor.css' in 'C:\Lecture\MingleFront\Mingle-Front\src\pages\board'
ERROR in ./src/pages/board/BoardRegist.js 10:0-63
Module not found: Error: Can't resolve '@toast-ui/editor-plugin-color-syntax' in 'C:\Lecture\MingleFront\Mingle-Front\src\pages\board'
ERROR in ./src/pages/board/BoardRegist.js 11:0-52
Module not found: Error: Can't resolve 'tui-color-picker/dist/tui-color-picker.css' in 'C:\Lecture\MingleFront\Mingle-Front\src\pages\board'
ERROR in ./src/pages/board/BoardRegist.js 12:0-90
Module not found: Error: Can't resolve '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css' in 'C:\Lecture\MingleFront\Mingle-Front\src\pages\board'

❗ 원인

처음 install할 때, --force 플래그를 사용했으므로 npm install 시, 같은 방법을 사용해야함

✅ 해결

팀원이 pull 받고나서 위에서 사용한 방식 그대로 install 하면 해결

npm install @toast-ui/react-editor --force

---

🤯 3rd Issue

❓ 문제 발생

해결 시킨 후, back과 연결하니 front 화면이 뜨지 않으면서 아래와 같은 오류 발생

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'

✅ 해결

GENERATE_SOURCEMAP=false 구문을 pagkage.json에 추가하면 오류 해결

"scripts": {
    "start" : "GENERATE_SOURCEMAP=false react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

---

🤯 4th Issue

❓ 문제 발생

다시 실행했으나, 아래와 같은 오류 발생

'GENERATE_SOURCEMAP'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.

WARNING in ./node_modules/@toast-ui/editor/dist/toastui-editor-viewer.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\final-project\workspace\Front-end\Mingle-Front\node_modules\@toast-ui\editor\dist\purify.js.map' file: Error: ENOENT: no such file or directory, open 'D:\final-project\workspace\Front-end\Mingle-Front\node_modules\@toast-ui\editor\dist\purify.js.map'  

❗ 원인

window 환경인 경우, 라이브러리 내부에서 충돌이 발생하여 오류가 발생하는 것

✅ 해결

아래와 같이 start에 GENERATE_SOURCEMAP을 추가하는 것이 아닌 "winstart": "set \"GENERATE_SOURCEMAP=false\" && react-scripts start" 구문을 통째로 추가하여 set 해줘야함

"scripts": {
    "start": "react-scripts start",
    "winstart": "set \"GENERATE_SOURCEMAP=false\" && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},