pre-onboarding-8th-3-7's Introduction

Team 7️⃣ | 국내 임상시험 검색기 구현하기 (Week 3)

이 레파지토리는 원티드 프리온보딩 프론트엔드 인턴십 3주차 과제를 위해 만들어졌습니다.

팀원들과 토론해 선발과제의 요구사항별로 Best Practice를 도출해 하나의 프로젝트로 만들었습니다.

✔️ 팀원 소개

_{유서경 (팀장)} 프로젝트 총괄 Github issue(기능 구현) 생성	_경지윤 회의록 작성 제출 전 최종 코드 확인	_김수진 리드미 구조 작성 및 배분 과제 best practice 토론 총괄 및 과제 나누기	_김형욱 과제/토론 일정 관리 및 과제 제출 Github issue(기능 구현) 생성
_이수창 CSS theme, constants 파일 총괄 제출 전 최종 코드 확인	_임수진 팀/코드 컨벤션 총괄 과제 best practice 토론 총괄 및 과제 나누기	_차지환 프로젝트 기초 세팅 및 폴더/파일 트리 총괄 배포 or 데모 영상 담당

✔️ 팀 컨벤션

🙌 팀 컨벤션 페이지

✔️ 사용 라이브러리 및 툴

✔️ 프로젝트 살펴 보기

1️⃣ 실행 방법

git clone
cd pre-onboarding-8th-3-7
npm install
npm start

2️⃣ 배포 링크

Team 7 국내 임상시험 검색기 구현

3️⃣ 프로젝트 구조

📦src
 ┣ 📂api
 ┃ ┣ 📜AxiosClient.ts
 ┃ ┗ 📜LocalCacheService.ts
 ┣ 📂components
 ┃ ┣ 📂loading
 ┃ ┃ ┣ 📜Loading.module.css
 ┃ ┃ ┗ 📜Loading.tsx
 ┃ ┣ 📂searchBar
 ┃ ┃ ┣ 📜SearchBar.module.css
 ┃ ┃ ┗ 📜SearchBar.tsx
 ┃ ┗ 📂searchResult
 ┃ ┃ ┣ 📜KeywordEmphasize.tsx
 ┃ ┃ ┣ 📜NoSearchKeyword.tsx
 ┃ ┃ ┣ 📜SearchKeyword.tsx
 ┃ ┃ ┣ 📜SearchResult.module.css
 ┃ ┃ ┗ 📜SearchResult.tsx
 ┣ 📂context
 ┃ ┗ 📜SearchApiService.tsx
 ┣ 📂hooks
 ┃ ┣ 📜useDebounce.ts
 ┃ ┣ 📜useKeyboard.ts
 ┃ ┗ 📜useSearchKeyword.ts
 ┣ 📂pages
 ┃ ┣ 📜Home.module.css
 ┃ ┗ 📜Home.tsx
 ┣ 📂utils
 ┃ ┣ 📜DataCaching.ts
 ┃ ┗ 📜types.ts
 ┣ 📜App.module.css
 ┣ 📜App.tsx
 ┣ 📜index.css
 ┣ 📜index.tsx
 ┗ 📜react-app-env.d.ts

✔️ 과제 요구사항에 따른 Best Practice

꼭 Best Practice로 선정되지 않아도 스스로 공부해보고 싶은 부분을 담당해 코드를 구현했습니다.

Assignment 1 | 검색기능 구현

🙋🏻‍♀️ 담당자: 김형욱, 김수진

💻 Best Practice: 차지환

📝 UI 구현

📝 볼드처리

Assignment 2 | 키보드만으로 추천 검색어들로 이동 가능

🙋🏻‍♀️ 담당자: 이수창, 차지환

💻 Best Practice: 차지환

📝 키보드만으로 추천 검색어들로 이동 가능

Assignment 3-1 | API 로컬 캐싱 구현

🙋🏻‍♀️ 담당자: 유서경

💻 Best Practice: 차지환

📝 SearchApiService 레이어 분리

📝 LocalCacheService 클래스에서 API 로컬 캐싱 구현

Assignment 3 2 | Axios 인스턴스 생성 (api)

🙋🏻‍♀️ 담당자: 경지윤

💻 Best Practice: 이수창

📝 Axios 인스턴스 생성

📝 API 코드 작성 및 타입 지정

Assignment 4 | API 호출 최적화 B: 불필요한 API 요청이 가는 것을 방지

🙋🏻‍♀️ 담당자 : 임수진

💻 Best Practice: 경지윤

📝 debounce

📝 loading UI

pre-onboarding-8th-3-7's People

Contributors

pre-onboarding-8th-3-7's Issues

Assignment4 ) API 호출 최적화 B: 불필요한 API 요청이 가는 것을 방지

BP 2. 키워드 검색 시 debounce 기법을 이용해 불필요한 API 요청이 가는 것을 방지합니다.
검색어가 입력되는 동안 로딩을 알리는 UX를 구현합니다.

--best practice
debounce 훅으로 빼기
로딩을 알리는 UX: isLoading set하는 함수 디바운스 훅에 넣었는데 그걸 두번째 인자로 받아서 실행 시키기 (지윤님 코드 참조)

Assignment2 ) 키보드만으로 추천 검색어들로 이동 가능

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

hook 사용 (수창님)
state interface 사용 (서경님)
input에 onkeyup 사용하기(onkeydown의 경우 에러)

Assignment3 ) API 호출 최적화 A: API 호출별 로컬 캐싱 기능 구현

이미 검색했던 결과는 캐싱해서 불필요한 API호출을 방지합니다.

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

axios

-- best practice

axios class: 수창님 코드
캐싱 지환님 코드 참조: map

let으로 선언한 변수 컨텍스트로 빼기

Assignment1 ) 검색 기능 구현

사용자가 입력한 텍스트와 일치하는 부분은 볼드처리합니다. > 형욱님 (중복 키워드 처리)
예) - 사용자 입력: 담낭 추천 검색어: 담낭의 악성 신생물, 담낭염, 담낭의 기타 질환, 달리 분류된 질환에서의 담낭, 담도 및 췌장의 장애.
검색한 키워드를 통해 추천 검색어를 사용자에게 보여줍니다.
검색어가 없을 시 “검색어 없음”이 표출됩니다. (이때 추천 검색어는 보여지지 않습니다.)
추천 검색어 최대 7 개 표시 > 수창님