[Trend-Now] Quill 라이브러리 Blob 형식 추가 및 제출시 Blob URL → S3 URL로 교체

강수영·2025년 9월 21일
Trend-Now
0

Quill 에디터(편집 에디터)에서 이미지 업로드 시, 네트워크가 느릴 경우 S3 업로드가 지연되어 글쓰기 과정에 불편함이 발생할 것이라고 판단했습니다. 이를 해결하기 위해, 먼저 업로드된 이미지를 Blob URL로 변환하여 즉각적인 미리보기를 제공하고, 사용자가 최종 제출을 할 때 Blob URL → S3 URL로 교체하자고 합니다.

커스터마이징을 통한 Blob 형식 지원

Quill 편집기에서 업로드된 이미지를 Blob URL로 표시하는 과정에서, 이미지가 렌더링되지 않는 문제가 발생했습니다.

Quill 라이브러리의 공식 GitHub을 확인한 결과, Blob 형식은 기본적으로 지원하지 않아 별도의 커스터마이징이 필요하다는 것을 알 수 있었습니다.

https://github.com/slab/quill/pull/4208

다음 GitHub 이슈를 참고하여, Blob 형식을 지원하도록 직접 기능을 커스터마이징했습니다.

// customImageBlot.ts

class MyImage extends Image {
  static sanitize(url: string) {
    return sanitize(url, ['http', 'https', 'data', 'blob']) ? url : '//:0';
  }
}

Quill.register('formats/image', MyImage);

Blob과 S3를 연동한 이미지 처리 아키텍처

이미지 업로드부터 Blob URL을 S3 URL로 교체하기까지의 전체 구조는 다음과 같습니다.

  1. 파일 선택시 img에 Blob URL, temp-id 추가 → 미리보기 지원
    1.1. temp-id 키 기반 이미지 상태 저장
  2. S3 업로드
  3. 성공시 : uploadByTempId(객체)에 URL, id 값 업데이트
    실패시 : img 태그 삭제
  4. 제출시 전체 데이터(Delta)를 순회해 temp-id 기반으로 Blob → S3 URL 교체

출처

profile
강수영
프론트엔드 개발자
이전 포스트

[Trend-Now] Custom Blot으로 img Blot에 id 속성 추가하기(Quill 라이브러리)

다음 포스트

[SoundLink] SSE 연결, 싱글톤 패턴으로 관리하기

0개의 댓글