프론트엔드
뷰티 필터를 개발하며 얻은 새로운 경험
두줄요약
뷰티 상품 탐색 경험 개선을 위해 웹 필터를 확장하고 React Query를 도입했습니다. URL 상태 저장과 서버 상태 동기화로 탐색 편의성과 데이터 최신성을 높였습니다.
문제 상황
- Android에만 존재하던 상품 필터를 PC·모바일 웹으로 확장할 필요
- Redux 기반 서버 데이터 관리로 오래된 재고·가격 정보 노출과 품절 구매 시도 발생
해결 방법
- 서버 상태 관리 라이브러리를 Redux에서 React Query로 전환
- stale time을 1분으로 설정해 서버 캐시 시간 5분보다 빠른 데이터 갱신 유도
- 필터 결과를 URL에 저장해 새로고침·페이지 이동 뒤에도 목록 조건 유지 및 공유 지원
성능/운영 포인트
- 필터 적용·해제 과정의 불필요한 API 호출 감소
- 화면 재방문 시 새로운 서버 데이터 수신과 재고·가격 변동 정보 동기화
- 기술 선정 토론회와 PR 리뷰를 통한 전사적 설정 혼선 방지 및 코드 품질 관리
적용해볼 점
- 서버 데이터와 클라이언트 전역 상태를 분리해 비동기 데이터 관리 복잡도 완화
- 필터·정렬 조건의 URL 직렬화로 탐색 맥락 유지와 공유성 강화
