yena-yun / preonboarding-mission-1

원티드 1번째 기업 과제 (결과 값 캐싱, debounce 최적화)

📚 Preonboarding 1번째 기업 과제

🧪 실행 방법

1. git clone
2. yarn install
3. ** yarn dev (Vite 환경)
4. 터미널 링크를 눌러 화면 실행

🧶 기술 스택

🔎 작업 내역: 캐싱과 입력 최적화

1. 입력된 키워드 기준으로 캐싱 구현

• redux-toolkit의 Thunk 함수에서 비동기 API 호출을 처리하는 과정에서 캐싱 구현
• 입력한 키워드와 그에 맞는 검색 결과를 private 변수에 캐싱
• 이후 동일한 키워드로 재검색하면 API를 새로 호출하지 않고 캐싱된 결과를 재사용

2. debounce로 입력 후 일정 시간 후에 API 호출

• debounce를 lodash와 같은 라이브러리 없이 구현
• 커스텀 hook을 활용하여 뷰 로직이 있는 컴포넌트에서 상태 로직 분리
• 결과 리스트 보여주기(isOpen)와 API 호출 로직을 400ms마다 한 번씩 실행

🏏 트러블 슈팅

클릭 시 블로그 기록으로 이동합니다.

🧙‍♀️ 프로젝트 개선기 ✨

📌 vite.config.ts에서 proxy를 설정하여 CORS 에러 해결

📌 throw Error로 api 결과값 타입에 포함되는 undefined 제거