HYEWON JUNG의 개발일지
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 이용하기
내일 목표
- 수파베이스 연결하기
'개발일지' 카테고리의 다른 글
20240116 TIL react-quill image resize @xeger/quill-image-formats/actions (0) | 2024.01.17 |
---|---|
20240115 TIL supabase quill 연결, file upload, html조건부파싱 (0) | 2024.01.16 |
20240111 TIL react-draft-wysiwyg 첫적용 (0) | 2024.01.12 |
20240110 TIL supabase storage (0) | 2024.01.11 |
20240109 TIL supabase 데이터 읽기, 추가하기 CR with typescript (1) | 2024.01.10 |