📌3-1단계: Ajax 네트워크 성능 최적화

💡 Ajax가 서버와 통신할 때 “더 빠르고 효율적으로” 작동하게 만드는 기술들입니다.

✅ 1. 왜 네트워크 최적화가 필요할까?

Ajax는 “서버에 요청 → 응답 받기” 이 과정을 계속 반복합니다.
요청 하나하나는 짧지만, 반복되면 속도가 점점 느려지고, 서버도 힘들어져요.

🧠 그래서 우리는 다음을 목표로 해요:

목표	설명
⏱ 빠르게	네트워크 비용 줄이기 (전송 시간 단축)
📦 작게	데이터 크기를 줄이기 (압축)
🔁 적게	같은 요청은 반복하지 않기 (캐시 활용)

✅ 2. HTTP Keep-Alive

📦 개념

하나의 연결로 여러 요청을 주고받는 기술

📌 원래 방식 (비효율)

[브라우저] ---연결요청---> [서버]
         <---응답--- (연결 종료)
[브라우저] ---다시 연결---> [서버]
         <---응답--- (연결 종료)
(반복)

👉 요청할 때마다 연결을 새로 만듬 → 느림, 낭비

✅ Keep-Alive 방식 (효율)

[브라우저] ---연결요청 (Keep-Alive)--->
[서버]     <---응답 (Keep-Alive 유지)
⏱ 이후 요청도 같은 연결로 처리

🔧 장점

연결 재사용 가능 → 속도 빨라짐
CPU/메모리 부담 줄어듦
서버 리소스 절약

✅ 3. Gzip 압축

📦 개념

서버에서 응답 데이터를 압축해서 보내는 기술

예시

서버 응답: {"user":"hong", "email":"hong@gmail.com"}
보통: 60바이트
Gzip 사용 시: 20바이트로 압축됨 📉

🔧 장점

전송 크기 감소 → 빠르게 도착
성능 향상
이미지/HTML/JS/CSS 전부 압축 가능

💡 사용 방법 (서버 설정)

# Apache 예시
AddOutputFilterByType DEFLATE text/html text/css application/javascript

# Nginx 예시
gzip on;
gzip_types text/plain text/css application/json;

✅ 4. HTTP/2 + Server Push

📦 개념

HTTP/2는 기존 HTTP의 업그레이드 버전 (더 빠르고 병렬적)

특징

기술	설명
하나의 연결로 여러 요청 가능	기존은 1개씩 → 이제는 병렬 처리
Header 압축	요청 헤더도 작게 전송
Server Push	클라이언트가 요청하지 않아도, 서버가 미리 자바스크립트/스타일을 푸시 가능

💡 실무 적용 예시

브라우저가 HTML 요청 → 서버가 HTML + CSS + JS 전부 한 번에 전송
→ 첫 화면 로딩이 훨씬 빨라짐 🚀

✅ 5. 캐싱 전략 (Cache-Control)

📦 캐시란?

똑같은 데이터를 다시 요청하지 않도록 미리 저장해두는 것

📊 예시

✅ 첫 요청 → 서버에서 JSON 받음
✅ 두 번째 요청 → 저장된 캐시에서 바로 가져옴 (0.001초)

🔧 Cache-Control 헤더

Cache-Control: max-age=3600

1시간 동안은 다시 요청하지 않고 브라우저가 캐시 사용
자원 변경 시에는 새로 요청 가능

✅ 6. ETag & If-Modified-Since

📦 ETag (Entity Tag)

“이 파일이 바뀌었는지 안 바뀌었는지 확인하는 고유 코드”

📊 동작 순서

브라우저가 서버에 요청 → 서버가 응답 + ETag 함께 보냄
브라우저는 ETag를 저장함
나중에 또 요청할 때:
```
 If-None-Match: "etag123"
```
서버가 파일이 그대로라면 → 응답 없이 304 Not Modified만 보냄

→ 데이터 재전송 없이 캐시 사용

💡 장점

불필요한 데이터 전송 없음
데이터가 바뀌었을 때만 서버 응답
Ajax 캐시 전략으로 매우 유용

✅ 전체 요약 카드

