웹 개발에서 비동기 데이터 요청을 처리할 때, 서버로 데이터를 전송하는 방식은 여러 가지가 있습니다. 여기서는 주로 사용되는 JSON과 FormData에 대해 살펴보도록 하겠습니다.

JSON (JavaScript Object Notation)

JSON은 JavaScript Object Notation의 약자로, 데이터를 주고 받는 데 사용되는 경량의 데이터 형식입니다. 주로 Ajax 요청(Asynchronous JavaScript and XML)에서 사용되며, HTTP 요청 본문에서 데이터를 표현하는 데에 적합합니다.

const data = {
  name: 'John Doe',
  age: 25
};

fetch('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

위 예제에서 JSON.stringify 메서드를 사용하여 JavaScript 객체를 JSON 문자열로 변환하고, 해당 문자열을 HTTP 요청의 본문으로 전송하고 있습니다.

FormData

FormData 객체는 폼 데이터(form data)의 키-값 쌍을 쉽게 생성하고, 이를 서버로 전송할 수 있는 방법을 제공합니다. 주로 HTML 폼에서 사용자가 입력한 데이터를 가져와 서버로 전송하는 데에 적합합니다.

const form = document.getElementById('myForm');
const formData = new FormData(form);

fetch('https://example.com/api/data', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

위 예제에서 new FormData(form)을 사용하여 HTML 폼의 데이터를 가져와 FormData 객체를 생성하고, 해당 객체를 HTTP 요청으로 전송하는 방법을 보여줍니다.

결론

JSON은 주로 JavaScript 객체를 서버로 보낼 때 사용되며, FormData는 주로 HTML 폼 데이터를 서버로 보낼 때 사용됩니다. 두 방식은 각각 특정한 상황에 가장 적합한 방법을 제공하므로, 상황에 맞게 적절히 선택하여 사용해야 합니다.

참고문헌:

• MDN Web Docs
• MDN Web Docs