검색창 구현 + 검색어 추천 기능 구현 서비스입니다. (👨‍👩‍👧‍👦 9팀)

pre-onboarding-7th-3-1-9

👑 권준	김경훈	김수정
@jun-05	@tirhande	@crystal993

송슬기	오나래	이창훈	전이진
@songseul	@NR0617	@anotheranotherhoon	@pongdang

✨ 배포 링크

배포 바로가기

‼️ 주요 기능 구현

0️⃣ json-server 배포

• localhost가 아닌 vercel에 json-server를 배포하여 사용
• ex) https://json-server-beryl.vercel.app/api/sick?sickNm_like=간
• ex) https://json-server-beryl.vercel.app/api/sick?q=콜레라

3️⃣ API 호출 캐싱 링크

4️⃣ API 호출 횟수 줄이기 링크

6️⃣ 키보드만으로 추천 검색어 이동 링크

📝 목차

• 📰 프로젝트 설명
• 🛠️ Dev Tools
• 🖥 프로젝트 실행 방법

📰 프로젝트 설명

• 검색창 구현 + 검색어 추천 기능 구현 서비스입니다.

🛠 Dev Tools

🖥 프로젝트 실행 방법

### Installation
# Repositorie Clone
git clone https://github.com/Wanted-07-team-9/pre-onboarding-7th-3-1-9.git

# npm으로 설치 진행
pre-onboarding-7th-3-1-9 %  % npm install

### Usage
# Local Dev Server 실행
pre-onboarding-7th-3-1-9 % npm start

# Build
pre-onboarding-7th-3-1-9 % npm build

✏ 토의 내용 및 선정

🖍 1차 토의결과

🖍 2차 토의결과

🖍 3차 토의결과

🥇 선정 결과

📝 디렉토리 구조

📂 pre-onboarding-7th-3-1-9
┣ 📂 public
┣ 📂 src
┃   ┣ 📂 @types           # type 정의 모음
┃   ┣ 📂 apis             # axios 호출 관련
┃   ┣ 📂 components       # component 모음
┃   ┣   ┣ 📂 blocks       # page보단 작고 button 같은 component보단 큰 애들
┃   ┣   ┗ 📂 common       # button, input, select box와 같은 component
┃   ┣ 📂 assets           # 파일들 (이미지 파일 등)
┃   ┣ 📂 hooks            # custom hook
┃   ┣ 📂 pages            # 페이지 단위로 구분
┃   ┣   ┣ 📂 Main         # 메인 페이지
┃   ┣   ┗ 📂 NotFound     # 404 NotFound 페이지
┃   ┣ 📂 redux            # redux/toolkit, store 디렉토리
┃   ┣   ┗ 📂 reducer      # reducer/slice 디렉토리
┃   ┣ 📂 router           # page Router 관리 페이지
┃   ┗ 📂 styles           # global style
┗ 📄 README.md            # README 파일

💡 Assignment 목차

• 1️⃣ Assignment
• 2️⃣ Assignment
• 3️⃣ Assignment
• 4️⃣ Assignment
• 5️⃣ Assignment
• 6️⃣ Assignment
• 7️⃣ Assignment

1️⃣ Assignment

• 질환명 검색시 API 호출 통해서 검색어 추천 기능 구현
  • 사용자가 입력한 텍스트와 일치하는 부분 볼드처리

⭐️⭐️⭐️⭐️⭐️

검색된 결과 문자열에서 "검색한 단어"를 기준으로 split을 하고,

array를 map으로 반복하면서 split된 부분마다 "검색한 단어"를 삽입하여 bold 처리 하였습니다.

⭐️⭐️⭐️⭐️⭐️

pre-onboarding-7th-3-1-9/src/components/blocks/AutoCompleteItem.tsx

Lines 4 to 28 in bbf1724

	const AutoCompleteItem = ({
	index,
	searchWord,
	selectIndex,
	textArray,
	}: {
	index: number;
	searchWord: string;
	selectIndex: number;
	textArray: string[];
	}) => {
	return (
	<DropDownItem className={selectIndex === index ? 'over' : ''}>
	<span className="search_icon">
	<Magnifying />
	</span>
	{textArray.map((item, i) => (
	<span key={i} className="search_text">
	{item}
	{i !== textArray.length - 1 && <span className="font_bold">{searchWord}</span>}
	</span>
	))}
	</DropDownItem>
	);
	};

2️⃣ Assignment

• • 검색어가 없을 시 “검색어 없음” 표출

⭐️⭐️⭐️⭐️⭐️

검색된 문자열이 없을경우 검색어 없음 표출하였습니다.

⭐️⭐️⭐️⭐️⭐️

pre-onboarding-7th-3-1-9/src/components/blocks/EmptyResult.tsx

Lines 3 to 9 in bbf1724

	const EmptyResult = () => {
	return (
	<DropDownItem>
	<span className="search_text">검색어가 없습니다</span>
	</DropDownItem>
	);
	};

pre-onboarding-7th-3-1-9/src/pages/Main/AutoComplete/AutoComplete.tsx

Line 35 in bbf1724

