Image upload Process

실제 이미지는 Storage에 저장하고 주소를 활용해 처리한다.

이미지 업로드 과정은 어떻게 이루어지는가?

1. 백엔드에 파일을 업로드하는 API를 만든다.
2. 브라우저에 파일 태그인 <input type = 'file'/>을 만든다.
3. 2의 태그를 통해 파일을 선택하면 파일 객체가 들어오고 그 객체를 state나 변수에 저장할 수 있다.
4. 파일을 uploadFile API에 보내면 백엔드에서 Storage로 파일을 전송한다.
5. Storage에서는 파일을 저장해 주고 그 파일을 다운받을 수 있는 주소를 준다.
6. 백엔드가 그 주소를 받아서 다시 프론트에게 돌려 준다. 전달받은 주소를 img 태그 등에 사용하면 실제로 브라우저에서 해당 이미지를 볼 수 있게 된다.
7. API에 image 주소와 이미지에 대한 각종 정보 (writer, title, contents etc)를 넘긴다. DB에 이미지 주소를 등록하고 클라이언트 요청 시 image 주소를 받아와서 화면에 보여 준다.