캐싱 전략
캐시 우선 및 네트워크 우선 패턴을 적용합니다.
캐싱 전략은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
전략이 중요한 이유
자산마다 필요한 처리 방식이 다릅니다. 로고는 영구적으로 캐시에서 제공해도 되지만 API 피드는 최신 상태여야 합니다. 캐싱 전략은 캐시와 네트워크 중 어느 것을 먼저 시도할지, 그리고 두 가지를 어떻게 조합할지 결정합니다.
캐시 우선
캐시 우선: 캐시를 확인하고, 찾으면 반환하며, 없으면 네트워크에서 가져옵니다. 글꼴, CSS, 이미지처럼 정적이고 거의 변경되지 않는 자산에 적합합니다.
async function cacheFirst(request) {
const cached = await caches.match(request);
return cached || fetch(request);
}대체 캐싱을 사용하는 캐시 우선
캐시에서 찾지 못하면 가져오는 동시에 결과를 저장할 수 있으므로 다음 요청은 빠르게 처리됩니다. 사용자가 탐색하는 동안 캐시가 지연 방식으로 채워집니다.
async function cacheFirst(request) {
const cached = await caches.match(request);
if (cached) return cached;
const fresh = await fetch(request);
const cache = await caches.open('runtime');
cache.put(request, fresh.clone());
return fresh;
}네트워크 우선
네트워크 우선: 네트워크를 시도하고, 성공하면 결과를 사용하고 캐시하며, 실패하면(오프라인이면) 캐시로 대체합니다. 뉴스나 대시보드처럼 자주 업데이트되는 콘텐츠에 가장 적합합니다.
async function networkFirst(request) {
try {
const fresh = await fetch(request);
const cache = await caches.open('runtime');
cache.put(request, fresh.clone());
return fresh;
} catch (err) {
return caches.match(request);
}
}오래된 캐시 사용 후 재검증
오래된 캐시 사용 후 재검증: 속도를 위해 cached 복사본을 즉시 반환하는 동시에, 다음번에 사용할 cache를 업데이트하도록 백그라운드에서 fresh 복사본을 가져옵니다. 속도와 최신 상태를 훌륭하게 균형 잡는 방법입니다.
async function staleWhileRevalidate(request) {
const cache = await caches.open('runtime');
const cached = await cache.match(request);
const network = fetch(request).then(res => {
cache.put(request, res.clone());
return res;
});
return cached || network;
}네트워크만 사용하기와 캐시만 사용하기
두 가지 단순한 극단입니다.
- 네트워크만 사용하기: 항상 가져오고 절대 캐시하지 않습니다(예: 분석용 비콘).
- 캐시만 사용하기: 미리 캐시한 자산만 제공하고 네트워크에는 절대 연결하지 않습니다(예: 앱 셸).
// network-only:
// return fetch(request);
// cache-only:
// return caches.match(request);요청 유형별 라우팅
실제 앱에서는 요청마다 전략을 선택합니다. 가져오기 처리기에서 request.url 또는 request.destination을 검사한 다음 그에 맞게 라우팅합니다.
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
if (url.pathname.startsWith('/api/')) {
event.respondWith(networkFirst(event.request));
} else {
event.respondWith(cacheFirst(event.request));
}
});오프라인 대체 처리
네트워크와 캐시에서 모두 찾지 못하면, 오류가 난 응답 대신 사용자에게 친숙한 오프라인 페이지나 자리 표시자를 반환합니다.
async function withOfflineFallback(request) {
return (await caches.match(request)) ||
(await caches.match('/offline.html'));
}성공한 응답만 캐시하기
오류를 캐시하지 않도록 주의합니다. 저장하기 전에 response.ok(또는 상태)를 확인하여 404나 500 오류가 cache를 오염시키지 않게 합니다.
const fresh = await fetch(request);
if (fresh.ok) {
cache.put(request, fresh.clone());
}
return fresh;전략 선택하기
콘텐츠에 맞춰 전략을 선택합니다.
- 정적 자산: 캐시 우선
- 동적 데이터: 네트워크 우선
- 혼합 콘텐츠: 오래된 캐시 사용 후 재검증
대부분의 앱은 요청 라우팅을 통해 여러 전략을 조합합니다.
전략 복습
캐싱 전략을 사용하면 하나의 서비스 워커가 요청마다 지능적으로 선택하여 앱 전체를 제공할 수 있습니다. 정적 자산은 즉시 제공하고, 동적 데이터는 최신 상태로 유지하며, 오프라인에서도 자연스럽게 대체 처리합니다.
빠른 확인
캐싱 전략에 대한 이해도를 확인해 보세요.
복습
캐싱 전략을 배웠습니다.
- 정적 자산에는 캐시 우선을 사용합니다.
- 최신 동적 데이터에는 네트워크 우선을 사용합니다.
- 속도와 최신 상태를 모두 원할 때는 오래된 캐시 사용 후 재검증을 사용합니다.
request.url/destination을 통해 요청마다 라우팅합니다.- 성공한 응답만 캐시하고 오프라인 대체 처리를 제공합니다.
다음에는 백그라운드 동기화와 캐시 업데이트를 알아봅니다.
자주 묻는 질문
“캐싱 전략” 강의는 무료인가요?
네 — “캐싱 전략” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“캐싱 전략”에서 뭘 배우나요?
캐시 우선 및 네트워크 우선 패턴을 적용합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“캐싱 전략” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.