Image upload Process

우리는 브라우저에서 사용자가 이미지를 업로드 시키기 위해 API를 제작해야 된다.

백엔드 서버에서는 API를 통해 받은 파일을 DB에 저장시 BLOB 타입으로 저장하게 된다.

하지만 파일이 큰 용량을 차지하기 때문에 DB에 모두 저장하는 것을 비효율적이다.

그래서 이미지 파일을

Storage service

를 이용해서 저장한다.

Storage service를 제공하는 대표적인 회사로 AWS, GCP, Azure가 있다.

이 것들을 Cloud provider라고 한다.

이미지 파일이 Storage에 저장되는 과정

1. 브라우저에서 파일 첨부 후 파일 업로드 API를 요청하면 Storage에 파일을 저장한다.

2. Storage에서는 파일을 저장한 결과로 사진을 다운로드 할 수 있는 주소를 반환

3. 백엔드에서는 반환된 주소를 브라우저에 보내준다.

4. 브라우저에서 게시글을 작성하게 되면 title,content,업로드한 파일의 url을 포함해서 게시물 등록 API를 요청한다.

5. 요청된 API를 통해 DB에 저장이 되며 테이블 구조에 따라 게시글 테이블에 함께 저장되거나 이미지는 이미지 테이블에 따로 저장되는 구조를 가진다.

화면에 이미지 파일이 보이는 과정

1. 브라우저에 주소를 입력하고 접속하면 프론트 서버에서는 html,css,js를 보내준다.

2. 브라우저에서는 html 코드를 실행시켜 화면에 그려주게 된다.
   이 때 이미지 주소를 담고 있는 img태그는 단순 문자열로 되어 있으며 실제로 실행되는 것은 브라우저에 화면이 그려지고 나서 이미지 주소에 2차적으로 재요청을 하게 된다.

3. 재요청을 통해 사진 저장소(Storage 등) 에서 사진을 다운 받은 후 화면에 나타나기 때문에 사진이 화면에 보여지는 과정은 다른 요소들보다 시간이 걸린다.