Next.js 삽질 후기 - Toast UI Editor, TipTap, Quill 에디터 실패기

웹퍼블리싱만 하던 놈이 개발을 해보겠다고 호기롭게 덤빈 것이 후회되는 상황이 많이 발생하고 있는데, 그 중에 제일 장벽이 크게 느껴지는게 텍스트 에디터를 삽입하려다 실패한 것들입니다. 

 

Next.js는 SSR이 장점인 동시에, SSR때문에 초래되는 문제들이 있습니다. 리액트는 보통 CSR을 기본으로 돌아가고 있다보니 텍스트 에디터들이 굳이 SSR을 지원할 이유도 없고, 그러다보니 Next.js에 쉽게 붙이기가 어렵습니다. Dynamic import는 물론이고 이미지 업로드 기능이라도 붙여볼라치면 아주 지저분해지기 쉽상이죠. 

 

이미지를 붙이는 가장 쉬웠던 방법은 Cloudinary 플러그인입니다. 

 

How to Serve Videos in Next.js Web Apps With Cloudinary

위의 예시만 봐도 얼마나 간결한지 알 수 있습니다. 역시 돈을 쓰면 편해지는게 많구나 싶습니다 

---

아무튼 다시 본론으로 돌아와서 각각 에디터들을 포기한 이유들을 꼽자면, 가장 먼저 도전했던 것은 Tiptap이었습니다.

개인적으로 꼽은 장점은 아래와 같습니다.

• 스타일을 자유롭게 지정할 수 있다.
• Extension이 다양해서 기능 추가가 용이하다

단점은 아래와 같습니다. 

• 간단한 메뉴조차도 일일이 다 만들어줘야하기때문에 손이 많이간다. 
• 아직 Beta 버전이라 약간 불안정하다
• SSR 관련해서 문제가 있는지 Extension이 오작동을 일으키는 경우가 있다. 

---

여기까지 해보다가 도무지 해결의 기미가 안보이길래 Quill로 옮겨갔습니다.

tiptap에 비하면 잘 붙었습니다.

하지만 한글 입력 문제가 있었습니다.

 

한 번에 키 스트로크 한 번에 두세번씩 입력이 되다보니 한글 입력이 제대로 이뤄질 수 없는데, 리액트에서 보통 키 입력 - 특히 한글과 관련된 문제들은 onKeyUp을 onKeyPress로 변경해주는 방식으로 해결을 하는데, 이 문제는 onChange로 핸들링하는 과정에서 생긴 문제라 해결이 어렵다고 판단했습니다. 그리고 이미지 업로드를 구현하는 부분이 좀 지저분하다는게 문제였습니다. 

 

image upload handler를 구현하는 과정에서 input element를 생성해서 거기에 onchange 이벤트를 붙여서 구현하는 방식이 썩 맘에 안드는 부분이었습니다. 

---

마지막으로 Toast UI Editor 였습니다. Quill에서 겪은 한글 이슈를 보면서 한국에서 만든 에디터가 제격이겠구나 싶어서 붙였는데 Dynamic Import로도 제대로 작동하질 않아서 포기했습니다 ㅎㅎㅎ

 

대부분의 문제를 검색으로 해결하고 있는데, Toast UI Editor를 Next.js에 붙여서 구현하는 방식을 검색해서 따라해봐도 좀처럼 해당 내용들과 다른 에러메세지를 뱉어내고 있는데, 감이 안오네요. 오류메세지를 검색해봐도 딱히 대안이 안나오는 상황이라, 이래서 커뮤니티가 큰 라이브러리를 선호하는구나 라는 생각이 와닿았습니다. 

 

---

결론적으로는 이런 삽질을 통해서 워드프레스와 티스토리, 네이버 블로그가 얼마나 편리한 블로그 시스템인지 느끼는 요즘입니다. 팀단위로 여러사람이 붙어서 만들었으니 저같은 초짜가 덤빌만한 규모는 못되지만, 어찌됐건 정말 잘 만든 시스템이네요. 제가 만든걸 쓰다가 티스토리에 글을 쓰다보니 정말 편리하고 쾌적합니다. ㅋㅋㅋ