Ajax (를 알아야 하는 이유)

Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 사용하여

브라우저가 서버와 비동기적으로 데이터를 주고받을 수 있게 하는 기술입니다.

즉, 웹 페이지를 처음부터 끝까지 새로 고치지 않고도 필요한 부분만 업데이트할 수 있어

페이지가 더 빠르고 동적으로 반응할 수 있습니다.

| Ajax의 시작

Ajax의 핵심은 브라우저에서 제공하는 XMLHttpRequest 객체입니다.

1999년 마이크로소프트가 개발한 이 객체는

HTTP 비동기 통신을 위한 다양한 메서드와 프로퍼티를 제공하며,

이를 통해 서버와 데이터를 주고받을 수 있게 했습니다.

 

Ajax는 초기에는 주목받지 못했으나,

2005년 구글이 Google Maps에 Ajax를 적용하면서 큰 주목을 받았습니다.

Ajax 덕분에 Google Maps는 새로고침 없이 지도를 부드럽게 움직이고 확대/축소할 수 있었고,

이를 통해 웹 애플리케이션이 데스크톱 애플리케이션처럼

매끄러운 사용자 경험을 제공할 수 있다는 가능성을 보여주었습니다.

| 전통적인 웹 페이지 로딩 방식의 문제

Ajax가 등장하기 전에는 웹 페이지를 새로 고칠 때마다

전체 HTML을 서버로부터 다시 받아와 렌더링 하는 방식이 일반적이었습니다.

이 전통적인 방식은 다음과 같은 문제점을 가지고 있었습니다.

1. 불필요한 데이터 통신: 변경이 필요 없는 부분까지 포함된 전체 HTML을 서버로부터 다시 받아오므로 데이터 통신이 비효율적이었습니다.
2. 깜빡임 현상: 화면 전환 시 모든 요소를 새로 렌더링 하기 때문에 순간적으로 화면이 깜빡이는 불편함이 있었습니다.
3. 동기 처리 문제: 클라이언트가 서버에 요청을 보내면 응답이 도착할 때까지 블로킹되므로 다른 작업이 지연될 수 있었습니다.

| Ajax가 가져온 장점

Ajax의 등장으로 웹 페이지는 필요할 때 필요한 데이터만 비동기적으로 받아와

변경할 부분만 업데이트할 수 있게 되었습니다.

이를 통해 다음과 같은 장점이 생겼습니다.

1. 효율적인 데이터 통신: 필요한 데이터만 받아오므로 네트워크 사용이 최적화되었습니다.
2. 부드러운 화면 전환: 변경이 필요 없는 부분은 다시 렌더링 하지 않으므로 화면이 깜빡이지 않고 부드럽게 전환됩니다.
3. 비동기적 처리: 서버와의 통신이 비동기로 이루어지기 때문에, 블로킹 없이 다른 작업을 계속 진행할 수 있습니다.

| fetch 함수와 XMLHttpRequest

XMLHttpRequest

XMLHttpRequest는 Ajax를 위해 예전부터 사용해 온 방법으로,

콜백 함수를 사용하여 비동기 요청을 처리합니다.

아래는 XMLHttpRequest로 GET 요청을 보내는 예시입니다.

const xhr = new XMLHttpRequest();

xhr.open("GET", "https://api주소", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  } else if (xhr.readyState === 4) {
    console.error("Error:", xhr.statusText);
  }
};
xhr.send();

fetch 함수

최근 JavaScript에서는 fetch 함수가 Ajax의 기본 도구로 자리 잡았습니다.

fetch는 프로미스를 기반으로 한 HTTP 요청 API로,

기존 XMLHttpRequest보다 간결하고 직관적인 코드를 작성할 수 있게 해 줍니다.

fetch를 사용하면 아래와 같은 코드로 비동기 요청을 쉽게 처리할 수 있습니다.

fetch("https://api주소")
  .then(response => {
    if (!response.ok) {
      throw new Error("네트워크 응답이 올바르지 않습니다");
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

 

또한 async/await와 함께 사용하면 코드가 더 읽기 쉽고 유지보수하기 쉬워집니다.

| Ajax에 대한 개인적인 생각

웹 애플리케이션은 기본적으로 사용자가 사용하기 위해 만들어집니다.

따라서 사용자에게 최적의 경험을 제공하는 것이 매우 중요합니다.

 

Ajax는 웹 애플리케이션이 이러한 최적의 경험을 제공할 수 있게 해주는 핵심 기술이라고 생각합니다.

특히 fetch 함수와 이를 더욱 쉽게 사용할 수 있게 만들어주는 라이브러리(axios 등) 덕분에

비동기 프로그래밍의 문턱이 크게 낮아져,

이제는 복잡한 기능도 더 쉽게 구현할 수 있는 시대가 되었습니다.

이는 웹 개발의 큰 발전이라 할 수 있습니다.

 

처음에 저는 데이터가 화면 새로고침 없이 당연히 전환되는 줄로만 알았습니다.

하지만 Ajax를 공부하면서 과거의 웹 개발 방식과 그에 따른 한계들을 알게 되었고,

Ajax가 그런 문제들을 어떻게 해결했는지 이해하게 되었습니다.

 

이런 변화를 알게 되니 앞으로의 웹 개발에서도 어떻게 더 개선할 수 있을지

고민하는 데 큰 도움이 되는 것 같습니다.