Vercel Next.js 배포 실패 해결 체크리스트: 빌드 로그·환경변수·Node 버전 확인법
Vercel Next.js 배포 실패를 가장 빨리 좁히는 순서 Vercel에서 Next.js 배포가 실패할 때는 마지막 실패 문구보다 첫 번째 에러 블록, 환경변수 차이, Node.js 버전, lock 파일, runtime 오류 여부를 순서대로 확인해야 합니다. 이 글…
더 읽기프론트엔드
프론트엔드 카테고리에서는 사용자 화면을 구현하는 데 필요한 핵심 기술과 실무 지식을 정리합니다. HTML, CSS, JavaScript를 비롯해 React, Next.js, UI 컴포넌트 설계, 상태 관리, API 연동, 성능 최적화, 반응형 웹까지 프론트엔드 개발 전반을 다룹니다.
Playwright 테스트 실패 해결: locator가 요소를 찾지 못할 때 체크리스트
이 글에서 정리하는 내용 화면에는 요소가 보이는데 Playwright locator가 찾지 못하는 상황을 기준으로 원인을 좁히고, 실제 프로젝트에서 어떤 설정과 코드 구조를 확인해야 하는지 정리합니다. 단순 개념 소개가 아니라 오류가 난 순간 바로 확인할 순서와…
더 읽기
Next.js useSearchParams Suspense 오류 해결: App Router 빌드가 실패할 때
이 글에서 정리하는 내용 App Router에서 useSearchParams를 쓴 클라이언트 컴포넌트 때문에 production build가 실패하는 상황을 기준으로 원인을 좁히고, 실제 프로젝트에서 어떤 설정과 코드 구조를 확인해야 하는지 정리합니다. 단순 개…
더 읽기
Next.js fetch 캐시 문제 해결: 데이터가 바뀌었는데 화면이 그대로일 때
이 글에서 정리하는 내용 App Router에서 API 데이터는 바뀌었는데 페이지 화면이 오래 그대로 남는 상황을 기준으로 원인을 좁히고, 실제 프로젝트에서 어떤 설정과 코드 구조를 확인해야 하는지 정리합니다. 단순 개념 소개가 아니라 오류가 난 순간 바로 확인…
더 읽기
Radix UI와 shadcn/ui 차이: 컴포넌트를 고를 때 헷갈리는 기준 정리
이 글에서 정리하는 내용 Radix UI와 shadcn/ui를 경쟁 라이브러리처럼 오해해 선택 기준이 흐려지는 상황을 기준으로 원인을 좁히고, 실제 프로젝트에서 어떤 설정과 코드 구조를 확인해야 하는지 정리합니다. 단순 개념 소개가 아니라 오류가 난 순간 바로 …
더 읽기
Next.js Server Actions와 React Hook Form 같이 쓰는 법: form action과 validation 기준
이 글에서 정리하는 내용 Server Actions와 React Hook Form을 같이 쓸 때 클라이언트 검증과 서버 검증 역할이 겹쳐 보이는 상황을 기준으로 원인을 좁히고, 실제 프로젝트에서 어떤 설정과 코드 구조를 확인해야 하는지 정리합니다. 단순 개념 소…
더 읽기
shadcn/ui 설치 오류 해결: components.json과 import alias가 맞지 않을 때
이 글에서 정리하는 내용 shadcn/ui 컴포넌트 생성 후 @ alias와 실제 폴더 구조가 맞지 않아 import가 깨지는 상황을 기준으로 원인을 좁히고, 실제 프로젝트에서 어떤 설정과 코드 구조를 확인해야 하는지 정리합니다. 단순 개념 소개가 아니라 오류가…
더 읽기
React Hook Form Zod 연결 오류 해결: resolver 타입이 맞지 않을 때 확인할 것
이 글에서 정리하는 내용 React Hook Form에 zodResolver를 붙였는데 schema, defaultValues, optional 처리 때문에 타입이 맞지 않는 상황을 기준으로 원인을 좁히고, 실제 프로젝트에서 어떤 설정과 코드 구조를 확인해야 하…
더 읽기
TypeScript Type is not assignable to type 오류 해결: 타입 불일치 원인 찾기
이 글에서 정리하는 내용 TypeScript Type is not assignable to type 오류는 값을 넣는 쪽의 타입과 받는 쪽의 타입이 서로 맞지 않을 때 발생합니다. 이 글에서는 optional property, union type, API 응답 타입 불…
더 읽기
React Hook Form 에러 메시지 표시 문제 해결: validation이 안 보일 때 체크리스트
required나 minLength를 넣었는데 errors 객체가 비어 있거나에러가 있는데 화면에 표시되지 않는 경우가 생깁니다. validation이 안 보일 때는 에러가 없는지, 표시만 안 되는지 나눕니다 React Hook Form에서 에러 메시지가 안 보인…
더 읽기