기술	쉽게 설명	성능 효과
Keep-Alive	연결을 끊지 않고 재사용	⏱ 연결 속도 향상
Gzip	응답 압축	📦 전송량 감소
HTTP/2	요청을 한 번에 병렬 처리	🚀 빠른 병렬 전송
Server Push	서버가 필요한 파일을 미리 줌	🎁 로딩 속도 향상
캐시	같은 요청을 다시 하지 않음	🔁 요청 수 감소
ETag	변경됐을 때만 서버 응답	🧠 스마트 요청 제어

✅ 면접 질문 예시 + 해설

❓ Q. Ajax 성능 최적화를 위해 사용할 수 있는 네트워크 계층 기술은?

✅ A.

Keep-Alive로 연결을 재사용하고,
Gzip으로 응답 크기를 줄이며,
HTTP/2와 Server Push로 초기 리소스 전송을 빠르게 하고,
ETag 및 Cache-Control로 중복 요청을 방지합니다.

→ 이를 통해 트래픽 절감 + 응답 속도 개선 + 사용자 경험 향상

✅ 3-2단계: Ajax 요청 최적화 (Debounce / Throttle / 병합 / 중복 제거)

사용자가 빠르게 타이핑하거나 스크롤할 때마다 Ajax를 호출하면…

❗ 서버는 터지고, 성능은 떨어지고, 결과도 꼬이게 됩니다.

그래서 우리는 “지능적으로 요청을 줄이는 방법”을 배워야 해요.

✅ 1. 왜 요청 최적화가 필요할까?

📌 예시: 검색창에서 타이핑할 때마다 Ajax 요청을 보낸다면?

h → Ajax 호출
he → 또 호출
hel → 또 호출
…

💣 너무 많은 요청 → 서버 터짐

⚠️ 응답 순서가 꼬여서 결과도 잘못 나올 수 있음

✅ 2. Debounce (디바운스)

❗ “마지막 입력 이후 일정 시간 기다렸다가 딱 1번만 실행”

📖 쉬운 설명:

중학생이 검색창에 타자를 칠 때, 입력 끝날 때까지 기다렸다가 Ajax를 1번만 보냄

📦 예시 코드

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer); // 이전 타이머 취소
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

const searchAjax = debounce(function() {
  fetch("/search?q=" + input.value);
}, 500);

입력 후 0.5초(500ms) 동안 입력이 없으면 실행
입력 중엔 실행 안 함

✅ 사용 예시

🔍 실시간 검색 (검색어 자동완성)
📦 필터링 기능
💬 입력 감지

✅ 3. Throttle (스로틀)

❗ “최대 초당 1번만 실행 — 너무 자주 실행되지 않도록 제어”

📖 쉬운 설명

“사용자가 아무리 마우스를 휘저어도, 1초에 한 번만 Ajax 요청 보내기”

📦 예시 코드

function throttle(fn, limit) {
  let lastCall = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCall >= limit) {
      lastCall = now;
      fn.apply(this, args);
    }
  };
}

const throttledScroll = throttle(function() {
  fetch("/load/more");
}, 1000);

✅ 사용 예시

📜 무한 스크롤 Ajax 호출
🖱️ resize, scroll 이벤트 제어
📷 실시간 카메라 처리

✅ 4. 요청 병합 (Batching)

여러 요청을 모아서 한 번에 보내는 기술

📖 쉬운 설명

“친구 10명이 아이스크림 하나씩 시킬 때,

👉 한 사람이 10개를 한 번에 주문하면 빠르고 효율적!”

📦 예시

// 3개의 요청을 1개로 묶기
fetch("/batch", {
  method: "POST",
  body: JSON.stringify([
    { type: "search", keyword: "JavaScript" },
    { type: "recommend", userId: "abc123" },
    { type: "popular", category: "tech" }
  ])
});

✅ 장점

요청 수 줄이기 → 서버 부담 감소
응답도 일괄 처리 → 성능 개선

✅ 5. 중복 제거 처리

같은 요청이 여러 번 발생할 경우, 이미 보낸 건 무시하거나 중복을 취소함

📖 쉬운 설명

“이미 배달 온 짜장면이 있는데 또 시켰어요?” → 그럼 두 번째 건 취소!

📦 예시: 요청 취소 + 중복 방지

let controller;

function sendRequest(query) {
  if (controller) controller.abort(); // 기존 요청 취소
  controller = new AbortController();
  fetch(`/search?q=${query}`, { signal: controller.signal })
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => {
      if (err.name === "AbortError") {
        console.log("중복 요청 중단됨");
      }
    });
}

✅ 실제 UI 조합 예시

