Log 8/29

Dev log

개인 기술 발표를 준비했다. 주제는 이미지 업로드에 관한 주제로 준비했다. 프로젝트 때 구현했던 기술, 스택, 고민 들을 발표하는 영상을 만드는 것이다. 이미지 업로드에 대한 부분을 이미지 입력받기, 서버에 전송하기, 데이터베이스에 전송하기 이렇게 세단계로 나눠서 발표자료를 준비했다.

이미지 받아오기

클라이언트 에서는

<input
  type="file"
  accept="image/*"
  onchange={imgHandler}
/>

이렇게 input 엘리먼트를 지정해서 이미지 파일만 받게하고 사용자가 이미지를 선택하면 imgHandler가 실행되게 하는 부분이 클라이언트 단계다.

Server로 전송하기

imgHandler에 server로 이미지를 전송하는 업로드 함수를 구현해 놓으면 사용자가 이미지를 선택했을때 그 이미지를 서버에 업로드 할 수 있다. imgHandler에 서버로 업로드 하는 함수를 구현해보자

const imgHandler = async(e) => {
  const formData = new FormData();
  formData.append("file", "e.target.files[0]");