프론트엔드 배포 오류 해결 허브: Vercel, Netlify, Firebase 체크리스트
Vercel, Netlify, Firebase 배포 오류를 설치, 빌드, 라우팅, DNS, 캐시와 런타임 계층으로 분류하는 해결 허브입니다.
책상 정리 용품 · 제휴
모아 보기이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
웹 화면과 서비스를 만드는
해비의 개발 기록
웹사이트 제작·운영과 개인 서비스, 자동화·AI 도구를 만들며 배운 내용과 문제 해결 과정을 정리합니다.
전체 글
Firebase 실무 오류 해결 모음: Storage, Firestore, Auth 체크리스트
Firebase 오류를 제품·요청·권한 주체로 분류하고 알맞은 해결 글로 이동합니다. 먼저 어느 요청이 실패했는지 고정하세요. “Firebase가 안 된다”를 코드 한 조각으로 해결하려 하면 서로 다른 제품의 설정을 바꾸게 됩…
Next.js SEO 종합 가이드 App Router부터 배포 확인
SEO는 metadata 한 줄을 넣는 것으로 끝나지 않습니다. 검색엔진이 접근 가능한 URL 구조, 초기 HTML, canonical, sitemap, robots, Open Graph, redirect, 성능을 함께 봐야…
Firebase CORS 오류 해결: Storage 이미지 업로드가 막힐 때 확인할 설정
Storage 업로드 실패에서 CORS·인증·버킷 설정을 분리하고 필요한 CORS만 수정합니다. CORS는 브라우저가 다른 출처 응답을 읽을 수 있는지 정하는 정책입니다. Storage Rules가 허용할 사용자와 객체를 정하…
Firebase Storage 이미지 오류 해결: 403·404·token·Rules 확인법
Storage 이미지의 객체 경로·다운로드 링크·권한 실패를 구분합니다. 이미지가 깨지면 DB의 문자열을 임의로 고치기 전에 bucket과 객체 경로를 확인하세요. SDK로 얻은 다운로드 URL과 인증된 객체 요청은 보안 의미…
Vercel Next.js 배포 실패 해결 체크리스트: 빌드 로그·환경변수·Node 버전 확인법
Vercel Next.js 빌드 실패를 최초 오류 로그, 환경변수, Node 버전과 타입 검사로 좁히는 체크리스트입니다.
Vite import.meta.env undefined 해결: VITE_ prefix 기준
Vite 환경 변수가 undefined일 때 VITE_ 접두사, 파일 위치, mode와 서버 재시작 순서로 원인을 확인합니다.
Playwright 테스트 실패 해결: locator가 요소를 찾지 못할 때 체크리스트
요소 없음·중복 일치·클릭 불가를 구분하고 목록·모달·아이콘 버튼의 locator와 응답 대기를 독립 Playwright 실습으로 검증합니다.
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 검증
폼 입력 검증을 브라우저에서만 처리하면 직접 요청을 보낼 때 우회할 수 있습니다. 클라이언트 검증은 사용자 경험을 위한 것이고, 서버 검증은 데이터 무결성을 위한 것입니다.
