현대 웹 개발에서 웹 서버와의 통신은 매우 중요한 부분입니다. 자바스크립트를 사용하여 웹 서버와 통신하는 웹 애플리케이션을 개발하는 방법을 알아보겠습니다.

XMLHttpRequest

XMLHttpRequest는 자바스크립트에서 서버와 비동기적으로 통신할 수 있는 기능을 제공하는 객체입니다. 이를 이용하여 서버로 데이터를 요청하고 응답을 받을 수 있습니다.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.responseText);
  }
};
xhttp.open("GET", "https://example.com/api/data", true);
xhttp.send();

위의 예시는 GET 방식으로 “https://example.com/api/data” 주소에 요청을 보내고, 응답을 받으면 콘솔에 출력하는 코드입니다.

Fetch API

Fetch API는 XMLHttpRequest의 대안으로 도입된 웹 표준입니다. 별도의 인스턴스 생성 없이 전역적으로 사용할 수 있는 fetch 함수를 통해 서버와 통신할 수 있습니다.

fetch("https://example.com/api/data")
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data);
  });

위의 예시는 위와 동일한 요청을 Fetch API를 이용하여 보내고, 응답을 JSON 형식으로 변환하여 데이터를 콘솔에 출력하는 코드입니다.

Axios

Axios는 자바스크립트에서 많이 사용되는 HTTP 클라이언트 라이브러리로, 별도의 인스턴스 생성 없이 전역적으로 사용할 수 있으며 Promise 기반의 API를 제공합니다.

axios.get("https://example.com/api/data")
  .then(function(response) {
    console.log(response.data);
  })
  .catch(function(error) {
    console.log(error);
  });

위의 예시는 Axios를 사용하여 GET 방식으로 서버에 요청을 보내고, 응답을 받으면 데이터를 콘솔에 출력하고, 에러가 발생하면 에러를 콘솔에 출력하는 코드입니다.

결론

자바스크립트를 사용하여 웹 서버와 통신하는 웹 애플리케이션을 개발하는 방법을 알아보았습니다. XMLHttpRequest, Fetch API, Axios는 각각 다른 방식으로 서버와 통신할 수 있으며, 개발 환경과 요구사항에 맞게 선택하여 사용할 수 있습니다.