- 사진 목록 편집 시, 기존에 존재하던 목록의 파일들은 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 모두에서 파일이 제거가 잘 되어 사진을 교체하는 것이 가능하도록 구현했다.