20240112~15 TIL react-draft-wysiwyg와 quill 비교하기

목표

• 라이브러리 비교 후 변경 또는 유지

새로 알게 된것/ 오늘의 코드

 react-draft-wysiwyg의 특징

      const contentState = content.getCurrentContent();
      const rawContentState = convertToRaw(contentState);
      const htmlContent = draftToHtml(rawContentState);

 

변환을 꼭 거쳐야하고 htmlContent는 html 태그 안에 쌓인 콘텐츠가 있다. 

그래서 read해올 때 

<div dangerouslySetInnerHTML={{ __html: post.content }}></div>

 

이렇게 파싱을 해줘야한다.

또한 툴바를 유연성있게 사용할 수 있다는 장점이 있다고 하지만 quill에서도 비슷하게 어느정도 할 수 있다.

또한 툴바에 기본 텍스트 핸들링은 있지만 이미지 핸들링같은 첨부는 전혀 없는 것 같다. 

 

하지만 패키지 자체가 가벼운 느낌이 있다.

 

 

quill의 특징

contents를 별다른 변환없이 바로 html태그에 쌓인 콘텐츠로 받을 수 있다.  그래서 파싱처리만 해주면된다.

하지만 react를 베이스로 한 모듈이 아니라 순수 자바스크립트를 써야한다는 점이 있다. 

const input = document.createElement("input");
      input.setAttribute("type", "file");
      input.setAttribute("accept", "image/*");

대락적으로 이렇게된다. 

 

나는 supabase를 쓰기때문에 기본 이미지 핸들러를 사용하진 않지만 기본적으로 핸들러가 설정되어있어서 좋다. 

 

그리고 이미지 리사이즈 같은 것도 플러그인을 사용하면 확장해서 사용할 수 있다.

그래서 조금 쉽고 편한건 quill인듯하다.  

 

우리 프로젝트에서 wysiwyg 가 엄청나게 중요한 포인트가 아니여서 quill 정도의 난이도가 맞을 것 같다는 생각이 들었다. 

 

좀 더 내 관점에서 작성한것!

quill

• 커스텀이 용이 하다.
• 모듈로 구성되어 있어 필요한 기능만 사용이 가능하다
• 초기설정이 간편하다.
• 압도적인 다운로드 수

단점 워닝 발생/ 개선점 찾는중

<aside> 🐾 [Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) and work is underway to remove it from this browser. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead.

</aside>

 

react-draft-wysiwyg 와 비교

• 커스터마이징이 제한적이다
• 이미지 삽입 후 글을 적었을 때 버그 이슈가 있음
• 최근 라이브러리 개발자가 손을 놓았다는 말이 있음
• 업로드 핸들러가 하나도 없다.

 

 

 

 

목표 달성여부

quill 이용하기

내일 목표

• 수파베이스 연결하기