행복하개

강아지 목록/봉사 일정 등 API 데이터를 여러 컴포넌트에서 공유하면서 중복 요청, 뮤테이션 후 갱신 타이밍, 무한 스크롤·페이징 관리가 필요했습니다. 한편 로그인 토큰/선택 보호소처럼 앱 전반에서 필요하고 새로고침 후에도 유지돼야 하는 전역 상태는 prop drilling 없이 접근할 수 있어야 했습니다.

Zustand는 authStore / centerStore / notificationStore로 역할별로 스토어를 분리했습니다. authStore·centerStore는 sessionStorage와 연동해 새로고침 후 자동 복원되도록 하고, 로그아웃 시 연쇄 초기화로 상태 불일치를 방지했습니다. TanStack Query는 useQuery·useInfiniteQuery로 캐싱·자동 갱신·무한 스크롤을 처리하고, enabled: !!centerId로 보호소 미선택 시 요청을 차단했습니다. 낙관적 업데이트로 서버 응답 전 UI를 즉시 반영해 체감 반응 속도를 높였습니다.

TanStack Query의 캐싱/자동 갱신/무한 스크롤/낙관적 업데이트와 Zustand의 sessionStorage 기반 영속화·역할별 스토어 분리를 실제 서비스에 적용하며 서버·클라이언트 상태를 목적에 맞게 나눠 관리하는 경험을 쌓았습니다.

접종 관리 페이지는 강아지 이름을 하나씩 검색해 체크하는 방식으로 운영되어, 짧은 시간 안에 검색을 여러 번 사용하는 구조였습니다. 매번 서버에 요청해야 하는지 의문이 생겼습니다.

보호소당 최대 약 500마리 수준임을 확인하고, 전체 페이로드가 약 72KB(비압축), gzip 시 15~20KB 수준임을 측정했습니다. performance.now() 기준 클라이언트 필터링 중앙값 ~0.1ms를 실측하고, 초기 1회 로드 후 클라이언트에서 직접 필터링하는 방식을 채택했습니다.

반복 검색 시 API 요청을 제거해 응답 속도를 개선했습니다. 직관이 아닌 실측 수치(페이로드 크기·필터링 시간)를 근거로 서버 vs 클라이언트 처리 방식을 결정하는 판단 기준을 확립했습니다.

보호소 관리자가 유기견 공고 이미지를 보며 정보를 직접 입력하는 반복 작업이 발생했고, 공고 이미지마다 항목 위치가 달라 정규식 단순 파싱으로는 필드 추출 정확도에 한계가 있었습니다.

Python EasyOCR 라이브러리로 공고 이미지를 텍스트로 변환한 후 성별, 품종 등 키워드를 파싱해 구조화된 객체로 반환했습니다. 프론트엔드에서 공고 이미지 업로드 시 파싱된 필드 값을 수신해 해당 폼 필드에 자동 입력했습니다. OCR로 자동 입력된 필드는 하이라이팅으로 시각적으로 구분해 사용자가 오입력 여부를 즉시 확인하고 수정할 수 있도록 안내했습니다.

공고 이미지 업로드만으로 주요 필드 자동 입력 → 반복 수기 입력 작업 대폭 감소. EasyOCR 기반 이미지 텍스트 추출 파이프라인 구현 및 Python 서버 AWS 배포 경험을 확보했습니다.