{data.length === 0 && <EmptyResult />}

3️⃣ Assignment

• API 호출 최적화
  • API 호출별로 로컬 캐싱 구현
    • 캐싱 기능을 제공하는 라이브러리 사용 금지(React-Query 등)
    • 캐싱을 어떻게 기술했는지에 대한 내용 README에 기술

⭐️⭐️⭐️⭐️⭐️

Cache Storage를 사용하여 캐싱 기능을 제공하였습니다.

Cache Storage에는 queryString을 키값(name)으로 데이터와 etag를 저장합니다.

API 호출시 Cache Storage에 queryString 값이 존재하면 etag를 header에 포함하여 호출 진행하며,

response status === 200 이면 받은 response.data를 표출하고, etag와 data 값을 Cache Storage에 저장합니다.

response status === 304 이면 Cache Storage에서 data 값을 가져와서 표출합니다.

⭐️⭐️⭐️⭐️⭐️

pre-onboarding-7th-3-1-9/src/apis/axiosInstance.ts

Lines 9 to 35 in 8c6d325

	instance.interceptors.request.use(
	async config => {
	const headers = await getRequestHeaders(config);
	config.headers = headers;
	console.info('calling api');
	return config;
	},
	error => {
	return Promise.reject(error.response);
	}
	);
	instance.interceptors.response.use(
	async response => {
	await setCacheStorage(response);
	return response;
	},
	async error => {
	if (error instanceof AxiosError) {
	if (error.response?.status === 304) {
	const cached = await getCacheStorage(error);
	return cached;
	}
	}
	return Promise.reject(error.response);
	}
	);

4️⃣ Assignment

• • 입력마다 API 호출하지 않도록 API 호출 횟수를 줄이는 전략 수립 및 실행
    • README에 전략에 대한 설명 기술

⭐️⭐️⭐️⭐️⭐️

API 요청에 300ms의 debounce를 적용하였고,

사용자의 입력마다 API 호출 하는것이 아닌 사용자의 입력이 해당 시간동안 없을때만 호출하게 하여 횟수를 줄였습니다.

⭐️⭐️⭐️⭐️⭐️

pre-onboarding-7th-3-1-9/src/hooks/useGetSickItem.ts

Lines 16 to 29 in bbf1724

	useEffect(() => {
	if (searchWord === null || searchWord.trim() === '') {
	setItems(initItems);
	return;
	}
	const getSickName = () => {
	const searchResult = getSick(searchWord);
	setItems(wrapPromise(searchResult));
	};
	const delay = setTimeout(() => getSickName(), 300);
	return () => clearTimeout(delay);
	}, [searchWord, dispatch, initItems]);

5️⃣ Assignment

• • API를 호출할 때 마다 console.info("calling api") 출력을 통해 콘솔창에서 API 호출 횟수 확인이 가능하도록 설정

⭐️⭐️⭐️⭐️⭐️

axios instance의 인터셉터에서 request 전에 console.info('calling api'); 를 추가했습니다.

⭐️⭐️⭐️⭐️⭐️

pre-onboarding-7th-3-1-9/src/apis/axiosInstance.ts

Lines 8 to 16 in bbf1724

	instance.interceptors.request.use(
	config => {
	console.info('calling api');
	return config;
	},
	error => {
	return Promise.reject(error.response);
	}
	);

6️⃣ Assignment

• 키보드만으로 추천 검색어들로 이동 가능하도록 구현
  • 사용법 README에 기술

⭐️⭐️⭐️⭐️⭐️

검색창의 input box의 onKeyDown 이벤트에 ArrowDown, ArrowUp 이벤트가 발생했을때 selectIndex값을 변경하였고,

selectIndex값과 아이템의 index 값이 같으면 over className을 추가하였습니다.

⭐️⭐️⭐️⭐️⭐️

pre-onboarding-7th-3-1-9/src/pages/Main/SearchBar/index.tsx

Lines 14 to 23 in bbf1724

	const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
	if (!e.nativeEvent.isComposing) {
	if (e.key === 'ArrowDown' && itemsLength - 1 > selectIndex) {
	dispatch(setSelectIndex(selectIndex + 1));
	}
	if (e.key === 'ArrowUp' && selectIndex >= 0) {
	dispatch(setSelectIndex(selectIndex - 1));
	}
	}
	};

pre-onboarding-7th-3-1-9/src/components/blocks/AutoCompleteItem.tsx

Lines 16 to 26 in bbf1724

	<DropDownItem className={selectIndex === index ? 'over' : ''}>
	<span className="search_icon">
	<Magnifying />
	</span>
	{textArray.map((item, i) => (
	<span key={i} className="search_text">
	{item}
	{i !== textArray.length - 1 && <span className="font_bold">{searchWord}</span>}
	</span>
	))}
	</DropDownItem>

7️⃣ Assignment

(추가 기능)

• isLoading 대신 Suspense 구현

pre-onboarding-7th-3-1-9/src/pages/Main/AutoComplete/index.tsx

Lines 12 to 14 in 7b4fb30

	<Suspense fallback={<LoadingText />}>
	<AutoComplete />
	</Suspense>