검색창, 검색어 추천 기능, 캐싱 기능 구현
00-assignments-conclusion.webm
https://real-bird.github.io/pre-onboarding-11th-4/
- 최종 구현 화면 참고
- 한국임상정보원의 검색 영역 클론
- 개략적인 와이어 프레임을 분석하고, 그것을 기준삼아 UI를 클론했습니다. #와이어 프레임 구상.md
- 최종 구현 화면 참고
- 검색어 state가 변경되면 API 요청 메서드를 호출해 검색 결과를 가져왔습니다.
- 검색 결과에서 검색어를 포함한 질환명만 필터링하였고, 원본 사이트처럼 최대 7개의 검색 결과만 추천되도록 구현했습니다.
- API를 호출하면 검색어를
key, 검색 결과를value로 설정하여localStorage에 저장했습니다.localStorage를 선택한 이유는 제가 로컬 캐싱 개념을 몰라 구현에 의의를 두자는 마음 때문이었습니다.- 가장 친숙한 저장소를 사용해 빠르게 기능을 구현했습니다.
expire time은 저장 시간에 만료 기한을 더한 값을 추가하여 구현하였습니다.
class CacheService {
get<T>(searchValue: string): FetchStateType<T> {
return JSON.parse(this.localStorage.get(searchValue));
}
set<T>(searchValue: string, fetchState: T, expiryTime?: number) {
this.localStorage.save(searchValue, {
fetchState,
saved_at: new Date().getTime() + (expiryTime || this.EXPIRY_MINUTES),
});
}
}localStorage를 순회하면서saved_at이 현재 시간보다 작거나 같으면 스토리지에서 삭제합니다.
class CacheService {
removeExpiryCaches() {
for (const item in localStorage) {
const localCacheItem = JSON.parse(this.localStorage.get(item));
if (localCacheItem?.saved_at && localCacheItem?.saved_at <= Date.now()) {
this.localStorage.remove(item);
}
}
}
}- 로컬 캐싱에 대한 생각을 나열해 기준으로 삼았습니다. #로컬 캐시
- 유저가 검색어 입력을 끝냈는지 알 수 없기 때문에 호출 시간을 지연하는 전략을 생각했습니다.
- 입력을 끝내는 지점까지 기다렸다가 일정 시간 이벤트가 없으면 트리거하는
debounce가 가장 적절하다고 생각했습니다. useDebounce훅을 생성하여 필요한 곳에서debounce를 사용할 수 있도록 구현했습니다.
export default function useDebounce<T>() {
const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
return (CallBackFn: CallBackFnType<T>, delay: number) => {
clearTimeout(timerRef.current);
timerRef.current = setTimeout(() => {
CallBackFn();
}, delay);
};
}- 실제 사용에서는
CallBackFn에refetchSickList를 넣고, 지연 시간은1000ms로 설정했습니다.
export default function useSickSearch() {
const debounce = useDebounce();
useEffect(() => {
const refetchSickList = async () => {
// refetch 로직
};
debounce(() => refetchSickList(), 1000);
}, [searchValue]);
return { ... };
}- #api handling에서 api 관련 생각들을 정리해 참고했습니다.
- api 요청 시
finally블록에서console.info를 처리하여 성공, 실패에 상관없이 호출 횟수 확인을 설정했습니다.
- 검색어 입력 후 추천 검색어 리스트가 나오면
위와아래화살표 방향키를 이용해 검색어로 이동할 수 있습니다. - 키보드 이벤트 고민은 #move list using keyboard에 정리했습니다.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent