뷰티 필터를 개발하며 얻은 새로운 경험
한승희 컬리 · 컬리 기술 블로그
AI 핵심 요약
컬리는 안드로이드에만 제공되던 상품 필터를 PC와 모바일 웹으로 확장해 상품 탐색 경험을 통일하고, 오래된 재고·가격 정보로 인한 불편을 줄이려 했다. 이를 위해 Redux로 관리하던 서버 데이터를 React Query로 전환하고, 서버 캐시 시간 5분보다 짧은 1분의 staleTime을 설정해 데이터 동기화와 불필요한 API 호출 방지를 꾀했다. 필터 조건을 URL에 저장하는 등 사용자가 탐색 상태를 유지하고 공유할 수 있는 개선도 함께 진행했다. 배포 후 고객이 상품을 선택하는 평균 위치가 32번째에서 19번째로 앞당겨졌으며, 기술 선정 토론회를 통해 팀이 함께 학습하고 결정하는 문화도 강화됐다.
- 서버에서 가져온 데이터는 Redux의 전역 상태에 넣기보다 React Query 같은 서버 상태 전용 도구로 관리하면 캐싱과 동기화 정책을 분리할 수 있다.
- React Query의 staleTime을 서버 캐시 시간보다 짧게 설정해 데이터 최신성과 불필요한 네트워크 요청 사이의 균형을 맞출 수 있다.
- 필터 조건을 URL에 반영하면 새로고침이나 페이지 이동 뒤에도 탐색 상태를 복원하고 결과를 공유할 수 있다.
- 팀 단위 기술 도입은 근거 문서 공유와 사전 학습, 의견 수렴, 토론을 거쳐 결정하면 구성원의 이해를 맞추는 데 도움이 된다.
소개
처음 만나는 React Query, 그리고...
비슷한 학습 자료
컨퍼런스 if kakao
My구독은 보이지 않은 개선을 진행하고 있는데요. 그 중에서 Redux에서 React-Query로 전환했던 그 이유와 과정을 소개하고 그 과정에서 만났던 이슈를 어떻게 해결했는지 공유합니다. 이번 발표를 통해서 React 16과 React 18에서 React-Query를 도입하거나 기존 Redux 구조를 개선하려고 시도하실 때 참고가 되었으면 좋겠습니다. #React #React-Query #Tanstack-Query #Redux #리팩토링 #React16 #React18 카카오 FE플랫폼팀의 톡FE파트에서 프론트 앤드 개발자로 일하고 있는 프레드입니다. My구독과 이모티콘 스토어 프로젝트를 담당하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-77 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #...
프론트엔드 로드맵 1개에 담김
문서 김동희
전체 데이터를 브라우저에 두는 광고 대시보드 만들기
문서 이규현
우당탕탕 beauty 풀한, 컬리 앱 서비스 런칭기
문서 김민중
