오늘 진행한 일
- 공지사항 리스트 목업 (완료)
- 프로그램 작성 페이지 (지역 ⇒ 인풋 셀렉트 완료)
- 프로그램 등록 기능 틀 (완료)
내일 진행해야하는 일
- 프로그램 등록 기능 API 요청 테스트
- 회원 정보 수정 기능구현 (프로필 사진, 닉네임 변경, 자기소개)
진행하면서 어려웠던 점과 회고
어제 블로깅 했듯 오늘은 프로그램 작성에 대한 인풋데이터를 어떻게 multipart/form-data로 api서버에 보내느냐가 문제였습니다.
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData();
formData.append('title', title);
formData.append('text', text);
formData.append('numOfRecruits', numOfRecruits);
formData.append('location', location);
formData.append('programDate', programDate);
formData.append('picture', picture);
for (let values of formData.values()) {
console.log(values); // formData 객체의 정보 확인하는 법
}
// axios({
// method: 'post',
// url: URL,
// headers: {"Content-Type": "multipart/form-data"},
// data: formData
// }); 통신을 내일 해볼 것
};일단 처음에 formData를 선언하고 formData에 onChange이벤트로 얻은 value를 append해줬습니다.
그런데 이 때 문제가 발생했습니다. 타입스크립트에서 formData에 append할 때 숫자데이터는 거부한다는 것이었습니다.
그래서 백엔드와의 협의를 통해 input type num에서 오는 숫자를 문자열 처리 해준다음 POST하기로 했습니다.
그 뒤 문자열처리를 하고 console.log(formData)를 찍어봤지만 console엔 빈객체와 객체의 프로토타입만 나왔습니다.
그래서 구글링을 해봤고 formData 객체의 정보는 아래 반복문을 통해 확인을 할 수 있었습니다.
(몰라서 title값 text값 등을 하나하나 콘솔 찍어보는 삽질을 했습니다...)
// tsconfig.json
{
"compilerOptions": {
"downlevelIteration": true,
// for/of나 Array Spread 연산자를 사용하면 변환하는 코드가 너무 방대해지기 때문에 downlevelIteration 옵션을 설정할 수 있도록 하고 기본 값은 false로 설정하여 가장 기본적인 Array 타입만을 사용하게 해서 변환되는 코드량을 줄이기 위한 것이다.
},
}
// program.tsx
for (let values of formData.values()) {
console.log(values); // formData 객체의 정보 확인하는 법
}내일은 이 formData로 api 통신을 진행할 예정입니다.
무탈하게 잘 진행됐으면 좋겠지만 formData처리 시간이 많이 걸렸지만 포기하지 않은 것처럼 끝까지 나아가 보겠습니다!
레퍼런스
