게시물 편집 시, 사진 목록의 일부 또는 전체 삭제 기능을 구현하는 상황에서 겪은 어려움

JH.P·2022년 5월 24일
0
  • 사진 목록 편집 시, 기존에 존재하던 목록의 파일들은 S3에 업로드된 url였다.
  • 이 목록에 새로 추가할 파일들은 File 객체 형태였다.
  • 여기서 새로 추가할 파일들과 기존에 존재하던 파일들이 섞여있어서, 백엔드에 어떤 형식으로 보낼지 고민하였다.
  • 기존에 있던 파일들을 File 객체로 디코딩하는 방법을 고려해보았지만, 너무 일이 커질 것 같아 백엔드에서 처리하기로 결정하였다.
  • 우선 프론트엔드에서 백엔드로 보내지는 목록에는 기존 파일 url, 새로운 파일 객체 들이 섞여있다.
  • 그리고 프론트엔드에서 기존에 있던 파일들을 삭제할 경우, 따로 배열로 모아서 관리한다.
  • 백엔드에선 우선 파일 객체만을 조건문으로 걸러서 S3에 업로드한다.
  • 그리고 매개변수를 추가하였는데, 이 변수는 프론트엔드에서 삭제한 파일들을 모은 배열을 인자로 받는다.
  • 삭제한 파일들을 모은 배열들을 이용하여 해당 파일들을 S3에서 모두 제거한다.
  • 만약 업로드하기 위한 파일들을 모은 배열이 빈 배열이라면, S3에서 기존에 존재하던 파일들을 모두 제거한다.
  • S3에서 제거하고 난 뒤, 데이터베이스에서는 업로드 하기 위한 파일들이 모인 배열이 빈 배열일 경우, 기존의 파일들을 전부 제거하도록 한다.
  • 그 다음, 업로드 된 파일들의 길이가 0 이상이거나 삭제하기 위한 파일들이 모인 배열의 길이가 0 이상이면, 데이터베이스에서 삭제하기 위한 배열 내 파일들을 제거하고, 업로드 된 파일들을 데이터베이스 내 테이블로 생성한다.
...((fileUrl.length > 0 || deleteFromS3.length > 0) && {
    photos: {
    deleteMany: deleteFromS3,
    create: fileUrl,
   },
   }),

이렇게 작성하기 전,

...(deleteFromS3.length > 0) && {
    photos: {
    deleteMany: deleteFromS3,
   },
   }),
   ...(fileUrl.length > 0 ) && {
    photos: {
    create: fileUrl,
   },
   }),

기존에는 이렇게 작성했었는데, S3에서는 제거가 되지만 데이터베이스에서는 제거가 되지 않았다... 계속 고민하다가 첫번째와 같은 경우로 수정하니, 최종적으로는 S3, DB 모두에서 파일이 제거가 잘 되어 사진을 교체하는 것이 가능하도록 구현했다.

profile
꾸준한 기록

0개의 댓글