Ch10. IDE 기능 활용

# 채팅 패널에서 자연어로 요청
"현재 열린 파일의 함수들에 JSDoc 주석을 추가해주세요"

"선택한 코드 블록을 TypeScript로 변환해주세요"

"이 컴포넌트의 단위 테스트를 작성해주세요"

# 특정 파일 참조
"#File src/components/Button.tsx를 참고해서 
비슷한 스타일의 Input 컴포넌트를 만들어주세요"

# 폴더 전체 참조
"#Folder src/utils의 모든 유틸리티 함수들을 
하나의 인덱스 파일로 정리해주세요"

# 현재 열린 파일 참조
"현재 파일의 성능을 최적화해주세요"

# 에러 메시지와 함께 요청
"다음 에러가 발생했습니다:
TypeError: Cannot read property 'map' of undefined

관련 코드를 확인하고 수정해주세요"

# 성능 문제 분석
"이 컴포넌트가 너무 자주 리렌더링됩니다. 
원인을 찾고 최적화해주세요"

// 코드 선택 후 우클릭 → "Kiro: Improve Selected Code"

// 선택된 코드:
function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    total += items[i].price;
  }
  return total;
}

// Kiro가 제안하는 개선된 코드:
function calculateTotal(items: Item[]): number {
  return items.reduce((total, item) => total + item.price, 0);
}

// 함수 시그니처 작성 중
async function fetchUser(id: string): Promise<User> {
  // Kiro가 자동으로 구현 제안
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) {
      throw new Error(`Failed to fetch user: ${response.statusText}`);
    }
    return await response.json();
  } catch (error) {
    console.error('Error fetching user:', error);
    throw error;
  }
}

// TODO: 사용자 권한을 확인하는 미들웨어 함수 작성
// Kiro가 주석을 보고 자동으로 구현 제안

export const checkUserPermission = (requiredRole: UserRole) => {
  return (req: Request, res: Response, next: NextFunction) => {
    const user = req.user as User;
    
    if (!user) {
      return res.status(401).json({ error: 'Authentication required' });
    }
    
    if (!hasPermission(user.role, requiredRole)) {
      return res.status(403).json({ error: 'Insufficient permissions' });
    }
    
    next();
  };
};

파일 탐색기에서 우클릭:
- "Kiro: Generate Tests for This File"
- "Kiro: Add Documentation"  
- "Kiro: Refactor This File"
- "Kiro: Analyze Code Quality"

폴더에서 우클릭:
- "Kiro: Create Index File"
- "Kiro: Generate Barrel Exports"
- "Kiro: Analyze Folder Structure"
- "Kiro: Create README"

코드 선택 후 우클릭:
- "Kiro: Explain Selected Code"
- "Kiro: Optimize Selected Code"
- "Kiro: Convert to TypeScript"
- "Kiro: Extract to Function"
- "Kiro: Add Error Handling"

Ctrl/Cmd + Shift + P 후:

# 코드 생성
> Kiro: Generate Component
> Kiro: Generate API Endpoint
> Kiro: Generate Test File

# 코드 분석
> Kiro: Analyze Current File
> Kiro: Check Code Quality
> Kiro: Find Performance Issues

# 리팩토링
> Kiro: Refactor Selected Code
> Kiro: Modernize JavaScript
> Kiro: Add Type Annotations

# 문서화
> Kiro: Generate JSDoc
> Kiro: Create README
> Kiro: Update Documentation

# 프로젝트 설정
> Kiro: Initialize Project
> Kiro: Setup Development Environment
> Kiro: Configure Build Tools

# 의존성 관리
> Kiro: Analyze Dependencies
> Kiro: Update Package.json
> Kiro: Check Security Vulnerabilities

// 코드 리뷰 중 Kiro 활용
// 1. 변경사항 분석
"이 PR의 변경사항을 분석하고 잠재적 문제점을 찾아주세요"

// 2. 코드 품질 검토
"이 함수의 복잡도가 너무 높은 것 같습니다. 
리팩토링 방안을 제안해주세요"

