"@toast-ui/editor@^3.1.6"
"@toast-ui/react-editor@^3.1.6"
프레임워크(framework) : next.js
배포환경(distribution environment) : aws ec2 ubuntu 20.04 (docker image)
mode : wysiwyg
not working browser : Chrome , Naver Whale, firefox
working brower : safari
로컬 호스트 환경에서는 한글 작성이 잘 됩니다
(Writing in Korean works well in the local host environment.)
배포 된 환경에서는 첫글자를 칠 때 한글이 깨집니다. 줄바꿈을 해도 아래와 같이 깨집니다.
(In the deployed environment, Korean word is broken when typing the first letter. Even if you do a line break, it breaks as shown below.)
로컬에서 yarn dev 가 아닌 도커로 빌드하면 localhost에서 똑같은 현상이 발생합니다. 도커와 연관이 있어보입니다.
(Building locally with docker causes the exact same thing on localhost. It seems to have something to do with Docker.)
2022-12-10 I've found where the problem is.
yarn dev 환경과 배포시 production에서 사용되는 yarn start 환경의 차이에서 이러한 현상이 일어납니다.
(This phenomenon occurs due to the difference between the yarn dev environment and the yarn start environment used in production during deployment.)
next.js 에서 yarn dev로 실행시 정상 작동합니다.
(run yarn dev in next.js, it works success.)
제가 알기론 yarn start 와 dev는 source map과 hot code reloading이 제공되는냐 안되느냐의 차이로 알고 있는데
(As far as I know, yarn start and dev are the difference between whether source map and hot code reloading are provided or not.)
next build를 할때 어떠한 오류도 찾을 수 없어서 toast Editor에 정확하게 어떤 영향을 미치는지는 잘 모르겠습니다.
(I'm not sure exactly how it affects the toast Editor as I couldn't find any errors when doing the next build.)
2022-12-12 I've found solution.
react 18 버전으로 올라오면서 달라진 next.js build 방식으로 문제가 생겼던 것 같습니다.
(It seems that there was a problem with the next.js build method that has changed since react 18 version was uploaded.)
react 17로 다운그레이드 하고 next.js에서 build 후 yarn start를 하니 정상 작동 됩니다.
(After downgrading to react 17 and running yarn start after building in next.js, it works normally.)
이상없이 잘 작동되는 버전은 아래와 같습니다.
(Here's a version that works just fine:)
react : 17.0.2
react-dom : 17.0.2
next : 12.1.6
"@types/react": "^18.0.9"
"@toast-ui/editor@^3.1.6" "@toast-ui/react-editor@^3.1.6" 프레임워크(framework) : next.js 배포환경(distribution environment) : aws ec2 ubuntu 20.04 (docker image) mode : wysiwyg not working browser : Chrome , Naver Whale, firefox working brower : safari
로컬 호스트 환경에서는 한글 작성이 잘 됩니다 (Writing in Korean works well in the local host environment.)![스크린샷 2022-12-09 오후 8 36 41](https://user-images.githubusercontent.com/97964123/206694044-9e3e7a8a-f654-457e-a959-570bacab3372.png)
배포 된 환경에서는 첫글자를 칠 때 한글이 깨집니다. 줄바꿈을 해도 아래와 같이 깨집니다. (In the deployed environment, Korean word is broken when typing the first letter. Even if you do a line break, it breaks as shown below.) 로컬에서 yarn dev 가 아닌 도커로 빌드하면 localhost에서 똑같은 현상이 발생합니다. 도커와 연관이 있어보입니다. (Building locally with docker causes the exact same thing on localhost. It seems to have something to do with Docker.)![스크린샷 2022-12-09 오후 8 35 27](https://user-images.githubusercontent.com/97964123/206693847-e1cdab7e-1d20-4906-93fb-5f03e604c604.png)
2022-12-10 I've found where the problem is.
yarn dev 환경과 배포시 production에서 사용되는 yarn start 환경의 차이에서 이러한 현상이 일어납니다. (This phenomenon occurs due to the difference between the yarn dev environment and the yarn start environment used in production during deployment.) next.js 에서 yarn dev로 실행시 정상 작동합니다. (run yarn dev in next.js, it works success.) 제가 알기론 yarn start 와 dev는 source map과 hot code reloading이 제공되는냐 안되느냐의 차이로 알고 있는데 (As far as I know, yarn start and dev are the difference between whether source map and hot code reloading are provided or not.) next build를 할때 어떠한 오류도 찾을 수 없어서 toast Editor에 정확하게 어떤 영향을 미치는지는 잘 모르겠습니다. (I'm not sure exactly how it affects the toast Editor as I couldn't find any errors when doing the next build.)
2022-12-12 I've found solution.
react 18 버전으로 올라오면서 달라진 next.js build 방식으로 문제가 생겼던 것 같습니다. (It seems that there was a problem with the next.js build method that has changed since react 18 version was uploaded.)
react 17로 다운그레이드 하고 next.js에서 build 후 yarn start를 하니 정상 작동 됩니다. (After downgrading to react 17 and running yarn start after building in next.js, it works normally.)
이상없이 잘 작동되는 버전은 아래와 같습니다. (Here's a version that works just fine:) react : 17.0.2 react-dom : 17.0.2 next : 12.1.6 "@types/react": "^18.0.9"