기능	Debounce	Throttle	중복제거	병합
검색 자동완성	✅	❌	✅	❌
무한 스크롤	❌	✅	✅	❌
체크박스 선택 후 요청	✅	❌	✅	✅

✅ 면접 질문 예시 + 해설

❓ Q. 사용자가 빠르게 입력할 때 서버에 많은 요청이 발생합니다. 어떻게 처리하시겠습니까?

✅ A.

입력이 멈춘 뒤에만 요청이 발생하도록 debounce를 적용하여 불필요한 요청 제거
중복 요청이 들어오는 경우를 대비해 이전 요청을 AbortController로 취소 처리
다수 요청을 묶어 보내는 batching을 통해 요청 수를 줄이고 응답 일괄 처리함

✅ 전체 요약 카드

기술	설명	사용 예
Debounce	입력이 멈춘 뒤 일정 시간 후 1번 실행	검색창
Throttle	일정 시간마다 최대 1번 실행	스크롤 이벤트
Batching	요청을 묶어서 한 번에 보냄	멀티 요청 처리
중복 제거	동일 요청이 겹치면 하나만 처리	빠른 클릭/입력 방지

✅ 3-3단계: Ajax 응답 최적화

사용자가 요청한 데이터를 서버가 빠르고 가볍게, 딱 필요한 만큼만 보내줘야 합니다.

👉 이게 바로 “응답 최적화(Response Optimization)”입니다!

✅ 1. Lazy Rendering vs Pre-rendering

📌 Lazy Rendering (지연 렌더링)

❗ “보이기 전까지는 화면에 그리지 말자!”

👦🏻 쉬운 설명

유튜브처럼 아래로 스크롤하기 전엔 썸네일이 안 뜨는 것!

→ 눈에 보일 때만 그리기 = 성능 굿!

🔧 실무 코드 예시

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src; // 이미지 로딩
    }
  });
});

document.querySelectorAll('img.lazy').forEach(img => observer.observe(img));

✅ 메모리 줄고, 로딩 속도 향상!

📌 Pre-rendering (선 렌더링)

❗ “필요할 것 같으니 미리 화면에 그려두자!”

👦🏻 쉬운 설명

다음 페이지 내용을 미리 백그라운드에서 불러오기

→ 클릭하자마자 팍 뜸! 속도 체감은 최고!

🔧 실무 예시

// 다음 페이지 미리 요청
fetch("/page/2").then(res => res.text()).then(html => {
  sessionStorage.setItem("preloaded", html);
});

✅ 비교 정리

항목	Lazy Rendering	Pre-rendering
언제 그리나?	사용자가 볼 때	미리
속도 체감	약간 느림 → 점점 빠름	처음부터 빠름
메모리 사용	적음	많음 (미리 렌더링 하니까)
사용 예	무한 스크롤, 이미지 리스트	다음 페이지, 추천 기사 등

✅ 2. 응답 데이터 최소화 (작게 만들기)

🔥 왜 필요한가요?

Ajax 응답 데이터가 너무 크면…

다운로드 느림
렌더링도 오래 걸림
모바일에선 데이터 낭비까지 📉

📦 최소화 전략 1: 필요한 필드만 주기

❌ 나쁜 예시

{
  "id": 1,
  "title": "게시글 제목",
  "content": "내용",
  "writer": "관리자",
  "writerEmail": "admin@gdu.com",
  "writerPhone": "010-0000-0000"
}

→ 화면엔 제목, 작성자만 쓰는데 5개 필드를 다 줌 ❌

✅ 좋은 예시

{
  "id": 1,
  "title": "게시글 제목",
  "writer": "관리자"
}

→ 필요한 것만! → 빠르고 가벼움!

📦 최소화 전략 2: JSON 필드 짧게 만들기

{
  "i": 1,
  "t": "게시글 제목",
  "w": "관리자"
}

→ ✅ 단축 키처럼 사용하면 전송 크기 ↓

단점: 클라이언트 코드에서 별도로 매핑 필요
실무에서는 GraphQL 등으로 해결 가능

✅ 3. Pagination (페이징 처리)

📌 개념

❗ “한 번에 10개만 보여주자”

👦🏻 쉬운 설명

인스타그램에서 한 번에 모든 사진을 다 보여주지 않죠?

→ 스크롤할 때마다 조금씩 로딩!

📦 예시 요청

GET /posts?page=1&size=10

