AJAX를 활용한 실시간 데이터 처리｜비동기 웹 개발의 핵심 이해하기

⚡ AJAX를 활용한 실시간 데이터 처리｜비동기 웹 개발의 핵심 이해하기

안녕하세요, 퍼블리셔 노미입니다!
웹 개발을 하다 보면 “페이지 새로고침 없이 데이터를 가져오는 방법 없을까?”라는 고민을 하게 되죠.
그 해답이 바로 AJAX입니다.

AJAX는 오늘날 대부분의 웹앱에서 사용하는 비동기 데이터 통신 기술입니다.
이 글에서는 AJAX의 기본 개념부터 실전 fetch 활용법, 서버와의 실시간 데이터 주고받는 방식까지 초보자도 이해할 수 있도록 쉽게 설명해드릴게요.

---

📌 AJAX란 무엇인가요?

AJAX(Asynchronous JavaScript and XML)은 JavaScript를 이용해 페이지 전체를 새로고침하지 않고 서버와 데이터를 주고받을 수 있게 해주는 기술입니다.

중요한 건 "비동기 통신"이라는 개념!

• 페이지를 새로 고침하지 않고 서버와 데이터 교환
• HTML, JSON, XML 등 다양한 형식으로 데이터 주고받기 가능
• UI 흐름을 끊지 않고 사용자 경험(UX) 향상

---

🔁 AJAX의 흐름 구조

1. 사용자가 버튼 클릭
2. JavaScript가 서버로 요청 전송
3. 서버에서 JSON 응답
4. 브라우저에서 결과를 처리 및 화면 업데이트

---

📜 XMLHttpRequest 기본 사용법

const xhr = new XMLHttpRequest();

xhr.open("GET", "/api/data");
xhr.send();

xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log("데이터:", data);
  }
};

하지만 이건 다소 복잡하고 코드가 길어지는 단점이 있어요.
그래서 요즘은 fetch API를 AJAX 대안으로 많이 사용합니다!

---

⚙️ fetch API로 비동기 데이터 요청

fetch("/api/data")
  .then(response => response.json())
  .then(data => {
    console.log("결과:", data);
  })
  .catch(error => {
    console.error("에러 발생:", error);
  });

→ 매우 간결하고 직관적!

---

🧪 실전 예제: 버튼 클릭 시 데이터 받아오기

<button id="loadBtn">데이터 불러오기</button>
<ul id="resultList"></ul>

<script>
document.getElementById("loadBtn").addEventListener("click", function() {
  fetch("/api/users")
    .then(res => res.json())
    .then(data => {
      const list = document.getElementById("resultList");
      list.innerHTML = "";
      data.forEach(user => {
        const li = document.createElement("li");
        li.textContent = user.name;
        list.appendChild(li);
      });
    });
});
</script>

---

🛠️ 실시간 검색 구현 예제

<input type="text" id="searchInput" placeholder="검색어 입력">
<ul id="searchResult"></ul>

<script>
const input = document.getElementById("searchInput");
input.addEventListener("input", function() {
  const keyword = input.value;
  fetch("/api/search?q=" + encodeURIComponent(keyword))
    .then(res => res.json())
    .then(data => {
      const ul = document.getElementById("searchResult");
      ul.innerHTML = "";
      data.forEach(item => {
        const li = document.createElement("li");
        li.textContent = item.title;
        ul.appendChild(li);
      });
    });
});
</script>

→ 검색어 입력과 동시에 결과가 실시간으로 출력되는 구조

---

✅ 응답 상태 처리하기

fetch("/api/data")
  .then(response => {
    if (!response.ok) {
      throw new Error("네트워크 응답 오류");
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.error("에러:", err.message);
  });

---

🔐 POST 요청으로 서버에 데이터 전송하기

fetch("/api/send", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    name: "홍길동",
    email: "hong@example.com"
  })
})
.then(res => res.json())
.then(result => {
  console.log("결과:", result);
});

→ fetch는 GET뿐 아니라 POST 요청도 쉽게 구현 가능!

---

💡 비동기 처리의 장점 정리

• 사용자 경험 향상 – 새로고침 없이 콘텐츠 갱신
• 데이터만 요청 – 빠른 로딩 시간
• 서버와 프론트 분리 가능

---

📚 마무리하며

AJAX는 현대 웹 개발에서 반드시 익혀야 할 개념입니다.
처음엔 생소하지만, 오늘 배운 fetch API를 중심으로 다양한 비동기 통신 기능을 구현해볼 수 있어요.

다음 글에서는 JSON Server를 로컬에서 구축하고 실제 fetch 통신 실습을 진행해볼게요!

---

#AJAX입문 #fetchAPI #비동기통신 #JavaScript실전 #실시간검색 #프론트엔드개발 #웹UX개선 #웹퍼블리싱 #퍼블리셔노미