안녕하세요, 감자입니다
지난 2-1, cache 구현하기 - 개인편에 이어 10명의 동료들과 cache를 구현한 방법을 정리하고 새로 배운 내용을 회고 해볼 예정입니다.
프리온보딩 2주차 과제
임상시험 추천 검색어 캐싱 구현 과제를 진행하고, best pratice를 만들어서 제출하기
CacheAPI를 이용한 캐싱 구현하기
앞선 블로그에서 제가 구현한 방식과 best pratice를 선정하는 과정에서 크게 달랐던 점은 CacheAPI를 이용한 storage 사용 부분이였습니다. 그래서 이부분을 중점적으로 이야기 해보겠습니다.
(스토리지에 대해 궁금하시다면 이전 블로그 글 참고해주세요)
CacheAPI?
Cache API는 네트워크 요청 및 해당 응답을 저장하고 검색하는 인터페이스를 말합니다. 이때 캐시 스토리지를 사용하는데, 다음과 같은 장점을 갖습니다.
- HTTP를 통해 전송할 수 있는 모든 종류 type을 저장가능
- 비동기 방식으로 동작하여 메인 스레드 연산을 중단시키지 않음
- 수백 MB, 경우에 따라 수 GB 이상 저장 가능
(브라우저의 종류나 환경에 따라 다름)
CacheAPI로 결정한 이유
데이터 관점으로 봤을때 해당 추천 검색어 리스트는 업데이트가 잦지 않을 것으로 판단됨
이에 캐시 스토리지를 사용하여 캐싱 기능을 구현하기로 결정
구현하기
- setCacheStorage: 캐시에 저장 함수
코드 보기 export const setCacheStorage = async (
url: string,
queryStr: string,
data: SearchWordType[],
) => {
const cacheStorage = await caches.open(url);
const response = new Response(JSON.stringify(data)); // 캐시에 저장할 데이터를 Response 객체로 생성
// 캐시 Response에 Header로 현재 시간을 저장합
const clonedResponse = response.clone();
const newBody = await clonedResponse.blob();
const newHeaders = new Headers(clonedResponse.headers);
newHeaders.append(HEADER_FETCH_DATE, new Date().toISOString());
// 캐시 저장날짜가 담긴 Header를 포함한 Response객체를 생성하여 캐시 스토리지에 저장
const newResponse = new Response(newBody, {
status: clonedResponse.status,
statusText: clonedResponse.statusText,
headers: newHeaders,
});
cacheStorage.put(queryStr, newResponse);
};
- getCachedResponse: 특정 검색어대해 캐시 스토리지에서 추천검색어 리스트를 찾아 반환하는 함수
코드 보기 export const getCachedResponse = async (url: string, queryStr: string) => {
// 캐시 스토리지에서 현재 검색한 데이터가 있는지 확인
const cacheStorage = await caches.open(url);
const cachedResponse = await cacheStorage.match(queryStr);
if (cachedResponse) {
if (!getIsCacheExpired(cachedResponse)) return cachedResponse; // 캐시 데이터가 있다면 캐시 데이터 반환
// 캐시 데이터가 만료되었다면 캐시 데이터 삭제 후 null 반환
await cacheStorage.delete(queryStr);
return null;
}
// 캐시 데이터가 없는 경우 null 반환
return null;
};
- getIsCacheExpired: 캐시 데이터의 만료여부를 판단하는 함수
코드 보기 export const getIsCacheExpired = (cacheResponse: Response) => {
// 캐시 Response 헤더에 있는 캐시 저장 날짜 확인
const cachedDate = cacheResponse.headers.get(HEADER_FETCH_DATE);
if (!cachedDate) return;
const fetchDate = new Date(cachedDate).getTime();
const today = new Date().getTime();
// (현재날짜 - 캐시 저장 날짜 > 만료날짜)를 비교하여 boolean값 반환
return today - fetchDate > EXPIRE_TIME;
};
마무리
사실 나는 스토리지에 저장할 필요가 있을까라는 의문을 가지고 있었고, 이를 어필하는 의견을 내었다. 다른 팀원도 나와 비슷한 의견으로 세션 스토리지에 저장하여 비교적 오래 유지되지 않도록 구현하신 분도 있었다.
그런데 한 팀원분이 위에 결정 사유에 있는 내용과 같이 데이터 관점에서 바라보는 의견을 주셨다. 망치로 맞은 기분이 들었다. 생각해 보니 해당 사이트의 추천 검색어 업데이트 주기가 얼마나 될까라는 관점에서는 바라보지 못 했던거 같았다. 물론, 백엔드를 직접 파악할 수 없어서 틀렸을수도 있지만 한번쯤은 고민해봤어야 하는 부분이었던거 같다.
업데이트 되지 않았다면 새로 받아올 이유가 없었다는 사실을 알면서도 생각하지 못했었다. 이번 온보딩을 참가하길 정말 잘 했다는 생각이 들었다.
