img, comment를 서버에 전송하기

강지원·2021년 12월 7일

원래는 댓글 기능과 좋아요 기능, 모달 관련 기능을 구현하려고
계획하고 있었다.
하지만 멘토님이 언제든 할 수 있는 기능보단 구현해 보지 않은
'서버로 이미지를 보내는 기능'을 구현해보는 것이
어떻겠냐는 의견을 주셨다.

1. 이미지 불러오기

input의 type으로 file을 선택해주면
파일을 불러올 수 있는 버튼이 생성된다.

이 때, input의 accept라는 속성에 "image/*" 이라고 표기해줘야
모든 img파일을 불러올 수 있다.

또한, input 태그 뒤에 multiple을 붙이면
여러 개의 img 파일을 불러올 수 있다.
하지만 나는 파일이 하나만 있어도 되기 때문에 multiple 속성을
사용하지 않았다.

데이터를 불러오기만 한다고 해서 끝이 아니다.
내가 불러온 img 데이터를 어딘가에 가지고 있어야 웹페이지에
렌더링 시킬 수 있다.

이미지 데이터를 저장할 imgFiles,setImgFiles라는
state 코드를 만들고 UploadFile이라는 함수를 이용해
state에 img 데이터를 넣어줬다.

현재 저장된 이미지를 보여주기 위해선 img 태그에 넣어
보여줘야 한다.
이 때 사용할 수 있는 것이

URL.createObjectURL()

URL.createObjectURL() 정적 메서드는 주어진 객체를 가리키는 URL을 DOMString으로 반환한다는 MDN의 글.

console.log 결과로 img의 주소가 나오는데, 미리보기로 보여 줄 태그의
src 속성에 URL.createObjectURL()메서드를 사용해
불러온 이미지를 보여줄 수 있었다.

받아온 이미지를 서버로 전송하기 위해선 FormData라는 객체에
append를 통해 전송해야됐다.

FormData.append를 사용해 key와 value로 FormData에 저장했고,
저장한 FormData를 fetch의 body에 넣어 서버로 전송해줬다.

1) 미리보기로 보이는 img를 제거하는 것.
URL.revokeObjectURL(imgFiles); 코드를 사용해
추가한 미리보기 이미지를 제거해줄 수 있다.

2) 디자인
img와 comment가 보기 좋게 묶여있는 모습을 보여주고 싶었지만
마감일이 되어서야 기능 구현에 성공해 디자인에 손대지 못했다.
너무나 아쉽다..

'Why' better than 'Yes'