[Javascript] AJAX 알아보기

🧐 AJAX란?

AJAX는 Asynchronous JavaScript and XML의 약자로

자바스크립트를 사용해서 서버와 비동기적으로 데이터를 주고받는 기능을 말한다.

AJAX는 브라우저가 제공하는 XMLHttpRequest 객체를 통해 동작한다.

이름에 XML이 들어가 있지만, 실제로는 XML 대신 JSON 형식을 더 많이 사용한다.

 

🚀 AJAX의 등장 배경과 장점

🔎 등장 배경

AJAX가 등장하기 이전의 웹페이지는

일부 내용만 바꾸고 싶어도 전체 페이지를 다시 로드해야 했다.

 

📌 문제점 (AJAX 이전)

• 화면 깜빡임 → 전체 새로고침으로 사용자 경험 저하
• 불필요한 데이터 전송 → 변경하지 않아도 되는 HTML까지 전송

 

AJAX는 위와 같은 문제를 해결하기 위해 등장했다.

AJAX는 서버로부터 필요한 데이터만 비동기 방식으로 전송받은 후,

자바스크립트를 이용해 DOM을 조작하여 페이지의 일부만 동적으로 갱신한다.

 

✅ AJAX의 장점

• 부분 갱신 → 필요한 데이터만 받아서 DOM을 조작 (화면 깜빡임 없음)
• 데이터 효율성 → 불필요한 리소스 낭비 방지
• 빠른 상호작용 → 데스크톱 앱과 유사한 UX 제공
• 역할 분리 → 서버는 데이터 제공, 클라이언트는 화면 관리에 집중

 

🔄 AJAX와 비동기 처리 방식의 발전

1️⃣ XMLHttpRequest

XMLHttpRequest를 사용한 비동기 처리는 콜백 함수를 사용하는데,

이로 인해 비동기 작업을 순차적으로 처리할 때 콜백 헬이라는 문제가 발생했다.

콜백 헬 → 코드가 깊게 중첩되어서 가독성이 떨어지고 유지보수가 어려워지는 현상

const xhr = new XMLHttpRequest();
xhr.open("GET", "/data");
xhr.onload = function () {
  console.log(xhr.responseText);
};
xhr.send();

 

2️⃣ Promise

• 비동기 처리의 상태(pending, fulfilled, rejected)와 결과값을 관리
• then, catch, finally를 이용해 가독성 개선
• fetch도 Promise를 기반으로 동작
• XMLHttpRequest보다 사용법이 간단함

fetch("/data")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

 

3️⃣ async/await

• ES2017에서 도입
• Promise 기반 문법
• 비동기 코드를 동기 코드처럼 작성 가능 → 직관적임
• async 함수는 항상 프로미스를 반환하고 await는 프로미스가 처리될 때까지 기다렸다가 결과를 반환함
• 프로미스 체이닝보다 훨씬 더 가독성 높은 코드를 작성할 수 있음

async function getData() {
  try {
    const res = await fetch("/data");
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

 

4️⃣ axios

• 외부 라이브러리 (설치 필요: npm install axios)
• fetch보다 문법이 간단하고 다양한 편의기능을 제공함

✅ axios 장점

1. 자동 JSON 변환

fetch는 응답을 JSON으로 변환하려면 res.json()을 호출해야 하지만

axios는 자동으로 JSON을 변환해준다.

// fetch
async function getDataFetch() {
  const res = await fetch("/data");
  const data = await res.json(); // 직접 변환 필요
  console.log(data);
}

// axios
import axios from "axios";

async function getDataAxios() {
  const res = await axios.get("/data");
  console.log(res.data); // 자동 JSON 변환
}

 

2. 쿼리 파라미터(params 옵션)

axios는 params 옵션을 제공해서 간단하게 쿼리 파라미터를 작성할 수 있다.

// fetch + URL 객체
async function getUsersFetch() {
  const url = new URL("/users", window.location.origin);
  url.search = new URLSearchParams({
    role: "admin",
    active: true,
  });

  const res = await fetch(url);
  const data = await res.json();
  console.log(data);
}

// axios
async function getUsersAxios() {
  const res = await axios.get("/users", {
    params: {
      role: "admin",
      active: true,
    },
  });
  console.log(res.data);
}

 

3. axios 인스턴스

공통된 기본 URL이나 헤더를 지정해 재사용 가능한 인스턴스를 만들 수 있다.

// axios 인스턴스 생성
const api = axios.create({
  baseURL: "API Base URL",
});

const todo = await api.get("/todos/1");
console.log(todo.data);

const user = await api.get("/users/1");
console.log(user.data);

 

4. 에러처리

fetch는 HTTP 에러(400, 500)가 발생해도 reject되지 않기 때문에

에러 처리를 res.ok 속성을 사용해서 별도로 구현해야 한다.

axios는 자동으로 Promise rejected 상태가 되기 때문에 에러처리가 편리하다.

// fetch
async function getNotFoundFetch() {
  try {
    const res = await fetch("/not-found");
    if (!res.ok) {
      throw new Error("HTTP Error: " + res.status);
    }
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error("Fetch Error:", err);
  }
}

// axios
async function getNotFoundAxios() {
  try {
    const res = await axios.get("/not-found");
    console.log(res.data);
  } catch (err) {
    console.error("Axios Error:", err.response.status); // 바로 상태 코드 확인 가능
  }
}

 

📚 참고

모던 자바스크립트 Deep Dive

시작하기 | Axios Docs