AJAX & 비동기 처리

🛰️ AJAX란?

AJAX = Asynchronous JavaScript And XML
비동기적으로 서버와 데이터를 주고받기 위한 기술 (XML 뿐 아니라 JSON, HTML 등도 가능)

• 전체 페이지를 새로고침하지 않고 일부만 업데이트 가능
• 사용자 경험을 향상시키는 핵심 기술

---

🧠 AJAX 예시 흐름 (PDF 비유 기반 설명)

실제 일상	AJAX 방식 비유
세탁기 돌리기 → 건조기 돌리기 → 빨래 개기	연속된 비동기 작업
치킨 주문하기 → 먹기 → 정리	요청 → 응답 → 처리
로봇청소기 돌리기 → 비우기	중간 결과 후속 작업
쓰레기 분리수거	단일 비동기 작업

---

📦 AJAX 핵심 개념

• XMLHttpRequest 객체를 사용하여 서버와 비동기 통신 가능
• 전체 페이지를 새로 고침하지 않아도 데이터 교환 가능
• 응답 형식: JSON, XML, HTML, plain text 등

---

⚙️ XMLHttpRequest 기본 구조

const xhr = new XMLHttpRequest();

xhr.open("GET", "data.json", true);  // 요청 초기화
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

---

📄 주요 메서드

메서드	설명
open(method, url, async)	요청 방식/주소/비동기 여부 지정
send()	서버에 요청 전송
setRequestHeader()	요청 헤더 설정

---

📍 주요 속성 (property)

속성	설명
readyState	요청 상태 (0~4)
status	HTTP 응답 코드
responseText	응답 데이터 (텍스트)
responseXML	응답 데이터 (XML)
onreadystatechange	상태 변경 시 실행되는 콜백 함수

---

🧭 AJAX 동작 순서 (PDF 흐름도 해석)

1. 이벤트 발생 (예: 버튼 클릭)
2. XMLHttpRequest 객체 생성
3. 콜백 함수 설정
4. 비동기 요청 전송
5. 서버 응답 처리
6. 화면 일부에 결과 반영

---

🔄 콜백 함수(Callback)

• 특정 작업이 완료된 후 실행될 함수

• 함수의 인자로 전달되어 나중에 실행됨

• 콜백이 중첩되면 "콜백 지옥(Callback Hell)" 발생 가능

---

🧪 Promise

비동기 처리를 더 선언적이고 가독성 좋게 표현

fetch("data.json")
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error))
  .finally(() => console.log("완료"));

Promise 상태

• pending: 대기 중

• fulfilled: 이행됨

• rejected: 거부됨

---

🔧 Promise 주요 메서드

메서드	설명
.then()	이행 시 실행될 콜백
.catch()	거부 시 실행될 콜백
.finally()	결과에 상관없이 실행

---

🚀 fetch()

• 최신 브라우저 API

• Promise 기반 AJAX 통신을 더 간결하게

fetch("data.json")
  .then((response) => response.json())
  .then((data) => console.log(data));

fetch의 구조

fetch("url", {
  method: "GET",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data)
});

---

🔁 fetch 응답 처리

메서드	설명
response.text()	텍스트 형식으로 응답 받기
response.json()	JSON 형식으로 파싱된 응답 받기

---

✨ async & await (최신 비동기 방식)

async function loadData() {
    try {
        const res = await fetch("data.json");
        const data = await res.json();
        console.log(data);
    } catch (e) {
        console.error("에러 발생", e);
    }
}

특징

• async 함수는 항상 Promise 반환

• await은 Promise가 처리될 때까지 기다림

• .then() 체이닝보다 가독성 좋음

---

📌 JavaScript에서의 this

문맥	this의 바인딩
전역	window
객체 메서드	해당 객체
일반 함수	window (strict 모드에서는 undefined)
화살표 함수	정적 바인딩 – 외부 스코프의 this 사용

const obj = {
  name: "JS",
  regular: function () {
    console.log(this.name); // obj
  },
  arrow: () => {
    console.log(this.name); // window or undefined
  }
};

✅ 최종 요약

• AJAX는 페이지 새로고침 없이 서버와 비동기 통신 가능하게 하는 기술
• 핵심 객체는 XMLHttpRequest → Promise 기반 → fetch()로 진화
• 콜백 → Promise → async/await 순으로 가독성과 유지보수성 향상
• fetch는 가장 현대적인 비동기 API이며 JSON 처리도 용이
• this는 호출 맥락에 따라 동적으로 바인딩되며, 화살표 함수는 렉시컬 바인딩 사용