CK 에디터 이미지 DB, S3에 저장시키기

문제

CK에디터 에서 이미지 업로드시 게시판이 저장되지 않는 상태에서

어떻게 그 이미지가 해당 게시판인지를 알게할 것인가?

 

우리가 학원에서 배운건 Input에 file을 이용해 첨부하고

게시판 상세보기를 할 때 이미지를 보여주는 방식이였다.

 

하지만 CK 에디터에서 이미지 업로드시 이미지가 먼저 보여야 하기 때문에 이걸 게시판이 저장되지 않은

상태에서 어떤 게시판인지 서로 매칭 시켜줘야 하는 문제가 생겼다.

---

해결 방법

우선 이미지 자체가 보여야 했기에 DB와 S3에 저장시키기로 했다. 

 

우선 DB를 구축할 때 우리는 그 게시판과 이미지를 어떻게 매칭시킬 건지 고민 했다.

 

uuid로 고유의 값을 부여해 게시판과 이미지를 서로 매칭하게끔 시도 했다. (추후 설명)

 

그리고 게시판 번호는 일단 0번으로 기본값을 설정 후 저장시켰다.

DB 구조

DB 실제 저장된 데이터

 

S3는 FileSever 디렉토리를 만들고 그냥 바로 uuid로 저장되게끔 설정했다.

 

이미지를 CK에디터에 올리자마자 axios로 저장시킴과 동시에 uuid 발급받아서 DB와 S3에 저장시키고 

 

uri에 uuid를 넣어서 응답해 이미지 uri를 설정

 

응답받은 uuid 넣어주기

---

또 다른 문제

여기서 문제가 발생했다. 

 

만약 작성자가 이미지가 마음에 안들어서 중간에 있는걸 몇 개 삭제 했다고 치면 

 

실제 저장될 이미지의 uuid를 어떻게 알것인가? 이게 문제였다.

 

---

발상의 전환

여기서 F12 관리자 메뉴를 통해 이미지가 어떻게 생성됐는지를 보았다.

 

CK는 이미지가 업로드되면 방식이 똑같았다

 

세부코드

<figure className="image ck-widget ck-widget_selected" contentEditable="false">
          <img
            src="https://mybucketcontainer1133557799.s3.ap-northeast-2.amazonaws.com/fileserver/018b5096-392b-4f84-872f-44113aad24d7/스크린샷 2023-12-26 174520.png"
            style="aspect-ratio:800/799;" width="800" height="799">
            <div className="ck ck-reset_all ck-widget__type-around">
              <div className="ck ck-widget__type-around__button ck-widget__type-around__button_before"
                   title="Insert paragraph before block" aria-hidden="true">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8">
                  <path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038">
                  </path>
                </svg>
              </div>
              <div className="ck ck-widget__type-around__button ck-widget__type-around__button_after"
                   title="Insert paragraph after block" aria-hidden="true">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8">
                  <path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path>
                </svg>
              </div>
              <div class="ck ck-widget__type-around__fake-caret">
              </div>
            </div>
        </figure>

 

우리는 저기서 몇 가지 단서를 얻을 수 있었다.

 

figure 태그명, 클래스 명, 우리가 부여한 uuid 

 

이 세가지 단서를 통해 실제 저장될 이미지의 uuid를 추출하기로 했다.

 

참고로 이미지를 삭제하게 되면 저 태그자체가 사라진다.

 

글쓰기 버튼이 작동 될 때 클래스 명 기준으로 현재 image 로 시작하는 클래스명에 있는 img uri의 uuid를 

 

모두 정규식으로 추출해 배열에 담고 그걸 서버에 보내줬다.

 

해결 완료

 

그래서 실제 글쓰기 해서 저장 시킬 때 게시판 먼저 저장시키고

 

게시판이 저장되어 게시판번호가 부여되면 게시판 번호를 파라미터로 넘겨주고 반복문을 통해

 

배열로 넘어온 uuid를 조건문으로 설정하고 게시판번호를 UPDATE 시켜 줬다.

글쓰기 저장 버튼 클릭시 실제 저장할 이미지들이 필터링 되고 게시판 번호랑 매칭됨 (Service)

실제 저장할 이미지에게 게시판번호 UPDATE해서 부여 (Mapper)

 

그리고 저장이 다 끝난 코드 맨 뒤에 게시판번호가 0인 애들은 삭제 되게 처리 했다.

 

우린 미처 알지 못했다..

여러명이 동시에 작성중하고 누군가 먼저 글쓰기를 누르면

작성중인 사람의 이미지는 삭제가 된다는걸.....

 

자! 즉흥적으로 해결방법을 생각해보자

1. 저장할 때 실제 있는 uuid만 아니라 처음에 업로드 될 때 uuid와 실제 저장할 때

   uuid를 모두 서버로 보내서 있는 애들만 업데이트 시키고 없는 애들은 DB에서 uuid 기준으로 삭제

 

2. 1~2시간전의 0으로 남아있는 애들만 삭제

 

지금 생각나는게 두 가지 인데 1번 방법으로 처리할 수 있을 거 같다.