Vite import.meta.env undefined 해결: VITE_ prefix와 .env 파일 확인법
Vite import.meta.env undefined 오류를 가장 빨리 찾는 순서 Vite에서 import.meta.env 값이 undefined라면 변수명 prefix, env 파일 위치, mode별 파일, dev server 재시작, 배포 환경변수 등록 여부를 순…
더 읽기개발
프로그래밍 카테고리에서는 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에서 에러 메시지가 안 보인…
더 읽기