React-Quill 이미지 사이즈 조절

React-quill 라이브러리에는 이미지 사이즈 조절하는 툴이 없어 따로 외부라이브러리에서 가져와야 한다.
이 과정에서 문제를 겪었는데 그 이유는 다음과 같다!

이미지 사이즈 조절하는 라이브러리중 가장 유명한 "quill-image-resize-module-react" 을 사용하려고 했으나 npm install을 하고 import를 하였는데 아래와 같은 에러가 나왔고, 적용이 되질 않았다,,

모듈 'quill-image-resize-module-react'에 대한 선언 파일을 찾을 수 없습니다. '/Users/iseungseob/Desktop/trippy-web/node_modules/quill-image-resize-module-react/image-resize.min.js'에는 암시적으로 'any' 형식이 포함됩니다.
해당 항목이 있는 경우 'npm i --save-dev @types/quill-image-resize-module-react'을(를) 시도하거나, 'declare module 'quill-image-resize-module-react';'을(를) 포함하는 새 선언(.d.ts) 파일 추가

구글링을 통해 해결하려고 했으나 잘 나오지 않았고 에러에 나와있는 'npm i --save-dev @types/quill-image-resize-module-react' 도 시도해봤으나 당연히 되지 않았다.

원래 import를 하려면 웹팩을 건들여야 한다고 나오긴 했는데 아직 방법을 잘 몰라서 하지 못했다.

따라서 다른 라이브러리를 사용하는 수밖에 없었다

import ImageResize from '@looop/quill-image-resize-module-react';

이 라이브러리를 사용해봤는데 위와 동일한 에러가 출력되었다,,

import { ImageActions } from "@xeger/quill-image-actions";
import { ImageFormats } from "@xeger/quill-image-formats";

결국 위의 라이브러리를 사용하게 되었는데 2시간의 구글링의 결과로 찾은 라이브러리이다,, ㅜㅜ
그런데 이 라이브러리도 맨 처음에는 사이즈 조절이 되지 않았다!

깃허브에 나와있는 방식을 적용하였는데 위에 좌우중앙 정렬하는 도구만 나오고 사이즈 조절하는 도구는 나오지 않았다,, 따라서 구글링을 더 해봤고 결국 이유를 찾았다!

"height",
"width",

formats 코드 안에 이 2줄을 넣어주지 않아서 생긴 문제였다.
공식문서에는 이 코드에 대해서는 나와있지 않아 몰랐는데 찾아본 결과 이 코드만 추가해주었더니 이미지 사이즈 조절하는 도구를 볼 수 있었다!

import { ImageActions } from "@xeger/quill-image-actions";
import { ImageFormats } from "@xeger/quill-image-formats";

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

이 코드를 에디터 맨 윗줄에 추가해주고

const modules = useMemo(() => {
    return {
      imageActions: {},
      imageFormats: {},
      toolbar: {
        container: [
          [{ header: "1" }, { header: "2" }, { font: [] }],

이런 방식으로 modules 안에
imageActions: {},
imageFormats: {},
이 2줄을 추가해주고
꼭! formats 안에

"float",
"height",
"width",

이 3개의 코드를 추가해주어야지 잘 적용이 된다.

이런 식으로 적용되는 것을 볼 수 있다. 사실 스타일이 맘에 들지 않아서 다른 라이브러리를 사용하고 싶었지만 2시간의 삽질 끝에 적용되는 라이브러리가 이 라이브러리밖에 없었다,,