[개발 일기] - 22.09.16.Fri (feat. 검색 기능)

22.09.16.Fri

 

오늘은 회사 업무로 검색 스크린 위주로 퍼블리싱 및 FE 작업을 진행하였습니다.

제가 알기로 검색 기능은 디바운스 및 쓰로틀링을 활용하는 등 최적화 부분이 필요한 것으로 알고 있습니다.

사용자가 검색 키워드 한 글자씩 입력할 때마다 서버로 API 요청을 보내는 것은 상당히 무거운 작업이기 때문입니다.
(기존 겸상 서비스를 만들 때 시간이 없어서 그냥 검색 API를 붙였는데 클라이언트에서 버벅거리는 현상을 느꼈습니다.)

그리고 아직 API 작업은 하지 않아서 데이터가 어떤 URL로 어떤 컬럼을 가진 형태로 올지 모르는 상태입니다.

 

BE 구현은 따로 없고 Shopify 플랫폼의 StoreFront, Hydrogen을 사용하는 것으로 알고 있습니다.

한번도 사용해보지 않은 서비스여서 잘 모르겠지만 graphql 방식으로 데이터가 날라오는 것 같습니다.

내부적으로 구현된 일부 훅에는 react-query가 사용된 것도 조금 보입니다.

 

API가 아직 없는 상태여서 우선 mock data를 생성해두고 그 data를 이용해서 리허설하면

기능이 다 보여지도록 디자인과 기본적인 구현은 해두었습니다.

 

그리고 아직 재사용되는 컴포넌트나 훅, context API 관련 고민이 몇가지 있긴 한데
추후에 천천히 말씀드리겠습니다.

 

퇴근 이후에는 최근 계속 습관을 들이면서 진행하고 있는 알고리즘 2문제씩 풀고 있습니다.

그리고 react-query 서버 상태 관리 라이브러리의 기본적인 내용을 학습했습니다.

queryClient, queryClientProvider, useQuery, useMutation, refetch, dependency array 등

간단한 개념들을 훑어봤습니다.

---

[생각해 볼 내용]

  - 검색 기능 최적화 (feat. 디바운스 & 쓰로틀링)