Next.js Dynamic server usage 오류 해결: cookies headers 기준
Next.js App Router에서 Dynamic server usage 오류가 발생하는 이유를 cookies와 headers 사용 위치 중심으로 정리합니다. 정적 렌더링과 동적 렌더링 중 어떤 방향으로 수정할지 판단하는 기…
프론트엔드
프론트엔드 카테고리에서는 사용자 화면을 구현하는 데 필요한 핵심 기술과 실무 지식을 정리합니다. HTML, CSS, JavaScript를 비롯해 React, Next.js, UI 컴포넌트 설계, 상태 관리, API 연동, 성능 최적화, 반응형 웹까지 프론트엔드 개발 전반을 다룹니다.
총 106개의 글
React Maximum update depth exceeded 오류 해결: 무한 렌더링 원인 찾기
React에서 Maximum update depth exceeded 오류가 발생하는 원인을 setState 호출 위치, useEffect 의존성 배열, props와 state 동기화 구조를 기준으로 정리합니다.
Next.js params should be awaited 해결: App Router 기준
Next.js 15 App Router에서 params should be awaited 오류가 발생하는 이유와 page, generateMetadata, route handler별 수정 방법을 정리합니다.
Vitest document is not defined 오류 해결: jsdom 설정 기준
Vitest에서 React 컴포넌트 테스트 중 document is not defined 오류가 발생하는 원인과 jsdom 설정 방법을 정리합니다. Testing Library matcher 연결과 TypeScript 타입 오…
React state 업데이트 안됨 문제 해결
React에서 state를 변경했는데 화면이 업데이트되지 않을 때 확인해야 할 직접 mutation, 같은 참조 반환, setState 로그 착각, 함수형 업데이트, 중복 state 문제를 정리합니다.
Tailwind CSS 클래스 적용 안 됨 해결 순서
Tailwind CSS 클래스가 className에는 들어가 있는데 화면에 적용되지 않을 때 확인할 원인을 정리합니다. 전역 CSS import, 소스 감지, 동적 클래스, 상태 variant, CSS 우선순위 문제를 순서대로…
Tailwind CSS flex 레이아웃 깨질 때 확인할 것
Tailwind CSS에서 flex 레이아웃이 깨질 때 부모 방향, 자식 너비, 줄바꿈, shrink 동작을 기준으로 원인을 나눠 확인하는 방법을 정리합니다.
Next.js window is not defined 오류 해결: 브라우저 API를 안전하게 쓰기
Next.js window is not defined 오류 해결 방법의 원인과 해결 방법을 실제 작업에서 확인할 순서에 맞춰 정리합니다.
React 리스트 key 경고 해결 기준: index key를 피해야 하는 이유
React에서 리스트를 렌더링할 때 발생하는 key 경고의 원인과 해결 기준을 정리합니다. index key가 위험해지는 상황과 실제 코드에서 key 위치를 고치는 방식을 함께 다룹니다.
React useEffect 두 번 실행되는 이유: StrictMode·API 중복 해결
React 개발 환경에서 useEffect가 반복 실행되는 원인을 StrictMode, cleanup, 의존성 배열로 나누고 조회·저장 API의 안전한 처리 방법을 정리합니다.