이미지 미리 보기 시에는 원본 이미지를 보여주고, 이미지를 저장한 후에는 리사이징된 이미지를 보여주도록 수정했습니다. 이미지 업로드와 이미지 리사이징 간의 시간차가 있으므로 이미지가 보이지 않을 수도 있는데, 그 문제를 해결하기 위한 방법입니다.

npm run dev로 서버를 실행한 뒤 http://localhost:8001에 접속합니다. 로그인 후 이미지를 업로드합니다.

이미지가 S3에 업로드된 후 람다 트리거에 따라 람다 함수가 실행됩니다. 따라서 이미지 리사이징도 자동으로 이뤄집니다.

결과 화면은 다음과 같습니다.

▲ 그림 16-21 이미지가 리사이징된 모습

▲ 그림 16-22 thumb 폴더에 리사이징된 이미지가 저장된 모습