React state 업데이트 안됨 문제 해결
이벤트에서 중첩 객체를 직접 수정하고 같은 cart 참조를 넘기면 화면이 이전 수량으로 남을 수 있습니다. 수정본은 cart와 product를 모두 새 객체로 만들고 이름·가격은 유지합니다. +3 버튼은 하나의 이벤트에서 같은…
해비
웹퍼블리싱 실무를 바탕으로 React, Next.js, TypeScript와 프론트엔드 문제 해결 과정을 기록합니다.
총 370개의 글
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 경계 기준으로 정리합니다.
Firebase permission-denied 오류 해결: Firestore Rules 체크리스트
permission-denied를 재현한 요청과 소유자 규칙·쿼리를 짝지어 수정합니다. Firestore Rules는 결과에서 비허용 문서만 걸러주지 않습니다. 요청이 허용되는 범위만 읽는다는 것을 쿼리가 증명해야 합니다. 로…
React 리스트 key 경고 해결 기준: index key를 피해야 하는 이유
위 오류 코드를 실습의 map에 적용하면 위치를 나타내는 index가 key가 됩니다. Beta 메모를 고친 뒤 순서를 뒤집으면 메모가 Alpha에 붙는 현상을 볼 수 있습니다. 수정본은 Row 내부에 로컬 state를 일부러…
React useEffect 두 번 실행되는 이유: StrictMode·API 중복 해결
cleanup 없는 오류 코드는 루트 StrictMode의 개발 검사에서 같은 컴포넌트에 리스너를 중복 등록할 수 있습니다. 수정본은 setup에서 만든 함수와 같은 참조를 removeEventListener에 전달합니다. […
Next.js hydration failed 오류 해결: 원인과 해결 방법
Next.js hydration failed 오류가 발생하는 원인과 해결 방법을 서버 HTML과 브라우저의 첫 React 출력 비교 순서에 맞춰 정리합니다.
Next.js metadata가 적용되지 않을 때 확인할 7가지
Next.js metadata가 보이지 않을 때 파일 위치, export 충돌, params, URL 기준, 특수 파일, 병합 규칙, 응답·캐시를 순서대로 점검합니다.