JSON(JavaScript Object Notation)은 데이터를 표현하기 위한 경량화된 형식으로, 네트워크를 통해 데이터를 주고받을 때 많이 사용됩니다. 이번 기사에서는 자바스크립트에서 JSON 데이터의 요청과 응답을 처리하는 방법에 대해 알아보겠습니다.

JSON 요청 보내기

자바스크립트에서 JSON 데이터를 서버로 보내려면 XMLHttpRequest 객체나 fetch API를 사용할 수 있습니다. 예를 들어, 아래 코드는 fetch API를 사용하여 POST 요청을 보내는 예제입니다.

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

위 코드에서는 fetch 함수를 사용하여 https://api.example.com/users 엔드포인트로 POST 요청을 보냈습니다. 요청 헤더에는 Content-Type을 application/json으로 설정하고, 요청 본문에는 JSON 데이터를 문자열로 변환하여 전달하였습니다. 응답은 response.json()을 호출하여 JSON 형식으로 파싱된 후 data 변수에 저장되며, 이후 필요한 작업을 수행할 수 있습니다.

JSON 응답 받기

서버로부터 JSON 데이터를 받는 경우에도 fetch API나 XMLHttpRequest 객체를 사용할 수 있습니다. 아래는 fetch API를 사용하여 GET 요청을 보내고 JSON 응답을 처리하는 예제입니다.

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

위 코드에서는 fetch 함수를 사용하여 https://api.example.com/users 엔드포인트로 GET 요청을 보냈습니다. 응답은 마찬가지로 response.json()을 호출하여 JSON 형식으로 파싱된 후 data 변수에 저장되며, 이후 필요한 작업을 수행할 수 있습니다.

요약

자바스크립트에서 JSON 데이터의 요청과 응답을 처리하는 방법을 알아보았습니다. fetch API나 XMLHttpRequest 객체를 사용하여 JSON 데이터를 전송하고, 응답을 받아서 필요한 작업을 수행할 수 있습니다. JSON은 가벼우면서도 간편하게 데이터를 표현할 수 있는 형식이므로, 웹 애플리케이션에서는 빈번하게 사용되는 데이터 형식입니다.

JSON을 요청하고 응답을 처리하는 것은 웹 개발에서 중요한 부분이므로, 자세한 내용을 학습하여 실전에서 유용하게 활용할 수 있도록 해야 합니다.

다음은 관련 자료들입니다:

• MDN Fetch API 문서
• MDN XMLHttpRequest 문서