자바스크립트 RESTful API와 AJAX

10 Sep 2023

javascript

이번 글에서는 자바스크립트를 이용하여 RESTful API를 호출하고, AJAX를 통해 데이터를 비동기적으로 가져오는 방법에 대해 알아보겠습니다.

RESTful API란?

RESTful API는 Representational State Transfer의 약자로, 웹 서비스의 아키텍처 스타일 중 하나입니다. RESTful API를 통해 클라이언트는 웹 서버에 요청을 보내고, 서버는 요청에 따른 결과를 클라이언트에 응답합니다. 주로 HTTP 프로토콜을 사용하여 데이터를 주고받습니다. RESTful API는 자원(Resource)과 HTTP 메소드를 기반으로 동작합니다.

자원: RESTful API에 접근할 수 있는 대상 (예: 사용자 정보, 게시물 목록 등)
HTTP 메소드: 자원에 대한 행위를 나타내는 메소드 (예: GET, POST, PUT, DELETE)

AJAX란?

AJAX는 Asynchronous JavaScript and XML의 약자로, 웹 페이지에서 데이터를 비동기적으로 로드하고 변경할 수 있는 기술입니다. AJAX를 사용하면 페이지 전체를 새로고침하지 않고도 서버로부터 데이터를 받아와 동적으로 화면을 갱신할 수 있습니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.

RESTful API 호출하기

자바스크립트에서 RESTful API를 호출하는 방법은 간단합니다. fetch() 함수를 사용하여 HTTP 요청을 보내고, 해당 요청에 대한 응답을 처리할 수 있습니다. 다음은 GET 요청을 보내는 예제입니다.

fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => {
    // 응답 데이터 처리
    console.log(data);
  })
  .catch(error => {
    // 오류 처리
    console.error('Error:', error);
  });

위 코드에서 첫 번째 인자로는 호출할 API의 URL을 전달하고, .then() 메소드를 사용하여 응답 데이터를 처리합니다. .catch() 메소드를 사용하여 오류를 처리할 수도 있습니다.

AJAX로 데이터 가져오기

AJAX를 사용하여 데이터를 가져오는 방법도 간단합니다. 자바스크립트에서는 XMLHttpRequest 객체를 사용하여 AJAX 요청을 보내고 응답 데이터를 처리할 수 있습니다. 다음은 GET 요청을 보내는 예제입니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/posts', true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 400) {
    // 응답 데이터 처리
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    // 오류 처리
    console.error('Error:', xhr.status);
  }
};
xhr.send();

위 코드에서 XMLHttpRequest 객체를 생성한 후, open() 메소드로 요청을 설정하고 onload 이벤트 핸들러를 등록합니다. 응답의 상태 코드를 확인하여 성공적인 요청인지 판별한 후 응답 데이터를 처리합니다.

마무리

이번 글에서는 자바스크립트를 이용하여 RESTful API 호출과 AJAX를 통해 데이터를 가져오는 방법에 대해 알아보았습니다. RESTful API와 AJAX는 웹 애플리케이션 개발에 있어서 필수적인 요소이므로, 익히고 응용할 수 있도록 실습해보시기 바랍니다.

더 많은 자바스크립트와 웹 개발 관련 내용은 techblog.example.com에서 확인하실 수 있습니다.