// 3. 테스트 커버리지 확인
"이 변경사항에 대한 테스트가 충분한지 확인해주세요"

# 실시간 코드 작성 지원
개발자 A: "로그인 폼 컴포넌트를 만들어야 합니다"
Kiro: "기본 구조를 생성하겠습니다"

개발자 B: "폼 검증 로직을 추가해주세요"  
Kiro: "Yup 스키마를 사용한 검증을 추가하겠습니다"

개발자 A: "에러 처리도 포함해주세요"
Kiro: "사용자 친화적인 에러 메시지와 함께 구현하겠습니다"

// 런타임 에러 발생 시
console.error('TypeError: Cannot read property "name" of undefined');

// Kiro에게 에러 분석 요청
"위 에러가 발생했습니다. 원인을 찾고 수정 방법을 제안해주세요"

// Kiro의 분석 및 해결책 제시
/*
에러 원인: user 객체가 undefined일 때 name 속성에 접근
해결 방법:
1. Optional chaining 사용: user?.name
2. 기본값 설정: user?.name || 'Unknown'
3. 타입 가드 추가: if (user && user.name)
*/

# 성능 문제 분석
"이 컴포넌트의 렌더링 성능을 분석해주세요"

Kiro 분석 결과:
- 불필요한 리렌더링 발생 (의존성 배열 문제)
- 큰 객체의 얕은 비교로 인한 성능 저하
- 메모이제이션 누락

개선 제안:
- useMemo, useCallback 적절히 사용
- React.memo로 컴포넌트 래핑
- 상태 구조 최적화

// 기존 함수
export function validateEmail(email: string): boolean {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

// Kiro가 생성한 테스트
describe('validateEmail', () => {
  it('should return true for valid email addresses', () => {
    expect(validateEmail('test@example.com')).toBe(true);
    expect(validateEmail('user.name@domain.co.uk')).toBe(true);
  });

  it('should return false for invalid email addresses', () => {
    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(' ')).toBe(false);
  });
});

# 테스트 실행 후 결과 분석
"테스트가 실패했습니다. 원인을 분석하고 수정해주세요"

# 커버리지 분석
"테스트 커버리지가 낮은 부분을 찾아서 
추가 테스트를 작성해주세요"

# 테스트 최적화
"테스트 실행 시간이 너무 깁니다. 
최적화 방법을 제안해주세요"

// 기존 API 함수
export async function createUser(userData: CreateUserRequest): Promise<User> {
  // 구현...
}

// Kiro가 생성한 JSDoc
/**
 * Creates a new user in the system
 * 
 * @param userData - The user data for creating a new user
 * @param userData.email - User's email address (must be unique)
 * @param userData.name - User's full name
 * @param userData.role - User's role in the system
 * @returns Promise that resolves to the created user object
 * 
 * @throws {ValidationError} When user data is invalid
 * @throws {ConflictError} When email already exists
 * 
 * @example
 * ```typescript
 * const newUser = await createUser({
 *   email: 'john@example.com',
 *   name: 'John Doe',
 *   role: 'user'
 * });
 * ```
 */

# Kiro가 프로젝트 분석 후 생성한 README

# Project Name

## Overview
This is a modern web application built with React, TypeScript, and Node.js.

## Features
- User authentication and authorization
- Real-time data synchronization
- Responsive design
- Comprehensive testing suite

## Getting Started

### Prerequisites
- Node.js 18+
- npm or yarn
- PostgreSQL 14+

### Installation
```bash
npm install
npm run setup
npm run dev

npm run test          # Run unit tests
npm run test:e2e      # Run end-to-end tests
npm run test:coverage # Generate coverage report

## 설정 및 커스터마이징

### Kiro 설정 파일

```json
// .vscode/settings.json
{
  "kiro.autoSuggest": true,
  "kiro.inlineCompletion": true,
  "kiro.contextMenu": true,
  "kiro.chatPanel": "sidebar",
  "kiro.defaultModel": "claude-3-5-sonnet",
  "kiro.maxContextSize": 100000,
  "kiro.autoSave": true,
  "kiro.formatOnSave": true
}

