에러 룩업
에러 룩업
에러 메시지나 증상을 검색하면 원인과 해결 절차를 바로 찾을 수 있다. TypeScript 타입 에러, 런타임, 빌드, 네트워크 에러를 포함한다.
검색 결과 N개
에러 목록
증상 · 원인 · 해결 한눈에
에러 메시지
Warning: Prop `className` did not match. Server: "...". Client: "..."증상
서버/클라이언트 렌더 결과가 달라 콘솔 경고 출력. UI가 깜박이거나 초기 렌더가 틀린 값으로 보임.
원인
서버와 클라이언트에서 다른 값을 생성하는 코드(Date.now, Math.random, window 참조 등)가 컴포넌트 렌더 중에 실행됨.
해결
해당 코드를 `useEffect` 안으로 이동해 클라이언트 전용으로 실행
에러 메시지
Type 'unknown' is not assignable to type 'string'증상
`catch` 블록에서 `error.message`에 접근하거나 외부 API 응답을 직접 사용하려 할 때 발생.
원인
TypeScript 4.4+에서 `catch` 블록의 에러 변수가 기본으로 `unknown` 타입. `any`로 단언하지 않으면 프로퍼티 접근 불가.
해결
`error instanceof Error` 체크 후 `error.message` 접근, 또는 사용자 정의 타입 가드로 좁히기
에러 메시지
React Hook useEffect has a missing dependency: 'userId'증상
ESLint `react-hooks/exhaustive-deps` 경고. `userId`가 바뀌어도 effect가 재실행되지 않음.
원인
의존성 배열에서 effect 내부에서 사용하는 변수/함수를 누락.
해결
의존성 배열에 `userId` 추가. 함수가 매 렌더마다 새로 만들어지면 `useCallback`으로 감싸기
에러 메시지
Cannot read properties of undefined (reading 'map')증상
배열에 `.map()`을 호출했는데 런타임 에러 발생. 초기 렌더에서 데이터가 아직 없는 경우 많음.
원인
데이터 패칭 전 또는 API 응답 구조가 예상과 다를 때 `undefined`가 배열 위치에 들어옴.
해결
옵셔널 체이닝(`data?.items.map(...)`) 사용 또는 초기값을 빈 배열로 설정
에러 메시지
Module not found: Can't resolve 'next/router'증상
Next.js app router 프로젝트에서 `next/router`를 import할 때 빌드/런타임 에러.
원인
app router에서는 `next/router` 대신 `next/navigation`을 사용해야 함.
해결
import 경로를 `next/navigation`으로 변경. `useRouter`, `usePathname` 모두 `next/navigation`에서 import
에러 카테고리
카테고리로 필터해서 보기
에러 룩업 FAQ
에러 룩업 이용 안내
실무에서 직접 만난 에러, 또는 자주 반복해서 검색하는 에러를 추가한다. 재현 환경과 버전을 확인할 수 있는 것만 올린다.