React Maximum update depth exceeded 오류 해결: 무한 렌더링 원인 찾기
React Maximum update depth exceeded 오류를 setState 호출 위치, useEffect 의존성, 객체·함수 참조, 파생 state, 부모·자식 순환 구조로 진단하고 올바른 수정 순서를 정리합니다.
전체 글
Next.js params should be awaited 해결: App Router 기준
Next.js 15 App Router에서 params should be awaited 오류가 발생하는 이유와 page, generateMetadata, route handler별 수정 방법을 정리합니다.
pnpm install 오류 해결: lockfile·workspace 점검 순서
이 글의 목표는 pnpm install 실패를 lockfile 불일치·workspace 불일치·인증·경로 문제로 나누고 필요한 입력만 고치는 것입니다. package.json, Git diff, workspace 기본 지식이…
GitHub Actions npm ci 실패 해결: lockfile과 Node 버전 확인
package.json과 터미널 사용법을 알고 있다는 전제에서, lockfile 불일치를 작은 로컬 패키지로 재현하고 파일 갱신만으로 npm ci가 성공하는지 확인합니다.
Vitest document is not defined 오류 해결: jsdom 설정 기준
document 오류를 Node와 jsdom 환경 차이로 재현하고 해결합니다. matcher 연결과 TypeScript 오류까지 구분하는 독립 실습입니다.
Firebase Auth unauthorized-domain 오류 해결: 로그인 도메인 설정 확인
OAuth 도메인 오류와 redirect·continue URL 오류를 구분하고 설정 한 곳만 바꾸어 재확인합니다. auth/unauthorized-domain은 현재 앱의 호스트가 인증 작업에 승인되어 있는지 먼저 확인할 오…
ESLint flat config 규칙 적용 안됨 해결: eslint.config.js 기준
목표는 설정 파일을 읽지 못한 오류와 files 범위에서 빠져 규칙이 적용되지 않는 현상을 분리하는 것입니다. npm과 JavaScript 모듈을 알고 시작합니다. 먼저 ESLint flat config의 JavaScript…
React state 업데이트 안됨 문제 해결
이벤트에서 중첩 객체를 직접 수정하고 같은 cart 참조를 넘기면 화면이 이전 수량으로 남을 수 있습니다. 수정본은 cart와 product를 모두 새 객체로 만들고 이름·가격은 유지합니다. +3 버튼은 하나의 이벤트에서 같은…
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 오류 해결: 브라우저 API를 안전하게 쓰기
Next.js window is not defined 오류가 발생하는 원인과 브라우저 API를 안전하게 사용하는 방법을 실행 시점과 Client Component 경계 기준으로 정리합니다.