GitHub Actions npm ci 실패 해결: lockfile과 Node 버전 확인
GitHub Actions에서 npm ci가 실패할 때 package-lock.json 불일치, Node 버전 차이, monorepo 경로 문제를 기준으로 원인을 나누고 해결하는 방법을 정리합니다.
개발
프로그래밍 카테고리에서는 HTML, CSS, JavaScript, React, Next.js를 비롯한 다양한 개발 지식과 실무 구현 방법을 정리합니다. 기초 문법부터 UI 구현, API 연동, 상태 관리, 성능 최적화, 트러블슈팅까지 실제 작업에 바로 적용할 수 있는 내용을 쉽고 체계적으로 다룹니다.
총 208개의 글
Vitest document is not defined 오류 해결: jsdom 설정 기준
Vitest에서 React 컴포넌트 테스트 중 document is not defined 오류가 발생하는 원인과 jsdom 설정 방법을 정리합니다. Testing Library matcher 연결과 TypeScript 타입 오…
Firebase Auth unauthorized-domain 오류 해결: 로그인 도메인 설정 확인
Firebase Auth unauthorized-domain 오류가 발생할 때 실제 접속 도메인, Authorized domains, 환경변수, 배포 도메인 설정을 순서대로 확인하는 방법을 정리합니다.
ESLint flat config 규칙 적용 안됨 해결: eslint.config.js 기준
.eslintrc에서 eslint.config.js로 옮긴 뒤 ESLint 규칙이 적용되지 않을 때 확인할 기준을 정리합니다. files 범위, ignores 위치, plugin 등록 방식, TypeScript 설정, prin…
React state 업데이트 안됨 문제 해결
React에서 state를 변경했는데 화면이 업데이트되지 않을 때 확인해야 할 직접 mutation, 같은 참조 반환, setState 로그 착각, 함수형 업데이트, 중복 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 오류 해결: 브라우저 API를 안전하게 쓰기
Next.js window is not defined 오류 해결 방법의 원인과 해결 방법을 실제 작업에서 확인할 순서에 맞춰 정리합니다.
Firebase permission-denied 오류 해결: Firestore Rules 체크리스트
Firebase permission-denied 오류 해결: Firestore Rules 체크리스트의 원인과 해결 방법을 실제 작업에서 확인할 순서에 맞춰 정리합니다.