브라우저 캐싱 전략
HTTP 캐싱의 작동 원리를 시각적으로 학습합니다
캐시 전략 선택
Private vs Public 캐시 비교
Private Cache
개인 전용단일 사용자
개인 브라우저에만 저장
브라우저 전용
로컬 캐시만 사용
보안/개인정보
민감한 데이터 보호
서버 직접 연결
CDN 우회하여 최신 데이터
실제 사용 예시:
- 사용자 프로필 데이터
- 장바구니 정보
- 개인 설정값
- 인증된 API 응답
Cache-Control: private, max-age=3600Public 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 학습 센터 개발자
🌟 이 프로젝트가 도움이 되셨다면 블로그에서 더 많은 개발 이야기를 확인해보세요!
🤖이 페이지는 생성형 AI의 도움을 받아 제작되었습니다.