이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

• ▸✅ Load Balancer L4 vs L7 + 알고리즘 (Round Robin·Least Conn)
• ▸✅ CDN (Cloudflare · CloudFront) 캐시 전략
• ▸✅ Reverse Proxy (Nginx) 의 역할

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

CDN (Content Delivery Network) — 지리적으로 분산된 캐시 서버 네트워크.

동작:
1. 사용자가 image.jpg 요청
2. DNS 가 가장 가까운 CDN edge 로 라우팅
3. Edge 캐시 hit ? → 즉시 응답
4. miss → origin 서버에 요청 → 받아서 캐시 + 사용자에게

왜 빠른가:

• ▸지리적 근접 (서울 사용자 → 도쿄 edge 가 50ms vs 미국 origin 200ms)
• ▸안 막힌 backbone 사용 (peering·private connection)
• ▸캐시 hit 율 ~95% (잘 설계 시)

대표 CDN:

캐시 정책 (HTTP 헤더):

• ▸Cache-Control: public, max-age=31536000, immutable — 1년·변경 X
• ▸Cache-Control: private, no-cache — 항상 origin 검증
• ▸Cache-Control: no-store — 절대 캐시 X
• ▸ETag: "abc123" — 콘텐츠 해시 (변경 감지)

Cache Invalidation (캐시 무효화):

• ▸새 버전 배포 시 URL 변경 (예: app.v2.js·app.HASH.js)
• ▸또는 purge API 호출 (Cloudflare·CloudFront)
• ▸잘못된 invalidation = "캐시 stale" 버그

현대 트렌드 — Edge Computing:

• ▸Cloudflare Workers·Vercel Edge Functions·AWS Lambda@Edge
• ▸캐시 + 연산 도 엣지에서 (개인화·인증)
• ▸응답 시간 ↓·서버 부하 ↓

Load Balancer — 트래픽을 여러 서버에 분배:

계층별:

• ▸L4 (Transport) — TCP/UDP 수준. 빠름. AWS NLB
• ▸L7 (Application) — HTTP 수준. URL·헤더 기반 라우팅. AWS ALB·Nginx

분배 알고리즘:

헬스 체크:

• ▸LB 가 주기적으로 /health 호출
• ▸실패 N 회 → unhealthy → 트래픽 제외
• ▸복구 시 다시 포함
• ▸간격: 5-30초, threshold: 2-5

Sticky Session:

• ▸같은 사용자는 같은 서버로
• ▸세션 메모리 저장 시 필요
• ▸단점: 한 서버 다운 → 그 사용자들 모두 끊김
• ▸대안: 공유 세션 저장소 (Redis)

대표 LB:

HTTP/2·gRPC 부하분산 함정:

• ▸한 TCP 연결로 다중 스트림 → L4 LB 가 균등 분배 못 함
• ▸해결: L7 LB (Envoy·Nginx) 또는 클라이언트 LB (gRPC 내장)

Critical Rendering Path (브라우저가 HTML → 화면까지):

HTML 받음
  ↓ Parse
DOM 트리
  ↓
CSS 받음 → CSSOM 트리
  ↓
Render Tree (DOM + CSSOM)
  ↓
Layout (위치·크기 계산)
  ↓
Paint (픽셀 색칠)
  ↓
Composite (레이어 합성 → 화면)

JS 로드 영향:

• ▸기본 <script> — parser 차단 (다운로드·실행 끝까지 멈춤)
• ▸<script defer> — 다운로드는 병행, DOM 준비 후 실행
• ▸<script async> — 다운로드는 병행, 끝나는 즉시 실행 (순서 X)
• ▸<script type="module"> — defer 와 유사

Web Vitals 3 가지 (Google):

최적화 기법:

• ▸Image lazy loading: <img loading="lazy">
• ▸Code splitting: route 별 JS 청크 분리
• ▸Preload·Preconnect: 중요 자원 미리 시작
• ▸WebP·AVIF: 이미지 압축 (JPEG 보다 30-50% 작음)
• ▸Critical CSS: 첫 화면용 CSS 인라인
• ▸CDN: 정적 자원 가까운 곳에서
• ▸HTTP/2·3: 다중 요청 + 헤더 압축

측정 도구:

• ▸Lighthouse (Chrome DevTools 내장)
• ▸WebPageTest (다양한 지역·디바이스)
• ▸PageSpeed Insights (Google)
• ▸Real User Monitoring (Datadog·Sentry)

이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.

• ▸"이 정적 파일에 Cloudflare CDN + 1년 캐시 헤더 적용해줘"
• ▸"Nginx load balancing (least_conn) 설정 만들어줘"

왜 이게 토큰을 줄이나

개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.