FormData 객체

• 기업협업 프로젝트 중 고객 후기 등록 페이지 구현에 앞서
  FormData 란 무엇이며, 이를 어떻게 활용하는 지에 대해 알아보겠습니다! 🥰

1. FormData

• 서버에 POST 보낼 때 file 를 업로드하는 경우! formData 를 사용합니다.
• FormData는 폼을 쉽게 보내도록 도와주는 객체입니다.
  이름을 보고 유추하셨듯이 FormData 객체는 HTML 폼 데이터를 나타냅니다.

const formData = new FormData([form])

• HTML에 form 요소가 있는 경우, 위와 같은 코드를 작성하면 해당 폼 요소의 필드 전체가 자동 반영됩니다.
• fetch 등의 네트워크 메서드가 FormData 객체를 바디로 받는 것이 바로 FormData의 특징!

2. FormData 메소드

const formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// 결과
key1, value1
key2, value2

• formData.append(name, value)
  -> name 과 value 를 가진 폼 필드를 추가하는 메소드
• formData.delete(name) – name에 해당하는 필드를 삭제
• formData.get(name) – name에 해당하는 필드의 값을 가져옴
• formData.has(name) – name에 해당하는 필드가 있으면 true를, 그렇지 않으면 false를 반환

// 파일이 있는 폼 전송하기
<form id="formElem">
  <input type="text" name="firstName" value="Bora">
  Picture: <input type="file" name="picture" accept="image/*">
  <input type="submit">
</form>

<script>
  formElem.onsubmit = async (e) => {
    e.preventDefault();

    let response = await fetch('/article/formdata/post/user-avatar', {
      method: 'POST',
      body: new FormData(formElem)
    });

    let result = await response.json();

    alert(result.message);
  };
</script>