실무 프로젝트: 상태와 API

로딩·성공·빈 결과·실패·취소 상태를 갖춘 목록을 구현합니다.

개념 이해하기

API 화면은 성공 데이터만 그리는 코드가 아니라 요청 생명주기를 관리하는 코드입니다. 이전 요청을 취소하고 HTTP 상태와 데이터 구조를 검증하며 모든 UI 상태를 명시합니다.

상태를 idle/loading/success/empty/error로 모델링하면 서로 모순되는 spinner와 오류가 동시에 보이는 문제를 줄입니다.

응답을 신뢰하지 말고 필요한 필드 타입을 검증하며 사용자 문자열은 textContent로 출력합니다.

재시도는 멱등성, backoff, 네트워크 상태를 고려하고 사용자가 다시 시도할 방법을 제공합니다.

이번 강좌에서

로딩·성공·빈 결과·실패·취소 상태를 갖춘 목록을 구현합니다.

상태를 idle/loading/success/empty/error로 모델링하면 서로 모순되는 spinner와 오류가 동시에 보이는 문제를 줄입니다.

작은 정상 사례뿐 아니라 실패·경계 사례까지 검증합니다.

처음에 자주 헷갈리는 부분

컴포넌트가 사라진 뒤 완료된 요청이 상태를 갱신하지 않도록 취소와 정리를 구현하세요.

직접 바꿔보세요request의 결과를 빈 배열과 실패로 바꿔 모든 상태를 표시하세요.

const loadButton = document.querySelector("#load");
const cancelButton = document.querySelector("#cancel");
const statusElement = document.querySelector("#status");
const listElement = document.querySelector("#list");
let activeController = null;

cancelButton.addEventListener("click", () => activeController?.abort());
loadButton.addEventListener("click", async () => {
  activeController?.abort();
  const controller = new AbortController();
  activeController = controller;
  loadButton.disabled = true;
  cancelButton.disabled = false;
  statusElement.textContent = "불러오는 중";
  listElement.replaceChildren();
  try {
    const response = await request(controller.signal);
    if (!response.ok) throw new Error("HTTP " + response.status);
    const items = await response.json();
    if (
      !Array.isArray(items) ||
      !items.every((item) => Number.isInteger(item.id) && typeof item.title === "string")
    ) {
      throw new TypeError("응답 형식 오류");
    }
    statusElement.textContent = items.length ? "완료" : "결과 없음";
    for (const item of items) {
      const listItem = document.createElement("li");
      listItem.textContent = item.title;
      listElement.append(listItem);
    }
  } catch (error) {
    statusElement.textContent =
      error.name === "AbortError" ? "요청을 취소했습니다." : "실패: " + error.message;
  } finally {
    if (activeController === controller) {
      activeController = null;
      loadButton.disabled = false;
      cancelButton.disabled = true;
    }
  }
});

실행 결과안전한 브라우저 환경