문제 상황

1. 팀원의 제보

Screenshot 2024-01-15 at 1.28.26 PM.png

특정 기기에서만 발생하는 이슈이다. 확인을 해보자.

2. PC에서 테스트

Screenshot 2024-01-15 at 1.41.42 PM.png

용량이 조금만 커지면 용량을 초과했다며 413에러가 발생하며 에러를 출력한다.

현재 이미지 업로드 방식은 다음과 같다.

  1. 브라우저 → 백엔드 서버에 이미지 전송
  2. 백엔드 서버 → AWS S3에 이미지 업로드
  3. 백엔드 서버 → 브라우저에 AWS로부터 받은 이미지 URL 전달

1~3 과정동안은 사용자에게 base64로 변환한 이미지를 사용자에게 보여준다. 이 때, 1~3번 과정의 시간도 단축시키면 좋지 않을까?

단순히 이미지 url을 받아오기 위한 방식이라면, 브라우저에서 S3에 다이렉트로 업로드하여 url을 받아오는 방식이 더 빠르지 않을까?

해결 방법은 다음과 같다.

  1. 백엔드 서버가 아니라 직접 S3에 이미지를 업로드하여 이미지 url을 받아온다.
  2. 이미지의 용량을 브라우저에서 직접 줄여서 백엔드 서버에 전송한다.

백엔드 팀에서 이미지 업로드 용량에 제한을 둔 것은 이유가 있을 것이다. 이에 대해 우선 백엔드 팀에 물어보았다. 그리고 이미지 용량을 무한대로 업로드하게 할 수도 없는 격이다.