<JavaScript> 비동기 처리와 AJAX

웹 페이지에서 사용자와 상호작용하기 위한 방법 중 비동기 처리는 매우 중요한 기술입니다.

이번 글에서는 JavaScript를 이용해 비동기 웹 개발을 하는 방법인 AJAX에 대해 알아보겠습니다.

 

비동기가 뭐에요?

비동기 처리는 어떤 작업을 시작한 후 다음 작업을 기다리지 않고 즉시 실행할 수 있는 것을 말합니다. 결국 모든 작업이 완료되면 결과를 이용할 수 있는 방식입니다. 이로 인해 웹 페이지에서 데이터를 로드하거나 전송하는 동안 다른 작업도 동시에 진행할 수 있습니다.

 

AJAX는 무엇인가요?

AJAX(Asynchronous JavaScript and XML)는 비동기적으로 웹 서버와 데이터를 주고받기 위해 사용하는 기술입니다.

이를 통해 페이지를 새로 고침하지 않고도 서버에서 데이터를 가져올 수 있습니다.

 

AJAX를 이용한 비동기 요청

웹 개발을 하다 보면 서버에서 정보를 가져오거나 전송해야 하는 경우가 많습니다. AJAX는 이런 과정을 비동기 방식으로 처리할 수 있게 도와줍니다.

XMLHttpRequest를 이용한 기본적인 AJAX GET 요청 예제를 살펴봅시다.

 

const xhr = new XMLHttpRequest();

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error("Error:", xhr.statusText);
  }
};

xhr.onerror = function() {
  console.error("Request failed.");
};

xhr.open("GET", "https://api.example.com/data");
xhr.send();

XMLHttpRequest는 오래된 기술이지만, 여전히 많은 브라우저에서 지원되고 있습니다.

그러나, 오류 처리와 이벤트 처리 방식이 조금 더 까다로운 단점이 있습니다.

 

좀 더 현대적인 비동기 처리: Fetch API

이제 조금 더 최신 기술인 Fetch API를 이용한 비동기 요청 방법을 알아봅시다.

fetch("https://api.example.com/data")
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("Error:", response.statusText);
    }
  })
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

Fetch API는 Promise 기반의 유연한 작성 방식을 제공하고, XMLHttpRequest보다 구조가 직관적이라는 장점이 있습니다.

 

서버에 데이터 전송하기: AJAX POST 요청

이번에는 AJAX를 이용해 서버에 데이터를 전송하는 POST 요청 예제를 살펴봅시다.

const data = {
  key1: "value1",
  key2: "value2"
};

fetch("https://api.example.com/submit", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data)
})
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("Error:", response.statusText);
    }
  })
  .then(responseData => console.log(responseData))
  .catch(error => console.error("Error:", error));

POST 요청을 할 때에는 HTTP 메소드와 헤더, 전송할 데이터를 옵션으로 지정해야 합니다. 남겨진 코드는 이러한 작업을 수행합니다.

 

비동기 웹 개발을 위해 JavaScript의 AJAX와 Fetch API를 사용하는 방법에 대해 알아보았습니다.

비동기 처리를 이용하면 기다리는 동안 다른 작업을 할 수 있어 효율적이고 사용자 경험도 좋아집니다. 

 

감사합니다.