14. AJAX와 데이터 처리-2

#2 서버와의 데이터 통신

서버와의 데이터 통신은 웹 애플리케이션에서 매우 중요한 부분입니다. 이를 위해 JavaScript에서는 다양한 방법을 제공하고 있습니다. 이번 섹션에서는 서버와의 데이터 통신 방법에 대해 알아보고, 간단한 예제 코드를 작성해보도록 하겠습니다.

 

XMLHttpRequest 객체를 이용한 데이터 통신

 

가장 전통적이고 널리 사용되는 방법은 XMLHttpRequest(XHR) 객체를 이용한 데이터 통신입니다. XHR은 비동기적으로 서버와 데이터를 주고받을 수 있도록 지원하는 객체입니다. 이를 이용하면 페이지의 새로고침 없이도 서버와 데이터를 주고받을 수 있습니다.

XHR 객체를 이용해 데이터를 보내기 위해서는 먼저 XHR 객체를 생성하고, open() 메서드를 호출하여 요청을 준비합니다. 그 다음에는 send() 메서드를 호출하여 요청을 전송하고, 서버로부터 응답이 오면 onreadystatechange 이벤트 핸들러가 호출됩니다.

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    console.log(this.responseText);
  }
};

xhr.open('GET', 'http://example.com/data');
xhr.send();

위 코드에서는 GET 메서드를 이용하여 http://example.com/data 주소로 요청을 보내고 있습니다. onreadystatechange 이벤트 핸들러는 readyState 값이 4이고 status 값이 200인 경우에만 응답을 처리합니다.

 

Fetch API를 이용한 데이터 통신

 

XMLHttpRequest 이외에도 Fetch API를 이용하여 데이터를 통신할 수 있습니다. Fetch API는 Promise 기반으로 작성되어 있어서 비동기적으로 데이터를 주고받을 수 있습니다.

fetch('http://example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

위 코드에서는 fetch() 함수를 이용하여 http://example.com/data 주소로 요청을 보내고 있습니다. 응답이 오면 then() 메서드가 호출되어 데이터를 처리하게 됩니다. 만약 에러가 발생하면 catch() 메서드가 호출됩니다.

 

Axios 라이브러리를 이용한 데이터 통신

 

이번에는 좀 더 편리하게 데이터를 통신할 수 있도록 도와주는 Axios 라이브러리를 사용해보겠습니다.

Axios는 Promise 기반으로 작성된 HTTP 클라이언트 라이브러리로, 서버와 HTTP 통신을 쉽게 할 수 있도록 도와줍니다. 또한, Node.js와 브라우저에서 모두 사용할 수 있어서 유용하게 활용됩니다.

Axios를 사용하기 위해서는 axios 라이브러리를 설치해야 합니다. npm을 이용하여 설치할 수 있습니다.

 

npm install axios

다음은 Axios를 사용하여 GET 요청을 보내는 예제입니다.

// axios 모듈을 가져옵니다.
import axios from 'axios';

// GET 요청을 보내는 함수를 정의합니다.
function fetchData() {
  // axios.get 메서드를 사용하여 GET 요청을 보냅니다.
  axios.get('https://jsonplaceholder.typicode.com/posts')
    .then(response => {
      // 서버로부터 응답을 받았을 때의 처리를 정의합니다.
      console.log(response.data);
    })
    .catch(error => {
      // 에러 발생 시의 처리를 정의합니다.
      console.error(error);
    });
}

// fetchData 함수를 호출합니다.
fetchData();

위의 예제에서는 axios.get 메서드를 사용하여 서버로 GET 요청을 보내고, 서버로부터 응답을 받았을 때의 처리와 에러 발생 시의 처리를 정의하고 있습니다.

Axios를 사용하여 POST 요청을 보내는 예제는 다음과 같습니다.

// axios 모듈을 가져옵니다.
import axios from 'axios';

// POST 요청을 보내는 함수를 정의합니다.
function sendData() {
  // axios.post 메서드를 사용하여 POST 요청을 보냅니다.
  axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1,
  })
    .then(response => {
      // 서버로부터 응답을 받았을 때의 처리를 정의합니다.
      console.log(response.data);
    })
    .catch(error => {
      // 에러 발생 시의 처리를 정의합니다.
      console.error(error);
    });
}

// sendData 함수를 호출합니다.
sendData();

위의 예제에서는 axios.post 메서드를 사용하여 서버로 POST 요청을 보내고, 요청 바디에 데이터를 담아 보내고 있습니다. 마찬가지로 서버로부터 응답을 받았을 때와 에러 발생 시의 처리를 정의하고 있습니다.