이번 프로젝트에서 이미지 파일을 저장하는데 multer라이브러리와 aws의 s3 bucket을 사용하게 되었는데, multer의 사용방법과 s3 저장소 사용 방법은 널리 알려진 예제와 블로그가 많아서 formdata 형태의 정보를 받아와서 저장하는데 불편함은 없었다.
multer의 파일 업로드 방식은 미들웨어로 요청이 라우터를 지나올때 다른 미들웨어 처럼 먼저 거쳐가면서 들어온 파일을 s3저장소에 먼저 업로드하고 연결된 라우터경로의 함수를 실행하게 된다.
이 부분을 크게 신경쓰지 않고 그냥 일반 body의 input String 데이터처럼 그냥 들어오면 DB처럼 저장하는거지 라고 가볍게 생각하고 진행했고, VSC의 확장 프로그램(Thunder Client)으로 게시글을 생성할 때 formdata로 받으면서 하나하나 들어온 데이터를 validation 하면서 유효성검사나 try, catch문의 오류가 잘 잡히는지 이것 저것 실험해 보면서 진행했다.
이렇게 진행하고 DB를 확인했을때 실제로 잘 들어가가 validation에 맞게 넣은 데이터 row는 3개! 워크벤치 테이블에 3개의 데이터만 들어와 있었다. 여기까진 이해가 됬는데, s3저장소에 가서 들어간 내용을 확인하니 이미지가 대략30개가량 들어와 있었다.
내가 데이터의 플로우를 생각하지 않고 작성해서 발생한 일이었다.
유저(클라이언트)의 inputdata > 프톤트엔드(form데이터) > 라우터경로의 multer middleware(이미지 업로드) > 경로내의 다음 실행할 내용(게시글 작성 메소드) > 에러 발생시 DB에 저장하지 않고 catch에서 res를 보내줌
위와 같은 과정으로 진행되다 보니 이미 이미지는 업로드 되었지만, DB에는 존재하지 않는 이미지가 S3저장소의 공간만 차지하게되는 격이 되어 문제를 인지하게 되었다.
catch문으로 돌아 나올때 res.flie이 있다면 s3저장소에 방금 들어온 그 이미지를 지우는 로직을 추가해서 해결하였다.
기술적인 부분은 아니었지만, 예외처리에 있어서 데이터의 흐름과 생각하지 못한 예외를 계속 찾아보면서 처리해야 됨을 좀 더 상기하게 되었다.
