✅ 이미지 업로드 과정
실제 이미지는 Storage에 저장하고, 주소를 활용해 처리합니다.
1. Back-end에 파일을 업로드하는 API를 만듭니다. ex)uploadFile API
2. 브라우저에 파일 태그인 <input type="file"/>를 만듭니다.
3. 2의 태그를 통해 파일을 선택하면 파일 객체가 들어오고, 그 객체를 state나 변수에 저장할 수 있습니다.
4. 파일을 uploadFile API에 보내면 Back-end에서 Storage로 파일을 전송합니다.
5. Storage에서는 파일을 저장해주고 그 파일을 다운받을 수 있는 주소를 줍니다.
6. Back-end가 그 주소를 받아서 다시 프론트에 돌려줍니다.
전달받은 주소를 img 태그 등에 사용하면 실제로 브라우저에서 해당 이미지를 볼 수 있게 됩니다.
7. API에 image 주소와 이미지에 대한 각종 정보(writer, title, contents 등)를 넘깁니다.
8. DB에 이미지 주소를 등록하고, 클라이언트 요청시 image 주소를 받아와서 화면에 보여줍니다.🗒 출처
- https://velog.io/@niceyoungrae/Image-upload-Process - Image upload Process | vlog
- 28일차 노션 강의 자료 참고 - codecamp
