[React] ReactQuill 을 사용하여 이미지를 서버에 보낼 때 src 길이 줄이기 및 실제 이미지에는 영향 안끼치는 방법

이번 'MK-Blog' 를 개발하면서 글 작성 / 수정 하는 페이지에 ReactQuill을 넣었습니다.

해당 툴에다가 이미지들을 넣으면 이미지 태그의 src 가 한없이 깁니다. 

서버에 전송할 때, 길이 제한때문에 전송 실패할 확률이 큽니다.

 

그래서 저는 src 를 image_1, image_2 이런식으로 보내기로 했습니다. 

(저희는 이미지파일만을 또 추출하여 서버에 전송하기 때문에 가능한 방법이었습니다!! 잘 알아보셔야 합니다)

 

/**
     * content 영역의 img 태그들을 모두 가져와서 src를 image_${index + 1}로 변경하는 작업 
     */
    let newContent =  '';
    const quillEditor = quillRef.current?.getEditor();
    if (quillEditor) {
      // 에디터의 내용을 복사하여 수정
      const clonedEditor = quillEditor.root.cloneNode(true) as HTMLElement;
      const imgTags = clonedEditor.querySelectorAll('img'); // img 태그들을 모두 가져옴
  
      Array.from(imgTags).forEach((img, index) => {
        // img 태그의 src를 순서대로 image_1, image_2로 변경
        const newSrc = `image_${index + 1}`;
        img.src = newSrc;
      });
  
      // 변경된 content를 다시 업데이트
      newContent = clonedEditor.innerHTML;
      console.log('변경된 content:', quillEditor.root.innerHTML);
    }

 

1.

ReactQuill의 ref인 quillRef 를 참조하여,  quillEditor 변수에 담아줍니다.

 

2. quillEditor를 그대로 사용하면, 이미지 태그의 src 를 변경하고 깨지게 보입니다. 따라서 clonedEditor 변수에 cloneNode 를 해줍니다.

[cloneNode]
전체 노드 트리 복사 (cloneNode(true))
이 옵션을 사용하면 선택한 요소와 그 안에 포함된 모든 자식 요소까지 복사됩니다.

 

3. clonedEditor.querySelectorAll('img') 를 통해 이미지 태그들을 모두 담습니다.

4. 순회하면서, img.src 에 변경할 값을 넣어줍니다. 

5. 이렇게 하면, 서버에는 newContent 를 보내고, 실제 화면에는 ReactQuill 원래 값을 그대로 보여줄 수 있습니다.