[JavaScript]캐시(Cache) 사용 방법

이번 포스팅에서는 JavaScript에서 캐시(Cache) API를 사용하는 방법을 소개합니다.

 

목차

1. Cache 란
2. Cache API 정리

---

Cache 란?

캐시는 데이터나 값을 미리 복사해 놓는 임시 저장소입니다. 캐시에 데이터를 미리 복사해 놓으면 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근할 수 있습니다.

 

캐시는 웹에도 존재하며, 웹 캐시(web cache) 또는 HTTP 캐시(HTTP cache)라고 말합니다. 웹 캐시에는 서버-클라이언트 통신간 발생하는 정적 자산(HTML pages, CSS, JavaScript files, images, JSON 등)을 웹 캐시에 복사합니다.

 

캐시 API를 활용하면, 웹 캐시에 복사된 정적 자산들을 제어할 수 있습니다.

 

캐시 확인

window에서 caches 객체를 확인할 수 있습니다.

console.log('caches' in window)
console.log(window.caches)

실행 결과

caches는 CacheStorage의 인스턴스인 것을 확인할 수 있습니다.

---

캐시 API 정리

캐시 생성/초기화

캐시는 open 함수를 사용하여 생성할 수 있습니다.

 

캐시가 이미 존재하는 경우 캐시는 생성되지 않습니다.

// 일반 함수
caches.open('cacheName').then(function(cache) {

});

// 화살표 함수
caches.open('cacheName').then( cache => {

});

• 다른 origin(도메인)에 설정된 캐시는 접근할 수 없습니다.
• 생성중인 캐시는 현재 도메인에 생성됩니다.
• 동일한 도메인에 여러 캐시를 추가할 수 있습니다.

반응형

캐시에 배열 또는 객체를 추가

캐시에 항목을 추가하는 방법은 add, addAll, put 함수를 이용할 수 있습니다.

 

세 개의 함수 모두 Promise를 반환합니다.

 

 1. add

let cacheName = 'newCache';

let url = '/api/get/newCache';

caches.open(cacheName).then( cache => {
   cache.add(url).then( () => {
       console.log("Cache add Success");
    });
});

위 코드에서 /api/get/newCache url에 대한 요청이 서버로 전송되고 정상적으로 응답받으면 리소스가 캐싱됩니다.

 

2. addAll

let cacheName = 'newCache';

let urls = ['/get/newCache?userId=1', '/get/newCacheDetails'];

caches.open(cacheName).then( cache => {
   cache.addAll(url).then( () => {
       console.log("Cache addAll Success");
    });
});

URL 배열을 요청하고 모든 응답 리소스가 캐싱되면 Promise를 반환합니다.

 

참고로 add와 addAll 함수는 정상적인 응답(200)이 아닐 경우 다음과 같은 에러가 발생합니다.

따라서 요청에 대해 정상적으로 응답을 받았는지 확인해야합니다.

 

3. put

let cacheName = 'newCache';

let url = '/api/get/newCache';

fetch(url).then(res => {
   return caches.open(cacheName).then(cache => {
       return cache.put(url, res);
   })
})

put 함수는 현재 Cache 객체에 키/값 쌍을 추가합니다. 참고로 Cache에 다시 요청하는 경우 기존 키/값 쌍을 덮어씁니다.

캐시에서 검색

1. match

cache.match 함수를 사용하면 요청한 URL에 대해 캐싱된 Response를 가져올 수 있습니다.

let cacheName = 'newCache';

let url = '/api/get/newCache';

caches.open(cacheName).then( cache => {
   cache.match(url).then( settings => {
       console.log(settings);
    });
});

위 코드에서 사용된 settings가 응답 객체입니다.

 

2. keys

캐시의 모든 항목을 검색하기 위해서 keys 함수를 사용합니다.

 

현재 캐시 객체에 캐싱된 url을 가지는 key가 존재하는지 검색합니다.

let cacheName = 'newCache';

let urls = ['/get/newCache?userId=1', '/get/newCacheDetails'];

caches.open(cacheName).then( (urls) => {
    cache.keys().then((urls) => {
        console.log(urls);
    })
});

 

3. 모든 캐시 검색

caches.keys().then( keys => {
// key 목록이 있는 배열
})

 

캐시 제거

delete 함수를 사용하여 cache 객체에 캐싱된 특정 요청을 제거하거나 모든 요청을 제거할 수 있습니다.

 

특정 항목 제거

let cacheName = 'newCache';

let url = '/api/get/newCache';

caches.open(cacheName).then( cache => {
   cache.delete(url);
});

 

완전히 제거

caches.delete(cacheName).then(() => { 
   console.log('캐시 삭제 성공!'); 
})