binary-agents 1.1.5 → 1.3.1
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 +11 -3
- package/agents/code-reviewer.md +84 -97
- package/agents/fundamentals-cohesion.md +293 -0
- package/agents/fundamentals-coupling.md +372 -0
- package/agents/fundamentals-predictability.md +287 -0
- package/agents/fundamentals-readability.md +561 -0
- package/agents/junior-checker.md +93 -445
- package/agents/maintainable-code-reviewer.md +30 -133
- package/agents/react-performance-optimizer.md +89 -295
- package/agents/react-principles-reviewer.md +174 -237
- package/agents/react-state-reviewer.md +456 -0
- package/agents/refactor-analyzer.md +74 -253
- package/agents/subagent-builder.md +69 -75
- package/commands/code-review.md +27 -12
- package/commands/design-to-code.md +41 -14
- package/commands/review-pr.md +37 -5
- package/docs/BUILDER_GUIDE.md +6 -2
- package/package.json +1 -1
- package/agents/fundamentals-code.md +0 -993
package/agents/junior-checker.md
CHANGED
|
@@ -35,50 +35,58 @@ model: opus
|
|
|
35
35
|
|
|
36
36
|
---
|
|
37
37
|
|
|
38
|
-
## 평가
|
|
38
|
+
## 평가 원칙
|
|
39
39
|
|
|
40
|
-
### 1. 네이밍 명확성
|
|
40
|
+
### 1. 네이밍 명확성
|
|
41
41
|
|
|
42
42
|
**✅ 주니어 친화적:**
|
|
43
|
+
|
|
43
44
|
```typescript
|
|
44
45
|
// 이름만으로 목적이 명확
|
|
45
|
-
function calculateVisibleSlideIndex(
|
|
46
|
+
function calculateVisibleSlideIndex(
|
|
47
|
+
currentIndex: number,
|
|
48
|
+
totalSlides: number,
|
|
49
|
+
): number;
|
|
46
50
|
|
|
47
51
|
// 자기 설명적 변수
|
|
48
|
-
const isLastSlideVisible = currentIndex >= totalSlides - 1
|
|
52
|
+
const isLastSlideVisible = currentIndex >= totalSlides - 1;
|
|
49
53
|
|
|
50
54
|
// 명확한 boolean
|
|
51
|
-
const hasEnoughSlidesForInfiniteLoop = slides.length > maxDisplayItems
|
|
55
|
+
const hasEnoughSlidesForInfiniteLoop = slides.length > maxDisplayItems;
|
|
52
56
|
```
|
|
53
57
|
|
|
54
58
|
**❌ 주니어에게 혼란:**
|
|
59
|
+
|
|
55
60
|
```typescript
|
|
56
61
|
// "process"가 뭘 하는지?
|
|
57
|
-
function process(idx: number): number
|
|
62
|
+
function process(idx: number): number;
|
|
58
63
|
|
|
59
64
|
// "flag"가 뭐지?
|
|
60
|
-
const flag = idx >= total - 1
|
|
65
|
+
const flag = idx >= total - 1;
|
|
61
66
|
|
|
62
67
|
// "canLoop"이 여기서 무슨 의미?
|
|
63
|
-
const canLoop = slides.length > max
|
|
68
|
+
const canLoop = slides.length > max;
|
|
64
69
|
```
|
|
65
70
|
|
|
66
71
|
**🔍 검색:**
|
|
72
|
+
|
|
67
73
|
- 함수명이 무엇과 왜를 설명하는지
|
|
68
74
|
- Boolean 변수가 `is`/`has`/`should`/`can`으로 시작하는지
|
|
69
75
|
- 매직 값에 UPPER_CASE 상수 사용
|
|
70
76
|
- 일반적인 것 외 약어 미사용 (idx → index)
|
|
71
77
|
|
|
72
78
|
**🌐 웹 검색:**
|
|
79
|
+
|
|
73
80
|
- "naming conventions best practices [current year]"
|
|
74
81
|
- "self-documenting code examples"
|
|
75
82
|
- "clean code naming guide for beginners"
|
|
76
83
|
|
|
77
84
|
---
|
|
78
85
|
|
|
79
|
-
### 2. 함수 복잡도
|
|
86
|
+
### 2. 함수 복잡도
|
|
80
87
|
|
|
81
88
|
**측정 기준:**
|
|
89
|
+
|
|
82
90
|
- 코드 라인 수 (<30 = 좋음, 30-50 = 허용, >50 = 분리 필요)
|
|
83
91
|
- 파라미터 수 (<4 = 좋음, 4-6 = 허용, >6 = 객체 사용)
|
|
84
92
|
- 중첩 깊이 (<3레벨 = 좋음, 3-4 = 허용, >4 = 리팩토링)
|
|
@@ -86,27 +94,29 @@ const canLoop = slides.length > max
|
|
|
86
94
|
- 인지 복잡도 (반복문 + 조건문 + 중첩)
|
|
87
95
|
|
|
88
96
|
**✅ 주니어 친화적:**
|
|
97
|
+
|
|
89
98
|
```typescript
|
|
90
99
|
// 하나의 명확한 목적, <20줄, 낮은 인지 부하
|
|
91
100
|
function moveToNextSlide(currentIndex: number, totalSlides: number): number {
|
|
92
|
-
const nextIndex = currentIndex + 1
|
|
93
|
-
const hasReachedEnd = nextIndex >= totalSlides
|
|
94
|
-
return hasReachedEnd ? 0 : nextIndex
|
|
101
|
+
const nextIndex = currentIndex + 1;
|
|
102
|
+
const hasReachedEnd = nextIndex >= totalSlides;
|
|
103
|
+
return hasReachedEnd ? 0 : nextIndex;
|
|
95
104
|
}
|
|
96
105
|
```
|
|
97
106
|
|
|
98
107
|
**❌ 너무 복잡:**
|
|
108
|
+
|
|
99
109
|
```typescript
|
|
100
110
|
// 여러 책임, 높은 인지 부하
|
|
101
111
|
function handleSlideTransition(idx, total, isInf, isDrag, isAuto, dir) {
|
|
102
112
|
if (isAuto && !isDrag) {
|
|
103
113
|
if (isInf) {
|
|
104
|
-
return dir === 'next' ? idx + 1 : idx - 1
|
|
114
|
+
return dir === 'next' ? idx + 1 : idx - 1;
|
|
105
115
|
} else {
|
|
106
116
|
if (dir === 'next') {
|
|
107
|
-
return idx + 1 >= total ? 0 : idx + 1
|
|
117
|
+
return idx + 1 >= total ? 0 : idx + 1;
|
|
108
118
|
} else {
|
|
109
|
-
return idx - 1 < 0 ? total - 1 : idx - 1
|
|
119
|
+
return idx - 1 < 0 ? total - 1 : idx - 1;
|
|
110
120
|
}
|
|
111
121
|
}
|
|
112
122
|
}
|
|
@@ -115,15 +125,17 @@ function handleSlideTransition(idx, total, isInf, isDrag, isAuto, dir) {
|
|
|
115
125
|
```
|
|
116
126
|
|
|
117
127
|
**🌐 웹 검색:**
|
|
128
|
+
|
|
118
129
|
- "cognitive complexity vs cyclomatic complexity"
|
|
119
130
|
- "function complexity best practices for readability"
|
|
120
131
|
- "how to write simple functions for beginners"
|
|
121
132
|
|
|
122
133
|
---
|
|
123
134
|
|
|
124
|
-
### 3. 주석 품질
|
|
135
|
+
### 3. 주석 품질
|
|
125
136
|
|
|
126
137
|
**✅ 도움이 되는 주석:**
|
|
138
|
+
|
|
127
139
|
```typescript
|
|
128
140
|
/**
|
|
129
141
|
* 작은 마우스 움직임으로 실수로 슬라이드가 변경되는 것을 방지합니다.
|
|
@@ -135,27 +147,29 @@ function handleSlideTransition(idx, total, isInf, isDrag, isAuto, dir) {
|
|
|
135
147
|
* // 사용자가 300px 컨테이너에서 100px 드래그 = 33% = 전환 발생
|
|
136
148
|
* // 사용자가 300px 컨테이너에서 50px 드래그 = 16% = 전환 없음
|
|
137
149
|
*/
|
|
138
|
-
const DRAG_THRESHOLD_RATIO = 0.25
|
|
150
|
+
const DRAG_THRESHOLD_RATIO = 0.25;
|
|
139
151
|
|
|
140
152
|
// 무한 루프 순환을 고려하여 새 위치 계산
|
|
141
153
|
// 수학 설명: 모듈로는 항상 유효한 인덱스(0 ~ totalSlides-1)를 보장
|
|
142
|
-
const normalizedIndex = index % totalSlides
|
|
154
|
+
const normalizedIndex = index % totalSlides;
|
|
143
155
|
```
|
|
144
156
|
|
|
145
157
|
**❌ 쓸모없거나 없는 주석:**
|
|
158
|
+
|
|
146
159
|
```typescript
|
|
147
160
|
// 인덱스 증가
|
|
148
|
-
index
|
|
161
|
+
index++;
|
|
149
162
|
|
|
150
163
|
// 설명 없는 복잡한 로직 (주니어가 길을 잃음)
|
|
151
|
-
const idx = ((
|
|
164
|
+
const idx = ((curr % tot) + tot) % tot;
|
|
152
165
|
|
|
153
166
|
// 코드와 맞지 않는 주석
|
|
154
167
|
// 다음 슬라이드로 이동
|
|
155
|
-
return prev - 1
|
|
168
|
+
return prev - 1; // 실제로는 뒤로 이동!
|
|
156
169
|
```
|
|
157
170
|
|
|
158
171
|
**🔍 검색:**
|
|
172
|
+
|
|
159
173
|
- public 함수에 목적, 파라미터, 반환값 설명하는 JSDoc
|
|
160
174
|
- **주석에 예시** (주니어는 예시로 배움)
|
|
161
175
|
- "무엇"이 아닌 "왜"를 설명하는 인라인 주석
|
|
@@ -165,14 +179,16 @@ return prev - 1 // 실제로는 뒤로 이동!
|
|
|
165
179
|
- 고급 개념에 대한 학습 리소스 링크
|
|
166
180
|
|
|
167
181
|
**🌐 웹 검색:**
|
|
182
|
+
|
|
168
183
|
- "effective code documentation for junior developers"
|
|
169
184
|
- "JSDoc best practices examples"
|
|
170
185
|
|
|
171
186
|
---
|
|
172
187
|
|
|
173
|
-
### 4. 코드 구조
|
|
188
|
+
### 4. 코드 구조
|
|
174
189
|
|
|
175
190
|
**✅ 탐색하기 쉬움:**
|
|
191
|
+
|
|
176
192
|
```
|
|
177
193
|
src/
|
|
178
194
|
components/
|
|
@@ -191,6 +207,7 @@ src/
|
|
|
191
207
|
```
|
|
192
208
|
|
|
193
209
|
**파일 구성:**
|
|
210
|
+
|
|
194
211
|
- 관련 파일을 폴더로 그룹화
|
|
195
212
|
- 명확한 분리: components, hooks, utils, types
|
|
196
213
|
- public API용 index 파일
|
|
@@ -199,6 +216,7 @@ src/
|
|
|
199
216
|
- **일반적인 사용 사례 예시 폴더**
|
|
200
217
|
|
|
201
218
|
**❌ 혼란스러운 구조:**
|
|
219
|
+
|
|
202
220
|
- 패턴 없이 흩어진 파일
|
|
203
221
|
- 컴포넌트와 섞인 유틸
|
|
204
222
|
- 명확한 진입점 없음
|
|
@@ -206,26 +224,28 @@ src/
|
|
|
206
224
|
- 아키텍처 문서 없음
|
|
207
225
|
|
|
208
226
|
**🌐 웹 검색:**
|
|
227
|
+
|
|
209
228
|
- "React project structure best practices [current year]"
|
|
210
229
|
- "junior-friendly folder organization"
|
|
211
230
|
- "React codebase architecture for teams"
|
|
212
231
|
|
|
213
232
|
---
|
|
214
233
|
|
|
215
|
-
### 5. 타입 명확성
|
|
234
|
+
### 5. 타입 명확성
|
|
216
235
|
|
|
217
236
|
**✅ 자기 설명적 타입:**
|
|
237
|
+
|
|
218
238
|
```typescript
|
|
219
239
|
// 리터럴 타입으로 명확한 의도
|
|
220
|
-
type TransitionMode = 'idle' | 'animating' | 'jumping' | 'dragging'
|
|
240
|
+
type TransitionMode = 'idle' | 'animating' | 'jumping' | 'dragging';
|
|
221
241
|
|
|
222
242
|
// 잘 문서화된 인터페이스
|
|
223
243
|
interface CarouselProps {
|
|
224
244
|
/** 한 번에 보여줄 슬라이드 수 (기본값: 1) */
|
|
225
|
-
maxDisplayItems?: number
|
|
245
|
+
maxDisplayItems?: number;
|
|
226
246
|
|
|
227
247
|
/** 드래그 네비게이션 활성화 (기본값: true) */
|
|
228
|
-
isDraggable?: boolean
|
|
248
|
+
isDraggable?: boolean;
|
|
229
249
|
|
|
230
250
|
/**
|
|
231
251
|
* 슬라이드 변경 시 콜백
|
|
@@ -233,31 +253,34 @@ interface CarouselProps {
|
|
|
233
253
|
* @example
|
|
234
254
|
* onSlideChange={(index) => console.log(`슬라이드 ${index + 1} 표시 중`)}
|
|
235
255
|
*/
|
|
236
|
-
onSlideChange?: (newIndex: number) => void
|
|
256
|
+
onSlideChange?: (newIndex: number) => void;
|
|
237
257
|
}
|
|
238
258
|
```
|
|
239
259
|
|
|
240
260
|
**❌ 불명확한 타입:**
|
|
261
|
+
|
|
241
262
|
```typescript
|
|
242
|
-
type Mode = 'i' | 'a' | 'j' | 'd'
|
|
263
|
+
type Mode = 'i' | 'a' | 'j' | 'd'; // 이게 뭘 의미하지?
|
|
243
264
|
|
|
244
265
|
interface Props {
|
|
245
|
-
max?: number
|
|
246
|
-
drag?: boolean
|
|
247
|
-
cb?: (n: number) => void
|
|
266
|
+
max?: number; // 뭐의 최대?
|
|
267
|
+
drag?: boolean; // 드래그가 뭐?
|
|
268
|
+
cb?: (n: number) => void; // 이 콜백은 뭘 위한 거?
|
|
248
269
|
}
|
|
249
270
|
```
|
|
250
271
|
|
|
251
272
|
**🌐 웹 검색:**
|
|
273
|
+
|
|
252
274
|
- "TypeScript documentation best practices"
|
|
253
275
|
- "self-documenting types TypeScript"
|
|
254
276
|
- "TypeScript for beginners"
|
|
255
277
|
|
|
256
278
|
---
|
|
257
279
|
|
|
258
|
-
### 6. 학습 곡선 평가
|
|
280
|
+
### 6. 학습 곡선 평가
|
|
259
281
|
|
|
260
282
|
**평가 항목:**
|
|
283
|
+
|
|
261
284
|
- 주니어가 생산성을 갖추려면 몇 가지 개념을 배워야 하는가?
|
|
262
285
|
- 고급 패턴이 설명되어 있는가, 아니면 그냥 사용되는가?
|
|
263
286
|
- 점진적 공개가 있는가 (단순 → 복잡)?
|
|
@@ -265,6 +288,7 @@ interface Props {
|
|
|
265
288
|
- 명확한 문서가 있는가?
|
|
266
289
|
|
|
267
290
|
**✅ 낮은 학습 곡선:**
|
|
291
|
+
|
|
268
292
|
- 핵심 기능이 기본 패턴 사용
|
|
269
293
|
- 고급 패턴은 분리되고 문서화됨
|
|
270
294
|
- 일반적인 작업에 예시 제공
|
|
@@ -273,6 +297,7 @@ interface Props {
|
|
|
273
297
|
- 점진적 복잡도 증가
|
|
274
298
|
|
|
275
299
|
**❌ 높은 학습 곡선:**
|
|
300
|
+
|
|
276
301
|
- 설명 없이 모든 곳에 고급 패턴
|
|
277
302
|
- 예시나 문서 없음
|
|
278
303
|
- 일관성 없는 패턴 (반복으로 배울 수 없음)
|
|
@@ -280,13 +305,14 @@ interface Props {
|
|
|
280
305
|
- 온보딩 문서 없음
|
|
281
306
|
|
|
282
307
|
**🌐 웹 검색:**
|
|
308
|
+
|
|
283
309
|
- "developer onboarding best practices [current year]"
|
|
284
310
|
- "progressive disclosure in code"
|
|
285
311
|
- "reducing learning curve in codebases"
|
|
286
312
|
|
|
287
313
|
---
|
|
288
314
|
|
|
289
|
-
##
|
|
315
|
+
## 분석 프로세스
|
|
290
316
|
|
|
291
317
|
다음 체계적 접근법을 실행하세요:
|
|
292
318
|
|
|
@@ -330,6 +356,7 @@ interface Props {
|
|
|
330
356
|
- 기초부터 고급까지 진행 경로 생성
|
|
331
357
|
|
|
332
358
|
**도구 사용:**
|
|
359
|
+
|
|
333
360
|
- Glob: `**/*.ts`, `**/*.tsx`, `**/README.md`, `**/examples/**`, `**/*.test.ts`
|
|
334
361
|
- Grep: 복잡한 패턴, 긴 함수, 누락된 주석 검색
|
|
335
362
|
- Read: 플래그된 파일의 상세 가독성 분석
|
|
@@ -337,6 +364,7 @@ interface Props {
|
|
|
337
364
|
- WebFetch: 고급 패턴의 문서 가져오기
|
|
338
365
|
|
|
339
366
|
**웹 리서치 전략:**
|
|
367
|
+
|
|
340
368
|
- 발견된 각 복잡한 개념에 대한 학습 리소스 검색
|
|
341
369
|
- "explain [concept] for beginners" 검색
|
|
342
370
|
- 좋은 예시가 있는 공식 문서 찾기
|
|
@@ -347,443 +375,69 @@ interface Props {
|
|
|
347
375
|
|
|
348
376
|
## Output Format
|
|
349
377
|
|
|
350
|
-
|
|
378
|
+
````markdown
|
|
351
379
|
# 주니어 개발자 가독성 리포트
|
|
352
380
|
|
|
353
|
-
##
|
|
354
|
-
**프레임워크:** [Next.js / React / 등]
|
|
355
|
-
**주요 라이브러리:** [주니어가 이해해야 할 라이브러리 목록]
|
|
356
|
-
**사용된 고급 패턴:** [기초를 넘어서는 패턴 목록]
|
|
357
|
-
|
|
358
|
-
## 학습 곡선 평가
|
|
359
|
-
**생산성까지 예상 시간:** [X 일/주]
|
|
360
|
-
**주니어 친화성:** [우수 / 양호 / 도전적 / 어려움]
|
|
361
|
-
**가장 큰 학습 장벽:** [파일 참조와 함께 특정 개념]
|
|
362
|
-
|
|
363
|
-
---
|
|
381
|
+
## 발견 사항 요약
|
|
364
382
|
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
383
|
+
- **Critical:** N개 (즉시 수정 필요)
|
|
384
|
+
- **Recommended Improvements:** M개 (권장 개선)
|
|
385
|
+
- **Best Practices Found:** P개 (잘하고 있음)
|
|
368
386
|
|
|
369
387
|
---
|
|
370
388
|
|
|
371
|
-
##
|
|
389
|
+
## Critical Issues (즉시 수정)
|
|
372
390
|
|
|
373
|
-
###
|
|
374
|
-
- `[file:line]` - `functionName`: [왜 주니어에게 명확한지]
|
|
391
|
+
### 1. [Issue Name]
|
|
375
392
|
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
- **더 좋은 이름:** `betterDescriptiveName`
|
|
379
|
-
- **업계 표준:** [웹 검색 결과]
|
|
393
|
+
**위반 원칙:** [해당 원칙]
|
|
394
|
+
**파일:** [file:line]
|
|
380
395
|
|
|
381
|
-
|
|
382
|
-
|
|
396
|
+
**문제:**
|
|
397
|
+
[설명]
|
|
383
398
|
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
## 2. 함수 복잡도: X/10
|
|
387
|
-
|
|
388
|
-
### 복잡도 핫스팟
|
|
389
|
-
| 파일:라인 | 함수 | 라인 | 파라미터 | 중첩 | 인지 | 주니어 친화? |
|
|
390
|
-
|-----------|------|------|----------|------|------|--------------|
|
|
391
|
-
| [path:42] | funcName | 65 | 3 | 4 | High | ❌ 너무 복잡 |
|
|
392
|
-
| [path:120] | funcName | 18 | 2 | 2 | Low | ✅ 명확 |
|
|
393
|
-
|
|
394
|
-
### 주니어 가독성을 위한 리팩토링 제안
|
|
395
|
-
|
|
396
|
-
#### 1. **[file:line] - functionName**
|
|
397
|
-
**현재 상태:**
|
|
398
|
-
- 65줄, 4단계 중첩, 높은 인지 복잡도
|
|
399
|
-
- **주니어 영향:** 이해하는 데 30분 이상 소요
|
|
399
|
+
**현재 코드:**
|
|
400
400
|
|
|
401
|
-
**단순화된 접근:**
|
|
402
401
|
```typescript
|
|
403
|
-
//
|
|
404
|
-
// 각 함수는 명확한 이름으로 하나의 일만 수행
|
|
405
|
-
|
|
406
|
-
// Before: 하나의 복잡한 함수
|
|
407
|
-
function complexProcess(a, b, c) { /* 65줄 */ }
|
|
408
|
-
|
|
409
|
-
// After: 명확한 단계로 분리
|
|
410
|
-
function processData(a, b, c) {
|
|
411
|
-
const validated = validateInputs(a, b, c) // 명확한 1단계
|
|
412
|
-
const transformed = transformData(validated) // 명확한 2단계
|
|
413
|
-
return applyBusinessRules(transformed) // 명확한 3단계
|
|
414
|
-
}
|
|
402
|
+
// 문제 코드
|
|
415
403
|
```
|
|
404
|
+
````
|
|
416
405
|
|
|
417
|
-
|
|
418
|
-
- 각 함수를 독립적으로 이해 가능
|
|
419
|
-
- 명확한 로직 진행
|
|
420
|
-
- 테스트 및 디버그 용이
|
|
421
|
-
- 반복을 통해 패턴 학습 가능
|
|
422
|
-
|
|
423
|
-
**학습 리소스:** [함수 복잡도 관련 WebSearch 링크]
|
|
406
|
+
**수정 방법:**
|
|
424
407
|
|
|
425
|
-
---
|
|
426
|
-
|
|
427
|
-
## 3. 주석 품질: X/10
|
|
428
|
-
|
|
429
|
-
### 잘 문서화된 영역
|
|
430
|
-
- `[file:line]` - [왜 주니어에게 도움이 되는 주석인지]
|
|
431
|
-
- 예시 포함
|
|
432
|
-
- "무엇"이 아닌 "왜" 설명
|
|
433
|
-
- 학습 리소스 링크
|
|
434
|
-
|
|
435
|
-
### 누락/부실 주석
|
|
436
|
-
|
|
437
|
-
#### Critical Gap: [file:line] - 복잡한 알고리즘
|
|
438
|
-
**현재 상태:**
|
|
439
|
-
```typescript
|
|
440
|
-
// 설명 없는 복잡한 로직
|
|
441
|
-
const idx = (((curr % tot) + tot) % tot)
|
|
442
|
-
```
|
|
443
|
-
|
|
444
|
-
**주니어 관점:**
|
|
445
|
-
- ❌ 이게 뭘 하는지 모름
|
|
446
|
-
- ❌ 왜 모듈로가 세 번?
|
|
447
|
-
- ❌ 어떤 문제를 해결하는지?
|
|
448
|
-
|
|
449
|
-
**개선된 버전:**
|
|
450
408
|
```typescript
|
|
451
|
-
|
|
452
|
-
* 음수 순환을 처리하기 위해 인덱스 정규화
|
|
453
|
-
*
|
|
454
|
-
* 문제: JavaScript 모듈로는 음수를 반환할 수 있음
|
|
455
|
-
* 예: -1 % 5 = -1 (우리는 4를 원함)
|
|
456
|
-
*
|
|
457
|
-
* 해결: 최종 모듈로 전에 total 추가
|
|
458
|
-
* 예: ((-1 % 5) + 5) % 5 = ((-1) + 5) % 5 = 4 ✓
|
|
459
|
-
*
|
|
460
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder
|
|
461
|
-
*/
|
|
462
|
-
const normalizedIndex = ((currentIndex % totalSlides) + totalSlides) % totalSlides
|
|
409
|
+
// 수정된 코드
|
|
463
410
|
```
|
|
464
411
|
|
|
465
|
-
**주니어를 위한 학습 리소스:**
|
|
466
|
-
- [모듈로 연산자 MDN 링크]
|
|
467
|
-
- [순환 로직 튜토리얼]
|
|
468
|
-
|
|
469
|
-
---
|
|
470
|
-
|
|
471
|
-
## 4. 코드 구조: X/10
|
|
472
|
-
|
|
473
|
-
### ✅ 강점
|
|
474
|
-
- [탐색하기 쉬운 이유]
|
|
475
|
-
|
|
476
|
-
### ❌ 주니어의 고통 포인트
|
|
477
|
-
- [구조가 혼란스러운 이유]
|
|
478
|
-
- **업계 표준:** [프로젝트 구조 WebSearch 결과]
|
|
479
|
-
- **제안된 개선:**
|
|
480
|
-
```
|
|
481
|
-
src/
|
|
482
|
-
components/
|
|
483
|
-
MyFeature/
|
|
484
|
-
README.md ← 추가! 기능 설명
|
|
485
|
-
examples/ ← 추가! 일반적인 사용 예시
|
|
486
|
-
basic.tsx
|
|
487
|
-
advanced.tsx
|
|
488
|
-
__tests__/
|
|
489
|
-
index.tsx
|
|
490
|
-
```
|
|
491
|
-
|
|
492
|
-
**학습 리소스:** [프로젝트 구조 가이드 링크]
|
|
493
|
-
|
|
494
412
|
---
|
|
495
413
|
|
|
496
|
-
##
|
|
414
|
+
## Recommended Improvements (권장 개선)
|
|
497
415
|
|
|
498
|
-
|
|
499
|
-
- `[file:line]` - [설명이 필요 없는 타입]
|
|
500
|
-
|
|
501
|
-
### ❌ 주니어를 혼란스럽게 할 불명확한 타입
|
|
502
|
-
|
|
503
|
-
#### [file:line] - 암호 같은 제네릭 타입
|
|
504
|
-
**현재:**
|
|
505
|
-
```typescript
|
|
506
|
-
type Mapper<T, U> = (x: T) => U // 뭐야? 언제 쓰지?
|
|
507
|
-
```
|
|
508
|
-
|
|
509
|
-
**주니어 친화적 버전:**
|
|
510
|
-
```typescript
|
|
511
|
-
/**
|
|
512
|
-
* 한 타입을 다른 타입으로 변환하는 함수
|
|
513
|
-
*
|
|
514
|
-
* @template InputType - 시작하는 데이터 타입
|
|
515
|
-
* @template OutputType - 끝나는 데이터 타입
|
|
516
|
-
*
|
|
517
|
-
* @example
|
|
518
|
-
* // 사용자 객체를 표시 이름으로 변환
|
|
519
|
-
* const userToName: Mapper<User, string> = (user) => user.fullName
|
|
520
|
-
*
|
|
521
|
-
* @example
|
|
522
|
-
* // 숫자를 퍼센트 문자열로 변환
|
|
523
|
-
* const toPercent: Mapper<number, string> = (num) => `${num * 100}%`
|
|
524
|
-
*/
|
|
525
|
-
type Mapper<InputType, OutputType> = (input: InputType) => OutputType
|
|
526
|
-
```
|
|
527
|
-
|
|
528
|
-
**학습 리소스:**
|
|
529
|
-
- [TypeScript 제네릭 초보자 가이드 - WebFetch 결과]
|
|
530
|
-
- [언제 제네릭을 사용하는지 - 튜토리얼]
|
|
416
|
+
[같은 형식]
|
|
531
417
|
|
|
532
418
|
---
|
|
533
419
|
|
|
534
|
-
##
|
|
420
|
+
## Best Practices Found (잘하고 있음)
|
|
535
421
|
|
|
536
|
-
###
|
|
537
|
-
| 개념 | 난이도 | 사용 위치 | 학습 리소스 |
|
|
538
|
-
|------|--------|-----------|-------------|
|
|
539
|
-
| 커스텀 훅 | Medium | [파일들] | [React 문서 + 튜토리얼] |
|
|
540
|
-
| Context API | Medium | [파일들] | [React 문서] |
|
|
541
|
-
| TypeScript 제네릭 | Hard | [파일들] | [TypeScript 핸드북] |
|
|
542
|
-
| Render Props | Hard | [파일들] | [패턴 가이드] |
|
|
422
|
+
### [Good Pattern]
|
|
543
423
|
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
**더 좋음:** ✅ 단순하게 시작, 점진적으로 복잡도 도입
|
|
424
|
+
**원칙:** [해당 원칙]
|
|
425
|
+
**파일:** [file:line]
|
|
547
426
|
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
2. **2주차:** State와 간단한 훅 → [공부할 파일들]
|
|
551
|
-
3. **3주차:** 커스텀 훅 → [공부할 파일들]
|
|
552
|
-
4. **4주차:** Context와 고급 패턴 → [공부할 파일들]
|
|
427
|
+
**잘한 점:**
|
|
428
|
+
[설명]
|
|
553
429
|
|
|
554
430
|
---
|
|
555
431
|
|
|
556
|
-
##
|
|
557
|
-
|
|
558
|
-
### 시나리오 1: "새 검증 규칙 추가"
|
|
559
|
-
|
|
560
|
-
**주니어 난이도:** [Easy/Medium/Hard]
|
|
561
|
-
|
|
562
|
-
**단계별 주니어 경험:**
|
|
432
|
+
## Metrics
|
|
563
433
|
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
434
|
+
| 지표 | 수치 |
|
|
435
|
+
| ----------------------- | ---- |
|
|
436
|
+
| 평균 함수 복잡도 | X |
|
|
437
|
+
| 문서 커버리지 | Y% |
|
|
438
|
+
| 자기 설명적 이름 비율 | N/M |
|
|
439
|
+
| 주니어 친화적 함수 비율 | Z% |
|
|
568
440
|
|
|
569
|
-
2. **검증 패턴 이해:** [Easy/Medium/Hard]
|
|
570
|
-
- 현재: 5개 파일에 흩어진 검증
|
|
571
|
-
- 주니어 혼란: "어떤 파일을 수정해야 하지?"
|
|
572
|
-
- 개선: 예시가 있는 중앙화된 검증
|
|
573
|
-
- **학습 리소스:** [검증 패턴 링크]
|
|
574
|
-
|
|
575
|
-
3. **코드 작성:** [Easy/Medium/Hard]
|
|
576
|
-
- 현재: 따라할 예시 없음
|
|
577
|
-
- 주니어 행동: 복붙하고 되기를 바람
|
|
578
|
-
- 개선: 일반적인 패턴이 있는 예시 폴더 추가
|
|
579
|
-
|
|
580
|
-
4. **변경 테스트:** [Easy/Medium/Hard]
|
|
581
|
-
- 현재: 검증용 테스트 예시 없음
|
|
582
|
-
- 주니어 행동: 수동 테스트만
|
|
583
|
-
- 개선: 패턴을 보여주는 테스트 예시
|
|
584
|
-
|
|
585
|
-
**예상 시간:**
|
|
586
|
-
- **현재 상태:** 4-6시간 (많은 시행착오)
|
|
587
|
-
- **개선 후:** 1-2시간 (명확한 경로)
|
|
588
|
-
|
|
589
|
-
---
|
|
590
|
-
|
|
591
|
-
## 주니어 친화성을 위한 Top 5 개선사항
|
|
592
|
-
|
|
593
|
-
### 1. 문서와 예시 추가
|
|
594
|
-
**영향:** ⭐⭐⭐⭐⭐ (최고)
|
|
595
|
-
**노력:** Low (2-4시간)
|
|
596
|
-
|
|
597
|
-
**추가할 것:**
|
|
598
|
-
- `src/README.md` - 아키텍처 개요
|
|
599
|
-
- `src/components/README.md` - 컴포넌트 패턴
|
|
600
|
-
- `src/examples/` - 일반적인 사용 사례
|
|
601
|
-
|
|
602
|
-
**예시 구조:**
|
|
603
|
-
```markdown
|
|
604
|
-
# 컴포넌트 아키텍처
|
|
605
|
-
|
|
606
|
-
## 개요
|
|
607
|
-
[컴포넌트들이 어떻게 함께 동작하는지 간단한 설명]
|
|
608
|
-
|
|
609
|
-
## 일반적인 패턴
|
|
610
|
-
[예시 링크]
|
|
611
|
-
|
|
612
|
-
## 새 기능 추가
|
|
613
|
-
1. [1단계]
|
|
614
|
-
2. [2단계]
|
|
615
|
-
...
|
|
616
|
-
```
|
|
617
|
-
|
|
618
|
-
**학습 리소스:** [웹 리서치에서 찾은 문서 베스트 프랙티스]
|
|
619
|
-
|
|
620
|
-
### 2. 복잡한 함수 단순화
|
|
621
|
-
**영향:** ⭐⭐⭐⭐⭐
|
|
622
|
-
**노력:** Medium (1-2일)
|
|
623
|
-
|
|
624
|
-
**대상 함수:**
|
|
625
|
-
- [file:line] - 3개의 작은 함수로 분리
|
|
626
|
-
- [file:line] - 복잡한 로직 추출
|
|
627
|
-
- [file:line] - 단계별 주석 추가
|
|
628
|
-
|
|
629
|
-
**따라야 할 패턴:** [함수 추출 가이드 링크]
|
|
630
|
-
|
|
631
|
-
### 3. 주석 품질 개선
|
|
632
|
-
**영향:** ⭐⭐⭐⭐
|
|
633
|
-
**노력:** Medium (4-6시간)
|
|
634
|
-
|
|
635
|
-
**집중 영역:**
|
|
636
|
-
- public API에 예시가 있는 JSDoc 추가
|
|
637
|
-
- 복잡한 알고리즘 단계별 설명
|
|
638
|
-
- 고급 개념에 학습 리소스 링크 추가
|
|
639
|
-
|
|
640
|
-
**템플릿:**
|
|
641
|
-
```typescript
|
|
642
|
-
/**
|
|
643
|
-
* [간단한 설명]
|
|
644
|
-
*
|
|
645
|
-
* [왜 존재하는지 / 어떤 문제를 해결하는지]
|
|
646
|
-
*
|
|
647
|
-
* @example
|
|
648
|
-
* [사용법을 보여주는 코드 예시]
|
|
649
|
-
*
|
|
650
|
-
* @see [관련 문서 링크]
|
|
651
|
-
*/
|
|
652
|
-
```
|
|
653
|
-
|
|
654
|
-
### 4. 타입 문서 개선
|
|
655
|
-
**영향:** ⭐⭐⭐
|
|
656
|
-
**노력:** Low (2-3시간)
|
|
657
|
-
|
|
658
|
-
**액션:**
|
|
659
|
-
- 복잡한 타입에 JSDoc 추가
|
|
660
|
-
- 설명적인 타입 이름 사용
|
|
661
|
-
- 타입 주석에 예시 추가
|
|
662
|
-
|
|
663
|
-
### 5. 학습 경로 문서 생성
|
|
664
|
-
**영향:** ⭐⭐⭐⭐
|
|
665
|
-
**노력:** Medium (4-6시간)
|
|
666
|
-
|
|
667
|
-
**생성:** `ONBOARDING.md`
|
|
668
|
-
```markdown
|
|
669
|
-
# 온보딩 가이드
|
|
670
|
-
|
|
671
|
-
## Day 1-2: 기초 이해
|
|
672
|
-
- [파일] 읽기
|
|
673
|
-
- [개념] 공부
|
|
674
|
-
- [예시] 실행
|
|
675
|
-
|
|
676
|
-
## Week 1: 핵심 패턴
|
|
677
|
-
- [점진적 학습 경로]
|
|
678
|
-
|
|
679
|
-
## 리소스
|
|
680
|
-
- [웹 리서치에서 큐레이션된 목록]
|
|
681
|
-
```
|
|
682
|
-
|
|
683
|
-
---
|
|
684
|
-
|
|
685
|
-
## 큐레이션된 학습 리소스
|
|
686
|
-
|
|
687
|
-
이 코드베이스에서 사용된 개념 기반:
|
|
688
|
-
|
|
689
|
-
### 필수 (여기서 시작)
|
|
690
|
-
- [리소스 1 - WebSearch에서] - [개념] 커버
|
|
691
|
-
- [리소스 2 - WebFetch에서] - [패턴] 공식 문서
|
|
692
|
-
|
|
693
|
-
### 중급 (2-3주차)
|
|
694
|
-
- [리소스 3] - [고급 패턴] 심층 학습
|
|
695
|
-
- [리소스 4] - [개념] 베스트 프랙티스
|
|
696
|
-
|
|
697
|
-
### 고급 (2개월 이후)
|
|
698
|
-
- [리소스 5] - [복잡한 패턴] 마스터
|
|
699
|
-
- [리소스 6] - 아키텍처 패턴
|
|
700
|
-
|
|
701
|
-
### 업계 코드 예시
|
|
702
|
-
- [오픈 소스 프로젝트 예시 - 웹 리서치에서]
|
|
703
|
-
- [튜토리얼 시리즈]
|
|
704
|
-
|
|
705
|
-
---
|
|
706
|
-
|
|
707
|
-
## 예상 학습 곡선
|
|
708
|
-
|
|
709
|
-
### 현재 상태
|
|
710
|
-
**주니어 생산성까지 시간:** 3-4주
|
|
711
|
-
**1개월 후 자신감 수준:** Low-Medium
|
|
712
|
-
|
|
713
|
-
**장벽:**
|
|
714
|
-
1. [file:line과 함께 특정 장벽]
|
|
715
|
-
2. [또 다른 장벽]
|
|
716
|
-
3. [또 다른 장벽]
|
|
717
|
-
|
|
718
|
-
### 개선 후
|
|
719
|
-
**주니어 생산성까지 시간:** 1-2주
|
|
720
|
-
**1개월 후 자신감 수준:** Medium-High
|
|
721
|
-
|
|
722
|
-
**이유:**
|
|
723
|
-
- 명확한 문서가 시행착오 감소
|
|
724
|
-
- 예시가 따라할 템플릿 제공
|
|
725
|
-
- 단순한 함수가 이해하기 쉬움
|
|
726
|
-
- 학습 리소스가 지식 갭 채움
|
|
727
|
-
|
|
728
|
-
---
|
|
729
|
-
|
|
730
|
-
## 업계 비교
|
|
731
|
-
|
|
732
|
-
### 귀하의 코드베이스 vs 업계 평균
|
|
733
|
-
|
|
734
|
-
**주니어 친화성 지표:**
|
|
735
|
-
| 지표 | 귀하의 코드 | 업계 평균 | 업계 최고 |
|
|
736
|
-
|------|-------------|-----------|-----------|
|
|
737
|
-
| 평균 함수 복잡도 | X | 5 | 3 |
|
|
738
|
-
| 문서 커버리지 | Y% | 60% | 80% |
|
|
739
|
-
| 예시 코드 | 적음 | 일부 | 광범위 |
|
|
740
|
-
| 온보딩 시간 | Z주 | 2-3주 | 1주 |
|
|
741
|
-
|
|
742
|
-
**출처:** [업계 표준 웹 리서치]
|
|
743
|
-
|
|
744
|
-
---
|
|
745
|
-
|
|
746
|
-
## 주니어 개발자 경고 신호
|
|
747
|
-
|
|
748
|
-
### 🚩 발견된 Critical 이슈
|
|
749
|
-
- [file:line과 함께 이슈]
|
|
750
|
-
- **왜 주니어에게 문제인지:** [특정 혼란]
|
|
751
|
-
- **수정 방법:** [구체적 해결책]
|
|
752
|
-
- **학습 리소스:** [링크]
|
|
753
|
-
|
|
754
|
-
### 항상 리포트할 표준 경고 신호
|
|
755
|
-
- 🚩 README나 설정 문서 없음
|
|
756
|
-
- 🚩 설명 없는 매직 넘버
|
|
757
|
-
- 🚩 한 번만 사용된 패턴 (반복으로 배울 수 없음)
|
|
758
|
-
- 🚩 주석에 코드 예시 없음
|
|
759
|
-
- 🚩 설명 없는 고급 TypeScript
|
|
760
|
-
- 🚩 콜백 지옥 (3레벨 이상)
|
|
761
|
-
- 🚩 에러 처리 없음 (주니어가 뭐가 실패할 수 있는지 모름)
|
|
762
|
-
- 🚩 코드 동작을 보여주는 테스트 없음
|
|
763
|
-
|
|
764
|
-
---
|
|
765
|
-
|
|
766
|
-
## 성공 지표
|
|
767
|
-
|
|
768
|
-
주니어 친화성 개선을 측정하기 위해 추적할 지표:
|
|
769
|
-
|
|
770
|
-
**Before:**
|
|
771
|
-
- 온보딩 시간: X주
|
|
772
|
-
- 첫 달 질문: Y개
|
|
773
|
-
- 첫 PR 시간: Z일
|
|
774
|
-
- 문서 커버리지: A%
|
|
775
|
-
|
|
776
|
-
**Target:**
|
|
777
|
-
- 온보딩 시간: <2주
|
|
778
|
-
- 첫 달 질문: <10개 (좋은 문서 = 적은 질문)
|
|
779
|
-
- 첫 PR 시간: <3일
|
|
780
|
-
- 문서 커버리지: >70%
|
|
781
|
-
|
|
782
|
-
**측정 방법:**
|
|
783
|
-
- 새 팀원 설문
|
|
784
|
-
- 첫 PR까지 시간 추적
|
|
785
|
-
- 문서 사용량 모니터링
|
|
786
|
-
- 채팅/코드 리뷰에서 질문 수 세기
|
|
787
441
|
```
|
|
788
442
|
|
|
789
443
|
---
|
|
@@ -806,13 +460,6 @@ type Mapper<InputType, OutputType> = (input: InputType) => OutputType
|
|
|
806
460
|
- 리소스가 최신이고 고품질인지 확인
|
|
807
461
|
- 가장 영향력 있는 학습 장벽에 최대 5-7개 웹 요청
|
|
808
462
|
|
|
809
|
-
**점수 가이드라인:**
|
|
810
|
-
- 9-10: 우수 - 주니어 친화적, 최소 학습 곡선, 훌륭한 문서
|
|
811
|
-
- 7-8: 양호 - 대부분 명확, 일부 영역 개선 필요
|
|
812
|
-
- 5-6: 개선 필요 - 주니어에게 상당한 장벽
|
|
813
|
-
- 3-4: 혼란스러움 - 가파른 학습 곡선, 많은 불명확한 영역, 부실한 문서
|
|
814
|
-
- 1-2: Critical - 주니어 개발자에게 적대적, 문서 없음
|
|
815
|
-
|
|
816
463
|
---
|
|
817
464
|
|
|
818
465
|
## References
|
|
@@ -820,3 +467,4 @@ type Mapper<InputType, OutputType> = (input: InputType) => OutputType
|
|
|
820
467
|
- [React Official Docs](https://react.dev)
|
|
821
468
|
- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
|
|
822
469
|
- [Clean Code Naming Guide](https://google.github.io/styleguide/)
|
|
470
|
+
```
|