브라우저 캐싱 전략

HTTP 캐싱의 작동 원리를 시각적으로 학습합니다

캐시 전략 선택

Private vs Public 캐시 비교

Private Cache

개인 전용
단일 사용자
개인 브라우저에만 저장
브라우저 전용
로컬 캐시만 사용
보안/개인정보
민감한 데이터 보호
서버 직접 연결
CDN 우회하여 최신 데이터

실제 사용 예시:

  • 사용자 프로필 데이터
  • 장바구니 정보
  • 개인 설정값
  • 인증된 API 응답
Cache-Control: private, max-age=3600

Public Cache

공유 가능
다중 사용자
모든 사용자와 공유
CDN + 브라우저
다단계 캐시 활용
공유 리소스
정적 콘텐츠 최적화
엣지 최적화
가까운 서버에서 빠르게

실제 사용 예시:

  • 이미지, CSS, JS 파일
  • 폰트 파일
  • 공개 API 데이터
  • 정적 HTML 페이지
Cache-Control: public, max-age=86400
💡

알고 계셨나요?

캐시 전략을 선택하면 각 전략의 특징과 사용 사례를 자세히 확인할 수 있습니다.

CDN 캐싱 계층

현재 전략:max-age

캐싱 계층 설명

💻
Browser Cache

사용자의 브라우저에 저장되는 로컬 캐시. 가장 빠른 응답 속도(0ms)를 제공하며 네트워크 요청 없이 즉시 콘텐츠를 제공합니다.

🌐
Edge Server

사용자와 가장 가까운 CDN 서버. 전 세계에 분산되어 있으며 지리적으로 가까운 사용자에게 빠른 응답(~10ms)을 제공합니다.

🏢
Regional Cache

지역별 중앙 캐시 서버. Edge Server가 캐시를 갖고 있지 않을 때 사용되며 중간 수준의 응답 속도(~50ms)를 제공합니다.

🖥️
Origin Server

원본 콘텐츠를 제공하는 실제 웹 서버. 캐시가 없거나 만료된 경우 여기서 최신 데이터를 가져옵니다(~200ms).

Browser Cache
💻
Browser Cache
0ms
브라우저 로컬 캐시
Edge Server
🌐
Edge Server
10ms
Private 캐시는 CDN 우회
Regional Cache
🏢
Regional Cache
50ms
Private 캐시는 사용 불가
캐시 히트!
🖥️
Origin Server
200ms
원본 서버 (항상 최신 데이터)

Service Worker Cache API

// Service Worker에서 캐시 사용하기
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      // 캐시에서 찾으면 반환
      if (response) {
        return response;
      }
      
      // 없으면 네트워크 요청
      return fetch(event.request).then(response => {
        // 응답을 캐시에 저장
        return caches.open('v1').then(cache => {
          cache.put(event.request, response.clone());
          return response;
        });
      });
    })
  );
});

캐싱 전략 비교

전략사용 사례장점단점
no-cache동적 콘텐츠항상 최신느린 성능
private개인 데이터보안성CDN 활용 불가
public정적 리소스CDN 활용업데이트 지연
immutable버전된 리소스최고 성능URL 변경 필요
🧑‍💻

1nnovator 김민성

JavaScript 학습 센터 개발자

기술 블로그Interactive JavaScript Learning Platform

🌟 이 프로젝트가 도움이 되셨다면 블로그에서 더 많은 개발 이야기를 확인해보세요!

🤖이 페이지는 생성형 AI의 도움을 받아 제작되었습니다.