이미지 업로드

1. Image Upload Process(Brower -Frontend-Backend)

 

(1) 브라우저에서 사용자가 업로드할 이미지 파일 선택

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

(4) 브라우저에서는 파일 객체를 백엔드 서버에 업로드 요청을 함

(5) 백엔드 서버에서는 API를 통해 받은 파일을 DB에 저장 시 BLOB 타입으로 저장

(6) 파일은 큰 용량을 차지 하기 때문에 DB에 저장하지 않음 => Storage service를 제공하는 Cloud에 저장

 

2. Image Upload Process(Brower - Frontend-Backend -Cloud)

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

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

(3) 백엔드에서는 반환된 주소를 브라우저로 보냄

(4) 브라우저에서 게시글을 작서앟게 되면 title, content, 업로드한 파일의 URL를 포함해서 게시물 등록 API를 요청

(5) 요청된 API를 통해 DB에 저장이 되면 테이블 구조에 따라 게시글 테이블에 함께 저장되거나 이미지는 이미지 테이블에 따로 저장되는 구조

 

 

3. 화면에 이미지가 보여지는 프로세스

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

(2) 브라우저에서는 html를 코드를 실행하시켜 화면에 그려줌

(3) 이때 이미지 주소를 담고 있는 img 태그는 단순 문자열로 되어 있으며 실제로 실행되는 것은 브라우저에 화면이 그려지고 나서 이미지 주소에 2차적으로 재요청하게 됨

(4) 재용청을 통해 storage에서 사진을 다운받은 후 화면에 나타나기 때문에 다른 요소들보다 시간이 좀더 소요됨