[Book Buddy / Function] TypeScript 사용시 React Quill 이미지 사이즈 조절

React Quill을 선택한 이유

이번 프로젝트에서 에디터를 사용해보고싶은데 어떤 에디터를 쓸지 고민을 많이 했었다. 

아무거나 쓰는게 아니라 하나를 사용할 때 정확한 이유를 두고 사용하고싶었다. 

아래 메모는 주관적인 견해도 들어가 있고 사실과 다른 부분이 있을 수 있으니 진지하게 참고하지 않기를... 🥲

 

Editor 찾아보며 작성했던 메모

 

CkEditor는 살짝 Install 해봤더니 너무 무거웠고 내가 사용할 곳은 1:1 문의란이라 많은 기능이 필요하지도 않았기 때문에 패스.

Toast UI랑 Quill 중에 기능적인 부분은 Toast가 마음에 들었었는데 이미지 조절이 안 된다는 사실 하나 때문에 Quill을 선택했다. 

(내가 이미지 사이즈 조절을 얼마나 중하게 생각하는지 나도 모르던 나를 알게 되었다)

 

 

아무튼 본론으로 들어가서 막상 quill을 설치하고 봤더니 사람들이 다 추천하는 quill-image-resize-module-react는 TypeScript 지원이 안 되는게 아닌가... 뿐만 아니라 알려진 대부분의 모듈이 타입 지원을 하지 않았고... 살짝 당황했지만 열심히 구글링을 하다 스택오버플로우에서 같은 질문을 한 글을 찾았고, 답글에서 "https://github.com/xeger/quill-image" 패키지를 발견했다. 

 

 

"https://github.com/xeger/quill-image" 패키지 사용 방법

 

1. 아래 두 가지를 모두 install.

npm install @xeger/quill-image-actions --save-prod
npm install @xeger/quill-image-formats --save-prod

 

2. 아래와 같이 import 하고 register를 작성. 

import { Quill } from 'react-quill';
import { ImageActions } from '@xeger/quill-image-actions';
import { ImageFormats } from '@xeger/quill-image-formats';

Quill.register('modules/imageActions', ImageActions);
Quill.register('modules/imageFormats', ImageFormats);

 

3. formats 안에 'float', 'width', 'height' 를 모두 추가하고, modules에 imageActions, imageFormats를 작성한다.

 

 

 

아주 간단하게 이미지 사이즈를 조절할 수 있게 되었다!

 

 

 

 

---

참고자료

https://velog.io/@lcs3623/%EC%8A%B9%EC%84%AD-88

 

https://velog.io/@songhsb/Quill-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%81%AC%EA%B8%B0%EC%A1%B0%EC%A0%88-TIL

 

https://stackoverflow.com/questions/75983433/quill-image-resize-module-importing-error