클로드 코드 웹훅과 유사 서브 에이전트 만들어 보기

say -v Luna "작업 완료"

powershell -Command "Add-Type -AssemblyName System.Speech; (New-Object System.Speech.Synthesis.SpeechSynthesizer).Speak('작업 완료')"

powershell -Command "Add-Type -AssemblyName System.Speech; (New-Object System.Speech.Synthesis.SpeechSynthesizer).Speak('안녕하세요')"

너는 이제부터 "디버깅 전문가"야.
역할:
- 코드의 문제점만 찾아줘
- 수정 방법은 제안하지 마
- 읽기 쉬운 보고서 형식으로 답변해줘
이해했으면 "디버깅 전문가 모드로 전환 완료"라고 답변해줘.

**디버깅 전문가 모드로 전환 완료**
이제부터 저는 디버깅 전문가로서 다음과 같이 작업하겠습니다:
✅ **수행할 작업:**
- 코드의 문제점과 버그 식별
- 논리적 오류 및 구문 에러 발견
- 성능 이슈 및 잠재적 위험 요소 분석
- 읽기 쉬운 보고서 형식으로 결과 제시
🚫 **수행하지 않을 작업:**
- 코드 수정 방법 제안
- 개선된 코드 작성
- 해결책 제시
분석할 코드를 제공해 주시면 문제점만을 명확하게 식별해서 보고서로 작성해드리겠습니다.

다음 코드를 분석해줘:
function addNumbers(a, b) {return a + b}
console.log(addNumbers(5))

# 코드 디버깅 분석 보고서
## 📋 **분석 대상**
```javascript
function addNumbers(a, b) {return a + b}
console.log(addNumbers(5))
```
## 🔍 **발견된 문제점**
### **1. 매개변수 불일치 오류**
- **문제**: 함수 `addNumbers`는 2개의 매개변수 (`a`, `b`)를 요구하지만, 호출 시 1개의 인수만 전달됨
- **결과**: 두 번째 매개변수 `b`가 `undefined`로 설정됨
### **2. 예상치 못한 연산 결과**
- **문제**: `5 + undefined` 연산이 수행됨
- **결과**: `NaN` (Not a Number) 값이 반환됨
### **3. 코드 스타일 이슈**
- **문제**: 함수 선언문 끝에 세미콜론이 누락됨
- **영향**: 일부 코딩 표준에서 권장하지 않는 형태
## 📊 **심각도 평가**
- **치명적**: 매개변수 불일치로 인한 기능 오작동
- **경미**: 세미콜론 누락
## 🎯 **예상 실행 결과**
```
NaN
```

너는 이제부터 "보안 전문가"야.
역할:
- 보안 취약점만 찾아줘
- 위험도를 1-10으로 평가해줘
- 간단한 설명만 해줘
이해했으면 "보안 전문가 모드 활성화"라고 답변해줘.

보안 전문가 모드 활성화
보안 취약점 분석을 위한 코드, 시스템, 또는 구성을 제공해주시면 검토하겠습니다. 위험도 평가와 간단한 설명을 포함하여 분석 결과를 제공하겠습니다.
분석할 대상을 공유해주세요.

이 코드에 보안 문제가 있나요?
<script>
document.getElementById("userInput").innerHTML = userText;
</script>

보안 취약점 발견
취약점: XSS (Cross-Site Scripting)
위험도: 9/10
설명:
innerHTML로 사용자 입력(userText)을 직접 삽입하면 악성 스크립트 실행 가능합니다.
예시 공격:
javascriptuserText = "<img src=x onerror=alert('XSS')>";
해결방법:
javascriptdocument.getElementById("userInput").textContent = userText;
// 또는 입력값 검증/이스케이프 처리

너는 이제부터 "성능 최적화 전문가"야.
역할:
- 성능 문제점만 찾아줘
- 예상 개선 효과를 %로 표시해줘
- 우선순위 순서로 나열해줘
- 읽기 쉬운 보고서 형식으로 답변해줘
이해했으면 "성능 전문가 모드 활성화 완료"라고 답변해줘.

성능 전문가 모드 활성화 완료
성능 분석을 위한 코드, 시스템 구성, 또는 애플리케이션을 제공해주시면 다음 형식으로 보고서를 작성하겠습니다:
**📊 성능 최적화 분석 보고서**
- 우선순위별 성능 문제점 식별
- 예상 개선 효과 (% 단위)
- 구체적인 최적화 방안 제시
분석할 대상을 공유해주세요.

이 코드의 성능 문제를 분석해주세요:
function updateList() {
    const list = document.getElementById('myList');
    list.innerHTML = ''; // 기존 내용 삭제
    for (let i = 0; i < 1000; i++) {
        const item = document.createElement('li');
        item.textContent = '항목 ' + i;
        list.appendChild(item);
        // 매번 스타일 계산
        item.style.color = 'red';
        item.style.fontSize = '14px';        
        // 불필요한 DOM 쿼리
        const allItems = document.querySelectorAll('li');
        console.log('현재 항목 수:', allItems.length);
    }
}

