Zustand 리렌더링 원리와 selector 최적화 방법
Zustand 리렌더링 원리, selector 구독 구조, shallow 비교와 최적화 기준을 설명하는 개념형 글입니다.
해비
웹퍼블리싱 실무를 바탕으로 React, Next.js, TypeScript와 프론트엔드 문제 해결 과정을 기록합니다.
총 370개의 글
Zustand 학습 로드맵: store·action·selector·persist 순서
Zustand를 적용할 때 로컬·전역 상태 경계부터 create store, action, selector, useShallow, persist와 Next.js hydration까지 순서대로 정리합니다.
Next.js 환경변수 적용 오류 해결: .env.local을 바꿨는데 값이 안 바뀔 때
Next.js 환경변수 적용 오류 해결: .env.local을 바꿨는데 값이 안 바뀔 때 상황에서 먼저 확인할 로그, 설정, 버전, 환경 차이를 실무 체크리스트로 정리합니다.
npm install 의존성 충돌 해결: ERESOLVE 오류가 날 때 해결법
목표는 ERESOLVE에서 충돌한 peer 요구 범위를 읽고 호환 조합으로 설치를 복구하는 것입니다. package.json과 버전 범위 기초가 필요합니다. npm 11 기준 로컬 tarball 최소 재현으로 실제 오류와 수정…
Next.js Image remotePatterns 오류 해결: 외부 이미지 도메인 허용하기
Next.js Image remotePatterns 오류가 발생하는 원인과 외부 이미지 URL의 protocol·hostname·pathname을 안전하게 허용하는 기준을 정리합니다.
Next.js Route Handler 405 오류 해결: GET/POST 파일 위치와 메서드 설정 확인
Next.js App Router Route Handler에서 405 Method Not Allowed가 날 때 route.ts 위치, export 메서드, 요청 URL, form/action 메서드를 점검하는 방법을 정리합니…
Vercel 404 NOT_FOUND 오류 해결: Next.js 배포 후 라우팅과 rewrites 확인
Next.js App Router의 page.tsx와 npm build를 알고 있다는 전제에서, 잘못된 rewrite와 없는 라우트를 서로 다른 문제로 재현·수정합니다.
TanStack Query Hydration 오류 해결: QueryClient 설정 기준
서버 요청별 캐시를 만들고 스냅샷 복원을 검증하는 실험을 통해 v5 동작과 오류 경계를 확인합니다.
Storybook Failed to fetch dynamically imported module 해결 (Vite)
목표는 Storybook의 동적 import 실패 메시지를 실제 실패 요청·변환 로그와 연결해 원인 파일을 찾는 것입니다. React 컴포넌트와 Vite alias를 알고 시작합니다. @storybook/react-vite 프…
프론트엔드 배포 오류 해결 허브: Vercel, Netlify, Firebase 체크리스트
배포 로그와 HTTP 상태를 읽을 수 있다는 전제에서, 하나의 증상을 설치·빌드·런타임·라우팅·권한 문제로 나누고 해당 해결 글에 필요한 증거를 준비합니다.