오프라인 캐싱 전략: CacheFirst와 NetworkFirst
Cache API와 Workbox 라이브러리를 사용해 정적 자산에는 Cache-First를, API 응답에는 Network-First를 구현합니다.
오프라인 캐싱 전략: CacheFirst와 NetworkFirst은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
캐싱 전략이 중요한 이유
서비스 워커는 모든 fetch를 가로챌 수 있지만, 전략이 필요합니다. 콘텐츠마다 적합한 규칙이 다릅니다. 로고는 영구적으로 캐시해야 하고, API 응답은 항상 최신 상태여야 하며, 뉴스 기사는 오래된 캐시를 제공한 뒤 재검증하는 방식이 적합합니다.
캐시 API
서비스 워커는 캐시 API를 사용합니다. 이는 출처별로 범위가 지정된 요청 → 응답 쌍의 키-값 저장소입니다. 세션이 끝나도 유지됩니다.
// open a cache:
const cache = await caches.open('v1');
// add resources:
await cache.add('/styles.css');
await cache.addAll(['/', '/app.js', '/styles.css']);
// look up:
const response = await cache.match('/styles.css');
// delete:
await cache.delete('/styles.css');캐시 우선
먼저 캐시를 확인합니다. 캐시에 있으면 반환합니다. 없으면 네트워크로 대체하고 응답을 캐시합니다. 적합한 대상: 정적 자산, 글꼴, 로고, 앱 셸
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
if (cached) return cached;
return fetch(event.request).then(res => {
const clone = res.clone();
caches.open('v1').then(c => c.put(event.request, clone));
return res;
});
})
);
});네트워크 우선
먼저 네트워크를 시도합니다. 실패하면(오프라인이면) 캐시로 대체합니다. 적합한 대상: API 호출, 속도보다 최신 상태가 중요한 동적 콘텐츠
self.addEventListener('fetch', (event) => {
event.respondWith(
fetch(event.request).then(res => {
const clone = res.clone();
caches.open('api-v1').then(c => c.put(event.request, clone));
return res;
}).catch(() => caches.match(event.request))
);
});오래된 캐시 사용 후 재검증
캐시를 즉시 반환하고(빠름), 백그라운드에서 가져온 뒤 다음 사용을 위해 캐시를 업데이트합니다. 적합한 대상: 아바타, 뉴스 기사, 어느 정도 최신이면 되는 데이터
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
const network = fetch(event.request).then(res => {
caches.open('v1').then(c => c.put(event.request, res.clone()));
return res;
});
return cached || network;
})
);
});네트워크만 사용
캐시를 완전히 우회하고 항상 네트워크로 요청합니다. 캐시할 수 없는 요청(인증 엔드포인트, 분석, 데이터 변경)에 사용하세요.
self.addEventListener('fetch', (event) => {
if (event.request.url.includes('/api/auth')) {
event.respondWith(fetch(event.request));
return;
}
// ... other strategies
});캐시만 사용
네트워크로 요청하지 않고 캐시를 반환하거나 실패합니다. 미리 캐시해 두고 세션 중에는 새로 고치지 않을 파일에 유용합니다.
Workbox 전략
Workbox는 모든 전략을 이름이 지정된 클래스로 제공합니다. 반복적인 기본 코드가 줄어듭니다.
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
registerRoute(({ request }) => request.destination === 'image',
new CacheFirst({ cacheName: 'images' })
);
registerRoute(({ url }) => url.pathname.startsWith('/api/'),
new NetworkFirst({ cacheName: 'api', networkTimeoutSeconds: 3 })
);
registerRoute(({ request }) => request.destination === 'document',
new StaleWhileRevalidate({ cacheName: 'pages' })
);캐시 만료
제한을 설정하지 않으면 캐시는 계속 커집니다. Workbox는 ExpirationPlugin을 제공합니다.
import { ExpirationPlugin } from 'workbox-expiration';
new CacheFirst({
cacheName: 'images',
plugins: [new ExpirationPlugin({
maxEntries: 50,
maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
})]
});캐시 가능한 응답
기본적으로 브라우저는 상태 코드 200인 응답만 캐시합니다. 오류로 캐시가 가득 차는 것을 방지하려면 4xx, 5xx, 불투명 응답(교차 출처 no-cors)을 건너뛰세요.
오프라인 대체 페이지
탐색에 실패하면 친절한 오프라인 페이지를 표시하세요. 브라우저의 기본 오류 화면보다 사용자 경험이 좋습니다.
self.addEventListener('install', (e) => {
e.waitUntil(caches.open('offline').then(c => c.add('/offline.html')));
});
self.addEventListener('fetch', (e) => {
if (e.request.mode === 'navigate') {
e.respondWith(
fetch(e.request).catch(() => caches.match('/offline.html'))
);
}
});올바른 전략 선택하기
정적 자산(로고, 글꼴, CSS): 캐시 우선. API 데이터(사용자 프로필, 피드): 네트워크 우선. 가끔 최신이면 되는 콘텐츠(아바타, 뉴스): 오래된 캐시 사용 후 재검증. 인증: 네트워크만 사용. 미리 설치된 정적 파일: 캐시만 사용.
빠른 확인
자주 변경되지는 않지만 빠르게 로드해야 하는 CSS 파일에 가장 적합한 캐싱 전략은 무엇인가요?
복습: 캐싱 전략
캐시 우선: 정적 자산(가장 빠르지만 오래된 데이터일 수 있음). 네트워크 우선: API 데이터(가장 최신이지만 느림). 오래된 캐시 사용 후 재검증: 캐시를 제공하고 백그라운드에서 가져오기. 네트워크만 사용: 인증과 데이터 변경. 캐시만 사용: 미리 설치된 셸. 반복적인 기본 코드를 줄이려면 Workbox를 사용하세요. 만료 제한을 설정하세요. 오프라인 대체 페이지를 추가하세요. 리소스 유형별로 선택하세요.
자주 묻는 질문
“오프라인 캐싱 전략: CacheFirst와 NetworkFirst” 강의는 무료인가요?
네 — “오프라인 캐싱 전략: CacheFirst와 NetworkFirst” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“오프라인 캐싱 전략: CacheFirst와 NetworkFirst”에서 뭘 배우나요?
Cache API와 Workbox 라이브러리를 사용해 정적 자산에는 Cache-First를, API 응답에는 Network-First를 구현합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“오프라인 캐싱 전략: CacheFirst와 NetworkFirst” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 웹 앱 매니페스트
- Service Worker 등록과 수명 주기
- 오프라인 캐싱 전략: CacheFirst와 NetworkFirst
- 푸시 알림