Object.fromEntries(fd.entries())

Object.fromEntries(fd.entries())는 FormData 객체 또는 다른 이터러블(key-value 쌍)을 평범한 JavaScript 객체로 변환할 때 사용하는 패턴이다.

1. FormData와 fd.entries()
   FormData는 HTML 폼 데이터를 다루기 위한 인터페이스이다.
   fd.entries()는 FormData 객체에 포함된 모든 key-value 쌍을 이터러블(iterator) 형태로 반환한다.

const form = document.querySelector("form");
const fd = new FormData(form); // FormData 객체 생성
console.log([...fd.entries()]);

fd.entries()는 아래와 같은 형태의 이터러블을 반환한다.

[
  ['key1', 'value1'],
  ['key2', 'value2'],
  ...
]

2. Object.fromEntries()
   Object.fromEntries()는 key-value 쌍으로 이루어진 이터러블을 받아, 이를 평범한 JavaScript 객체로 변환한다.

const entries = [
  ['key1', 'value1'],
  ['key2', 'value2']
];
const obj = Object.fromEntries(entries);
console.log(obj); // { key1: 'value1', key2: 'value2' }

3. Object.fromEntries(fd.entries())의 역할
   Object.fromEntries(fd.entries())는 HTML 폼 데이터를 객체로 변환하는 데 사용된다.
   이렇게 하면, FormData 객체의 데이터를 쉽게 다룰 수 있다.

<form id="myForm">
  <input type="text" name="username" value="john_doe" />
  <input type="password" name="password" value="123456" />
</form>

<script>
  const form = document.getElementById("myForm");
  const fd = new FormData(form); // FormData 객체 생성

  // FormData -> 평범한 객체 변환
  const data = Object.fromEntries(fd.entries());
  console.log(data); // { username: 'john_doe', password: '123456' }
</script>

간결하고 직관적인 변환: FormData를 다루기 쉽게 객체 형태로 변환할 수 있다.
API 요청에 적합: 평범한 객체로 변환한 후, JSON으로 직렬화하여 API 요청에 사용할 수 있다.

const jsonData = JSON.stringify(Object.fromEntries(fd.entries()));
console.log(jsonData); // '{"username":"john_doe","password":"123456"}'