리액트 위지윅 에디터(WYSIWYG) 비교

리액트 위지윅 에디터를 비교해보자

 웹 개발을 진행하다보면 사용자 페이지에서는 잘 사용되지 않는 경우가 있지만 게시판이나 어드민쪽에서는 필수적으로 들어가야 할 요소가 바로 위지윅 에디터이다. 가장 좋은 것은 유료 제품을 구매해서 사용하는 것이겠지만 개인 프로젝트이거나 회사간 계약 상황에 따라서 무료 제품을 사용해야만 하는 경우가 종종 있음을 확인할 수 있었다. 

이번 프로젝트에서는 무료 오픈소스 위주로 검색을 진행하였고 그 중에 2가지 선택지를 찾을 수 있었다.

https://github.com/jpuri/react-draft-wysiwyg

React Draft Wysiwyg

RICH TEXT EDITOR FRAMEWORK FOR REACT인 Draft.js를 이용하여 만든 Wysiwyg 이라고 보면 될 것 같다. 일단 React를 위해서 태어난 Draft.js을 가지고 만들어놓은 제품이기 때문에 가장 우선 순위를 높게 잡고 기능을 확인하였다.

저번 프로젝트에서는 위지윅 에디터를 지원했지만 이미지를 올리기 위해서 파일 업로드 기능 없이 링크를 넣어야 했었다. 그랬기에 이번 프로젝트에서 가장 큰 요청사항은 위지윅 에디터에서 아마존 S3로 직접 파일 업로드하여 불러오는 방식을 지원하는 지 여부였었다.

Demo나 문서를 살펴보면 구현되어 있는것이 무료 이미지 호스팅 사이트(imgur)로 올라갔기 때문에 걱정을 했었는데 실제 구현시에는 uploadCallback을 이용하여 업로드 할 수 있는 url 주소의 변경이 가능했다.

https://github.com/zenoamaro/react-quill

react-quill

이 라이브러리는 quill 이라는 오픈소스 라이브러리를 react에서 사용하기 편하게 만들어놓은 것이라고 생각했다. draft.js도 facebook에서 만들었기 때문에 안정적이다고 생각하지만 quill.js 같은 경우에는 Linkedin이나 #Slack 같은 곳에서 보장해주는 js 이고 스타를 무려 15,490개나 받았다. react 버젼도 1,288개나 받았으니 명실공히 대표 라이브러리라고 말할 수 밖에 없을 것 같다.

quill의 모양새를 확인하고 싶다면 공식 사이트에서 하면 될 것 같다.

장단점을 비교하기는 현재 어려운 상황이다. 개발 진행하고 있는 프로젝트는 React Draft Wysiwyg 위지윅을 사용하고 있으면 몇가지 문제 사항이 있지만 현재 어느정도 해결하여 적용중에 있다. 다만 다음번에 시간적인 여유가 생긴다면 Quill도 한번 적용해보고 싶은 js 임은 틀림이없다.