일상적으로 웹 애플리케이션을 개발 할 때에는 웹 서버와 JSON 데이터를 주고받는 것이 필수입니다. 이번 블로그 포스트에서는 자바스크립트를 사용하여 웹 서버와 JSON 데이터를 주고받는 방법에 대해 알아보겠습니다.

XMLHttpRequest를 사용한 방법

가장 전통적이고 사용이 많이 되는 방법은 XMLHttpRequest 객체를 사용하는 것입니다. 이 객체를 사용하면 비동기적으로 서버와 통신할 수 있습니다. 아래는 기본적인 예제 코드입니다.

// XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();

// GET 요청 설정
xhr.open('GET', 'http://example.com/api/data', true);

// 응답 처리
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 400) {
    var data = JSON.parse(xhr.responseText);
    // 서버에서 받은 JSON 데이터 처리
    console.log(data);
  } else {
    // 에러 처리
    console.error('Request failed. Error:', xhr.status);
  }
};

// 요청 전송
xhr.send();

위 코드에서는 open 메서드로 요청을 설정하고, onload 이벤트 핸들러를 통해 응답을 처리합니다. 응답을 받은 후에는 JSON.parse() 함수를 사용하여 JSON 데이터를 파싱하고, 필요한 작업을 수행할 수 있습니다.

Fetch API를 사용한 방법

fetch API는 최근에 등장한 웹 표준으로, XMLHttpRequest에 비해 직관적이고 간결한 코드를 작성할 수 있습니다. 아래는 fetch API를 사용한 예제 코드입니다.

// GET 요청
fetch('http://example.com/api/data')
  .then(function (response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Request failed. Error:', response.status);
    }
  })
  .then(function (data) {
    // 서버에서 받은 JSON 데이터 처리
    console.log(data);
  })
  .catch(function (error) {
    // 에러 처리
    console.error(error);
  });

fetch 함수를 호출하고 응답을 처리하는 then 메서드를 체인으로 연결하여 코드를 작성합니다. 서버에서 받은 응답 객체를 json 메서드를 사용하여 JSON 형식으로 파싱할 수 있습니다.

axios를 사용한 방법

axios는 자바스크립트에서 널리 사용되는 HTTP 클라이언트 라이브러리입니다. 간단한 API를 제공하며 XMLHttpRequest와 fetch API보다 더 간단한 코드로 서버와 통신할 수 있습니다.

// GET 요청
axios.get('http://example.com/api/data')
  .then(function (response) {
    // 서버에서 받은 JSON 데이터 처리
    console.log(response.data);
  })
  .catch(function (error) {
    // 에러 처리
    console.error(error);
  });

위 코드에서는 axios.get 메서드를 사용하여 GET 요청을 보내고, then 메서드를 사용하여 응답을 처리합니다. 응답 객체의 data 속성을 사용하여 서버에서 받은 JSON 데이터를 처리할 수 있습니다.

마치며

이 블로그 포스트에서는 자바스크립트에서 웹 서버와 JSON 데이터를 주고받는 방법에 대해 알아보았습니다. XMLHttpRequest, fetch, 그리고 axios라는 세 가지 방법을 소개했는데요, 실제 프로젝트에서는 상황에 맞게 가장 적합한 방법을 선택하여 사용하면 됩니다. 자신에게 가장 편한 방법을 선택하여 웹 애플리케이션을 개발해보세요.