[Error] formData의 값을 console.log로 볼 수 없는 원인

조성철 (JoSworkS)·2020년 5월 28일

JavaScript WDMA dev log front end

웨딩 드레스 관리 서비스 WDMA

목록 보기

9/10

개요

WDMA의 드레스 정보에는 각 모델별로 1~3장의 사진이 포함된다. 따라서 새로운 드레스를 추가하거나 수정할 때, 1~3장의 사진을 서버에 업로드할 수 있어야 한다.

로직은 Add Dress 페이지를 통해 새로운 드레스에 대한 모델명, 가격, 악세사리 정보, 소속 점포, 이미지를 FormData를 통해 axios로 post 요청을 보낼 수 있어야 한다.

문제 상황

Add Dress 페이지의 form 태그를 통해 유저는 드레스에 대한 제반 사항을 입력하게 되고 이를 FormData에 append할 때 발생하였다.

과정을 조금 더 자세히 보면, 드레스의 각 정보들은 컴포넌트의 state에 관리되고 입력이 끝나면 submit 이벤트가 발생할 때 FormData에 각 정보들이 append 되어 서버에 보내진다.

나는 서버에 보내기 전에 FormData에 각 정보들이 잘 append되었나 확인하기 위해 console.log를 이용하여 확인하였지만 아래와 같은 이상한 객체만 반환하고 있었다.

let formData = new FormData();
formData.append('foo', 'test');
console.log(formData);
// FormData {}

결과적으로 이는 기능적으로 발생한 문제라기 보다 나의 무지의 소치였다. FormData 객체에 대해서는 아래에서 조금 더 자세히 다뤄보도록 하겠다.

onSubmit handler

const handleSubmit = event => {
  event.preventDefault();
  // Add 드레스 서버에 포스트하기
  let formData = new FormData();
  for (let i = 0; i < addDress.images.length; i += 1) {
    formData.append(`images`, addDress.images[i]);
  }

  formData.append("model", addDress.model);
  formData.append("price", addDress.price);
  formData.append("accessoryOne", addDress.accessoryOne);
  formData.append("accessoryTwo", addDress.accessoryTwo);
  formData.append("accessoryThree", addDress.accessoryThree);
  formData.append("store", addDress.store);

  // 디스패치 하기
  dispatch({
    type: POST_DRESS_REQUEST,
    data: { formData }
  });
};

FormData 객체란?

The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. It is primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to multipart/form-data.

FormData 객체에 대한 설명은 MDN에 위와 같이 안내되어 있다. 단순한 객체가 아닌 XMLHttpRequest 전송을 위해 설계된 특수한 객체 형태라고 볼 수 있다.

따라서 문자열화할 수 없는 객체이기 때문에 console.log를 사용해서 프린트할 수 없다.

만약 전송 전에 FormData의 값을 확인하고 싶다면, 아래와 같이 FormData의 메소드를 사용해야 한다.

// FormData의 key 확인
for (let key of formData.keys()) {
  console.log(key);
}

// FormData의 value 확인
for (let value of formData.values()) {
  console.log(value);
}