Best Search - 2주차 과제

목차

• 프로젝트소개
• 기능소개
• 실행
• 개발환경
• 기술스택
• 프로젝트 파일 구조
• 팀소개

프로젝트 소개

저희 팀의 프로젝트는 Best Search입니다.

사이트의 검색 영역을 클론하여 검색창을 구현했습니다. 검색창에 검색어를 입력했을 때 해당하는 검색어를 추천해주는 기능을 구현했습니다.

이 프로젝트는 10명의 팀원 모두 함께 진행하였으며, 각자 과제를 수행한 후 결과물을 통해서 팀원들끼리 토론하여 가장 적절하다고 생각하는 방식을 도출하였습니다.

Best Practice인 이유

📍 API 호출별로 로컬 캐싱 구현

• API 호출 시 Cache Storage를 확인하여 캐싱된 데이터가 있다면 API 호출을 하지 않고 캐싱된 데이터를 사용하도록 구현했습니다.
• expire time을 24시간으로 설정하여 expire time이 지나면 Cache Storage에서 캐싱된 데이터를 지우고 최신 데이터를 받아오도록 구현했습니다.
• Local Storage는 최대 5MB 저장이 가능하지만 Cache Storage는 크롬의 경우 디스크 최대 용량의 80% 까지 저장할 수 있습니다. Cache Storage 비동기 방식이기 때문에 Local Storage 보다 부하가 적습니다. Local Storage는 String 타입만 지원하지만 Cache Storage는 다양한 타입을 지원합니다.

pre-onboarding-10th-2-4/src/utils/cache.ts

Lines 1 to 23 in e51c20b

	import { SetCacheProps } from '@type/props';
	export const getCacheByKey = async (key: string) => {
	const cache = await caches.open('cache');
	const cachedResponse = await cache.match(key);
	if (cachedResponse) {
	const cachedData = await cachedResponse.json();
	if (cachedData.expiry > new Date().getTime()) return cachedData.value;
	cache.delete(key);
	}
	return null;
	};
	export const setCacheByExpireTime = async ({ key, value, expireTime = 0 }: SetCacheProps) => {
	const cache = await caches.open('cache');
	const item = {
	value,
	expiry: new Date().getTime() + expireTime,
	};
	const response = new Response(JSON.stringify(item));
	console.log(response);
	await cache.put(key, response);
	};

pre-onboarding-10th-2-4/src/api/search.ts

Lines 1 to 19 in e51c20b

	import { GetSearchResultsResponse, SearchParam } from '@type/data';
	import { getCacheByKey, setCacheByExpireTime } from '@utils/cache';
	import { CACHE_EXPIRE_TIME } from '@utils/constant';
	import axios from 'axios';
	const PROXY = window.location.hostname === 'localhost' ? '' : '/proxy';
	const getSearchResults = async (param: SearchParam): Promise<GetSearchResultsResponse> => {
	const cacheItem = await getCacheByKey(param.name);
	if (cacheItem) return cacheItem;
	console.info('calling api');
	const response = await axios.get(`${PROXY}${process.env.REACT_APP_API_URI}`, { params: param });
	setCacheByExpireTime({ key: param.name, value: response.data, expireTime: CACHE_EXPIRE_TIME });
	return response.data;
	};
	export default getSearchResults;

📍 검색어 입력마다 API가 호출되지 않도록 API 호출 횟수 줄이기

• useDebounce custom hook을 생성하여 검색어에 debounce를 적용하였고 사용자가 검색어 입력을 시작한 후 500ms동안 입력이 없으면 API가 호출되도록 구현했습니다.

pre-onboarding-10th-2-4/src/hooks/useDebounce.ts

Lines 1 to 15 in 214a9bd

	import { useRef } from 'react';
	// eslint-disable-next-line @typescript-eslint/no-explicit-any
	const useDebounce = <T extends any[]>(callback: (...args: T) => void, timeout: number) => {
	const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
	return (...args: T) => {
	if (timer.current) clearTimeout(timer.current);
	timer.current = setTimeout(() => {
	callback(...args);
	timer.current = null;
	}, timeout);
	};
	};
	export default useDebounce;

pre-onboarding-10th-2-4/src/components/SearchInput/index.tsx

Lines 16 to 29 in 214a9bd

	const getDebounceResult = useDebounce(async text => {
	try {
	const data = await getSearchResults({ name: text });
	setRecommendationList(data);
	} catch (error) {
	console.error('err: ', error);
	}
	}, DEBOUNCE_LIMIT_TIME);
	useEffect(() => {
	setSelectedIndex(-1);
	if (inputText.length === 0) setRecommendationList([]);
	if (inputText.length > 0) getDebounceResult(inputText);
	}, [inputText]);

📍 키보드만으로 추천 검색어들로 이동 가능하도록 구현

• 검색창에서 onKeyDown 이벤트가 발생했을 때 event.key 값이 ArrowDown, ArrowUp일 경우 selectedIndex가 변경되게 했고 추천 검색어의 index와 selectedIndex가 같을 때 background-color가 변경되도록 구현했습니다.

pre-onboarding-10th-2-4/src/components/SearchInput/Input.tsx

Lines 27 to 49 in 214a9bd

	const getUpIndex = (prevIndex: number) => {
	if (prevIndex <= 0) return maxIndex;
	return prevIndex - 1;
	};
	const getDownIndex = (prevIndex: number) => {
	if (prevIndex >= maxIndex) return 0;
	return prevIndex + 1;
	};
	const onKeyDownItem = (key: string) => {
	if (key === ARROW_UP) setSelectedIndex(prevIndex => getUpIndex(prevIndex));
	if (key === ARROW_DOWN) setSelectedIndex(prevIndex => getDownIndex(prevIndex));
	};
	const onKeyDownInputText = (e: React.KeyboardEvent<HTMLInputElement>) => {
	if ([ARROW_UP, ARROW_DOWN].includes(e.key)) {
	e.preventDefault();
	if (e.nativeEvent.isComposing === false) {
	onKeyDownItem(e.key);
	}
	}
	};

기능소개

배포 링크: Best Search

실행방법

install

npm install

start

npm start

개발환경

• 테스트 환경 : Chrome browser
• IDE : Visual Studio Code 1.71.0 (Universal)
• 인프라 : Vercel
• 주요 라이브러리
  • React : 18.2.0
  • TypeScript : 4.9.5
  • React-router-dom : 6.10.0
  • Styled-components : 5.3.10,

기술스택

Environment

config

Language

Development

deploy

프로젝트 파일 구조

📦BestToDo
├── .github
│   └── ISSUE_TEMPLATE
├── .husky
├── 📂public
└── 📂src
    ├── 📂api
    ├── 📂components
    │   └── 📂common
    │   └── 📂Landing
    │   └── 📂Recommendation
    │   └── 📂SearchInput
    ├── 📂hooks
    ├── 📂pages
    │   └── 📂LandingPage
    ├── 📂types
    └── 📂utils

팀소개

wet6123	1two13	plumpsqrl9744	tkdgh3050	senasoon

5thwin	yminj1029	Leeseunghwan7305	JKyEun	chyerin802