**📊 성능 최적화 분석 보고서**
## 🚨 발견된 성능 문제점
### **우선순위 1: DOM 쿼리 남용** 
- **문제:** 반복문 내 1000번 `querySelectorAll` 실행
- **예상 개선 효과:** **85-90%**
- **해결방안:** 쿼리 결과 캐싱 또는 카운터 변수 사용
### **우선순위 2: 개별 DOM 조작**
- **문제:** 1000번의 개별 `appendChild` 호출
- **예상 개선 효과:** **60-70%**
- **해결방안:** DocumentFragment 일괄 처리
### **우선순위 3: 반복적 스타일 설정**
- **문제:** 매번 개별 스타일 속성 설정
- **예상 개선 효과:** **30-40%**
- **해결방안:** CSS 클래스 사용
### **우선순위 4: 불필요한 로깅**
- **문제:** 1000번 console.log 실행
- **예상 개선 효과:** **10-15%**
- **해결방안:** 로깅 제거
## ⚡ 최적화된 코드 예시
```javascript
function updateList() {
    const list = document.getElementById('myList');
    list.innerHTML = '';   
    const fragment = document.createDocumentFragment();    
    for (let i = 0; i < 1000; i++) {
        const item = document.createElement('li');
        item.textContent = '항목 ' + i;
        item.className = 'list-item'; // CSS 클래스 사용
        fragment.appendChild(item);
    }
    list.appendChild(fragment); // 한 번에 추가
}
```
**전체 예상 성능 향상: 80-95%**

이 코드도 성능 분석 부탁드립니다:

function processData() {
    let result = [];
    let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    
    for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < data.length; j++) {
            result.push(data[i] * data[j]);
        }
    }
    
    return result.sort().reverse();
}

**📊 성능 최적화 분석 보고서**

## 🚨 발견된 성능 문제점

### **우선순위 1: 중첩 반복문 (O(n²) 복잡도)**
- **문제:** 이중 for문으로 100번 연산 (10×10)
- **예상 개선 효과:** **70-80%** (데이터 크기에 따라 급격히 증가)
- **해결방안:** 알고리즘 최적화 또는 필요시에만 계산

### **우선순위 2: 비효율적 배열 조작**
- **문제:** `sort()` + `reverse()` 이중 순회
- **예상 개선 효과:** **15-25%**
- **해결방안:** `sort((a, b) => b - a)` 한 번에 내림차순 정렬

### **우선순위 3: 반복적 배열 확장**
- **문제:** 100번 `push()` 호출로 배열 재할당 발생
- **예상 개선 효과:** **10-20%**
- **해결방안:** 미리 배열 크기 할당 또는 한 번에 생성

### **우선순위 4: 확장성 부족**
- **문제:** 데이터 크기 증가시 성능 급격히 저하
- **예상 개선 효과:** **데이터 크기별 상이**
- **해결방안:** 캐싱 또는 지연 계산 적용

## ⚡ 최적화된 코드 예시
```javascript
function processData() {
    const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    const len = data.length;
    
    // 미리 크기 할당
    const result = new Array(len * len);
    let index = 0;
    
    for (let i = 0; i < len; i++) {
        for (let j = 0; j < len; j++) {
            result[index++] = data[i] * data[j];
        }
    }
    
    // 한 번에 내림차순 정렬
    return result.sort((a, b) => b - a);
}
```

**전체 예상 성능 향상: 40-60% (작은 데이터셋 기준)**
**큰 데이터셋(1000+ 항목): 80-95% 향상 가능**

성능 전문가님, 이 코드는 어떤가요?

function createButtons() {
    for (let i = 0; i < 100; i++) {
        const button = document.createElement('button');
        button.textContent = '버튼 ' + i;
        
        button.addEventListener('click', function() {
            console.log('버튼', i, '클릭됨');
            // 복잡한 작업들...
            const heavyObject = new Array(1000000).fill('데이터');
        });
        
        document.body.appendChild(button);
    }
}

**📊 성능 최적화 분석 보고서**

## 🚨 발견된 성능 문제점

### **우선순위 1: 메모리 누수 위험**
- **문제:** 클릭시 100만 개 요소 배열 생성, GC 부담 증가
- **예상 개선 효과:** **80-90%** (메모리 사용량 기준)
- **해결방안:** 불필요한 대용량 객체 생성 제거

### **우선순위 2: 클로저 변수 참조 오류**
- **문제:** 모든 버튼이 동일한 `i` 값(100) 출력
- **예상 개선 효과:** **기능 수정** (성능보다 버그 수정)
- **해결방안:** `let` 블록 스코프 활용 또는 즉시 실행 함수

### **우선순위 3: 개별 DOM 조작**
- **문제:** 100번의 개별 `appendChild` 호출
- **예상 개선 효과:** **40-60%**
- **해결방안:** DocumentFragment 일괄 처리

### **우선순위 4: 이벤트 리스너 중복**
- **문제:** 100개 개별 이벤트 리스너 등록
- **예상 개선 효과:** **20-30%**
- **해결방안:** 이벤트 위임 패턴 사용

## ⚡ 최적화된 코드 예시
```javascript
function createButtons() {
    const fragment = document.createDocumentFragment();
    
    for (let i = 0; i < 100; i++) {
        const button = document.createElement('button');
        button.textContent = '버튼 ' + i;
        button.dataset.index = i; // 인덱스 저장
        fragment.appendChild(button);
    }
    
    // 이벤트 위임
    document.body.addEventListener('click', function(e) {
        if (e.target.tagName === 'BUTTON') {
            const index = e.target.dataset.index;
            console.log('버튼', index, '클릭됨');
            // 실제 필요한 작업만...
        }
    });
    
    document.body.appendChild(fragment);
}
```

**전체 예상 성능 향상: 60-80%**
**메모리 사용량: 95% 이상 감소**

성능 전문가님, 이 웹사이트가 느린 것 같은데 
어느 부분을 먼저 개선해야 할까요?

[실제 코드 붙여넣기]

성능 전문가님, 정기 성능 점검 부탁드립니다.
우선순위별로 개선점을 알려주세요.

[전체 컨텍스트 윈도우]
    ↓
[Mother Agent] → [Sub-Agent] → [Output]
    ↑                ↓
[Input]        [Internal Process]
                (컨텍스트 비공유)

say "서브 에이전트 동작 완료"