자바스크립트는 웹 개발에서 네트워크 요청과 응답 처리를 간단하게 할 수 있는 강력한 기능을 제공합니다. 이 기능을 사용하면 서버와 통신하여 데이터를 가져오거나 전송할 수 있으며, 다양한 API와 라이브러리를 활용하여 다양한 요청과 응답 처리를 할 수 있습니다.

XMLHttpRequest (XHR)

XHR은 네트워크 요청을 보내고 응답을 받기 위해 가장 기본적인 메서드를 제공하는 객체입니다. 아래는 XHR을 사용하여 GET 요청을 보내고 응답을 처리하는 예제입니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 400) {
    var data = JSON.parse(xhr.responseText);
    // 응답 데이터 처리
  } else {
    // 에러 처리
  }
};

xhr.onerror = function() {
  // 네트워크 에러 처리
};

xhr.send();

위 예제에서 xhr.open() 메서드로 요청을 설정하고, xhr.onload() 이벤트 핸들러로 응답을 처리합니다. 성공적인 응답은 xhr.responseText로 받아올 수 있으며, 에러 발생 시 xhr.onerror()를 활용하여 에러 처리를 할 수 있습니다.

Fetch API

Fetch API는 XHR보다 더 간편한 네트워크 요청과 응답 처리를 위한 API입니다. 아래는 Fetch API를 사용하여 GET 요청을 보내고 응답을 처리하는 예제입니다.

fetch('https://api.example.com/data')
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('네트워크 에러');
    }
  })
  .then(function(data) {
    // 응답 데이터 처리
  })
  .catch(function(error) {
    // 에러 처리
  });

위 예제에서 fetch() 함수로 요청을 보내고, then() 메서드 체인으로 응답을 처리합니다. response.ok를 확인하여 성공적인 응답인지 판단하고, response.json()을 호출하여 응답 데이터를 처리합니다. 에러 발생 시 catch()를 활용하여 에러 처리를 할 수 있습니다.

Axios

Axios는 널리 사용되는 HTTP 클라이언트 라이브러리로, XHR 및 Fetch API보다 더 간편하고 유연한 기능을 제공합니다. 아래는 Axios를 사용하여 GET 요청을 보내고 응답을 처리하는 예제입니다.

axios.get('https://api.example.com/data')
  .then(function(response) {
    // 응답 데이터 처리
  })
  .catch(function(error) {
    // 에러 처리
  });

Axios는 axios.get()과 같은 메서드를 사용하여 요청을 보내고, then() 메서드로 성공적인 응답을 처리합니다. catch()를 통해 에러 처리를 할 수 있습니다.

마무리

자바스크립트를 사용하여 네트워크 요청과 응답 처리를 간단하고 효율적으로 할 수 있습니다. 이번 포스트에서는 XHR, Fetch API, 그리고 Axios를 사용한 예제를 살펴보았습니다. 많은 경우 Axios와 같은 라이브러리를 사용하는 것이 유용하며, 프로젝트에 맞게 선택하여 사용하는 것이 좋습니다.