13. AJAX와 데이터 처리-1

#1 AJAX의 개념과 사용법

AJAX(Asynchronous JavaScript and XML)는 웹 페이지를 다시 로드하지 않고도 서버로부터 데이터를 가져오거나 서버에 데이터를 보낼 수 있는 기술입니다. 이를 통해 웹 페이지의 사용성과 성능을 향상시킬 수 있습니다. 이번 섹션에서는 AJAX의 개념과 사용법에 대해 알아보겠습니다.

AJAX란?

AJAX는 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있게 해주는 기술입니다. 이전에는 서버로부터 데이터를 받아오기 위해 웹 페이지를 새로고침해야 했습니다. 그러나 AJAX를 사용하면 서버로부터 데이터를 비동기적으로 받아와서 현재 페이지를 변경하지 않고도 동적으로 화면을 갱신할 수 있습니다.

XMLHttpRequest 객체

AJAX를 사용하기 위해선 먼저 XMLHttpRequest 객체를 생성해야 합니다. XMLHttpRequest 객체는 서버와 데이터를 교환하기 위한 핵심적인 역할을 합니다. 이 객체를 사용하여 서버로 데이터를 보내고, 서버로부터 데이터를 받아올 수 있습니다.

let xhr = new XMLHttpRequest();

XMLHttpRequest 객체를 생성한 후에는 open 메소드를 사용하여 요청을 준비합니다. open 메소드는 첫 번째 매개변수로 요청 방식(GET, POST 등), 두 번째 매개변수로 요청할 URL, 세 번째 매개변수로는 요청을 비동기 방식으로 처리할지 여부를 받습니다.

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

이제 send 메소드를 호출하여 서버로 요청을 보내면 됩니다.

xhr.send();

하지만 이렇게만 사용하면 요청이 완료될 때까지 기다리는 동안 브라우저가 멈춘 것처럼 동작할 수 있습니다. 이러한 문제를 해결하기 위해 이벤트 리스너를 등록하여 비동기적으로 처리할 수 있습니다.

AJAX 요청의 처리

AJAX 요청을 처리하는 방법에는 비동기적으로 데이터를 받아오는 방법과 동기적으로 데이터를 받아오는 방법이 있습니다. 비동기적인 방법은 보통 콜백 함수나 Promise를 사용하여 처리하고, 동기적인 방법은 async/await 구문을 사용하여 처리합니다.

 

콜백 함수를 사용한 비동기 처리

 

콜백 함수를 사용하여 비동기적으로 데이터를 받아오는 방법은 다음과 같습니다.

function ajax(url, successCallback, errorCallback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        successCallback(xhr.response);
      } else {
        errorCallback(xhr.statusText);
      }
    }
  };
  xhr.send();
}

ajax('https://jsonplaceholder.typicode.com/todos/1', function(data) {
  console.log(JSON.parse(data));
}, function(error) {
  console.log(error);
});

위 코드에서 ajax 함수는 비동기적으로 데이터를 받아오는 함수입니다. 첫 번째 인자로는 요청할 URL을, 두 번째 인자로는 요청이 성공했을 때 실행할 콜백 함수를, 세 번째 인자로는 요청이 실패했을 때 실행할 콜백 함수를 받습니다. XMLHttpRequest 객체를 생성하고 open 메서드로 요청할 URL을 설정합니다. onreadystatechange 이벤트 핸들러로 응답 상태가 XMLHttpRequest.DONE인 경우에만 처리합니다. 응답이 성공적인 경우에는 successCallback 함수를 실행하고, 실패한 경우에는 errorCallback 함수를 실행합니다.

위 코드에서 ajax 함수를 호출할 때 성공한 경우와 실패한 경우에 각각 다른 콜백 함수를 실행하는 것을 볼 수 있습니다.

 

Promise를 사용한 비동기 처리

 

