🖼️ 이미지 업로드 프로세스

---

이미지의 업로드 과정은 어떻게 되는 것일까?

이미지는 놀랍게도 실제로 DB에 넣지 않고 이미지를 다운받을수 있는 URL을 넣는다고 한다.

그럼 실제 이미지는어떻게 되는 것일까? 실제 이미지는 그저 다른 컴퓨터에 저장된다고 한다. 이미지의 용량은 굉장히 커서 실제 이미지를 저장하는 컴퓨터 역시 사이즈가 매우 커야한다고 한다.

🐬️ 이미지를 DB에 안넣으면?

---

이미지를 DB에 직접 넣지 않는 이유는 위에서 언급했듯 용량이 매우 커서다.

DB에는 각각의 타입이 있는데 이때 이미지는 실제 이미지가 아닌 주소를 넣게된다. 주소는 string타입이고 실제 이미지는 타입이 또 다른데 이때 데이터의 사이즈가 굉장히 커지기 때문에 가능한 다른 곳에 저장하고, DB에는 주소만을 넣는 방식을 쓴다고 한다.

🐋️ 이미지 업로드 과정

---

이미지는 주소를 활용해 DB에 저장한다고 하는데 이제 과정을 알아보도록 하자!

1. BE에 파일 업로드 API를 만든다
2. 브라우저에 파일 태그인 를 만든다
3. 파일 태그를 통해 파일을 선택하면 파일 객체가 들어오고, 그 객체를 state나 변수에 저장할 수 있다
4. 파일을 BE API에 보내면 BE에서 스토리지로 파일을 전송한다
5. 스토리지에서 파일을 저장해주고 다시 이미지 주소를 응답해준다
6. BE가 그 주소를 받아서 다시 프론트에 돌려준다
7. 생성 API에 이미지 주소를 넘기고 DB에는 이미지 주소를 등록하고, GET하면 이미지 주소를 받아와서 화면에 뿌려준다

🐬️ 이미지를 업로드해보자

---

▶ HTML - Form 태그를 이용한 방법

1. input을 통해 업로드할 파일을 불러온다

<input type="file" name="file" id="imageFileOpenInput" accept="image/*">
<!--						↑ 서버에서 받게될 값				↑ 전송 가능한 파일타입 지정 -->

2. form 태그를 이용해 파일을 서버에 전송한다.

<form method="post" action="upload" enctype="multipart/form-data">
<!-- 	↑ 서버와의 요청방식	↑ 폼데이터를 전송할 경로 설정			    -->
<!-- 							encytpe = ↑ 폼 데이터가 서버로 전송될때 해당 데이터를 인코딩 할 방식-->
  <div>
    file : <input type="file" name="file" accept="image/*">
  </div>
  <input type="submit">
</form>

▶ JS를 이용한 방법

const elImage = document.querySelector("#reviewImageFileOpenInput");
elImage.addEventListener("change", (evt) => {
  const image = evt.target.files[0];
  if(!validImageType(image)) { 
    console.warn("invalide image file type");
    return;
  }
});
function valideImageType(image) {
  const result = ([ 'image/jpeg',
                    'image/png',
                    'image/jpg' ].indexOf(image.type) > -1);
  return result;
}

---

참고자료
https://velog.io/@e_juhee/image-upload-vh6q5tj6
https://velog.io/@choral/%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C