8월 2주차 회고

이번주는 여행가기전에 마무리하지 못했던 이미지 업로드 기능을 다시 구현하는 주가 되었다.

클라이언트가 업로드하고자 하는 이미지를 axios post요청으로 보낸 다음 백엔드에서 이미지를 저장하고 그 이미지는 다시 프로필 페이지에서 볼 수 있게 만드는 것이 목표였다.

이 과정에서 formdata, content-type, multipart의 개념을 알게 되었고

node.js multer라는 모듈, express static 정적 파일 불러오기, ‘boundary not found’오류, src 파일 경로 오류 등 많은 것을 경험해보게 되는 계기 되었다.

프로필 사진을 업로드하는 과정

구현한 코드의 흐름을 간단하게 흩어보자면 다음과 같다.

<프론트>

• 업로드하려는 이미지 파일을 state에 저장한 뒤에 FormData를 사용하여 append(key,value)값으로 담음
• 그리고 axios post요청을 보낼때 이미지 데이터값을 담고 타입도 multipart/form-data으로 명시해줘서 보냄

<백>

• 이미지 파일 자체를 DB에 저장하는 것은 비효율적이기 때문에 multer를 사용해서 이미지는 다른곳에 저장한 다음, 이미지가 저장되어 있는 경로만 DB에 저장함.(주의. multer는 multipart/form-data형식에서만 작동한다고 함)
• 업로드 버튼을 클릭하게 되면 upload API가 실행되고 user DB에 사용자 profile 정보가 새로 업로드 된 이미지 경로로 update됨.
• (백)getUsers API로 user DB의 사용자 정보를 보내주어/(프론트) 클라이언트에서 리로드 될때마다 사용자 정보(이메일,프로필 이미지만 사용)를 가지고 와서 프로필 페이지에서 보여줌.

<aside> 💡 그럼 좀 더 자세히 코드를 살펴보자!

</aside>

1️⃣ input 태그 생성 후 이미지 가져오기

• onChange로 업로드하려는 파일 정보 가져오기(useState 사용, state저장)