[Cs] 파일 업로드에 대해 자세히 알아보자

     

목차

 

 

전통적 이미지 업로드 방식

• 제목, 내용, 이미지를 모두 선택한 다음 정보를 한번에 서버로 업로드한다.
• 단순 텍스트는 크기가 작기 때문에 업로드 속도가 빠르지만 파일은 업로드가 오래 걸릴 수 있다.
• 업로드 버튼을 누른 뒤에 제목, 내용, 이미지를 서버로 업로드하면 사용자는 프로그램이 느리다는
  인상을 받을 수 있다.
• 특히나 한번에 여러개의 이미지를 업로드하는 기획이라면 업로드 버튼을 누른 후 업로드가 끝날 때까지
  사용자가 오랜 시간을 기다려야 할 수 있다.

 

 

 

현대적 이미지 업로드 방식

• 업로드 버튼을 누르는 순간 한번에 포스트를 업로드 하는게 아니라 이미지를 선택할 때마다 이미지는
  먼저 업로드를 진행한다.
• 업로드된 이미지들은 '임시' 폴더에 잠시 저장해둔다.
• 이미지 업로드를 한 후 응답받은 이미지의 경로만 저장 해둔 후 포스트를 업로드 할 때 이미지의 경로만
  추가 해준다.
• POST/posts 엔드포인트에 이미지 경로를 함께 보낼 경우 해당 이미지를 임시 폴더에서 부터
  포스트 폴더로 이동시킨다.
• PostEntity의 image 필드에 경로를 추가해준다.
• S3 presigned url을 사용하면 많이 사용되는 방식이다.

 

	기존 방식	신규 방식
체감 속도	이미지가 업로드되는 시간을 사용자가 처음부터 끝까지 기다리기 때문에 체감 시간이 길다.	이미지를 선택하자마자 먼저 업로드를 진행하기 때문에 속도감이 좋다. 특히나 인스타 처럼 이미지를 먼저 선택하는 UI를 만든다면 글을 작성하는 동안 이미지 업로드를 진행할 수 있다.
서버 과부하	사용자가 실제 포스팅 버튼을 눌렀을때만 요청이 보내지기 때문에 포스트 하나당 한번의 요청만 보내진다.	이미지를 선택할때마다 업로드를 진행하기 때문에 더욱 많은 요청을 받게 된다. 특히나 이미지를 선택한 후 삭제해서 실제 포스트에 포함하지 않을 경우 서버 리소스만 낭비한다.
엔드 포인트 관리	파일을 업로드 해야하는 엔드포인트가 생길때마다 파일 업로드 관련 multer 세팅을 계속 해주어야 한다.	공통된 이미지 업로드 엔드포인트를 하나 만들어서 모든 이미지 업로드를 한번에 관리 할 수 있다.
파일 관리	실제 포스팅 버튼을 눌렀을 때만 파일이 업로드 되기 때문에 잉여 파일이 생길 가능성이 적다.	이미지를 선택하면 바로 업로드를 진행하기 때문에 선택한 이미지를 삭제하거나 변경하면 잉여 파일이 생긴다. 잉여 파일들은 주기적으로 삭제 해주어야 한다.

 

S3 PreSigned Url이란?

일반적으로 S3를 사용하는 웹 어플리케이션들은 아래와 같은 방식으로 파일을 업로드, 다운로드하였다.

(multipart/form-data를 통한 파일 업로드 프로세스)

이 때 1번 과정에서 용량이 큰 파일을 보내게 된다면 이는 성능에 악영향을 미친다. (서버의 자원을 많이 사용하기도 하고, HTTP에서 큰 파일을 여러 번의 작은 요청으로 분할하여 보내게 되어 성능이 좋지않다.) (자세히는 스프링, 이미지 처리하는 MutlifileResolver은 기본적으로 10240byte까지 메모리에, 그 이후부터 임시 파일에 저장한다. 이 때 메모리에 저장되는 10MB는 엄청 크다..)

 

 

이러한 성능 문제를 해결하기 위해 S3에서 제공하는 방법이 PreSigned Url이다.

PreSigned Url은 말 그대로 미리 서명한 Url이라는 뜻이다. S3의 소유자가 미리 특정 권한(파일 업로드, 파일 다운로드 등)에 대해 서명을 해준 뒤 사용자에게 해당 Url을 제공해준다. 사용자는 서명된 권한을 사용할 수 있다. 소유자가 여러 정보에 대해 미리 서명을 해두고, 사용자가 추후에 전달받아 사용한다는 점에서 수표와 비슷하다.

PreSigned Url을 사용하게 된다면, 클라이언트가 서버에 거치지 않고 파일을 저장소에 직접 업로드할 수 있어, 서버의 자원을 절약할 수 있다.

 

 

동작 과정은 아래와 같다.

(PreSigned Url을 통한 파일 업로드 프로세스)

위와 같이 동작하며, 6번 이후 동작과정은 기존과 동일하게, API의 요청에 여러 데이터와 함께 파일 저장 경로를 넘겨주면 된다.