React useEffect 두 번 실행되는 이유 StrictMode API 중복 해결
개발 중 console.log나 API 요청이 두 번 실행되는 것처럼 보여 “useEffect가 두 번 실행된다”는 문제를 자주 만납니다. React StrictMode는 개발 환경에서 컴포넌트와 Effect의 문제를 더 빨리…
책상 정리 용품 · 제휴
모아 보기이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
웹 화면과 서비스를 만드는
해비의 개발 기록
웹사이트 제작·운영과 개인 서비스, 자동화·AI 도구를 만들며 배운 내용과 문제 해결 과정을 정리합니다.
전체 글
Next.js hydration failed 오류 해결
Hydration은 서버에서 만든 HTML에 React가 브라우저 이벤트와 상태를 연결하는 과정입니다. 서버 HTML과 클라이언트의 첫 렌더 결과가 다르면 hydration failed 경고가 발생할 수 있습니다.
Next.js metadata 적용 오류 해결
metadata 코드를 작성했는데 title이나 OG 정보가 적용되지 않는다면 브라우저 캐시만 의심하지 말고 파일 위치와 실행 경계를 먼저 확인합니다.
Zustand 리렌더링 원리와 selector 최적화 방법
Zustand 리렌더링 원리, selector 구독 구조, shallow 비교와 최적화 기준을 설명하는 개념형 글입니다.
Zustand 학습 로드맵: store·action·selector·persist 순서
Zustand를 적용할 때 로컬·전역 상태 경계부터 create store, action, selector, useShallow, persist와 Next.js hydration까지 순서대로 정리합니다.
Next.js 환경변수 env local 적용 오류 해결
.env.local을 수정했는데 값이 바뀌지 않거나 브라우저에서 undefined가 나오는 문제는 환경변수의 노출 범위와 로딩 시점을 이해하면 해결하기 쉽습니다.
npm install 의존성 충돌 해결: ERESOLVE 오류가 날 때 해결법
npm ERESOLVE 로그와 peer dependency 조건을 읽고 호환되는 버전 조합으로 설치 충돌을 해결합니다.
Next.js Image remotePatterns 오류 해결
next/image로 외부 이미지를 표시하려면 허용할 원격 URL 패턴을 설정해야 합니다. 무작정 모든 호스트를 허용하기보다 실제 필요한 protocol, hostname, pathname 범위를 지정합니다.
Next.js Route Handler 405 오류 해결
App Router에서는 app/api 아래의 route.ts 파일로 HTTP endpoint를 만들 수 있습니다. 요청 메서드가 구현되지 않았거나 파일 위치와 URL이 맞지 않으면 405 오류를 만날 수 있습니다.
Vercel 404 NOT_FOUND 오류 해결: Next.js 배포 후 라우팅과 rewrites 확인
Vercel 404 NOT_FOUND를 Next.js route, rewrites, 정적 자산과 도메인 연결 문제로 나누어 점검합니다.
TanStack Query Hydration 오류 해결: QueryClient 설정 기준
서버 요청별 캐시를 만들고 스냅샷 복원을 검증하는 실험을 통해 v5 동작과 오류 경계를 확인합니다.
Storybook Failed to fetch dynamically imported module 해결 (Vite)
Storybook과 Vite의 동적 import 실패를 Network 요청, 파일 경로와 대소문자, builder 설정으로 진단합니다.
