자바스크립트 RESTful API와 AJAX

10 Sep 2023

javascript

자바스크립트는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나입니다. RESTful API와 AJAX는 자바스크립트를 이용하여 웹 애플리케이션을 개발할 때 필수적인 개념입니다. 이 글에서는 자바스크립트를 사용하여 RESTful API를 호출하고 AJAX를 이용하여 웹 애플리케이션과 데이터를 비동기적으로 통신하는 방법을 알아보겠습니다.

RESTful API란?

REST (Representational State Transfer)는 웹 서비스의 구조적 특성을 활용하는 소프트웨어 아키텍처 스타일입니다. RESTful API는 이러한 REST 아키텍처를 따르는 API를 말합니다. RESTful API는 자원을 표현하는 URI(Uniform Resource Identifier)를 통해 데이터를 조회, 생성, 수정, 삭제하는 작업을 수행합니다.

RESTful API는 HTTP 메소드(GET, POST, PUT, DELETE)와 URI를 이용하여 데이터에 접근합니다. GET 메소드는 데이터를 조회할 때 사용하고, POST 메소드는 데이터를 생성할 때 사용합니다. PUT 메소드는 데이터를 수정하고, DELETE 메소드는 데이터를 삭제할 때 사용됩니다.

AJAX란?

AJAX (Asynchronous JavaScript and XML)는 자바스크립트를 이용하여 웹 애플리케이션과 서버 사이에 비동기적으로 데이터를 주고받는 기술입니다. AJAX를 사용하면 전통적인 웹 개발 방식인 페이지 전체를 새로고침하지 않고도 새로운 데이터를 받아오거나 서버에 데이터를 전송할 수 있습니다.

AJAX는 XMLHttpRequest 객체를 사용하여 서버와 통신합니다. 이 객체를 사용하여 HTTP 요청을 보내고, 서버로부터 데이터를 받아올 수 있습니다. 받아온 데이터는 자바스크립트를 이용하여 동적으로 웹 페이지를 업데이트할 수 있습니다.

RESTful API와 AJAX 예제

자 이제 RESTful API와 AJAX를 함께 사용하는 간단한 예제를 살펴보겠습니다. 예제를 위해 서버에서 JSON 형식으로 데이터를 제공하는 RESTful API를 가정합니다.

먼저, 자바스크립트를 이용하여 RESTful API를 호출하는 함수를 작성해보겠습니다. 아래 예제에서는 GET 메소드를 사용하여 API에서 데이터를 조회합니다.

function getAPI() {
  let xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
      let data = JSON.parse(xmlHttp.responseText);
      // 데이터 처리 로직 작성
    }
  };
  xmlHttp.open("GET", "http://example.com/api/data", true);
  xmlHttp.send();
}

위의 예제에서 onreadystatechange 함수는 서버로부터 응답을 받았을 때 처리할 로직을 작성합니다. readyState가 4이고 status가 200이면 서버에서 올바른 응답을 받았다는 것을 의미합니다. 응답받은 데이터는 responseText 속성을 통해 얻을 수 있습니다. 이 예제에서는 데이터를 JSON 형식으로 받아와 처리하는 로직을 작성하는 부분은 이후에 채워 넣어야 합니다.

다음으로, AJAX를 이용하여 웹 페이지와 데이터를 비동기적으로 통신하는 예제를 살펴보겠습니다. 예를 들어, 사용자가 버튼을 클릭하면 AJAX를 이용하여 RESTful API를 호출하고 데이터를 받아와서 웹 페이지의 특정 요소에 업데이트하는 기능을 구현할 수 있습니다.

document.querySelector("#button").addEventListener("click", function() {
  let xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
      let data = JSON.parse(xmlHttp.responseText);
      document.querySelector("#result").innerText = data.message;
    }
  };
  xmlHttp.open("GET", "http://example.com/api/data", true);
  xmlHttp.send();
});

위의 예제에서는 addEventListener 함수로 버튼을 클릭했을 때 실행할 함수를 등록합니다. 클릭 이벤트가 발생하면 AJAX를 이용하여 RESTful API를 호출하고 응답으로 받은 데이터를 웹 페이지의 #result 요소에 업데이트하는 로직을 작성합니다.

결론

이 글에서는 자바스크립트를 이용하여 RESTful API를 호출하고 AJAX를 이용하여 웹 애플리케이션과 비동기적으로 통신하는 방법을 알아보았습니다. RESTful API와 AJAX는 웹 개발에 있어서 매우 중요한 개념이므로, 자세히 공부하고 프로젝트에 적용해 보시기 바랍니다.

자바스크립트를 활용하여 RESTful API와 AJAX를 다루는 것은 웹 애플리케이션 개발에서 필수적인 기술입니다. 이를 잘 익히고 활용하면 보다 동적이고 효율적인 웹 애플리케이션을 만들 수 있습니다.