검색창에 캐시 적용하기

July 20, 2022

검색창을 개선하는 작업을 들어갈 때 백엔드에서 API 호출을 최소화해달라는 요청을 받았다. debounce로도 충분히 API 요청이 줄어들 수 있지만 더 나아가 캐시에 데이터를 저장하면 좋겠다는 생각이 들었다.

이미 호출된 검색 결과를 캐시에 저장해 API 호출 수를 감소시키는 것이다. 이를 위해 간단한 캐시를 만들고 전역 상태에 저장해 앱이 종료 되기까지 전까지 유지하도록 했다.

검색 결과를 가져오는 함수에 캐시를 검증 및 추가하는 로직을 다음과 같이 작성하였다.

import { cache } from '@stores/search';

async function getResult() {
	if (!$searchText) return;
	errorCode.set(null);
	$loading = !$loading && true;

	const currentTime = Date.now();
	const cacheTTL = 60 * 1000;
	
	if ($cache[$searchText] && $cache[$searchText][$currentPage] && currentTime - $cache[$searchText][$currentPage].timestamp < cacheTTL
	) {
		return $cache[$searchText][$currentPage].data;
	} // 캐시 검증 로직

	const { data, error } = await search(
		$selectedCategories,
		$searchText,
		$currentPage,
		$selectedDurationStartDate,
		$selectedDurationEndDate,
		selectedLabelsIds
	);

	...

	const currentResult = convert(data);
	
	if (!$cache[$searchText]) {
		$cache[$searchText] = {};
	} // 해당 검색어의 객체 초기화
	
	$cache[$searchText][$currentPage] = {
		data: currentResult.items,
		timestamp: currentTime,
	}; // 캐시 저장

	...
}

캐시 객체의 형태는 아래와 같다.

{
    "a": {
        "0": {"data": [...], "timestamp": 1693920449694}
    },
    "apple": {
	    "0": {"data": [...], "timestamp": 1693920451834}
    }
}

캐시 된 지 1분이 지나지 않은 경우 위와 같은 캐시된 데이터를 불러오게 된다.