페이지 1번, 10개씩
서버는 딱 10개만 JSON으로 보내줌

✅ 장점

항목	효과
응답 속도	줄어듦
렌더링 성능	빨라짐
데이터 전송량	확 줄어듦

✅ 4. 서버 성능을 위한 응답 구조 설계 팁

전략	설명
데이터 필터링	프론트에서 안 쓰는 건 서버에서 미리 제거
페이지네이션	`limit`, `offset` 또는 `cursor` 방식
요약 데이터 제공	전체 글 수, 총 페이지 수 등을 함께 반환
조건부 응답	예: `If-None-Match`, `304 Not Modified`

✅ 5. 면접 질문 예시 + 해설

❓ Q. Ajax 응답 최적화를 위해 어떤 전략을 사용하시나요?

✅ A.

필요한 필드만 포함하고, 응답 JSON을 최소화함
한 번에 너무 많은 데이터를 전송하지 않도록 pagination 처리
Lazy Rendering으로 초기 렌더링 부담을 줄이고, Pre-rendering으로 UX를 향상
조건부 요청(ETag, If-Modified-Since)으로 네트워크 절감

✅ 전체 요약 카드

전략	설명	효과
Lazy Rendering	보일 때만 렌더링	메모리 절약, 성능 향상
Pre-rendering	미리 렌더링	UX 향상, 빠른 전환
JSON 필드 최소화	필요한 정보만 전달	응답 크기 ↓
Pagination	일정 개수만 응답	속도 ↑, 부하 ↓

** 📌3-1단계: Ajax 네트워크 성능 최적화 **

✅ 1. 왜 네트워크 최적화가 필요할까?

✅ 2. HTTP Keep-Alive

📦 개념

📌 원래 방식 (비효율)

✅ Keep-Alive 방식 (효율)

🔧 장점

✅ 3. Gzip 압축

📦 개념

예시

🔧 장점

💡 사용 방법 (서버 설정)

✅ 4. HTTP/2 + Server Push

📦 개념

특징

💡 실무 적용 예시

✅ 5. 캐싱 전략 (Cache-Control)

📦 캐시란?

📊 예시

🔧 Cache-Control 헤더

✅ 6. ETag & If-Modified-Since

📦 ETag (Entity Tag)

📊 동작 순서

💡 장점

✅ 전체 요약 카드

✅ 면접 질문 예시 + 해설

❓ Q. Ajax 성능 최적화를 위해 사용할 수 있는 네트워크 계층 기술은?

✅ 1. 왜 요청 최적화가 필요할까?

📌 예시: 검색창에서 타이핑할 때마다 Ajax 요청을 보낸다면?

✅ 2. Debounce (디바운스)

📖 쉬운 설명:

📦 예시 코드

✅ 사용 예시

✅ 3. Throttle (스로틀)

📖 쉬운 설명

📦 예시 코드

✅ 사용 예시

✅ 4. 요청 병합 (Batching)

📖 쉬운 설명

📦 예시

✅ 장점

✅ 5. 중복 제거 처리

📖 쉬운 설명

📦 예시: 요청 취소 + 중복 방지

✅ 실제 UI 조합 예시

✅ 면접 질문 예시 + 해설

❓ Q. 사용자가 빠르게 입력할 때 서버에 많은 요청이 발생합니다. 어떻게 처리하시겠습니까?

✅ 전체 요약 카드

✅ 1. Lazy Rendering vs Pre-rendering

📌 Lazy Rendering (지연 렌더링)

👦🏻 쉬운 설명

🔧 실무 코드 예시

📌 Pre-rendering (선 렌더링)

👦🏻 쉬운 설명

🔧 실무 예시

✅ 비교 정리

✅ 2. 응답 데이터 최소화 (작게 만들기)

🔥 왜 필요한가요?

📦 최소화 전략 1: 필요한 필드만 주기

❌ 나쁜 예시

✅ 좋은 예시

📦 최소화 전략 2: JSON 필드 짧게 만들기

✅ 3. Pagination (페이징 처리)

📌 개념

👦🏻 쉬운 설명

📦 예시 요청

✅ 장점

✅ 4. 서버 성능을 위한 응답 구조 설계 팁

✅ 5. 면접 질문 예시 + 해설

❓ Q. Ajax 응답 최적화를 위해 어떤 전략을 사용하시나요?

✅ 전체 요약 카드

📌3-1단계: Ajax 네트워크 성능 최적화