// keybindings.json
[
  {
    "key": "ctrl+k ctrl+i",
    "command": "kiro.explainCode",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+k ctrl+r", 
    "command": "kiro.refactorCode",
    "when": "editorHasSelection"
  },
  {
    "key": "ctrl+k ctrl+t",
    "command": "kiro.generateTests",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+k ctrl+d",
    "command": "kiro.generateDocs",
    "when": "editorTextFocus"
  }
]

// .vscode/workspace.json
{
  "folders": [
    {
      "path": "."
    }
  ],
  "settings": {
    "kiro.projectType": "react-typescript",
    "kiro.codingStandards": "airbnb",
    "kiro.testFramework": "jest",
    "kiro.autoGenerateTests": true,
    "kiro.autoUpdateDocs": true
  }
}

{
  "kiro.cacheEnabled": true,
  "kiro.preloadContext": true,
  "kiro.batchRequests": true,
  "kiro.streamingResponse": true
}

{
  "kiro.maxCacheSize": "500MB",
  "kiro.contextCleanupInterval": 300000,
  "kiro.maxConcurrentRequests": 3
}

// React 프로젝트 설정
{
  "kiro": {
    "projectType": "react-typescript",
    "defaultMode": "vibe",
    "autoImports": true,
    "componentTemplates": {
      "functional": "export const {{name}} = () => {\n  return (\n    <div>{{name}}</div>\n  );\n};",
      "withProps": "interface {{name}}Props {\n  // props here\n}\n\nexport const {{name}} = (props: {{name}}Props) => {\n  return (\n    <div>{{name}}</div>\n  );\n};"
    }
  }
}

// Node.js API 프로젝트 설정
{
  "kiro": {
    "projectType": "nodejs-api",
    "defaultMode": "spec",
    "apiDocGeneration": true,
    "testFramework": "jest",
    "endpointTemplates": {
      "crud": "// CRUD endpoint template",
      "auth": "// Auth endpoint template"
    }
  }
}

1단계: 문제 상황 분석
"다음 에러가 발생했습니다: [에러 메시지]
관련 코드와 로그를 분석해서 원인을 찾아주세요"

2단계: 재현 조건 파악
"이 버그를 재현할 수 있는 최소한의 테스트 케이스를 만들어주세요"

3단계: 근본 원인 분석
"코드 플로우를 추적해서 버그의 근본 원인을 분석해주세요"

4단계: 해결책 구현
"원인을 바탕으로 안전하고 효과적인 수정 방법을 구현해주세요"

5단계: 회귀 방지
"이런 유형의 버그가 다시 발생하지 않도록 예방 코드를 추가해주세요"

프론트엔드 최적화:
"React 앱의 성능을 분석하고 다음 항목들을 최적화해주세요:
- 번들 크기 분석 및 코드 스플리팅
- 불필요한 리렌더링 방지
- 이미지 최적화 및 레이지 로딩
- 메모리 누수 방지"

백엔드 최적화:
"API 서버의 성능을 개선해주세요:
- 데이터베이스 쿼리 최적화
- 캐싱 전략 구현
- 비동기 처리 개선
- 메모리 사용량 최적화"

보안 감사 체크리스트:
"다음 보안 항목들을 점검하고 개선해주세요:

인증/인가:
- JWT 토큰 보안 강화
- 세션 관리 개선
- 권한 검증 로직 강화

입력 검증:
- SQL 인젝션 방어
- XSS 공격 방어
- CSRF 토큰 구현

데이터 보호:
- 민감 정보 암호화
- 로그에서 개인정보 제거
- 안전한 비밀번호 정책"

코드 리뷰 자동화:
"다음 기준으로 코드를 검토해주세요:
- 코딩 컨벤션 준수
- 성능 최적화 기회
- 보안 취약점 검사
- 테스트 커버리지 확인
- 문서화 완성도"

리팩토링 제안:
"코드베이스를 분석하고 다음 관점에서 개선점을 제안해주세요:
- 중복 코드 제거
- 복잡도 감소
- 가독성 향상
- 유지보수성 개선"