• 호스팅 숙소등록하기

1. 버튼을 누르면 err alert 뜸

   submit이 아닌 버튼 체크 기능 구현을 위해 버튼에 onClick 속성을 넣었다.

   다른 기능 구현(버튼 중복 체크)을 위해 submit 기능을 막아야 한다.

• 해결방법

<form>태크안에 <button> type속성을 지정하지 않으면 type='submit'이다. 그래서 명시적으로 type 속성 값을 'button'으로 지정하면 form submit 되지 않기 때문에 type="button"을 추가했다.

const renderRoomButton = (icon, label) => (
    <RoomBtn type="button"
      onClick={() => handleButtonClick(label)}
      selected={selectedButtons.includes(label)}>
      {icon}
      <Icon selected={selectedButtons.includes(label)}>{label}</Icon>
    </RoomBtn>
  )

1. formData에 파일, 객체 함께 넣기

   호스팅을 하기 위해 이미지와 내용을 함께 전송해야 한다.

   formData는 XMLHttpRequest 전송을 위하여 설계된 key, value 형식의 특수한 객체다. 이 특수한 객체인 formData에 객체 형태의 데이터를 추가하기 위해서는 다음과 같은 과정을 거쳐야 한다.

   1. 객체를 JSON으로 변환
   2. 파라미터로 JSON으로 변환한 객체와 JSON 타입이라는 것을 명시한 config를 넣어 Blob 객체 생성

파일, 객체 함께 추가 방법은

1. formData 객체 생성

const formData = new FormData();

1. formData에 file 추가

formData.append('image', data.image);

      const content = {
        title: data.title,
        price: Number(data.price),
        region: data.region,
        city: data.city,
        capacity: Number(data.capacity),
        roomType: data.roomType,
        amenities: data.amenities,
        categories: data.categories,
        expiredDate: Number(data.expiredDate),
      };

1. Blob 객체 생성 후 formData에 추가

const blob = new Blob([JSON.stringify(content)], {
        // type에 JSON 타입 지정
        type: "application/json",
      });

      formData.append('content', blob);

1. Axios의 Content-Type 지정

const config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: `Bearer ${token}`,
        }
      }

1. 서버 전송

const response = await axios.post(`${process.env.REACT_APP_SERVER_URL}/rooms/host`, formData, config)