JavaScript - About 비동기, AJAX란?

AJAX란 무엇인가?

AJAX는 "Asynchronous JavaScript And XML"의 약자로, JavaScript를 사용하여 서버와 비동기적으로 데이터를 주고받는 기술이다. 비동기 처리를 통해 웹페이지 전체를 새로고침하지 않고도 필요한 데이터를 서버로부터 받아올 수 있다. 이로 인해 사용자 경험(UX)이 크게 향상된다.

AJAX의 동작 원리

AJAX는 클라이언트(브라우저)와 서버 간의 비동기 데이터 통신을 관리하는 메커니즘으로 다음의 단계로 동작한다.

1. 클라이언트 요청:
   • JavaScript가 서버로 요청을 보냅니다.
   • 요청은 비동기적으로 수행되며, 웹페이지가 새로고침되지 않는다.
2. 서버 처리:
   • 서버는 클라이언트 요청을 처리하고, 데이터(예: JSON, XML)를 생성.
3. 클라이언트 응답:
   • 서버로부터 응답 데이터를 받아 웹페이지의 특정 부분을 동적으로 업데이트.

이 과정에서 전체 페이지가 다시 로드되지 않기 때문에 사용자는 더 빠르고 유연한 경험을 할 수 있다.

AJAX 구현을 위한 주요 도구

AJAX는 특정 기술이 아니라 여러 도구와 개념의 조합이다. 다음은 AJAX를 구현하는 데 사용되는 주요 도구들이다.

1. XMLHttpRequest

AJAX 구현을 위한 초기 기술이다. 비동기적으로 서버와 통신할 수 있도록 설계되었다. 하지만 사용법이 복잡하고, 코드가 길어질수록 "콜백 지옥" 문제를 초래할 수 있다.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

xhr.onload = function () {
  if (xhr.status === 200) {
    console.log('Response:', xhr.responseText);
  }
};

xhr.send();

 

2. Fetch API

 

Fetch API는 XMLHttpRequest의 현대적인 대안으로, Promise 기반으로 설계되어 비동기 작업을 더 간결하게 처리할 수 있다.

fetch('https://api.example.com/data')
  .then((response) => response.json())
  .then((data) => console.log('Data:', data))
  .catch((error) => console.error('Error:', error));

 

3. Promise

 

Promise는 비동기 작업의 결과를 나타내는 객체이다. AJAX 요청 후 서버 응답을 처리하거나 에러를 처리하는 등의 작업을 체계적으로 관리할 수 있다.

const getData = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data received');
    }, 1000);
  });

getData()
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

 

4. Async/Await

 

Async/Await은 Promise를 기반으로 하여 비동기 작업을 동기 코드처럼 읽기 쉽게 작성할 수 있도록 도와준다. Fetch API와 함께 사용하면 더욱 간결하게 AJAX 요청을 처리할 수 있다.

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log('Data:', data);
  } catch (error) {
    console.error('Error:', error);
  }
};

fetchData();

 

AJAX의 장점과 단점

장점

1. 새로고침 없는 데이터 업데이트: 필요한 부분만 업데이트하므로 빠르고 유연한 사용자 경험을 제공한다.
2. 효율적인 데이터 전송: 전체 페이지를 다시 로드하지 않으므로 데이터 전송량이 줄어든다.
3. 다양한 데이터 형식 지원: JSON, XML, HTML, 텍스트 등 다양한 데이터 형식을 주고받을 수 있다.

단점

1. Cross-Origin 제한: 기본적으로 동일 출처(Same-Origin) 정책을 따르므로, 다른 도메인과 통신하려면 CORS 설정이 필요하다.
2. SEO 문제: 클라이언트에서 동적으로 데이터를 로드하므로, 검색 엔진이 콘텐츠를 인덱싱하지 못할 수 있다.
3. 구형 브라우저 호환성: Fetch API와 같은 최신 기술은 구형 브라우저에서 지원되지 않는다.

 

AJAX와 함께 사용되는 데이터 형식: JSON

 

AJAX에서 가장 많이 사용되는 데이터 형식은 **JSON(JavaScript Object Notation)**이다. 가볍고 구조화된 데이터를 처리하기에 적합하다.

{
  "name": "John Doe",
  "age": 30,
  "email": "john.doe@example.com"
}

 

JSON 데이터를 처리하는 JavaScript 코드 예제:

fetch('https://api.example.com/user')
  .then((response) => response.json())
  .then((data) => {
    console.log(data.name); // John Doe
  });

 

비유로 이해하기

AJAX를 비동기 통신의 철학이라고 생각하고, 그 위에 쌓인 도구들을 기술 스택으로 이해해보자

1. AJAX는 비동기 데이터 통신의 기본 철학.
2. XMLHttpRequest는 AJAX를 구현하기 위해 처음 만들어진 기술.
3. 이후 등장한 Fetch API는 AJAX 구현을 더 간단하게 만든 현대적 도구.
4. Promise는 AJAX 요청을 관리하고 비동기 작업을 체계적으로 처리하기 위한 메커니즘.
5. Async/Await은 Promise를 쉽게 사용하기 위한 더 간단한 문법.