FormData 값이 콘솔에서 안보이는 이유와 보는 방법

리액트 프로젝트 진행 중 회원가입 페이지에서 프로필 사진을 업로드하기 위해 FormData를 사용했다.

const formData = new FormData();

    const data = {
      email: email.current.value,
      nickname: nickname.current.value,
      password: password.current.value,
    };

    formData.append("file", fileRef.current.files[0]);
    formData.append(
      "joinData",
      new Blob([JSON.stringify(data)], { type: "application/json" })
    );
    
    console.log(formData) // FormData {}

위 코드와 같이 formData에 append 한 값을 확인하기 위해 console.log를 찍어봤지만 아무런 값도 나오지 않았다.

 

그래서 알아봤더니 브라우저 정책 때문이라고 한다.

 

https://stackoverflow.com/questions/17066875/how-to-inspect-formdata

How to inspect FormData?

 

하지만 보는 방법이 없는 건 아니다. 아래 함수를 사용하면 key, value 값을 볼 수 있다.

for (let key of formData.keys()) {
  console.log(key);
}

for (let value of formData.values()) {
  console.log(value);
}

https://developer.mozilla.org/en-US/docs/Web/API/FormData/keys

FormData.keys() - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/API/FormData/values

FormData.values() - Web APIs | MDN

 

FormData 인터페이스는 form 필드와 그 값을 나타내는 일련의 key/value 쌍을 쉽게 생성할 수 있는 방법을 제공한다.

https://developer.mozilla.org/ko/docs/Web/API/FormData

FormData - Web API | MDN