(항해72일차) 220516 리액트 실전프로젝트 25일차

프로필 사진으로 쓰일 파일을 받기 위해 서버에 보내는 데이터의 형태를 폼데이터객체로 변경했다. 

기존에는 제이슨 구조로 데이터를 보냈으나, 몇 가지 이유가 있어 폼데이터객체를 사용하게 되었다.

1. 폼데이터는 폼 안의 모든 데이터를 스트링으로 변환할 필요 없이 인코드할 수 있다.

2. 서버에서 별도의 과정없이 데이터를 받을 수 있다.

3. 폼데이터를 사용하지 않고 이미지파일을 dataURL로 변형해서 보낼 수 있지만, 훨씬 길어지고 오류가 발생할 수 있다.

 

다만 폼데이터객체로 서버와 통신할 때는 get, post 로만 요청할 수 있다는 단점이 존재했다.

이후 프로필을 수정하기 위해서는 삭제요청 후 다시 다른 파일을 업로드하는 방식으로 구현해야 할 듯 하다.

폼데이터에 전송할 데이터를 추가할 때는 .append('키', '밸류')를 사용한다. 파일이든 스트링이든 모두 같은 방식이다.

서버에 요청할 때에도 Content-Type을 반드시 Multipart/form-data 로 명시해야 한다.

두 종류의 데이터(스트링/파일)가 한 번에 전송되기 때문에 알려주는 것이다.

제이슨 타입에 비해 콘솔로 데이터를 확인하기 어려운 점도 불편하다. 

약간의 차이를 제외한 전체적인 과정은 제이슨타입과 폼데이터객체가 거의 유사했다.

 

내일은 마이페이지를 비롯한 전체적인 뷰작업을 마치고, 마이페이지에서 회원정보 수정에 사용할 모달을 만들 계획이다.

 

오늘 진행한 내용: 프로필사진 업로드, 로그아웃 기능, 유저정보 데이터 받는 방식 폼데이터로 변경, 디자인회의

내일 진행할 부분: 마이페이지 뷰 완성, 마이페이지 모달 창 만들기

---

 

https://ko.javascript.info/formdata

FormData 객체

https://stackoverflow.com/questions/63347427/why-would-you-use-formdata-over-json-in-sending-post-requests

Why would you use FormData over JSON in sending POST requests?

https://velog.io/@ryan-son/multipartform-data-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-vs-applicationjson

multipart/form-data 알아보기 (vs application/json)