Vitest document is not defined 오류 해결: jsdom 설정 기준
이 글에서 정리하는 내용 Vitest document is not defined 오류는 React 컴포넌트 테스트에서 자주 만나는 환경 설정 문제입니다. 테스트 코드는 브라우저의 document를 사용하려고 하는데, Vitest 실행 환경이 기본값인 node로 …
더 읽기
hebi_admin
TypeScript Property does not exist on type never 오류 해결: never 타입이 생기는 이유
이 글에서 정리하는 내용 TypeScript의 Property does not exist on type 'never' 오류는 속성이 진짜로 없는 문제처럼 보이지만, 실제로는 타입 추론이 너무 좁아진 결과인 경우가 많습니다. 특히 빈 배열, useRef(null)…
더 읽기
Firebase Auth unauthorized-domain 오류 해결: 로그인 도메인 설정 확인하기
이 글에서 정리하는 내용 Firebase Auth unauthorized-domain 오류는 로그인 함수가 잘못되어서라기보다, 현재 앱이 열린 도메인과 Firebase Authentication의 승인 도메인 설정이 맞지 않을 때 주로 발생합니다. 로컬에서는 G…
더 읽기
ESLint flat config 규칙 적용 안됨 해결: eslint.config.js 전환 후 체크할 것
이 글에서 정리하는 내용 .eslintrc에서 eslint.config.js로 옮긴 뒤 ESLint flat config 규칙 적용이 안 되는 문제를 정리합니다. flat config는 설정을 한 파일에 모아두는 것보다, 검사 대상 파일마다 어떤 설정 객체가 매…
더 읽기
React state 업데이트 안됨 문제 해결하기
React state 업데이트가 화면에 안 보일 때 확인할 것 React에서 state를 바꿨는데 화면이 그대로라면 먼저 기존 배열이나 객체를 직접 수정했는지, 같은 참조를 다시 넘겼는지, setState 직후 값을 최신 값으로 착각하고 있는지부터 봐야 …
더 읽기
Tailwind CSS 클래스 적용 안 됨 원인과 해결 순서
Tailwind CSS 클래스가 적용되지 않을 때 확인할 것 Tailwind CSS를 쓰다 보면 className에는 분명히 클래스가 들어가 있는데 화면에는 스타일이 보이지 않는 경우가 있습니다. 이 문제는 단순 오타일 수도 있지만, CSS import 누락, 소스…
더 읽기
Tailwind CSS flex 레이아웃 깨질 때 확인할 것
Tailwind CSS flex 레이아웃이 깨질 때 먼저 확인할 것 Tailwind CSS에서 flex 레이아웃이 예상과 다르게 깨질 때는 클래스를 계속 덧붙이기보다 부모의 방향, 자식 요소의 너비 계산, 줄바꿈 여부, 줄어드는 동작을 나눠서 확인해야 합니다. 특히…
더 읽기
Zustand selector 사용법: 필요한 상태만 가져와 리렌더링 줄이기
이 글에서 정리하는 내용 Zustand에서 selector를 사용하는 이유를 컴포넌트 구독 범위 관점으로 정리합니다. 전체 store를 가져오는 방식이 왜 편해 보이는지, 상태가 늘어났을 때 어떤 문제가 생기는지, 여러 값을 가져올 때 를 언제 검토해야 하는지까지 관리…
더 읽기
Next.js window is not defined 오류 해결: 브라우저 API를 안전하게 쓰기
Next.js window is not defined 오류 해결 방법에서 먼저 확인할 것 Next.js window is not defined 오류 해결 방법는 단순히 한 줄 코드를 바꾸는 문제로 끝나지 않습니다. 브라우저 전용 객체를 서버 실행 시점에 사용해 발생하는…
더 읽기
Firebase permission-denied 오류 해결: Firestore Rules 체크리스트
Firebase 오류 해결: 체크리스트에서 먼저 확인할 것 Firebase 오류 해결: 체크리스트는 단순히 한 줄 코드를 바꾸는 문제로 끝나지 않습니다. 가 요청을 거부하는 상황을 기준으로 원인을 좁히고, 인증 상태, match 경로, read/write 조건, 배포 …
더 읽기