[TIL] React에 ckEditor 적용하기

배운 것

게시판의 글 작성/수정 부분을 <textarea> 요소로 작업해 두었는데, 이걸 에디터 라이브러리로 교체했다.

에디터 라이브러리가 이렇게 많은 줄도 처음 알았고, WYSIWYG이 특정 라이브러리 이름이 아니라는 것도 처음 알았다.

html 파싱 돕는 라이브러리도 너무 많아서 가장 많이 사용되는 걸 검색해서 dompurify로 썼다.

 

• 에디터 적용하면서 참고한 튜토리얼

[react] 간단한 리액트 게시판 만들기 : WYSIWYG ckeditor - ① 인터페이스

 

 

• 에디터는 글에 적용된 스타일 태그를 포함한 string 덩어리를 주므로, 이걸 db에 저장했다가 페이지를 열 때마다 가져와서 파싱해야 한다. 이 때 파싱한 결과를 div에 주입하면서 innerHtml을 직접 수정하게 되는데(위험하니까 하지 말라고 배운 거..) 이 때 생기는 위험을 없애는 용도로 dangerouslysetinnerHTML 속성과 dompurify를 추가했다.

React dangerouslySetInnerHTML, DOMPurify

 

---

회고

금방 끝날 줄 알았는데 자잘한 애로사항을 많이 만나서 좌절할 뻔했다..

 

오류 1 : GlobalStyle에 추가한 reset.css 라이브러리 때문에 에디터에서 적용한 속성이 전부 무시됐다. 원인을 찾지 못해서 시간을 한참 허비했다. reset 설정 꼭 필요한 것만 골라서 쓰고, 아무거나 함부로 쓰지 말아야지..

오류 2 : DB의 데이터 length 제한이 걸려있는 걸 모르고 '스타일을 설정했더니 오류가 난다'고 생각했다.  기능 테스트 하느라 lorem 텍스트를 길게 뽑아서 온갖 스타일을 다 적용했는데, 이전까지 그렇게 긴 텍스트를 저장해보지 않아서 제한이 있는 줄도 몰랐다. 앞으론 먼저 체크하기.

 

더 찾아볼 것

글 작성/수정 후 리다이렉트와 리렌더링을 연이어 발생시키고 싶은데 아직 성공하지 못했다.

'리액트에서 dom 객체 직접 수정하는 거 아니다'라는 강박(?) 때문에 window.location.reload 외의 다른 방법으로 구현하고 싶다.