Vitest document is not defined 오류 해결: jsdom 설정 기준
Vitest에서 React 컴포넌트 테스트 중 document is not defined 오류가 발생하는 원인과 jsdom 설정 방법을 정리합니다. Testing Library matcher 연결과 TypeScript 타입 오…
BlogFlow 기술 노트
프론트엔드 기술 블로그
처음 원리를 잡는 분과 실무에서 바로 답을 찾는 개발자가 함께 읽을 수 있도록, 문제의 원인부터 적용 기준까지 정리합니다.
전체 글
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 체크리스트의 원인과 해결 방법을 실제 작업에서 확인할 순서에 맞춰 정리합니다.
React 리스트 key 경고 해결 기준: index key를 피해야 하는 이유
React에서 리스트를 렌더링할 때 발생하는 key 경고의 원인과 해결 기준을 정리합니다. index key가 위험해지는 상황과 실제 코드에서 key 위치를 고치는 방식을 함께 다룹니다.
React useEffect 두 번 실행되는 이유: StrictMode·API 중복 해결
React 개발 환경에서 useEffect가 반복 실행되는 원인을 StrictMode, cleanup, 의존성 배열로 나누고 조회·저장 API의 안전한 처리 방법을 정리합니다.
Next.js hydration failed 오류 해결: 원인과 해결 방법
Next.js hydration failed 오류가 나는 이유와 해결 방법의 원인과 해결 방법을 실제 작업에서 확인할 순서에 맞춰 정리합니다.