캐시 스토리지 사용해서 api 호출 회수 줄이기!

기업과제 도중 로컬 캐싱을 이용하여(react-query 사용 제외) api 호수을 줄이는 과제가 있었는데 캐싱처리를 한번도 해보지 않아서 검색을 통해 다양한 방법 중 캐시 스토리지를 사용해 보기로 결정 했다.
로컬 스토리지가 아닌 캐시스토리지를 사용하는 이유는 로컬 스토리지는 저장할 수 있는 데이터가 적기 때문에 캐시 스토리지를 사용한다고 한다.

1. 우선 sick이라는 이름의 캐시를 생성해주었다.

 if ('caches' in window) {
    const cacheStorage = await caches.open('sick');
    const cachedResponse = await cacheStorage.match(keyword);
   

2. 이 후 검색어와 일치하는 항목이 있는지 확인을 하여 일치하는 항목이 존재하는 경우와 존재하지 않는 경우로 분리하였다.

일치하는 항목이 존재하지 않는다면 api 콜을 요청해서 데이터를 받아온 후 받아 온 응답을 저장하였다. api call의 경우 console.info("calling api")로 확인가능

if (!cachedResponse) {
      console.info('calling api');
      const response = await axios.get(`${process.env.REACT_APP_BASE_URL}`, {
        params: {
          q: keyword,
        },
      });
      const store = response.data;
      cacheStorage.put(keyword, new Response(JSON.stringify(store)));
      return store;
    }

일치하는 항목이 존재한다면 별도의 api 콜 요청없이 캐시스토리지에 저장되어 있는 항목을 사용했다.

    const cached = await cachedResponse?.json();

    return cached;
  }

항상 느끼는 거지만 개발자는 정말 끊임없이 배워야만하는 것 같다