어제의 나보다 성장한 오늘의 나

현재 서비스에는 현재 생성 상태를 확인하기 위해 주기적인 polling을 하거나, 사용자의 상호작용에 따라 데이터를 요청해야 하는 경우가 종종 있습니다.이러한 경우, 클라이언트 컴포넌트에서 여러 번 fetch를 트리거해야 하며, 이를 효율적으로 관리하기 위해 useQuery를 적극 활용하고 있습니다. useQuery를 사용하는 이유는 다음과 같은 처리를 간단하게 해결할 수 있기 때문입니다 • 캐시 관리 • 폴링 처리 • 로딩 및 에러 상태 핸들링 이번 글에서는 이러한 요구사항을 가진 클라이언트 컴포넌트에서 데이터 fetch를 어떻게 최적화했는지에 대한 경험을 공유해보려고 합니다기존 구조 데이터 관리 페이지는 다음과 같은 두 개의 요청을 처리합니다.1. 데이터 목록 조회2. 선택된 항목의 상세 분석 결과..

Hydration failed because the server rendered HTML didn’t match the client. This can happen if a SSR-ed Client Component is used. 서버와 클라이언트 간의 HTML 불일치 때문에 해당 에러가 발생했습니다.어떤 상황에서 이 문제가 발생했는지, 그리고 어떻게 해결했는지를 공유합니다. 기존 날짜 처리 방식기존에는 다음 Util을 사용해서 날짜 데이터를 처리 합니다. utils/date-format.tsexport function getFormattedLocaleDateString(date: string | Date) { if (typeof date === "string") { return new Dat..