[Oil of Yats] formData를 활용한 이미지 및 데이터 전송

입점문의 내 모든 정보를 formdata로 보내기

2주차 초반, 스테이와 룸에 대한 정보들 객체에 담고 image 파일만 formData 형식에 담아 API에 보내는 것에 성공했다. 백엔드 로직에서도 데이터를 받아 데이터베이스 추가하는 것까지 완료했다.

이제, 이미지 이외의 다른 형식의 데이터들도 한꺼번에 formData안에 담아 보내는 로직을 구현해야했다.

처음엔 Input에 값이 입력되면 onChange 속성을 통해 값을 즉시 폼데이터에 업데이트하는 로직을 구현했다. 그러나, 룸 정보를 작성하는 과정에서 특정 Input이 formData에 저장되지 않는 오류가 발생했다.

⇒ 이 오류를 파악하고 해결하려고 너무 많은 시간을 소비하게 되어 프로젝트 진행에 문제가 있었다. 데일리 미팅에서 이 blocker를 공유했고 팀원들과 합의한 결과, 기존 방식처럼 객체에 데이터를 저장해놓고 마지막에 유저가 입점문의 버튼을 눌렀을 때 객체에 저장되어 있는 값들을 formData에 추가하는 방식으로 방향을 수정했다.

const addInfoToFormData = target => {
    const formData = new FormData();
    const InfoKeys = Object.keys(target);
    const InfoValues = Object.values(target);
    const InfoLength = Object.keys(target).length;

    for (let i = 0; i < InfoLength; i++) {
      if (InfoKeys[i] === 'stay_images' || InfoKeys[i] === 'room_images') {
        for (let j = 0; j < InfoValues[i].length; j++) {
          formData.append(InfoKeys[i], InfoValues[i][j]);
        }
        break;
      }
      formData.append(InfoKeys[i], InfoValues[i]);
    }
    if (target === roomInfo) {
      formData.append('stay_name', stayInfo.stay_name);
      setRoomDataList([...roomDataList, { [roomInfo.room_name]: formData }]);
    }

    return formData;
  };

• addInfoToFormData() 함수는 객체에 저장된 값들을 하나의 fomData에 담고 반환하는 함수.
  • 인자 target 은 객체로 stayInfo 혹은 roomInfo가 온다.
  • formData.append(InfoKeys[i], InfoValues[i]) 를 통해 객체의 키, 값의 쌍을 formData에 append 시켜준다.
  • 이미지 파일의 경우 여러개의 파일이 들어있을 수 있으므로, for 문을 통해 구현.

    for (let j = 0; j < InfoValues[i].length; j++) {
    	formData.append(InfoKeys[i], InfoValues[i][j]);
    }

  • target이 roomInfo 인 경우 roomDataList state에 formData 를 담는다.
    • 추후에 룸 UI를 띄우기 위해
    • Back-end API에 보낼때 사용
• addInfoToFormData 는 하나의 룸정보가 완성되었을 때와 숙소의 모든 정보를 완성했을 때 두개의 상황에서 호출된다.
  1. 먼저 하나의 룸정보 작성이 완료 되었을 때
     • addRoominList 함수가 호출되어addInfoToFormData 에 roomInfo 객체가 인자로 들어가 룸에 관한 정보가 들어있는 formData를 완성한다.

       const addRoominList = () => {
           addInfoToFormData(roomInfo);
         };

     • 이때, roomInfo 가 담긴 formData는 roomDataList 에 저장.
  2. 숙소의 모든정보를 작성하고 완료버튼을 눌렀을 때
     • addInfoToFormData 함수는 유저가 모든 정보를 작성하고 완료버튼을 누르면 실행된다.

       const addStayinList = e => {
           e.preventDefault();
           const stayData = addInfoToFormData(stayInfo);
       
           // for (let pair of stayData.entries()) {
           //   console.log('stayData: ', pair[0] + ', ' + pair[1]);
           // }
           fetch('http://10.58.4.88:8000/entering', {
             method: 'POST',
             body: stayData,
           })
             .then(res => res.json())
             .then(res => {
               if (res.message === 'SUCCESS') {
                 roomDataList.forEach(room => {
                   const roomData = Object.values(room)[0];
                   // for (let pair of roomData.entries()) {
                   //   console.log('roomData: ', pair[0] + ', ' + pair[1]);
                   // }
                   fetch(`http://10.58.4.88:8000/entering/room`, {
                     method: 'POST',
                     body: roomData,
                   });
                 });
               }
             });
         };

       • addStayinList 함수는 완료버튼을 눌렀을 때 실행되는 함수
       • addStayinList 함수안에서 addInfoToFormData 는 formData를 반환하고 이 값은 stayData 에 저장.
       • stayData 을 Back-end API에 전송