[2024.06.03] 뉴스피드 프로젝트_React 텍스트 에디터 고르기(react-quill)

프로젝트 내 글 작성 기능을 textarea를 통해서도 할 수 있겠지만, 좀 더 실제 사용되고 있는 서비스와 유사하게 작업하고 싶은 마음에 짧은 프로젝트 기간이지만 욕심내어 도입하기로 결정했다. 하지만 실제로 하나하나 구현하기에는 과하게 시간이 오래 걸리는 작업임을 알게 되었고, 텍스트 라이브러리 중 하나를 선택해야만 하는 상황이 되었다(그때까지만 해도 이렇게 종류가 많을 줄은 몰랐지)

고민의 연속...

텍스트 에디터는 먼저 크게 markdown과 wysiwyg(위지위그) 형태가 있는데, markdown은 마크다운 문법을 사용하여 해당 문법에 익숙하지 않은 사용자가 사용하기에 어려움이 있을 것 같아 제외하였다. wysiwyg는 'What you see is what you get'의 약자로 내부적으로 마크다운 문법으로 변환 과정이 일어나며 최종적으로 우리가 눈으로 보는 그대로 입력되고 출력되게 된다. 때문에 wysiwyg를 지원하는 텍스트 에디터를 고르기로 결정하였다.

 

✨최종 3파전: Toast UI vs React-quill vs React-draft-wysiwyg

1. Toast UI

  💡 장점

• NHN에서 개발한 github 1만 스타를 받은 오픈소스로 markdown과 wysiwyg 방식 모두 지원하며 다국어 지원
• 마크다운 화면 스플리팅 기능(마크다운으로 입력하면 preview를 동시에 보여줌)
• 3가지 중 에디터가 가장 예뻤다

Toast UI

🔥 단점

• 상대적으로 라이브러리 파일 크기가 크다.
• React 18과의 호환에서 문제가 있다는 블로그 글들이 보여 도입해도 되는지 고민이 깊어졌다.

 

2. React-Quill

💡 장점

• 설치와 기본 사용이 매우 간편하여 빠르게 프로젝트에 도입 가능
• 테마와 모듈을 사용해 커스터마이징이 쉬움
• 비교적 가벼운 파일 크기로 로딩 속도가 빠름 

React-Quill

🔥 단점  

• 이미지가 base64로 저장되어 url이 엄청나게 길어진다(실제 사용해보니 거의 10,000자 내외)
• markdown을 지원하지 않음
• 기본 제공되는 커스터마이징 이외의 확장이 어려움

 

3. React-draft-wysiwyg

가장 많이 알려진 오픈 소스 에디터로, 현 메타로 이름을 바꾼 facebook이 관리하는 draft.js 에디터를 react 버전으로 구성한 라이브러리

 

💡 장점

• draft.js 기반이기 때문에 확장 가능한 플러그인 시스템이 많아 커스터마이징이 자유롭다
• 다양한 텍스트 포맷팅 옵션과 스타일 기능 지원
• 쉽게 참고할 수 있는 많은 자료가 있는 생태계

 

🔥 단점  

• draft.js를 이해하고 사용하는데 러닝 커브가 높을 수 있음
• 한글 입력시 발생할 수 있는 이슈들을 다른 블로그를 통해 확인할 수 있어 안정성에 우려가 있음

 

✨ 그래서 최종 결정은?

다양한 텍스트 에디터를 비교한 결과 최종적으로 React-Quill 라이브러리를 사용하기로 결정했다. 가장 큰 문제점으로 보이는 이미지가 base64 형태로 저장되는 것은, supabase을 통해 public url 주소로 저장하는 방식을 사용하면 되기에 문제가 되지 않을 것 같았으며, 어차피 markdown은 사용하지 않을 것이고 제공되는 커스터마이징으로도 충분히 좋은 UI를 만들 수 있을 것으로 예상되었기 때문이다.

 

한정된 시간 내에 빠르게 에디터 사용법을 익혀야 되기 때문에 부담은 되지만, 일단 어떤 걸로 사용할지 결정하니 마음은 편하다..