데브매칭 연습 - 고양이 사진첩

 

🔗 고양이 사진첩 애플리케이션

 

고양이 사진첩은 이전에 데브코스 강의에서 한번 다룬 적이 있었어서

한번 로딩된 데이터를 메모리에 캐시하는 부분 빼고는 전부 구현했다.

 

한번 해봤기 때문에 4개의 연습 과제중 가장 수월하게 구현하긴 했지만,

기억을 더듬으며 했던 것 같다 ㅎㅎ

 

💡 알게된 점

 

Cache Storage

 

LocalStorage나 SessionStorage에서 메모리를 캐시하면 되겠다 라고 생각했는데

cache API가 있다는 것을 알게 되었다.

 

Cache API를 활용하면 웹 캐시에 복사된 데이터를 제어할 수 있다.

저장된 캐시를 확인하려면 개발자도구-애플리케이션-cacheStorage에서 확인할 수 있다.

 

몇 가지 테스트 해보며 사용해보니 local, session Storage랑 비슷하게 사용 할 수 있었다.

function App() {
  const url = 'https://jsonplaceholder.typicode.com/posts';
  const cacheName = 'apiCache';

  const fetchUrl = async () => {
    const cacheStorage = await caches.open(cacheName);
    const cacheData = await cacheStorage.match(url);
    // 일치하는 값이 없다면 undefined 반환

    try {
      if (cacheData) {
        console.log(await cacheData.json(), 'cacheData');
      } else {
        const res = await fetch(url);
        await cacheStorage.put(url, res);
        console.log(res, 'fetch response');
      }
    } catch (e) {
      console.log(e);
    }
  };

  fetchUrl();
}

export default App;

 

❗ cache Storage는 Promise를 반환하기 때문에 await을 사용해주어야 한다.

❗ cacheStorage에 put을 사용하여 값을 넣을 땐 response 유형을 넣어주어야 한다.

 

 

 

참고 블로그 : https://developer-talk.tistory.com/242