디버깅

// 에러 메시지
TypeError: Cannot read property 'name' of undefined
    at UserProfile.render (UserProfile.tsx:15:25)
    at renderComponent (react-dom.js:3542:18)
    at mountComponent (react-dom.js:3443:5)

// Claude의 분석:
// 1. 에러 타입: TypeError - undefined 객체의 속성 접근 시도
// 2. 발생 위치: UserProfile.tsx 15번째 줄, 25번째 컬럼
// 3. 근본 원인: user 객체가 undefined인 상태에서 user.name 접근
// 4. 해결 방안:

// 원본 코드 (15번째 줄)
function UserProfile({ user }) {
  return <h1>{user.name}</h1>;  // user가 undefined일 수 있음
}

// 수정된 코드
function UserProfile({ user }) {
  if (!user) {
    return <div>사용자 정보를 불러오는 중...</div>;
  }
  return <h1>{user.name}</h1>;
}

// 또는 optional chaining 사용
function UserProfile({ user }) {
  return <h1>{user?.name ?? '알 수 없음'}</h1>;
}

// ❌ 나쁜 로깅
function processOrder(order) {
  console.log('processing');
  const result = calculateTotal(order);
  console.log(result);
  return result;
}

// ✅ 좋은 로깅
function processOrder(order: Order) {
  console.log('[OrderService] Processing order', {
    orderId: order.id,
    itemCount: order.items.length,
    timestamp: new Date().toISOString()
  });

  try {
    const total = calculateTotal(order);
    console.log('[OrderService] Order processed successfully', {
      orderId: order.id,
      total: total,
      duration: Date.now() - startTime
    });
    return total;
  } catch (error) {
    console.error('[OrderService] Failed to process order', {
      orderId: order.id,
      error: error.message,
      stack: error.stack
    });
    throw error;
  }
}

// 사용자: "이 로그에서 문제를 찾아줘"

[2024-01-15 10:23:45] INFO: User login attempt - userId: 123
[2024-01-15 10:23:46] INFO: Fetching user profile - userId: 123
[2024-01-15 10:23:47] WARN: Database query slow - query: SELECT * FROM users - duration: 2.3s
[2024-01-15 10:23:48] ERROR: Database timeout - query: SELECT * FROM orders WHERE userId=123
[2024-01-15 10:23:48] ERROR: Failed to load user dashboard - userId: 123
[2024-01-15 10:23:50] INFO: User login attempt - userId: 123
[2024-01-15 10:23:51] INFO: Fetching user profile - userId: 123
[2024-01-15 10:23:52] WARN: Database query slow - query: SELECT * FROM users - duration: 2.1s

// Claude의 분석:
// 1. 데이터베이스 성능 문제: 쿼리가 2초 이상 소요 (정상은 <100ms)
// 2. 타임아웃 발생: orders 테이블 조회 시 타임아웃
// 3. 사용자 재시도: 로그인 실패 후 즉시 재시도 (10:23:50)
// 4. 근본 원인: 인덱스 부재 또는 잠금 문제 가능성
// 5. 해결 방안: userId에 인덱스 추가, 쿼리 최적화 필요

// 1. Conditional Breakpoint (조건부 중단점)
// 브레이크포인트 우클릭 → "Edit Breakpoint"
// 조건: userId === '123'
// → userId가 123일 때만 중단

// 2. Logpoint (로그 중단점)
// 코드 수정 없이 로그 출력
// 메시지: User: {user.name}, Total: {total}

// 3. Watch 표현식
// Variables 패널에서 특정 표현식 모니터링
user.cart.items.length
total > 100

// 4. Call Stack 분석
// 함수 호출 순서 추적
// 각 프레임의 변수 상태 확인

// 5. Debug Console
// 런타임에 코드 실행
> user.cart.items.map(i => i.price).reduce((a,b) => a+b)
> localStorage.getItem('token')

// .eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended"
  ],
  "rules": {
    "no-unused-vars": "error",
    "no-console": "warn",
    "eqeqeq": ["error", "always"], // === 강제
    "@typescript-eslint/no-explicit-any": "error"
  }
}

// 자동으로 잡히는 버그들:
const user = getUser(); // ❌ Error: user는 사용되지 않음
if (value == null) {} // ❌ Error: === 사용 필요
useEffect(() => { fetchData(id); }, []); // ❌ Warning: id 의존성 누락

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "npm test"
    }
  },
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

// 커밋 전 자동 실행:
// 1. ESLint로 코드 검사
// 2. Prettier로 포맷팅
// 3. 테스트 실행
// → 문제 있으면 커밋 차단 ✋