디버깅 습관 리셋

// 1차: 의심 지점에 로그 삽입
console.log("user:", user);
console.log("items:", items);

// 2차: 범위 좁히기
console.log("before filter:", items.length);
console.log("after filter:", filtered.length);

// 3차: 더 깊이
console.log("item[0]:", JSON.stringify(items[0], null, 2));

// ... 5-6회 반복 후 원인 발견
// ... 그리고 심어둔 console.log 전부 제거

1. 의심 지점에 브레이크포인트 설정
2. 실행 → 중단점에서 멈춤
3. 변수 패널에서 현재 상태 확인
4. 콜스택 추적 → 호출 경로 파악
5. 스텝 오버/스텝 인 → 한 줄씩 실행하며 상태 변화 관찰
6. 조건부 브레이크포인트로 특정 케이스만 포착
7. ... 반복하며 원인 좁히기

## 정보가 부족한 경우
이 에러 좀 해결해줘:
TypeError: Cannot read property 'map' of undefined

## 구조화된 정보 전달

### 증상
사용자 목록 페이지에서 TypeError: Cannot read property
'map' of undefined 발생.
페이지 첫 로딩 시에만 발생하고, 새로고침하면 정상 동작.

### 재현 조건
- 로그인 직후 /users 페이지로 직접 접근할 때
- 사이드바에서 네비게이션으로 이동하면 발생하지 않음
- 개발 환경에서만 확인 (프로덕션 미확인)

### 시도한 것
- users 상태의 초기값 확인: 빈 배열
- API 호출 시점 확인: useEffect에서 호출
- 네트워크 탭: API 응답은 정상 (200, 배열 데이터)

### 의심 영역
- SSR/CSR 하이드레이션 타이밍 문제?
- useEffect 실행 전 렌더링 시점에서 데이터가 undefined?

// UserDashboard.tsx - 문제의 코드
export default function UserDashboard() {
  const [greeting, setGreeting] = useState(
    `안녕하세요, 현재 시각은 ${new Date().toLocaleTimeString()}입니다`
  );
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  return (
    <div>
      <h1>{greeting}</h1>
      <p>화면 너비: {windowWidth}px</p>
    </div>
  );
}

// searchService.ts
export async function searchDocuments(query: string) {
  const index = getSearchIndex(); // Orama 인덱스
  const results = await search(index, { term: query });
  return results.hits;
}

// 수정 전: 인덱스 준비 여부 확인 없음
export async function searchDocuments(query: string) {
  const index = getSearchIndex();
  const results = await search(index, { term: query });
  return results.hits;
}

// 수정 후: 인덱스 준비 완료 대기
let indexReady = false;
let indexPromise: Promise<void>;

export async function searchDocuments(query: string) {
  if (!indexReady) {
    await indexPromise; // 인덱스 빌드 완료 대기
  }
  const index = getSearchIndex();
  const results = await search(index, { term: query });
  return results.hits;
}

아래는 Node.js 프로파일러 출력 중 상위 5개 함수입니다.

| 함수 | 자체 시간 | 총 시간 | 호출 횟수 |
|------|----------|---------|----------|
| processOrder | 2.3ms | 450ms | 1 |
| validateItems | 1.1ms | 380ms | 1 |
| checkInventory | 350ms | 350ms | 47 |
| formatResponse | 0.5ms | 0.5ms | 1 |
| logMetrics | 0.2ms | 0.2ms | 1 |

checkInventory가 47번 호출되는 것이 의심됩니다.
상품 목록은 최대 10개인데 왜 47번 호출되는지 분석해주세요.

## 버그 #1234: 결제 금액 불일치

### 증상
- 할인 쿠폰 적용 시 최종 결제 금액이 예상보다 높음
- 100원 단위에서 차이 발생

### 가설 (AI 생성)
1. [검증 완료] 반올림 방식 차이 (Math.round vs Math.floor)
   결과: 원인 아님
2. [검증 완료] 할인율 적용 순서 (쿠폰 vs 포인트)
   결과: 원인 확인
3. [미검증] 세금 계산 타이밍

### 원인
할인 적용 순서가 기획 의도와 다름.
기획: 쿠폰 먼저, 포인트 차감
구현: 포인트 먼저, 쿠폰 적용

### 수정
applyDiscount 함수의 적용 순서를 기획 의도에 맞게 수정.

### 교훈
할인 적용 순서는 비즈니스 규칙이므로 CLAUDE.md에 명시 필요.

다음 에러의 가능한 원인을 확률 순으로 3-5개 나열해줘.

에러: [에러 메시지]
발생 위치: [파일명:라인번호]
재현 빈도: [항상/간헐적/특정 조건]
환경: [Node 버전, OS, 프레임워크 버전]

각 가설에 대해:
- 왜 이 에러가 발생하는지 메커니즘 설명
- 확인 방법 1줄 요약
- 예상 수정 방향

아래 프로파일링 결과를 분석하고 최적화 방안을 제안해줘.

[프로파일링 결과 붙여넣기]

현재 응답 시간: [현재값]
목표 응답 시간: [목표값]
제약 조건: [변경 불가능한 부분]

이 코드에서 버그가 될 수 있는 부분을 찾아줘.
특히 다음 관점에서 검토:
- null/undefined 처리 누락
- 비동기 에러 처리
- 엣지 케이스 (빈 배열, 빈 문자열, 큰 숫자)
- 타입 안전성

[코드 붙여넣기]