pnpm install 오류 해결: lockfile·workspace 점검 순서
pnpm install 오류를 workspace·packageManager·lockfile·네트워크·설치 script 순서로 진단합니다.
책상 정리 용품 · 제휴
모아 보기이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
웹 화면과 서비스를 만드는
해비의 개발 기록
웹사이트 제작·운영과 개인 서비스, 자동화·AI 도구를 만들며 배운 내용과 문제 해결 과정을 정리합니다.
전체 글
GitHub Actions npm ci 실패 해결: lockfile과 Node 버전 확인
GitHub Actions npm ci 실패를 lockfile, Node 버전과 설치 옵션으로 재현하고 수정하는 기준을 정리합니다.
Vitest document is not defined 오류 해결: jsdom 설정 기준
document 오류를 Node와 jsdom 환경 차이로 재현하고 해결합니다. matcher 연결과 TypeScript 오류까지 구분하는 독립 실습입니다.
Firebase Auth unauthorized-domain 오류 해결: 로그인 도메인 설정 확인
Firebase Auth unauthorized-domain 오류에서 프로젝트 ID와 접속 호스트를 대조하고, Authorized domains 한 곳을 수정해 같은 로그인 시나리오로 재검증합니다.
ESLint flat config 규칙 적용 안됨 해결: eslint.config.js 기준
ESLint flat config의 files·ignores·규칙 적용 순서를 점검하고 CLI와 VS Code 표시 차이를 확인합니다.
React state 업데이트 안됨 문제 해결
useState 문법을 알고 있어도 실제 프로젝트에서는 “값을 바꿨는데 화면이 안 바뀐다”, “console.log에는 이전 값이 나온다” 같은 문제를 자주 만납니다. 대부분은 React가 느리기 때문이 아니라 state를 일…
Tailwind CSS 클래스 적용 안 됨 해결 순서
Tailwind CSS 클래스가 className에는 들어가 있는데 화면에 적용되지 않을 때 확인할 원인을 정리합니다. 전역 CSS import, 소스 감지, 동적 클래스, 상태 variant, CSS 우선순위 문제를 순서대로…
Tailwind CSS flex 레이아웃 깨질 때 확인할 것
Tailwind CSS에서 flex 레이아웃이 깨질 때 부모 방향, 자식 너비, 줄바꿈, shrink 동작을 기준으로 원인을 나눠 확인하는 방법을 정리합니다.
Zustand selector 사용법: 필요한 상태만 가져와 리렌더링 줄이기
Zustand selector를 사용해 컴포넌트가 필요한 상태만 구독하는 방법을 정리합니다. 전체 store 구독의 문제, 여러 값을 가져올 때의 참조 비교, useShallow 적용 기준까지 필터 UI 예시로 설명합니다.
Next.js window is not defined 오류 해결
Next.js에서는 같은 React 코드라도 서버에서 먼저 실행될 수 있습니다. 브라우저에만 존재하는 window, document, localStorage를 서버에서 읽으면 window is not defined 오류가 발생…
Firebase permission-denied 오류 해결: Firestore Rules 체크리스트
permission-denied를 재현한 요청과 소유자 규칙·쿼리를 짝지어 수정합니다. Firestore Rules는 결과에서 비허용 문서만 걸러주지 않습니다. 요청이 허용되는 범위만 읽는다는 것을 쿼리가 증명해야 합니다. 로…
React 리스트 key 경고 해결 기준 index key를 피해야 하는 이유
React에서 배열을 map으로 렌더링하면 각 항목에 key가 필요합니다. key는 단순히 경고를 없애기 위한 값이 아니라, 이전 렌더와 다음 렌더 사이에서 “이 항목이 같은 항목인가?”를 React가 판단하는 기준입니다.