Promise는 비동기 작업의 결과를 나타내는 객체입니다. Promise 객체를 반환하는 함수를 호출하면, 해당 함수가 비동기적으로 실행되면서 결과값이 Promise 객체에 담겨 반환됩니다.

 

Promise 객체는 상태(state)를 갖고 있습니다. 이 상태는 pending, fulfilled, rejected 세 가지 중 하나입니다.

• pending: 아직 결과가 나오지 않은 상태
• fulfilled: 비동기 작업이 성공적으로 완료되어 결과값을 반환한 상태
• rejected: 비동기 작업이 실패한 상태

Promise 객체의 상태는 then 메소드와 catch 메소드를 사용하여 처리할 수 있습니다.

• then: Promise 객체가 fulfilled 상태일 때 실행할 함수를 등록합니다. 이 때, 등록한 함수의 인자로 비동기 작업의 결과값이 전달됩니다.
• catch: Promise 객체가 rejected 상태일 때 실행할 함수를 등록합니다. 이 때, 등록한 함수의 인자로 에러 객체가 전달됩니다.

예를 들어, 아래의 예제 코드는 1초 뒤에 랜덤한 값을 반환하는 getNumber 함수를 Promise 객체로 감싼 getNumberPromise 함수를 정의하고, 이 함수를 호출한 후 then 메소드와 catch 메소드로 결과값을 처리합니다.

function getNumber() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const num = Math.floor(Math.random() * 10);
      if (num % 2 === 0) {
        resolve(num);
      } else {
        reject(new Error('Failed to get a number'));
      }
    }, 1000);
  });
}

const getNumberPromise = getNumber();

getNumberPromise
  .then((result) => {
    console.log('Result:', result);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

위 코드에서 getNumberPromise 함수는 Promise 객체를 반환합니다. then 메소드로 성공한 경우, catch 메소드로 실패한 경우를 처리하도록 등록합니다.

예제 코드에서 getNumber 함수는 1초 뒤에 랜덤한 값을 반환합니다. 반환된 값이 짝수일 경우 resolve 메소드를 호출하여 Promise 객체를 fulfilled 상태로 만들고, 홀수일 경우 reject 메소드를 호출하여 Promise 객체를 rejected 상태로 만듭니다.

getNumberPromise 함수가 fulfilled 상태가 되면 then 메소드에서 등록한 함수가 실행되어 결과값이 콘솔에 출력됩니다. 반면에 rejected 상태가 되면 catch 메소드에서 등록한 함수가 실행되어 에러 메시지가 콘솔에 출력됩니다.

async/await 구문을 사용한 처리

async/await 구문을 사용하여 비동기 처리를 할 수도 있습니다. 이 방법은 Promise를 좀 더 쉽게 사용할 수 있도록 해주는 구문입니다.

async 함수는 항상 Promise를 반환합니다. 이 함수 내부에서 await 키워드를 사용하면, 해당 Promise가 처리될 때까지 대기하다가 그 결과를 반환합니다.

예를 들어, 다음과 같은 코드에서는 fetch() 함수를 사용하여 비동기적으로 데이터를 가져온 다음, 그 결과를 JSON 형식으로 변환하고 콘솔에 출력합니다.

async function getData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await response.json();
  console.log(data);
}

getData();

이 코드에서는 async 함수인 getData()를 선언합니다. 이 함수 내부에서는 fetch() 함수를 사용하여 데이터를 가져오고, 해당 결과를 JSON 형식으로 변환합니다. 그런 다음, await 키워드를 사용하여 이 Promise가 처리될 때까지 대기합니다. 마지막으로, 변환된 데이터를 콘솔에 출력합니다.

async/await 구문을 사용하면 Promise를 직접 다루는 것보다 코드가 더 간결해질 수 있습니다. 하지만, 이 구문도 여전히 Promise를 사용하므로, 내부적으로는 Promise가 처리될 때까지 대기하는 것과 동일합니다. 따라서, 네트워크 요청 등의 오래 걸리는 작업을 수행할 때는 여전히 비동기 처리를 해야합니다.