# AJAX

**AJAX**(Asynchronous JavaScript and XML)는 웹 브라우저에서 비동기 방식으로 서버와 데이터를 교환하여 웹 페이지의 일부분만 갱신할 수 있는 웹 개발 기법입니다. 전통적인 웹 페이지가 전체를 다시 로드하는 방식과 달리, AJAX를 활용하면 사용자의 인터랙션에 따라 페이지의 일부만 동적으로 업데이트되므로, 더 빠르고 반응성이 뛰어난 사용자 경험(UX)을 제공할 수 있습니다.

## 개요

AJAX는 단일 기술이 아니라 여러 웹 표준 기술의 집합입니다. 이 용어는 2005년 제이콥 자일닉스(Jacob Nielsen)가 제안한 개념을 바탕으로 대중화되었으며, 특히 구글 맵스(Google Maps)와 지메일(Gmail)의 등장으로 그 유용성이 널리 인정받게 되었습니다.

AJAX의 핵심은 **비동기 통신**입니다. JavaScript의 `XMLHttpRequest` 객체(또는 현대의 `Fetch API`)를 사용하여 백엔드 서버와 데이터를 주고받을 때, 페이지의 전체 리로드 없이 배경에서 데이터를 처리합니다. 이로 인해 사용자는 페이지 전환 중 발생하는 하얀 화면이나 로딩 시간을 경험하지 않고, 끊김 없는 인터페이스를 유지할 수 있습니다.

## 주요 구성 요소

AJAX는 다음과 같은 여러 기술의 조합으로 이루어집니다:

1.  **HTML/CSS**: 정보의 표시와 스타일링을 담당합니다.
2.  **DOM**(Document Object Model): 동적으로 표시되고 상호작용하는 문서와 콘텐츠를 접근하고 조작하는 인터페이스입니다.
3.  **XMLHttpRequest** 또는 **Fetch API**: 서버와 비동기적으로 데이터를 교환하는 핵심 객체입니다.
4.  **JavaScript**: 모든 위의 기술을 결합하고 로직을 처리하는 프로그래밍 언어입니다.
5.  **JSON**(JavaScript Object Notation): 현재는 XML보다 더 널리 사용되며, 데이터를 가볍고 빠르게 전송하기 위한 데이터 교환 형식입니다.

## 동작 원리

AJAX의 일반적인 동작 흐름은 다음과 같습니다:

1.  **이벤트 발생**: 사용자가 웹 페이지에서 특정 동작(예: 버튼 클릭, 스크롤)을 수행합니다.
2.  **요청 생성**: JavaScript가 `XMLHttpRequest` 또는 `Fetch API`를 통해 서버로 HTTP 요청(GET, POST 등)을 보냅니다.
3.  **서버 처리**: 서버는 요청을 받아 데이터를 처리하거나 데이터베이스에서 정보를 조회합니다.
4.  **응답 수신**: 서버가 처리 결과를 클라이언트(브라우저)로 반환합니다.
5.  **DOM 업데이트**: JavaScript가 서버로부터 받은 데이터를 파싱하고, DOM을 조작하여 웹 페이지의 특정 부분만 갱신합니다.

## AJAX의 장점과 단점

### 장점
*   **향상된 사용자 경험**: 페이지 리로드 없이 데이터를 업데이트하므로 응답 속도가 빠르고 인터페이스가 매끄럽습니다.
*   **대역폭 효율성**: 필요한 데이터만 전송하므로 네트워크 트래픽을 줄일 수 있습니다.
*   **서버 부하 분산**: 전체 페이지를 렌더링하지 않아도 되므로 서버의 처리 부담이 상대적으로 줄어듭니다.

### 단점
*   **SEO**(Search Engine Optimization) 문제: 동적으로 로드된 콘텐츠는 크롤러가 인덱싱하기 어려울 수 있습니다. (최근에는 SSR이나 SSG 기술로 보완됨)
*   **브라우저 호환성**: 초기에는 브라우저 간 `XMLHttpRequest` 구현 차이로 인해 호환성 문제가 있었으나, 현재는 `Fetch API`와 폴리필을 통해 대부분 해결되었습니다.
*   **보안 위험**: XSS(크로스 사이트 스크립팅)나 CSRF(크로스 사이트 요청 위조)와 같은 보안 취약점에 노출될 수 있으므로 적절한 보안 조치(토큰 검증, CORS 설정 등)가 필요합니다.

## 현대적 구현: Fetch API

과거에는 `XMLHttpRequest`를 주로 사용했지만, 현재는 더 간결하고 강력한 **Fetch API**가 표준으로 권장됩니다. Fetch API는 Promise를 기반으로 하여 콜백 지옥(Callback Hell)을 피하고 코드의 가독성을 높입니다.

```javascript
// Fetch API를 사용한 GET 요청 예시
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log('Success:', data);
    // 받은 데이터를 사용하여 DOM 업데이트
    updateUI(data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });
```

## 관련 기술 및 발전

AJAX는 이후 **SPA**(Single Page Application)의 기반 기술로 자리 잡았으며, React, Vue, Angular 같은 현대적인 프론트엔드 프레임워크의 핵심 원리가 되었습니다. 또한, RESTful API나 GraphQL과 같은 백엔드 아키텍처와 밀접하게 연관되어 있습니다.

최근에는 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)이 주목받으면서, 순수한 클라이언트 사이드 렌더링의 한계를 보완하기 위해 하이브리드 접근 방식이 많이 사용되고 있습니다.

## 참고 자료

*   [MDN Web Docs - Using Fetch](https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch)
*   [W3C - XMLHttpRequest Standard](https://xhr.spec.whatwg.org/)
*   Jacob, J. (2005). *Ajax: A New Approach to Web Applications*. Adaptive Path.