개발자: "이 함수가 뭘 하는지 설명해줘"
클로드: "이 함수는 사용자 인증 토큰을 검증하고..."
 
개발자: "이걸 TypeScript로 리팩터링해줘"
클로드: "다음과 같이 개선할 수 있습니다..."

// 개발자가 선택한 코드
function getUserData(id) {
  return fetch(`/api/users/${id}`)
    .then(res => res.json())
    .then(data => data.user);
}

개발자: "이 함수를 async/await로 바꾸고 에러 핸들링을 추가해줘"
 
클로드: "다음과 같이 개선할 수 있습니다:
 
async function getUserData(id: string): Promise<User> {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) {
      throw new Error(`Failed to fetch user: ${response.statusText}`);
    }
    const data = await response.json();
    return data.user;
  } catch (error) {
    console.error('Error fetching user:', error);
    throw error;
  }
}
 
추가로 타입 정의도 필요하다면 알려주세요."

// 여러 파일에 걸친 리팩터링 요청
"src/auth/ 폴더의 모든 인증 로직을 
 JWT 기반으로 통일하고, 에러 핸들링을 
 일관되게 만들어줘"

// 복잡한 레거시 코드
function processOrder(order) {
  // 200줄짜리 복잡한 로직...
}

"이 함수의 로직을 분석하고, 
 모듈화할 수 있는 부분을 찾아서 
 작은 함수들로 분리해줘"

// 기존 코드
export function deleteUser(id: string) {
  return db.users.delete({ where: { id } });
}

⚠️ 주의: 이 함수는 사용자 데이터를 영구적으로 삭제합니다.
 
다음과 같은 개선을 제안합니다:
1. 소프트 삭제(soft delete)로 변경
2. 삭제 전 확인 로직 추가
3. 관련 데이터 정리 로직 추가
 
어떤 방향으로 진행할까요?

// 클로드 코드가 제안한 코드
export function calculateTotal(items: CartItem[]): number {
  return items.reduce((sum, item) => {
    const itemTotal = item.price * item.quantity;
    const discount = item.discount || 0;
    return sum + (itemTotal - discount);
  }, 0);
}

이 함수에 대한 JSDoc 주석과 테스트를 추가할까요?
 
/**
 * 장바구니 아이템들의 총 금액을 계산합니다.
 * 
 * @param items - 장바구니 아이템 배열
 * @returns 할인을 적용한 총 금액
 * 
 * @example
 * const items = [
 *   { price: 1000, quantity: 2, discount: 100 },
 *   { price: 2000, quantity: 1, discount: 0 }
 * ];
 * calculateTotal(items); // 2900
 */

// 원본 함수
export function validateEmail(email: string): boolean {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}
 
// 클로드 코드가 제안한 테스트
describe('validateEmail', () => {
  it('should return true for valid email', () => {
    expect(validateEmail('test@example.com')).toBe(true);
  });
 
  it('should return false for invalid email', () => {
    expect(validateEmail('invalid-email')).toBe(false);
    expect(validateEmail('test@')).toBe(false);
    expect(validateEmail('@example.com')).toBe(false);
  });
 
  it('should handle edge cases', () => {
    expect(validateEmail('')).toBe(false);
    expect(validateEmail('test@example')).toBe(false);
  });
});

# VS Code 확장 설치 방법
# 1. VS Code 확장 탭 열기 (Cmd+Shift+X / Ctrl+Shift+X)
# 2. "Claude Code" 검색
# 3. 설치 후 재시작

// 예시: auth.ts 파일의 토큰 갱신 로직 개선
"auth.ts의 refreshToken 함수를 
 async/await 패턴으로 리팩터링하고,
 에러 핸들링을 개선해줘"

// 예시: 사용자 프로필 업데이트 API 엔드포인트 생성
"사용자 프로필을 업데이트하는 
 REST API 엔드포인트를 만들어줘.
 Next.js App Router를 사용하고,
 Zod로 입력 검증을 해줘"

// 기존 코드 (이해하기 어려운 레거시 코드)
function processData(data) {
  let result = [];
  for (let i = 0; i < data.length; i++) {
    if (data[i].status === 'active') {
      result.push({
        id: data[i].id,
        name: data[i].name.toUpperCase(),
        score: data[i].score * 1.1
      });
    }
  }
  return result;
}

"이 함수가 뭘 하는지 설명하고, 
 TypeScript로 타입 안전하게 리팩터링해줘"

// 클로드 코드에게 요청
"다음 함수에 대한 단위 테스트를 작성해줘:
 
export function calculateDiscount(price: number, isMember: boolean): number {
  if (isMember) {
    return price * 0.9;
  }
  return price;
}
"

import { describe, it, expect } from 'vitest';
import { calculateDiscount } from './discount';
 
describe('calculateDiscount', () => {
  it('should apply 10% discount for members', () => {
    expect(calculateDiscount(100, true)).toBe(90);
  });
 
  it('should return original price for non-members', () => {
    expect(calculateDiscount(100, false)).toBe(100);
  });
 
  it('should handle zero price', () => {
    expect(calculateDiscount(0, true)).toBe(0);
  });
});

"방금 수정한 부분에 대한 테스트 케이스를 제안해줘"
"이 코드의 잠재적 버그나 개선점을 찾아줘"
"이 함수의 시간 복잡도를 분석해줘"

"hooks/useAuth.ts를 React Query의 
 useMutation을 사용하도록 리팩터링해줘.
 기존 기능은 유지하면서 에러 핸들링을 개선해줘"

"이 PR의 변경사항을 요약하고,
 보안이나 성능 측면에서 주의할 점을 알려줘"

// 클로드 코드에게 요청
"이 컴포넌트에 대한 JSDoc 주석과 
 사용 예시를 작성해줘"
 
// 생성된 결과
/**
 * 사용자 프로필 카드 컴포넌트
 * 
 * @param user - 사용자 정보 객체
 * @param onEdit - 편집 버튼 클릭 시 호출되는 콜백
 * @param showActions - 액션 버튼 표시 여부
 * 
 * @example
 * ```tsx
 * <UserProfileCard 
 *   user={userData}
 *   onEdit={() => setEditing(true)}
 *   showActions={true}
 * />
 * ```
 */

"다음 에러가 발생했어:
Error: Cannot read property 'id' of undefined
at UserService.getUserProfile (userService.ts:45)
 
이 에러의 원인과 해결 방법을 알려줘"

"이 프로젝트의 아키텍처를 설명해줘"
"주요 컴포넌트들의 역할은?"
"새로운 기능을 추가하려면 어디서 시작해야 해?"

// 클로드 코드가 제안한 코드
// ❌ 바로 적용하기 전에
export function processData(data: any) {
  // ...
}
 
// ✅ 리뷰 후 개선
export function processData<T extends BaseData>(
  data: T[]
): ProcessedData<T> {
  // ...
}

"이 API 키로 인증하는 코드를 만들어줘:
API_KEY=sk_live_1234567890abcdef"

"환경 변수에서 API 키를 읽어서 
 인증하는 코드를 만들어줘"

"에러를 고쳐줘"

"src/utils/auth.ts의 validateToken 함수에서
 토큰 만료 시 에러가 발생하는데,
 이를 적절히 처리하도록 수정해줘"