** 📌 9단계 문제 다시 보기**

100개의 상품 정보를 Ajax로 불러오는데

사용자가 빠르게 스크롤하면서 계속 요청을 보낸다.

서버는 처리 가능한 횟수(TPS)가 제한되어 있다.

---

당신의 목표는?

1. ✅ 서버 과부하 방지
2. ✅ 중복 요청 제거
3. ✅ UI 응답성 유지

---

✅ 해결 전략 한눈에 보기

전략	목적
Debounce	너무 자주 요청하지 않도록 딜레이 줌
요청 큐	순서대로 차례차례 요청하게 함
응답 캐싱	이미 받은 데이터는 다시 요청하지 않음
요청 취소	이전에 날린 요청이 아직 안 끝났다면 취소함

---

✅ 1. Debounce로 요청 빈도 조절

---

📖 개념

사용자가 빠르게 스크롤해도 0.3초 동안 멈추면 그때 1번만 요청

---

👦🏻 쉬운 설명

“엄마~ 엄마~ 엄마~ 엄마!”

→ 0.3초 동안 안 부르면 그때 말 들어주는 것 🧏

---

✅ 코드 예시

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

const requestItems = debounce(() => {
  fetchItems(); // Ajax 호출
}, 300);

✅ 사용자가 스크롤할 때마다 호출해도 300ms 멈추면 1번만 실행

---

✅ 2. 요청 큐로 과부하 방지

---

📖 개념

서버는 한 번에 많이 못 받으니, 요청을 줄 세워서 하나씩 보내야 함

---

👦🏻 쉬운 설명

햄버거 가게에서 한꺼번에 50명이 몰리면 주문 못 받음

→ 줄 세워서 1명씩 처리하면 문제 없음 🍔

---

✅ 코드 예시

class AjaxQueue {
  constructor() {
    this.queue = [];
    this.running = false;
  }

  enqueue(task) {
    this.queue.push(task);
    this.runNext();
  }

  async runNext() {
    if (this.running || this.queue.length === 0) return;
    this.running = true;
    const task = this.queue.shift();
    await task();
    this.running = false;
    this.runNext();
  }
}

const queue = new AjaxQueue();
queue.enqueue(() => fetch("/api/products?page=1"));

✅ 요청은 하나 끝날 때까지 다음 요청 대기 → TPS 보호!

---

✅ 3. 응답 캐싱으로 중복 제거

---

📖 개념

이미 받아온 페이지는 다시 요청하지 않고 캐시에 저장한 걸 그대로 보여줌

---

👦🏻 쉬운 설명

마트에서 같은 물건 또 사러 가려는데

“어? 집에 있네?” → 다시 안 가도 됨 🏠

---

✅ 코드 예시

const cache = {};

function getProducts(page) {
  if (cache[page]) return Promise.resolve(cache[page]);
  return fetch(`/api/products?page=${page}`)
    .then(res => res.json())
    .then(data => {
      cache[page] = data;
      return data;
    });
}

✅ 네트워크 낭비 없음

✅ 서버 부담 절감

✅ 사용자 체감 속도↑

---

✅ 4. 요청 취소로 중복 응답 방지

---

📖 개념

빠르게 연속 요청하면 이전 요청이 끝나기 전에 새로운 요청을 보내야 함

→ 이때 이전 요청은 abort() 처리

---

👦🏻 쉬운 설명

엄마한테 “햄버거 사와!” 했는데

1초 뒤에 “아냐 떡볶이!” → 햄버거는 취소해야 함

---

✅ 코드 예시

let controller;

function getPage(page) {
  if (controller) controller.abort(); // 이전 요청 취소
  controller = new AbortController();

  return fetch(`/api/products?page=${page}`, {
    signal: controller.signal
  })
    .then(res => res.json());
}

✅ UI에서 마지막 요청만 살아남게 만들 수 있음

✅ 서버도 덜 힘듦

---

✅ 최종 전략 요약 (💎 실무 적용형)

🧠 사용자가 빠르게 스크롤 →
  1. Debounce로 요청 빈도 제어 →
  2. 이미 본 페이지는 캐시로 반환 →
  3. 새 요청은 Ajax Queue로 줄 세우기 →
  4. 중간에 취소되면 AbortController로 이전 요청 취소 

---

✅ 면접 질문 예시 + 정답 구조

---

❓ Q. 상품 목록을 빠르게 스크롤하면서 Ajax 요청이 반복될 때,

서버 과부하 없이 효율적으로 응답성과 성능을 유지하려면 어떻게 하시겠습니까?

✅ A.

• 사용자의 스크롤 이벤트를 Debounce로 제어해 요청 빈도를 줄이고,
• 같은 데이터를 중복 요청하지 않도록 응답 캐시를 사용하며,
• 서버의 TPS 제한을 고려해 Ajax 요청을 큐로 순차 처리하고,

• 빠르게 발생한 이전 요청은 AbortController로 취소하여

  서버 부하와 UI 꼬임을 방지합니다.

---

✅ 전체 요약 카드

기술	목적	설명
Debounce	빈도 제한	연속 입력을 묶어서 한 번만 실행
Ajax Queue	과부하 방지	요청을 순서대로 1개씩 처리
응답 캐싱	중복 제거	이미 받은 데이터는 재사용
요청 취소	꼬임 방지	중간 요청은 Abort로 제거