요즘 프로젝트를 개발하면서 api 호출하는 부분에 대해서 최적화할 수 있는 부분이 있다면 조금씩 리팩토링해보는 중이다.
그 중에서도 똑같은 내용으로 api 를 호출했을 때, 다시 응답을 새롭게 기다려야하는 부분을 개선해보고 싶었다.
캐싱 이란?
캐싱이란 어떤 데이터를 한번 응답으로 받으면, 임시로 데이터를 다른 곳에 저장해서 필요시에 더 빠르게 불러와서 사용할 수 있는 프로세스를 말한다. 즉, 똑같은 요청을 또 하는 불필요한 요청을 줄일 수 있다.
캐싱을 어디에하지?
localStorage, sessionStorage 등 다양한 곳에 저장할 수 있다.
나는 브라우저가 닫히면 캐시 데이터 또한 깔끔하게 삭제되길 원했기에 sessionStorage에 저장하는 방법을 택했다.
* 영구적으로 저장하고 싶으면 localStorage에 저장하면된다.
구현 방법
나는 utils 폴더에 cache.js 파일을 만들어 작성했다.
export const setCache = (key, data) => {
const cacheData = JSON.stringify(data);
sessionStorage.setItem(key, cacheData);
};
export const getCache = (key) => {
const data = sessionStorage.getItem(key);
return data ? JSON.parse(data) : null;
};
그리고 data fetch 로직에서, 캐시가 존재하면 캐시 데이터를 쓰는 로직을 추가해줬다.
const cacheKey = `search-${filter}-${query}-${page}`;
const cachedData = getCache(cacheKey);
// 만약 캐시 데이터가 존재하면 따로 서버에서 응답 새로 받을 필요 없이 있는 것 쓰기
if (cachedData) {
return cachedData;
}
// 직접 서버 api 의 응답을 받는 코드
// 새로 받은 서버 api 응답은 캐시에 저장한다
결과
캐싱을 적용하기 전과 후 영상이다.
1페이지의 데이터가 캐싱이 되었을 때에는, 다시 1페이지에 방문했을 때 새로 api 호출을 하지 않는 것을 확인할 수 있다.
그리고 캐시 데이터는 세션 저장소에 올바르게 저장되는 것을 확인할 수 있었다.
결론적으로, 위와 같은 캐싱 기능 구현을 통해서 같은 세션 동안에는 동일한 요청에 대해 서버로 부터 데이터를 또 다시 불러올 필요가 없게되었다.
아무래도 이 프로젝트의 서버 응답 시간이 짧지 않은 편인데, 로드 시간을 줄여서 사용자에게 조금이라도 더 빠른 응답을 제공할 수 있게 된 것 같아 만족한다.
ref:
