[프리온보딩] 220518 그룹과제 #2

그룹과제 #2

공식적인 내생각

과제 요구사항 중 로컬 캐싱은 리액트 쿼리, API 호출 횟수 줄이기는 디바운싱을 사용하면 될 듯 하다

API 응답 속도는 정말 너무나도 느린데, 제공받은 XML을 JSON으로 변환한 뒤 사용하니 1900개 가량의 데이터에서 filter 작업까지 해도 아주 짧은 시간 안에 응답이 돌아와서 아무래도 검색어 출력 및 Fuzzy matching을 위해서라면 로컬 파일을 사용하는 게 나아보인다

어째 과제를 하면서 API와의 싸움 비중이 더 커 보인다…. 솔직히 Fuzzy matching이 일종의 검색어 유추 시스템인데 API 응답 속도도 느린 상황에서 사용자의 검색어를 어떻게 바로바로 예측하고 퍼지매칭이 가능한지 잘 모르겠다

로컬 파일을 사용하지 않는 퍼지매칭 구현 방법이 궁금하다

작업 내용

API 호출 횟수 줄이기 + 로컬 캐싱 메모

• 디바운싱을 걸어서 특정 시간동안 한 번만 API를 호출하도록 하면, 검색어 입력 도중에 API 요청을 계속 보내지 않고 이벤트가 일어난 특정 시간에 API 호출이 한 번씩만 발생하므로 시간을 줄일 수 있다
• input에 값을 입력할 때, 빠르게 value값이 바뀌므로 value가 바뀔 때마다 API 요청을 보내는 것은 바람직하지 않다
• react-query의 refetch() 함수는 로컬 캐시를 무시한다고 한다 (이 부분 자세히 알아봐야겠다)
• react-query에서 캐싱을 구현하기 위해 staletime과 cachetime 설정은 필수라고 한다 (이 부분도…)

redux-toolkit 사용할 만한 부분?

• 입력값인 searchText 저장하기 (input ⇒ dropdown에 값 전달 후, dropdown에서 fetch하기
• 그 외에는 전역 상태값을 사용할 만한 부분이 거의 없어보인다?

내일 이야기할 사항 메모

• ‘간' 검색하면 ‘감', ‘갑', ‘가' 까지 매칭됨
• ‘염’ 검색하면 ‘열’, ‘역’ 같이 나옴
• 퍼지매칭과 fetching 함수 연결하기
• 컴포넌트 연결 순서?