TanStack Query Hydration 오류 해결: QueryClient 설정 기준
서버 요청별 캐시를 만들고 스냅샷 복원을 검증하는 실험을 통해 v5 동작과 오류 경계를 확인합니다.
프론트엔드
HTML·CSS부터 JavaScript, React와 상태관리까지, 화면을 만들고 데이터를 다루는 기술을 배웁니다.
총 177개의 글
Next.js SEO 종합 가이드 App Router부터 배포 확인
SEO는 metadata 한 줄을 넣는 것으로 끝나지 않습니다. 검색엔진이 접근 가능한 URL 구조, 초기 HTML, canonical, sitemap, robots, Open Graph, redirect, 성능을 함께 봐야…
Next.js useSearchParams Suspense 오류 해결
검색·필터 상태를 URL에 넣으면 새로고침해도 유지되고 링크를 공유할 수 있습니다. App Router에서는 Server Component의 searchParams와 Client Component의 useSearchParams…
Next.js fetch 캐시와 재검증
데이터를 저장했는데 화면이 그대로라면 React state만 볼 것이 아니라 서버 데이터와 Next.js 캐시·재검증 경계를 확인해야 합니다.
Radix UI와 shadcn/ui 차이: 컴포넌트를 고를 때 헷갈리는 기준 정리
Radix UI와 shadcn/ui 차이: 컴포넌트를 고를 때 헷갈리는 기준 정리 상황에서 확인할 원인과 해결 순서를 실무 기준으로 정리합니다.
Next.js Server Actions React Hook Form 검증
폼 입력 검증을 브라우저에서만 처리하면 직접 요청을 보낼 때 우회할 수 있습니다. 클라이언트 검증은 사용자 경험을 위한 것이고, 서버 검증은 데이터 무결성을 위한 것입니다.
shadcn/ui No import alias found 오류 해결: tsconfig 설정
shadcn/ui의 No import alias found 오류를 components.json, tsconfig paths, Vite resolve.alias 기준으로 해결합니다. Next.js·Vite·모노레포 점검 순서도…
React Hook Form 에러 메시지 표시 문제 해결 validation 체크리스트
React Hook Form을 설치하고 register까지 연결했는데도 오류 메시지가 보이지 않는 경우가 있습니다. 대부분은 validation 규칙, field 이름, formState.errors 접근, 메시지 렌더링 조건…
TanStack Query 화면 갱신 문제 해결: 데이터 변경 후 UI가 바뀌지 않을 때
같은 쓰기 성공에서 정상 키와 잘못된 키를 비교하는 진단 실험을 통해 v5 동작과 오류 경계를 확인합니다.
Zustand 실무 사용 기준: store가 복잡해질 때 피할 실수
Zustand를 실무에서 사용할 때 전역 상태 범위, 서버 상태 분리, selector, persist, store 분리 기준을 상태의 출처와 수명 관점에서 정리합니다.