binary-agents 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +143 -0
- package/agents/advanced-code-reviewer.md +438 -0
- package/agents/advanced-junior-checker.md +838 -0
- package/agents/advanced-refactor-analyzer.md +610 -0
- package/agents/code-reviewer.md +199 -0
- package/agents/junior-friendly-checker.md +365 -0
- package/agents/refactor-analyzer.md +241 -0
- package/agents/subagent-builder.md +1007 -0
- package/bin/cli.js +51 -0
- package/docs/BUILDER_GUIDE.md +645 -0
- package/docs/COMPARISON.md +743 -0
- package/docs/SUBAGENTS.md +423 -0
- package/package.json +44 -0
- package/src/sync.js +207 -0
|
@@ -0,0 +1,743 @@
|
|
|
1
|
+
# 기본 vs 고급 버전 상세 비교
|
|
2
|
+
|
|
3
|
+
## 📊 한눈에 보는 차이점
|
|
4
|
+
|
|
5
|
+
| 항목 | 기본 버전 (Basic) | 고급 버전 (Advanced) |
|
|
6
|
+
|------|------------------|---------------------|
|
|
7
|
+
| **모델** | Haiku | Sonnet |
|
|
8
|
+
| **토큰 비용** | ~$0.25 per 1M input | ~$3.00 per 1M input |
|
|
9
|
+
| **추론 능력** | 패턴 매칭, 규칙 기반 | 심층 추론, 컨텍스트 이해 |
|
|
10
|
+
| **도구** | Read, Glob, Grep | Read, Glob, Grep, WebFetch, WebSearch |
|
|
11
|
+
| **실행 시간** | 5-10분 | 15-20분 |
|
|
12
|
+
| **인터넷 접근** | ❌ 없음 | ✅ 있음 (최대 5-7회) |
|
|
13
|
+
| **분석 깊이** | 표면적 | 심층적 |
|
|
14
|
+
| **권장사항** | 코드 기반 | 코드 + 웹 리서치 기반 |
|
|
15
|
+
| **학습 리소스** | ❌ 제공 안함 | ✅ 큐레이션된 링크 제공 |
|
|
16
|
+
| **업계 비교** | ❌ 없음 | ✅ 2025 베스트 프랙티스 비교 |
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## 🔍 1. Code Reviewer 비교
|
|
21
|
+
|
|
22
|
+
### code-reviewer.md (기본)
|
|
23
|
+
|
|
24
|
+
```yaml
|
|
25
|
+
name: code-reviewer
|
|
26
|
+
model: haiku
|
|
27
|
+
tools: Read, Glob, Grep
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
**평가 기준 (5개):**
|
|
31
|
+
1. 함수형 프로그래밍
|
|
32
|
+
2. 관심사의 분리
|
|
33
|
+
3. 코드 가독성
|
|
34
|
+
4. React 패턴
|
|
35
|
+
5. TypeScript
|
|
36
|
+
|
|
37
|
+
**출력 예시:**
|
|
38
|
+
```markdown
|
|
39
|
+
## 1. 함수형 프로그래밍 (7/10)
|
|
40
|
+
|
|
41
|
+
**Areas for Improvement:**
|
|
42
|
+
- src/utils/helper.ts:42 - Direct state mutation
|
|
43
|
+
- Recommended fix:
|
|
44
|
+
```typescript
|
|
45
|
+
// 대신 spread operator 사용
|
|
46
|
+
return { ...state, value: newValue }
|
|
47
|
+
```
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
**특징:**
|
|
51
|
+
- ✅ 빠른 분석 (5-10분)
|
|
52
|
+
- ✅ 명확한 안티패턴 감지
|
|
53
|
+
- ❌ 왜 문제인지 깊은 설명 부족
|
|
54
|
+
- ❌ 최신 패턴 여부 모름
|
|
55
|
+
- ❌ 학습 리소스 없음
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
### advanced-code-reviewer.md (고급)
|
|
60
|
+
|
|
61
|
+
```yaml
|
|
62
|
+
name: advanced-code-reviewer
|
|
63
|
+
model: sonnet
|
|
64
|
+
tools: Read, Glob, Grep, WebFetch, WebSearch
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
**평가 기준 (7개):**
|
|
68
|
+
1. 함수형 프로그래밍
|
|
69
|
+
2. **아키텍처 & 디자인 패턴** ⭐ 신규
|
|
70
|
+
3. 관심사의 분리
|
|
71
|
+
4. 코드 가독성
|
|
72
|
+
5. React 패턴
|
|
73
|
+
6. TypeScript
|
|
74
|
+
7. **성능 & 최적화** ⭐ 신규
|
|
75
|
+
|
|
76
|
+
**출력 예시:**
|
|
77
|
+
```markdown
|
|
78
|
+
## 1. 함수형 프로그래밍 (7/10)
|
|
79
|
+
|
|
80
|
+
**Areas for Improvement:**
|
|
81
|
+
- src/utils/helper.ts:42 - Direct state mutation
|
|
82
|
+
- **Industry Standard:** Immutable updates (React 권장사항)
|
|
83
|
+
- **Source:** WebFetch("https://react.dev/learn/updating-objects-in-state")
|
|
84
|
+
- **Why it matters:** React의 렌더링 최적화는 참조 비교에 의존하므로
|
|
85
|
+
불변성이 성능에 직접적인 영향을 미칩니다.
|
|
86
|
+
- **Recommended fix:**
|
|
87
|
+
```typescript
|
|
88
|
+
// 현대적 접근 (2025 React 베스트 프랙티스)
|
|
89
|
+
// 1. 간단한 경우: spread operator
|
|
90
|
+
return { ...state, value: newValue }
|
|
91
|
+
|
|
92
|
+
// 2. 중첩된 경우: immer 라이브러리 사용
|
|
93
|
+
import { produce } from 'immer'
|
|
94
|
+
return produce(state, draft => {
|
|
95
|
+
draft.nested.value = newValue
|
|
96
|
+
})
|
|
97
|
+
```
|
|
98
|
+
- **Learning Resources:**
|
|
99
|
+
- [React 공식 문서 - 불변성](https://react.dev/learn/updating-objects-in-state)
|
|
100
|
+
- [Immer 사용 가이드](https://immerjs.github.io/immer/)
|
|
101
|
+
|
|
102
|
+
## 2. 아키텍처 & 디자인 패턴 (6/10) ⭐
|
|
103
|
+
|
|
104
|
+
**Current Pattern:** 컴포넌트 중심 구조 (Component-centric)
|
|
105
|
+
**Industry Standard:** Feature-based 모듈 구조 (2025 트렌드)
|
|
106
|
+
|
|
107
|
+
**Architectural Gaps:**
|
|
108
|
+
- 비즈니스 로직이 컴포넌트에 산재
|
|
109
|
+
- **Modern Approach:** Domain-Driven Design with hooks
|
|
110
|
+
- **Source:** WebSearch("React architecture patterns 2025")
|
|
111
|
+
- **Migration Path:**
|
|
112
|
+
1. 비즈니스 로직을 custom hooks로 추출
|
|
113
|
+
2. Feature별 폴더 구조로 재구성
|
|
114
|
+
3. 도메인 모델 타입 정의
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
**특징:**
|
|
118
|
+
- ✅ 심층 분석 (15-20분)
|
|
119
|
+
- ✅ 최신 2025 패턴 확인
|
|
120
|
+
- ✅ 왜 문제인지 상세 설명
|
|
121
|
+
- ✅ 업계 표준과 비교
|
|
122
|
+
- ✅ 학습 리소스 링크 제공
|
|
123
|
+
- ✅ 마이그레이션 경로 제시
|
|
124
|
+
- ✅ 아키텍처 수준 평가
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
## 🔧 2. Refactor Analyzer 비교
|
|
129
|
+
|
|
130
|
+
### refactor-analyzer.md (기본)
|
|
131
|
+
|
|
132
|
+
```yaml
|
|
133
|
+
name: refactor-analyzer
|
|
134
|
+
model: haiku
|
|
135
|
+
tools: Read, Glob, Grep
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
**분석 영역 (5개):**
|
|
139
|
+
1. 코드 중복
|
|
140
|
+
2. 순환 복잡도
|
|
141
|
+
3. 추상화 기회
|
|
142
|
+
4. 코드 스멜
|
|
143
|
+
5. 성능 기회
|
|
144
|
+
|
|
145
|
+
**출력 예시:**
|
|
146
|
+
```markdown
|
|
147
|
+
## High Priority (Do First)
|
|
148
|
+
|
|
149
|
+
### 1. Duplicate Validation Logic
|
|
150
|
+
**Type:** Code Duplication
|
|
151
|
+
**Impact:** High | **Effort:** Low
|
|
152
|
+
**Files Affected:** 3 files
|
|
153
|
+
|
|
154
|
+
**Current State:**
|
|
155
|
+
- src/features/auth/Login.tsx:45-60
|
|
156
|
+
- src/features/signup/Register.tsx:52-67
|
|
157
|
+
- src/features/profile/EditProfile.tsx:88-103
|
|
158
|
+
|
|
159
|
+
**Problem:**
|
|
160
|
+
동일한 이메일 검증 로직이 3개 파일에 중복
|
|
161
|
+
|
|
162
|
+
**Recommended Solution:**
|
|
163
|
+
```typescript
|
|
164
|
+
// Create: src/utils/validation.ts
|
|
165
|
+
export function validateEmail(email: string): boolean {
|
|
166
|
+
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
|
|
167
|
+
}
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
**Impact Metrics:**
|
|
171
|
+
- Lines removed: ~45 lines
|
|
172
|
+
- Maintenance burden: Reduced by 66%
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
**특징:**
|
|
176
|
+
- ✅ 빠른 중복 감지
|
|
177
|
+
- ✅ 메트릭스 제공
|
|
178
|
+
- ❌ 왜 이 패턴이 좋은지 설명 없음
|
|
179
|
+
- ❌ 다른 해결 방법 비교 없음
|
|
180
|
+
- ❌ 업계 표준 모름
|
|
181
|
+
|
|
182
|
+
---
|
|
183
|
+
|
|
184
|
+
### advanced-refactor-analyzer.md (고급)
|
|
185
|
+
|
|
186
|
+
```yaml
|
|
187
|
+
name: advanced-refactor-analyzer
|
|
188
|
+
model: sonnet
|
|
189
|
+
tools: Read, Glob, Grep, WebFetch, WebSearch
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
**분석 영역 (6개):**
|
|
193
|
+
1. 코드 중복
|
|
194
|
+
2. 순환 복잡도
|
|
195
|
+
3. 추상화 기회
|
|
196
|
+
4. 코드 스멜
|
|
197
|
+
5. 성능 기회
|
|
198
|
+
6. **아키텍처 부채** ⭐ 신규
|
|
199
|
+
|
|
200
|
+
**출력 예시:**
|
|
201
|
+
```markdown
|
|
202
|
+
## High Priority (Do First)
|
|
203
|
+
|
|
204
|
+
### 1. Duplicate Validation Logic
|
|
205
|
+
**Type:** Code Duplication
|
|
206
|
+
**Impact:** High | **Effort:** Low | **ROI:** ⭐⭐⭐⭐⭐
|
|
207
|
+
**Files Affected:** 3 files
|
|
208
|
+
|
|
209
|
+
**Current State:**
|
|
210
|
+
- src/features/auth/Login.tsx:45-60
|
|
211
|
+
- src/features/signup/Register.tsx:52-67
|
|
212
|
+
- src/features/profile/EditProfile.tsx:88-103
|
|
213
|
+
|
|
214
|
+
**Problem:**
|
|
215
|
+
동일한 이메일 검증 로직이 3개 파일에 중복
|
|
216
|
+
|
|
217
|
+
**Industry Standard:**
|
|
218
|
+
현대적인 폼 검증은 선언적 스키마 기반 접근 (2025 트렌드)
|
|
219
|
+
**Source:** WebSearch("React form validation best practices 2025")
|
|
220
|
+
|
|
221
|
+
**Recommended Solutions (3가지 접근):**
|
|
222
|
+
|
|
223
|
+
#### 옵션 1: 간단한 유틸 함수 (현재 패턴 유지)
|
|
224
|
+
```typescript
|
|
225
|
+
// Create: src/utils/validation.ts
|
|
226
|
+
export function validateEmail(email: string): boolean {
|
|
227
|
+
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
|
|
228
|
+
}
|
|
229
|
+
```
|
|
230
|
+
**장점:** 빠른 적용, 최소 변경
|
|
231
|
+
**단점:** 복잡한 검증 로직에 확장성 낮음
|
|
232
|
+
|
|
233
|
+
#### 옵션 2: 스키마 기반 검증 (추천) ⭐
|
|
234
|
+
```typescript
|
|
235
|
+
// Using Zod (2025 React 커뮤니티 표준)
|
|
236
|
+
// Source: https://zod.dev
|
|
237
|
+
import { z } from 'zod'
|
|
238
|
+
|
|
239
|
+
export const emailSchema = z.string().email()
|
|
240
|
+
export const loginSchema = z.object({
|
|
241
|
+
email: emailSchema,
|
|
242
|
+
password: z.string().min(8)
|
|
243
|
+
})
|
|
244
|
+
|
|
245
|
+
// Usage in component
|
|
246
|
+
const { errors } = loginSchema.safeParse(formData)
|
|
247
|
+
```
|
|
248
|
+
**장점:** 타입 안전성, 확장 가능, 재사용성 높음
|
|
249
|
+
**단점:** 새로운 라이브러리 도입
|
|
250
|
+
|
|
251
|
+
#### 옵션 3: React Hook Form + Zod (최신 패턴)
|
|
252
|
+
```typescript
|
|
253
|
+
// Industry standard for 2025
|
|
254
|
+
import { useForm } from 'react-hook-form'
|
|
255
|
+
import { zodResolver } from '@hookform/resolvers/zod'
|
|
256
|
+
|
|
257
|
+
const { register, handleSubmit } = useForm({
|
|
258
|
+
resolver: zodResolver(loginSchema)
|
|
259
|
+
})
|
|
260
|
+
```
|
|
261
|
+
**장점:** 성능 최적화 (uncontrolled), 선언적, 타입 안전
|
|
262
|
+
**단점:** 가장 큰 변경 필요
|
|
263
|
+
|
|
264
|
+
**Migration Path (추천: 옵션 2):**
|
|
265
|
+
1. Week 1: Zod 설치 및 스키마 정의
|
|
266
|
+
- `npm install zod`
|
|
267
|
+
- 공통 스키마 작성 (email, password 등)
|
|
268
|
+
2. Week 2: 한 페이지씩 마이그레이션
|
|
269
|
+
- Login 페이지 먼저 적용
|
|
270
|
+
- 테스트 후 다른 페이지 적용
|
|
271
|
+
3. Week 3: 레거시 검증 로직 제거
|
|
272
|
+
|
|
273
|
+
**Impact Metrics:**
|
|
274
|
+
- Lines removed: ~45 lines
|
|
275
|
+
- Maintenance burden: Reduced by 66%
|
|
276
|
+
- Type safety: Improved (TypeScript inference)
|
|
277
|
+
- Validation errors: Reduced by ~40% (업계 통계)
|
|
278
|
+
|
|
279
|
+
**Learning Resources:**
|
|
280
|
+
- [Zod 공식 문서](https://zod.dev)
|
|
281
|
+
- [React Hook Form Guide](https://react-hook-form.com)
|
|
282
|
+
- [Form Validation 2025 패턴 비교](https://example.com)
|
|
283
|
+
|
|
284
|
+
**ROI Analysis:**
|
|
285
|
+
- 초기 투자: 2-3 days
|
|
286
|
+
- 장기 절감: 20+ hours/year (유지보수)
|
|
287
|
+
- 버그 감소: ~40% (타입 안전성)
|
|
288
|
+
|
|
289
|
+
---
|
|
290
|
+
|
|
291
|
+
## Industry Trends You're Missing
|
|
292
|
+
|
|
293
|
+
Based on 2025 best practices:
|
|
294
|
+
1. **Schema-based Validation**
|
|
295
|
+
- **Adoption:** 70%+ of React projects
|
|
296
|
+
- **Why it matters:** 타입 안전성 + 런타임 검증 통합
|
|
297
|
+
- **Learn more:** [Link to trend analysis]
|
|
298
|
+
```
|
|
299
|
+
|
|
300
|
+
**특징:**
|
|
301
|
+
- ✅ 심층 분석 + 여러 해결책 비교
|
|
302
|
+
- ✅ 최신 2025 트렌드 반영
|
|
303
|
+
- ✅ ROI(투자 대비 효과) 분석
|
|
304
|
+
- ✅ 단계별 마이그레이션 가이드
|
|
305
|
+
- ✅ 학습 리소스 큐레이션
|
|
306
|
+
- ✅ 업계 채택률 통계
|
|
307
|
+
- ✅ 리스크 평가
|
|
308
|
+
|
|
309
|
+
---
|
|
310
|
+
|
|
311
|
+
## 👤 3. Junior Checker 비교
|
|
312
|
+
|
|
313
|
+
### junior-friendly-checker.md (기본)
|
|
314
|
+
|
|
315
|
+
```yaml
|
|
316
|
+
name: junior-friendly-checker
|
|
317
|
+
model: haiku
|
|
318
|
+
tools: Read, Glob, Grep
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
**평가 항목 (5개):**
|
|
322
|
+
1. 네이밍 명확성 (25%)
|
|
323
|
+
2. 함수 복잡도 (20%)
|
|
324
|
+
3. 주석 품질 (25%)
|
|
325
|
+
4. 코드 구조 (15%)
|
|
326
|
+
5. 타입 명확성 (15%)
|
|
327
|
+
|
|
328
|
+
**출력 예시:**
|
|
329
|
+
```markdown
|
|
330
|
+
## 2. 함수 복잡도: 6/10
|
|
331
|
+
|
|
332
|
+
### Complexity Hotspots
|
|
333
|
+
| File:Line | Function | Lines | Nesting | Junior-Friendly? |
|
|
334
|
+
|-----------|----------|-------|---------|------------------|
|
|
335
|
+
| src/utils/calc.ts:42 | processData | 65 | 4 | ❌ Too complex |
|
|
336
|
+
|
|
337
|
+
### Refactoring Suggestions
|
|
338
|
+
1. **src/utils/calc.ts:42 - processData**
|
|
339
|
+
- Current: 65 lines, 4 nesting levels
|
|
340
|
+
- Suggestion: Extract helper functions
|
|
341
|
+
- Benefit: Junior can understand each piece independently
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
**특징:**
|
|
345
|
+
- ✅ 복잡도 측정
|
|
346
|
+
- ✅ 주니어 관점 피드백
|
|
347
|
+
- ❌ 구체적인 학습 방법 없음
|
|
348
|
+
- ❌ 어떤 개념을 공부해야 하는지 모름
|
|
349
|
+
|
|
350
|
+
---
|
|
351
|
+
|
|
352
|
+
### advanced-junior-checker.md (고급)
|
|
353
|
+
|
|
354
|
+
```yaml
|
|
355
|
+
name: advanced-junior-checker
|
|
356
|
+
model: sonnet
|
|
357
|
+
tools: Read, Glob, Grep, WebFetch, WebSearch
|
|
358
|
+
```
|
|
359
|
+
|
|
360
|
+
**평가 항목 (6개):**
|
|
361
|
+
1. 네이밍 명확성 (25%)
|
|
362
|
+
2. 함수 복잡도 (20%)
|
|
363
|
+
3. 주석 품질 (25%)
|
|
364
|
+
4. 코드 구조 (15%)
|
|
365
|
+
5. 타입 명확성 (10%)
|
|
366
|
+
6. **학습 곡선 평가** (5%) ⭐ 신규
|
|
367
|
+
|
|
368
|
+
**출력 예시:**
|
|
369
|
+
```markdown
|
|
370
|
+
## 2. 함수 복잡도: 6/10
|
|
371
|
+
|
|
372
|
+
### Complexity Hotspots
|
|
373
|
+
| File:Line | Function | Lines | Nesting | Cognitive | Junior-Friendly? |
|
|
374
|
+
|-----------|----------|-------|---------|-----------|------------------|
|
|
375
|
+
| src/utils/calc.ts:42 | processData | 65 | 4 | High | ❌ Too complex |
|
|
376
|
+
|
|
377
|
+
### Refactoring Suggestions for Junior Readability
|
|
378
|
+
|
|
379
|
+
#### 1. **src/utils/calc.ts:42 - processData**
|
|
380
|
+
**Current State:**
|
|
381
|
+
- 65 lines, 4 nesting levels, high cognitive complexity
|
|
382
|
+
- **Junior impact:** 주니어가 이해하는데 30-45분 소요 예상
|
|
383
|
+
|
|
384
|
+
**Why it's confusing for juniors:**
|
|
385
|
+
- 중첩된 조건문 4단계 (if 안의 if 안의 if...)
|
|
386
|
+
- 8개의 로컬 변수 동시에 추적 필요
|
|
387
|
+
- 변수명이 축약형 (data, temp, res)
|
|
388
|
+
- 주석 없는 복잡한 계산식
|
|
389
|
+
|
|
390
|
+
**Simplified Approach:**
|
|
391
|
+
```typescript
|
|
392
|
+
// Before: 65줄의 복잡한 함수 (주니어 혼란)
|
|
393
|
+
function processData(data, config) {
|
|
394
|
+
let res = []
|
|
395
|
+
if (config.type === 'A') {
|
|
396
|
+
if (data.length > 0) {
|
|
397
|
+
for (let i = 0; i < data.length; i++) {
|
|
398
|
+
if (data[i].valid) {
|
|
399
|
+
// ... 30 more lines
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
// ... 35 more lines
|
|
405
|
+
return res
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
// After: 명확한 단계별 함수 (주니어 친화적)
|
|
409
|
+
/**
|
|
410
|
+
* 데이터를 처리하여 결과 배열을 반환합니다.
|
|
411
|
+
*
|
|
412
|
+
* 처리 단계:
|
|
413
|
+
* 1. 유효성 검사
|
|
414
|
+
* 2. 타입별 필터링
|
|
415
|
+
* 3. 변환 및 포맷팅
|
|
416
|
+
*/
|
|
417
|
+
function processData(data: DataItem[], config: ProcessConfig): ProcessedResult[] {
|
|
418
|
+
// Step 1: Early return으로 복잡도 감소
|
|
419
|
+
if (!isValidConfig(config)) {
|
|
420
|
+
return []
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
// Step 2: 각 단계를 명확한 이름의 함수로 분리
|
|
424
|
+
const validItems = filterValidItems(data)
|
|
425
|
+
const filteredByType = filterByType(validItems, config.type)
|
|
426
|
+
const processedResults = transformItems(filteredByType)
|
|
427
|
+
|
|
428
|
+
return processedResults
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
// 각 헬퍼 함수는 10줄 이하, 한 가지 일만 수행
|
|
432
|
+
function filterValidItems(data: DataItem[]): DataItem[] {
|
|
433
|
+
return data.filter(item => item.valid)
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
function filterByType(items: DataItem[], type: string): DataItem[] {
|
|
437
|
+
return items.filter(item => item.type === type)
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
function transformItems(items: DataItem[]): ProcessedResult[] {
|
|
441
|
+
return items.map(item => ({
|
|
442
|
+
id: item.id,
|
|
443
|
+
value: calculateValue(item)
|
|
444
|
+
}))
|
|
445
|
+
}
|
|
446
|
+
```
|
|
447
|
+
|
|
448
|
+
**Benefits for Juniors:**
|
|
449
|
+
- ✅ 각 함수는 10줄 이하 (한눈에 이해 가능)
|
|
450
|
+
- ✅ 함수 이름이 곧 주석 (self-documenting)
|
|
451
|
+
- ✅ 중첩 깊이 1단계로 감소
|
|
452
|
+
- ✅ 단계별 디버깅 가능
|
|
453
|
+
- ✅ 각 함수를 독립적으로 테스트 가능
|
|
454
|
+
- ✅ 비슷한 패턴 반복으로 학습 효과
|
|
455
|
+
|
|
456
|
+
**Learning Resources:**
|
|
457
|
+
- [Clean Code 함수 작성법](https://example.com) - 함수를 작게 만드는 이유
|
|
458
|
+
- [Cognitive Complexity 이해하기](https://example.com) - 왜 중첩을 피해야 하는가
|
|
459
|
+
- [Early Return 패턴](https://example.com) - Guard clauses 활용법
|
|
460
|
+
|
|
461
|
+
**Estimated Learning Time:**
|
|
462
|
+
- 현재 함수 이해: 30-45분
|
|
463
|
+
- 리팩토링 후 이해: 5-10분 ⏱️ 70% 단축!
|
|
464
|
+
|
|
465
|
+
---
|
|
466
|
+
|
|
467
|
+
## 6. 학습 곡선: 7/10 ⭐
|
|
468
|
+
|
|
469
|
+
### Concepts Juniors Need to Learn
|
|
470
|
+
| Concept | Difficulty | Used In | Priority | Learning Resource |
|
|
471
|
+
|---------|-----------|---------|----------|-------------------|
|
|
472
|
+
| Array methods (map/filter) | Easy | 12 files | High | [MDN Array Methods](https://example.com) |
|
|
473
|
+
| Custom Hooks | Medium | 8 files | High | [React Hooks Guide](https://react.dev/learn) |
|
|
474
|
+
| TypeScript Generics | Hard | 5 files | Medium | [TS Handbook - Generics](https://example.com) |
|
|
475
|
+
| Context API | Medium | 3 files | Medium | [React Context Tutorial](https://example.com) |
|
|
476
|
+
|
|
477
|
+
### Curated Learning Path
|
|
478
|
+
|
|
479
|
+
**Week 1: JavaScript/TypeScript 기초 강화**
|
|
480
|
+
- [ ] Array methods 마스터 (필수!)
|
|
481
|
+
- Tutorial: [JavaScript Array Methods](https://example.com)
|
|
482
|
+
- Practice: [Exercises](https://example.com)
|
|
483
|
+
- 코드베이스에서 연습할 파일: src/utils/array.ts
|
|
484
|
+
|
|
485
|
+
**Week 2: React 기본 패턴**
|
|
486
|
+
- [ ] Component composition
|
|
487
|
+
- Guide: [Thinking in React](https://react.dev)
|
|
488
|
+
- 코드베이스 예시: src/components/Layout.tsx
|
|
489
|
+
|
|
490
|
+
**Week 3: Custom Hooks (핵심!)**
|
|
491
|
+
- [ ] Custom hooks 이해
|
|
492
|
+
- Why: 코드베이스에서 가장 많이 사용 (8개 파일)
|
|
493
|
+
- Tutorial: [Building Your Own Hooks](https://react.dev)
|
|
494
|
+
- 코드베이스에서 시작할 파일: src/hooks/useAuth.ts (가장 간단)
|
|
495
|
+
|
|
496
|
+
**Week 4: TypeScript 심화**
|
|
497
|
+
- [ ] Generics 이해
|
|
498
|
+
- 코드베이스 예시: src/types/api.ts
|
|
499
|
+
- Interactive tutorial: [TypeScript Playground](https://example.com)
|
|
500
|
+
|
|
501
|
+
### Onboarding Documentation to Create
|
|
502
|
+
|
|
503
|
+
**Missing Documentation (주니어에게 필수!):**
|
|
504
|
+
1. **아키텍처 가이드** (HIGH PRIORITY)
|
|
505
|
+
- 어떤 파일이 어떤 역할?
|
|
506
|
+
- 새 기능 추가시 어디에 코드 작성?
|
|
507
|
+
- Template: [Architecture Guide](https://example.com)
|
|
508
|
+
|
|
509
|
+
2. **Common Patterns 예시**
|
|
510
|
+
- 코드베이스에서 반복되는 패턴 설명
|
|
511
|
+
- 복사해서 쓸 수 있는 템플릿
|
|
512
|
+
- Example: [Pattern Library](https://example.com)
|
|
513
|
+
|
|
514
|
+
3. **ONBOARDING.md 생성**
|
|
515
|
+
```markdown
|
|
516
|
+
# 주니어 개발자 온보딩 가이드
|
|
517
|
+
|
|
518
|
+
## Day 1: 환경 설정 및 첫 실행
|
|
519
|
+
- 코드 클론 및 의존성 설치
|
|
520
|
+
- 로컬 실행 확인
|
|
521
|
+
- 코드베이스 구조 훑어보기
|
|
522
|
+
|
|
523
|
+
## Week 1: 기본 개념 학습
|
|
524
|
+
- [학습 리소스 링크]
|
|
525
|
+
- 간단한 버그 수정 (good first issue)
|
|
526
|
+
|
|
527
|
+
## Week 2-4: 점진적 기능 추가
|
|
528
|
+
- [단계별 가이드]
|
|
529
|
+
```
|
|
530
|
+
|
|
531
|
+
**Industry Comparison:**
|
|
532
|
+
- Your codebase: 온보딩 시간 ~3-4주
|
|
533
|
+
- Industry average: ~2-3주
|
|
534
|
+
- Best in class: ~1주
|
|
535
|
+
- **Gap:** 문서화 부족 + 복잡한 함수
|
|
536
|
+
|
|
537
|
+
**Source:** WebSearch("developer onboarding best practices 2025")
|
|
538
|
+
```
|
|
539
|
+
|
|
540
|
+
**특징:**
|
|
541
|
+
- ✅ 구체적인 학습 로드맵
|
|
542
|
+
- ✅ 난이도별 개념 분류
|
|
543
|
+
- ✅ 큐레이션된 학습 리소스
|
|
544
|
+
- ✅ 코드베이스 특화 가이드
|
|
545
|
+
- ✅ 단계별 온보딩 계획
|
|
546
|
+
- ✅ 업계 평균과 비교
|
|
547
|
+
- ✅ 시간 절감 효과 측정
|
|
548
|
+
|
|
549
|
+
---
|
|
550
|
+
|
|
551
|
+
## 🤔 사용 방법: 자동으로 선택되나요?
|
|
552
|
+
|
|
553
|
+
### ❌ 자동 선택 안됨!
|
|
554
|
+
|
|
555
|
+
Claude는 **파일 이름**으로 서브에이전트를 선택합니다.
|
|
556
|
+
따라서 **명시적으로 요청**해야 합니다.
|
|
557
|
+
|
|
558
|
+
### ✅ 사용 방법
|
|
559
|
+
|
|
560
|
+
#### 1. 기본 버전 사용하기
|
|
561
|
+
```
|
|
562
|
+
"code-reviewer를 사용해서 이 프로젝트 분석해줘"
|
|
563
|
+
```
|
|
564
|
+
→ `code-reviewer.md`가 실행됨 (Haiku, 빠름)
|
|
565
|
+
|
|
566
|
+
#### 2. 고급 버전 사용하기
|
|
567
|
+
```
|
|
568
|
+
"advanced-code-reviewer를 사용해서 최신 베스트 프랙티스와 비교해줘"
|
|
569
|
+
```
|
|
570
|
+
→ `advanced-code-reviewer.md`가 실행됨 (Sonnet, 웹 리서치)
|
|
571
|
+
|
|
572
|
+
#### 3. 암묵적 사용 (추천!)
|
|
573
|
+
상황에 맞게 요청하면 Claude가 적절한 에이전트 선택:
|
|
574
|
+
|
|
575
|
+
**빠른 체크가 필요한 경우:**
|
|
576
|
+
```
|
|
577
|
+
"빨리 코드 품질만 체크해줘"
|
|
578
|
+
```
|
|
579
|
+
→ Claude가 `code-reviewer` 선택 (Haiku)
|
|
580
|
+
|
|
581
|
+
**심층 분석이 필요한 경우:**
|
|
582
|
+
```
|
|
583
|
+
"이 프로젝트가 2025년 React 베스트 프랙티스를 따르는지
|
|
584
|
+
최신 문서와 비교해서 분석하고, 부족한 부분에 대한
|
|
585
|
+
학습 자료도 찾아줘"
|
|
586
|
+
```
|
|
587
|
+
→ Claude가 `advanced-code-reviewer` 선택 (Sonnet + 웹)
|
|
588
|
+
|
|
589
|
+
---
|
|
590
|
+
|
|
591
|
+
## 💡 실전 사용 시나리오
|
|
592
|
+
|
|
593
|
+
### 시나리오 1: 일상적인 PR 리뷰
|
|
594
|
+
```
|
|
595
|
+
User: "이 PR 코드 품질 빠르게 체크해줘"
|
|
596
|
+
Claude: [code-reviewer 사용]
|
|
597
|
+
→ 5분 내 결과
|
|
598
|
+
→ 기본 안티패턴 감지
|
|
599
|
+
→ 비용 저렴
|
|
600
|
+
```
|
|
601
|
+
|
|
602
|
+
### 시나리오 2: 새 프로젝트 아키텍처 리뷰
|
|
603
|
+
```
|
|
604
|
+
User: "이 프로젝트의 아키텍처를 최신 React 패턴과 비교하고,
|
|
605
|
+
개선 방향을 제시해줘. 학습 자료도 같이 찾아줘"
|
|
606
|
+
Claude: [advanced-code-reviewer 사용]
|
|
607
|
+
→ 15-20분 분석
|
|
608
|
+
→ 웹에서 2025 베스트 프랙티스 검색
|
|
609
|
+
→ 업계 표준과 비교
|
|
610
|
+
→ 학습 리소스 큐레이션
|
|
611
|
+
→ 상세한 마이그레이션 가이드
|
|
612
|
+
```
|
|
613
|
+
|
|
614
|
+
### 시나리오 3: 리팩토링 계획
|
|
615
|
+
```
|
|
616
|
+
User: "중복 코드 찾아줘"
|
|
617
|
+
Claude: [refactor-analyzer 사용]
|
|
618
|
+
→ 빠른 중복 감지
|
|
619
|
+
|
|
620
|
+
User: "이 중복을 해결하는 최신 패턴이 뭐야?
|
|
621
|
+
여러 방법 비교해줘"
|
|
622
|
+
Claude: [advanced-refactor-analyzer 사용]
|
|
623
|
+
→ 웹에서 최신 패턴 검색
|
|
624
|
+
→ 3-4가지 해결 방법 비교
|
|
625
|
+
→ ROI 분석
|
|
626
|
+
→ 단계별 마이그레이션 가이드
|
|
627
|
+
```
|
|
628
|
+
|
|
629
|
+
### 시나리오 4: 주니어 온보딩 준비
|
|
630
|
+
```
|
|
631
|
+
User: "주니어가 이 코드 이해하기 어려운 부분 찾아줘"
|
|
632
|
+
Claude: [junior-friendly-checker 사용]
|
|
633
|
+
→ 기본 가독성 분석
|
|
634
|
+
|
|
635
|
+
User: "주니어를 위한 학습 자료랑 온보딩 가이드 만들어줘"
|
|
636
|
+
Claude: [advanced-junior-checker 사용]
|
|
637
|
+
→ 코드베이스 특화 학습 경로
|
|
638
|
+
→ 큐레이션된 튜토리얼
|
|
639
|
+
→ 단계별 온보딩 계획
|
|
640
|
+
→ ONBOARDING.md 템플릿
|
|
641
|
+
```
|
|
642
|
+
|
|
643
|
+
---
|
|
644
|
+
|
|
645
|
+
## 🎯 언제 어떤 버전을 사용할까?
|
|
646
|
+
|
|
647
|
+
### 기본 버전 (Haiku) 사용
|
|
648
|
+
✅ **이럴 때 사용:**
|
|
649
|
+
- 빠른 피드백 필요
|
|
650
|
+
- 명확한 안티패턴만 찾으면 됨
|
|
651
|
+
- 비용 절감이 중요
|
|
652
|
+
- CI/CD 자동화
|
|
653
|
+
- 이미 패턴을 알고 있고 확인만 필요
|
|
654
|
+
|
|
655
|
+
❌ **이럴 땐 부족:**
|
|
656
|
+
- 최신 패턴 모를 때
|
|
657
|
+
- 여러 해결책 비교 필요
|
|
658
|
+
- 학습 자료 필요
|
|
659
|
+
- 업계 표준 궁금
|
|
660
|
+
- 왜 문제인지 깊은 이해 필요
|
|
661
|
+
|
|
662
|
+
### 고급 버전 (Sonnet) 사용
|
|
663
|
+
✅ **이럴 때 사용:**
|
|
664
|
+
- 아키텍처 리뷰
|
|
665
|
+
- 최신 2025 패턴 확인
|
|
666
|
+
- 여러 해결책 비교
|
|
667
|
+
- 학습 리소스 필요
|
|
668
|
+
- 팀 온보딩 자료 개발
|
|
669
|
+
- 대규모 리팩토링 계획
|
|
670
|
+
- 업계 벤치마크 필요
|
|
671
|
+
- 왜 문제인지 깊은 이해 필요
|
|
672
|
+
|
|
673
|
+
❌ **이럴 땐 과함:**
|
|
674
|
+
- 단순 안티패턴 체크
|
|
675
|
+
- 빠른 피드백만 필요
|
|
676
|
+
- 이미 해결책 알고 있음
|
|
677
|
+
- 비용 최소화가 목표
|
|
678
|
+
|
|
679
|
+
---
|
|
680
|
+
|
|
681
|
+
## 📊 비용 효율성 분석
|
|
682
|
+
|
|
683
|
+
### 예시: 중간 규모 프로젝트 (100개 파일)
|
|
684
|
+
|
|
685
|
+
#### 기본 버전
|
|
686
|
+
- **실행 시간:** 7분
|
|
687
|
+
- **토큰 사용:** ~50K tokens
|
|
688
|
+
- **예상 비용:** ~$0.0125 (input) + $0.0375 (output) = **~$0.05**
|
|
689
|
+
- **웹 요청:** 0회
|
|
690
|
+
- **결과:** 기본 안티패턴 15개 발견
|
|
691
|
+
|
|
692
|
+
#### 고급 버전
|
|
693
|
+
- **실행 시간:** 18분
|
|
694
|
+
- **토큰 사용:** ~80K tokens (웹 리서치 포함)
|
|
695
|
+
- **예상 비용:** ~$0.24 (input) + $$0.72 (output) = **~$0.96**
|
|
696
|
+
- **웹 요청:** 6회
|
|
697
|
+
- **결과:**
|
|
698
|
+
- 안티패턴 15개 + 상세 설명
|
|
699
|
+
- 최신 패턴 비교 5개
|
|
700
|
+
- 학습 리소스 20개
|
|
701
|
+
- 마이그레이션 가이드 3개
|
|
702
|
+
|
|
703
|
+
#### ROI 계산
|
|
704
|
+
- **기본:** 문제 찾기만 → 해결책 직접 검색 필요 (1-2시간)
|
|
705
|
+
- **고급:** 문제 + 해결책 + 학습 자료 모두 제공 (0시간)
|
|
706
|
+
- **시간 절약:** 1-2시간 × 개발자 시급 = **훨씬 큰 가치**
|
|
707
|
+
|
|
708
|
+
---
|
|
709
|
+
|
|
710
|
+
## 🚀 추천 워크플로우
|
|
711
|
+
|
|
712
|
+
### 단계 1: 빠른 스캔 (기본 버전)
|
|
713
|
+
```bash
|
|
714
|
+
"code-reviewer로 문제점 빠르게 찾아줘"
|
|
715
|
+
```
|
|
716
|
+
→ 5-10분, 저렴, 주요 이슈 파악
|
|
717
|
+
|
|
718
|
+
### 단계 2: 심층 분석 (고급 버전)
|
|
719
|
+
심각한 이슈 발견 시:
|
|
720
|
+
```bash
|
|
721
|
+
"advanced-code-reviewer로 [발견된 이슈]를
|
|
722
|
+
최신 패턴과 비교하고 해결 방법 찾아줘"
|
|
723
|
+
```
|
|
724
|
+
→ 15-20분, 웹 리서치, 상세 가이드
|
|
725
|
+
|
|
726
|
+
### 단계 3: 실행
|
|
727
|
+
제공된 마이그레이션 가이드 따라 리팩토링
|
|
728
|
+
|
|
729
|
+
---
|
|
730
|
+
|
|
731
|
+
## 📝 요약
|
|
732
|
+
|
|
733
|
+
| 질문 | 답변 |
|
|
734
|
+
|------|------|
|
|
735
|
+
| **자동으로 선택되나요?** | ❌ 아니요, 명시적으로 요청해야 함 |
|
|
736
|
+
| **어떻게 선택하나요?** | 파일 이름으로 (`code-reviewer` vs `advanced-code-reviewer`) |
|
|
737
|
+
| **기본은 언제?** | 빠른 체크, 비용 절감, 명확한 패턴 감지 |
|
|
738
|
+
| **고급은 언제?** | 심층 분석, 최신 패턴, 학습 리소스, 아키텍처 리뷰 |
|
|
739
|
+
| **비용 차이는?** | 기본: ~$0.05, 고급: ~$1.00 (20배 차이) |
|
|
740
|
+
| **시간 차이는?** | 기본: 5-10분, 고급: 15-20분 (2-3배 차이) |
|
|
741
|
+
| **가치 차이는?** | 고급이 1-2시간 검색 시간 절약 → ROI 훨씬 높음 |
|
|
742
|
+
|
|
743
|
+
**결론:** 상황에 맞게 선택하되, 중요한 결정에는 고급 버전이 시간과 비용 모두 절약!
|