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 상태를 읽을 수 있다는 전제에서, 하나의 증상을 설치·빌드·런타임·라우팅·권한 문제로 나누고 해당 해결 글에 필요한 증거를 준비합니다.
Firebase 실무 오류 해결 모음: Storage, Firestore, Auth 체크리스트
Firebase 오류를 제품·요청·권한 주체로 분류하고 알맞은 해결 글로 이동합니다. 먼저 어느 요청이 실패했는지 고정하세요. “Firebase가 안 된다”를 코드 한 조각으로 해결하려 하면 서로 다른 제품의 설정을 바꾸게 됩…
Next.js SEO 완전 가이드: App Router metadata부터 배포 확인까지
Next.js App Router metadata, generateMetadata, openGraph, canonical, sitemap, robots.txt, Vercel 배포 후 확인까지 한 흐름으로 점검합니다.
Firebase CORS 오류 해결: Storage 이미지 업로드가 막힐 때 확인할 설정
Storage 업로드 실패에서 CORS·인증·버킷 설정을 분리하고 필요한 CORS만 수정합니다. CORS는 브라우저가 다른 출처 응답을 읽을 수 있는지 정하는 정책입니다. Storage Rules가 허용할 사용자와 객체를 정하…
Firebase Storage 이미지 오류 해결: 403·404·token·Rules 확인법
Storage 이미지의 객체 경로·다운로드 링크·권한 실패를 구분합니다. 이미지가 깨지면 DB의 문자열을 임의로 고치기 전에 bucket과 객체 경로를 확인하세요. SDK로 얻은 다운로드 URL과 인증된 객체 요청은 보안 의미…
Vercel Next.js 배포 실패 해결 체크리스트: 빌드 로그·환경변수·Node 버전 확인법
Next.js 빌드 명령과 TypeScript 객체 타입을 읽을 수 있다는 전제에서, 첫 오류를 실제 수정 파일로 연결하고 같은 빌드로 해결 여부를 판정합니다.
Expo EAS Build 오류 해결: 로컬은 되는데 원격 빌드만 실패할 때
EAS 로그를 단계별로 분류하고 원격에 빠진 파일을 아카이브에서 확인합니다. Expo 로컬 실행, Git, eas.json 프로필을 이해해야 합니다.
Vite import.meta.env undefined 해결: VITE_ prefix 기준
목표는 Vite 클라이언트의 환경변수 undefined를 prefix·파일 위치·mode·빌드 시점으로 나눠 찾는 것입니다. ES module과 npm 실행 기초가 필요합니다. 실제 비밀 값 대신 demo 문자열만 써서 재현하…
Playwright 테스트 실패 해결: locator가 요소를 찾지 못할 때 체크리스트
요소 없음·중복 일치·클릭 불가를 구분하고 목록·모달·아이콘 버튼의 locator와 응답 대기를 독립 Playwright 실습으로 검증합니다.
Next.js useSearchParams Suspense 오류 해결: 빌드 실패 기준
Next.js useSearchParams Suspense 오류 해결: App Router 빌드가 실패할 때 상황에서 확인할 원인과 해결 순서를 실무 기준으로 정리합니다.