image upload process

이미지 업로드 과정

실제 이미지는 다른곳에 저장하고, 주소를 활용한다.

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. createBoard API에 writer, title, contents, image 주소를 넘긴다.
   DB에 이미지 주소를 등록하고, fetchBaord하면 마찬가지로 image 주소를 받아와서 화면에 보여준다.

image를 DB에 직접 넣지 않는 이유

데이터베이스는 각각의 타입이 있는데,(text, integer...)
이미지 주소가 문자열로 들어가면 blob이라는 다른 타입이 된다.
blob은 0, 1로 구성된 이진 데이터이고, 사진은 픽셀단위로 되어있어 사이즈가 너무 크다 -> 효율적이지 않기 때문에 데이터베이스에 이미지를 저장하지 않음.