에디터를 구현하고 테스트도 완료했는데, 글을 몇개 작성해보니 몇몇 버그가 확인되었다.

1. net::ERR_BLOCKED_BY_CLIENT.

개발자 콘솔에서 위 에러가 지속적으로 발생하고 있다. 기능에는 이상이 없지만 그래도 붉은 에러 표시라서 이게 무엇인가 싶었는데..

알고보니 애드 블락 사용시 발생되는 에러라고 한다. 애드 블락이 광고 차단을 하면서 응답-요청에 이상이 발생한 모양.

2. net::ERR_ABORTED 404 & Failed to load plugin: fonts from url plugins/fonts/plugin.min.js.

TinyMCE의 버전이 업그레이드 되면서 plugin의 키워드 또한 명칭이 변경되었는데, 버전이 맞지 않는 키워드를 사용할 경우 발생되는 에러였다.

3. 문장의 간격이 너무 좁아서 글자가 겹친다.

Reset CSS가 원인이었다. 내가 구현할 UI를 저 정확하게 만들기 위해서 브라우저에서 HTML 태그에 적용하고 있는 기본 CSS 속성을 모두 제거하였는데 이 때문에 문장 간격을 조정하는 옵션이 모두 사라져버렸던 것.

필요한 태그의 CSS에서 속성을 적용하여 문제를 해결했다.

line-height : 문장의 height 값을 조정하는 속성. 하나의 문장이 차지할 영역의 높이를 제어한다.

4. 웹 에디터에서 글자를 입력할 때 '역순으로 입력'된다!

가장 충격받고 해결에 어려움을 겪었던 문제. 에디터가 처음에는 정상적으로 동작했었는데, 어느 순간부터 enter 키를 입력하면 커서가 아래로 가지 않고 위로 향하기 시작했다!

stackoverflow 등지에서 내가 겪고 있는 것과 동일하거나 흡사한 문제에 대한 문의 글을 발견했는데, 이곳에 나와있는 해결방법을 적용해보아도 문제가 해결되지 않고 되려 또 다른 버그가 발생되고 말았다. 에디터에 글 입력이 불가능하거나 입력 이후 초기값으로 바로 돌아가버리는 등..

공식 문서를 포함하여 자료들을 긁어모아본 끝에

TinyMCE 라이브러리를 리액트에서 사용했을 때 반드시 적용해야 하는 속성이 빠져있었다는 것을 확인했다.

onEditorChange 속성과 value 속성이 없었던 것. 빠진 속성을 적용하니 버그가 해결되었다.

그런데 난 분명 에디터를 적용할 때 공식문서에 있는 방법을 그대로 사용했었는데 거기에는 이런 내용이 포함되어 있지 않았다. ㅠ

5. 에디터의 영역 크기가 이상하다.

페이지의 크기가 변할 때마다 에디터의 크기도 알아서 조정되야한다. 그런데 페이지가 축소될 때는 에디터도 같이 줄어드는데 페이지가 늘어날 때는 에디터가 축소된 모습을 유지하고 다시 늘어나지 않는다.

알고보니 2번의 문제와 원인을 공유하고 있었다. 버전에 맞지 않는 키워드와 속성값에 의해 에디터에 버그가 일어났던 것이다.