KPT 회고

🚀 KPT 회고 (MBTI Test 프로젝트)

✅ Keep (유지할 점)

• Zustand + React Query 조합이 편리하고 상태 관리가 간결해짐.
• React Query의 자동 데이터 refetch 기능 덕분에 useEffect + setState 조합보다 훨씬 효율적인 API 관리 가능.
• Navigate의 state를 활용하여 로그인 후 원래 페이지로 이동하는 기능 구현.
• Zustand persist를 활용하여 로그인 유효 시간 동기화 적용.
• refetchInterval을 활용한 토큰 자동 갱신 및 만료 시 자동 로그아웃 기능 추가.
• 카카오톡 공유 기능으로 사용자 경험(UX) 개선.
• isPending 상태를 활용한 로딩 UI 적용으로 데이터 로딩 중 깔끔한 사용자 경험 제공.

---

⚠️ Problem (개선할 점)

• useEffect의 의존성 배열이 빈 배열인데도 실행되는 문제 발생. (추후 원인 분석 및 해결 필요)
• 불필요한 리렌더링 문제가 발생하여 react-scan을 활용해 디버깅 진행.
• React Query의 staleTime, refetch 개념을 아직 완전히 이해하지 못함 → 더 깊은 공부 필요.
• Refresh Token 없이 구현하여, 토큰 갱신 로직이 보완 필요 (보안 측면에서 부족함).
• json-server 기반이라 실제 운영 환경에서는 API 서버 대체 필요.
• useMutation의 onMutate를 통해 optimistic update 추가.

---

🔥 Try (시도할 점)

• React Query의 staleTime과 refetch 개념을 추가 학습하여 보다 최적화된 상태 관리 적용.
• Refresh Token 적용을 연구하여 보안 강화 및 사용자 경험 개선.
• react-scan을 활용하여 불필요한 리렌더링 문제를 지속적으로 체크.
• API 서버를 json-server에서 실제 백엔드 API로 대체하는 방안 고려.
• Zustand와 React Query를 활용한 다른 프로젝트에도 동일한 패턴 적용해보기
• Optimistic Update 적용해보기.