pre-onboarding-7th-3-1-9
 |
 |
 |
|---|---|---|
| 👑 권준 | 김경훈 | 김수정 |
| @jun-05 | @tirhande | @crystal993 |
 |
 |
 |
 |
|---|---|---|---|
| 송슬기 | 오나래 | 이창훈 | 전이진 |
| @songseul | @NR0617 | @anotheranotherhoon | @pongdang |
- 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=콜레라
- 검색창 구현 + 검색어 추천 기능 구현 서비스입니다.
### 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📂 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 파일- 1️⃣ Assignment
- 2️⃣ Assignment
- 3️⃣ Assignment
- 4️⃣ Assignment
- 5️⃣ Assignment
- 6️⃣ Assignment
- 7️⃣ Assignment
- 질환명 검색시 API 호출 통해서 검색어 추천 기능 구현
- 사용자가 입력한 텍스트와 일치하는 부분 볼드처리
⭐️⭐️⭐️⭐️⭐️
⭐️⭐️⭐️⭐️⭐️
-
- 검색어가 없을 시 “검색어 없음” 표출
⭐️⭐️⭐️⭐️⭐️
⭐️⭐️⭐️⭐️⭐️
https://github.com/Wanted-07-team-9/pre-onboarding-7th-3-1-9/blob/bbf1724458dd765687641bed9246447632d70bc6/src/components/blocks/EmptyResult.tsx#L3-L9 https://github.com/Wanted-07-team-9/pre-onboarding-7th-3-1-9/blob/bbf1724458dd765687641bed9246447632d70bc6/src/pages/Main/AutoComplete/AutoComplete.tsx#L35
- API 호출 최적화
- API 호출별로 로컬 캐싱 구현
- 캐싱 기능을 제공하는 라이브러리 사용 금지(React-Query 등)
- 캐싱을 어떻게 기술했는지에 대한 내용 README에 기술
- API 호출별로 로컬 캐싱 구현
⭐️⭐️⭐️⭐️⭐️
⭐️⭐️⭐️⭐️⭐️
-
- 입력마다 API 호출하지 않도록 API 호출 횟수를 줄이는 전략 수립 및 실행
- README에 전략에 대한 설명 기술
- 입력마다 API 호출하지 않도록 API 호출 횟수를 줄이는 전략 수립 및 실행
⭐️⭐️⭐️⭐️⭐️
⭐️⭐️⭐️⭐️⭐️
-
- API를 호출할 때 마다
console.info("calling api")출력을 통해 콘솔창에서 API 호출 횟수 확인이 가능하도록 설정
- API를 호출할 때 마다
⭐️⭐️⭐️⭐️⭐️
⭐️⭐️⭐️⭐️⭐️
- 키보드만으로 추천 검색어들로 이동 가능하도록 구현
- 사용법 README에 기술
⭐️⭐️⭐️⭐️⭐️
⭐️⭐️⭐️⭐️⭐️
https://github.com/Wanted-07-team-9/pre-onboarding-7th-3-1-9/blob/bbf1724458dd765687641bed9246447632d70bc6/src/pages/Main/SearchBar/index.tsx#L14-L23 https://github.com/Wanted-07-team-9/pre-onboarding-7th-3-1-9/blob/bbf1724458dd765687641bed9246447632d70bc6/src/components/blocks/AutoCompleteItem.tsx#L16-L26
(추가 기능)
- isLoading 대신 Suspense 구현