Image upload Process

이미지 업로드 과정은 회사나 어떤 서비스를 이용하냐에 따라 달라질 수 있기 때문에 수업시간 때 실습한 내용을 바탕으로 복습하는 차원에서 정리 해볼려고 한다.

1. 브라우저에서 업로드할 이미지 파일을 선택

2. 브라우저에서 선택된 파일을 변수에 저장

변수에 담을 내용은 이렇게 생겼으며
<input type ="file" />
파일에 대한 정보를 담고 있다.

이렇게 지정해준 태그는 파일이 선택될 때 객체화 되서 들어오게 되고 그 객체가 특정 변수에 저장되는 방식으로 진행된다.

3. 브라우저에서 파일 객체를 백엔드 서버에 업로드 요청 한다.
   이 과정까지 진행 하기 위해서는 사전에 미리 백엔드 서버에 파일을 업로드하는 API를 만들어 둬야 한다.

물론 이 때 이미지 파일을 DB에 저장하는 API도 만들 수 있으나, 이미지 파일 특성상 파일 하나하나가 큰 용량을 차지 할 수 있기 때문에 이와 같은 방식은 비효율적이다.
그러므로

4. 브라우저에서 백엔드 서버로 API 요청을 보내게 되면 백엔드 서버에서 다시 Storage로 파일을 전송하는 로직을 짜준다.

5.그렇게 되면 Storage에서는 건내받은 파일을 저장한다.

6. 이후 Storage에서는 파일을 저장한 후 사진을 다운로드 할 수 있는 주소를 반환해준다.

7.추가적으로 이미지 주소와 이미지에 대한 정보를 전달해주는 API를 백엔드 서버에 만들어준다.

8. 결과적으로 DB에는 이미지 주소만 등록 시키고(언제든지 꺼내 쓸 수 있도록) 클라이언트 요청 시에는 DB에서 다운받아진 이미지를 가져오는 것이 아닌 이미지 주소만 받아와서 띄워준다.
   (그렇기 때문에 웹사이트에 새로고침을 누르거나 특정 사이트에 가면 이미지가 가장 마지막에 띄워지는 현상을 목격할 수 있다.)