-
Notifications
You must be signed in to change notification settings - Fork 53
[5팀 김채영] Chapter 1-2. AI와 테스트를 활용한 안정적인 기능 개발 #104
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
rlacodud
wants to merge
42
commits into
hanghae-plus:main
Choose a base branch
from
rlacodud:main
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- TEST_GUIDE.md (700줄) 메인 가이드 추가 - TEST_GUIDE_QUICK.md (500줄) 빠른 참조 가이드 추가
- patterns.md: AAA, Given-When-Then 패턴 상세 설명 - examples.md: 실전 테스트 예시 모음 - antipatterns.md: 흔한 실수와 해결책
- AI Agent 역할 및 책임 정의 - 의사결정 트리 및 품질 지표 제공 - 코드 생성 템플릿 포함 - 자동 감지 및 회피 규칙 설정
- test-metrics.md: 측정 가능한 품질 기준 정의 - 핵심 메트릭: 커버리지, 변이 점수, 결함 탐지율 - 보조 지표: Flakiness, 중복률, CI 안정성 - 품질 개선 가이드 - execution-log.md: TDD REFACTOR 단계 로그 템플릿 - 메트릭 측정 결과 - AI Agent 평가 로그 - 리팩토링 개선 포인트 - 전체 품질 평가
- 6개 전문 에이전트 정의 (페르소나 포함) - OrchestratorAgent: 워크플로우 제어 - SpecAgent: 전체 스택 명세 작성 (UI/훅/API/유틸) - TestAgent: 유닛/훅/통합/API 테스트 생성 - CodeAgent: 전체 스택 구현 (UI + 훅 + API + 유틸) - RefactorReviewAgent: 품질 검증 - GitAgent: 커밋/PR 자동화 - 각 에이전트 페르소나: 성격, 커뮤니케이션 스타일, 작업 원칙, IF-THEN 규칙 - 실제 기능 구현 예시: 반복 일정 기능 (5가지 시나리오) - UI 컴포넌트, React 훅, API 엔드포인트, 유틸 함수 포함
- 9개 가이드 문서를 네비게이션 테이블에 추가 - 문서 구조 시각화 업데이트 - 각 문서별 상세 설명 추가 - 6가지 사용 시나리오 포함: 1. TDD 처음 시작하는 개발자 2. AI Agent 설정 3. 팀 온보딩 4. 테스트 품질 개선 5. TDD REFACTOR 단계 평가 6. AI Agent 기반 TDD 자동화 - 학습 로드맵 업데이트 (초급/중급/고급) - 북마크 추천 추가 - 기여 가이드 업데이트
## 추가 파일 ### 1. Agent 설정 (config/agent-config.yml) - 6개 AI Agent 설정: Orchestrator, Spec, Test, Code, Refactor, Git - 프로젝트 구조 반영 (pnpm, *.spec.ts, 전체 스택) - RED → GREEN → REFACTOR → COMMIT 워크플로우 - 품질 게이트: Coverage ≥80%, Mutation ≥70% ### 2. 프롬프트 템플릿 (docs/test-guides/prompt-templates.md) - 즉시 복사-붙여넣기 가능한 Agent 프롬프트 6개 - SpecAgent: 전체 스택 명세 생성 - TestAgent: 유닛/훅/통합/API 테스트 생성 - CodeAgent: UI/훅/API/유틸 전체 스택 구현 - RefactorReviewAgent: 품질 검증 및 개선 - GitAgent: Conventional Commits 생성 - 사용법: Cursor Composer에 복사-붙여넣기 ### 3. 요구사항 (docs/requirements.md) - 반복 일정 5가지 기능 명세 - 엣지 케이스 정의 (31일 매월, 윤년 29일) - 프로젝트 구조 및 품질 기준 ### 4. 상태 추적 (state/workflow-status.template.json) - 실시간 워크플로우 상태 추적 템플릿 - 단계별 진행 상황 및 메트릭 기록 ### 5. 문서 업데이트 (docs/README.md) - prompt-templates.md 추가 - AI Agent 사용 시나리오 개선
- TypeScript 타입 정의 (automation/types.ts) - Agent 설정 (config/agent-config.yml) - 의존성 추가 (openai, anthropic-ai, yaml, zod 등) - 스크립트 추가 (agent:run, agent:status, agent:reset)
- logger: 로깅 시스템 (파일 + 콘솔) - config-loader: YAML 설정 로더 (Zod 검증) - file-manager: 파일 읽기/쓰기 (glob 패턴 지원) - ai-client: OpenAI/Anthropic API 통합 - command-runner: 터미널 명령어 실행 - status-tracker: 워크플로우 상태 관리
- approval-manager: 2단계 승인 프로세스 (커밋/푸시) - git-executor: Git 명령 실행 (스테이징, 커밋, 푸시) - 사용자 안전 장치 (거부 시 안내 메시지) - 예시 및 문서화 안전 기능: - 커밋 전 메시지 + 파일 목록 확인 - 푸시 전 최종 승인 - 단계별 중단 가능
Agent 구조: - BaseAgent: 공통 기능 (AI 호출, 상태 관리, 로깅) 5가지 Agent: - SpecAgent: 요구사항 → 전체 스택 명세 생성 - TestAgent: 명세 → 실패하는 테스트 작성 (RED) - CodeAgent: 테스트 → 최소 구현 (GREEN) * UI (App.tsx), 훅, API (server.js), 유틸 구현 - RefactorReviewAgent: 품질 검토 및 리팩토링 제안 - GitAgent: 커밋 메시지 생성 (대화형 승인 연동) 프롬프트 기반: docs/test-guides/prompt-templates.md
- WorkflowManager: TDD 단계 관리 (SPEC → RED → GREEN → REFACTOR → COMMIT) - Orchestrator: Agent 조정 및 실행 * Agent 초기화 및 컨텍스트 생성 * 단계별 순차 실행 * 에러 처리 및 리소스 정리 단계 전환: - 각 단계의 entry/exit 조건 검증 - 진행률 추적 - 상태 업데이트
실행 명령어: - pnpm agent:run: 전체 워크플로우 실행 - pnpm agent:status: 실시간 상태 조회 - pnpm agent:reset: 워크플로우 초기화 - pnpm agent:commit: 대화형 커밋 데모 기능: - 환경 변수 검증 (API 키) - 배너 및 진행 상황 표시 - 에러 처리 및 가이드 - 사용자 친화적 출력 (chalk) 문서화: automation/README.md
- 각 단계(SPEC, RED, GREEN, REFACTOR, COMMIT) 시작 전 사용자 승인 요청 - 진행 내용, 예상 결과, 주의사항, 영향받는 파일 정보 표시 - 선택지: Proceed(진행) / Skip(건너뛰기) / Abort(중단) - 기존 커밋/푸시 승인 프로세스 유지
- server.js 자동 제외 (프론트엔드 TDD는 MSW 모킹 사용) - 코드 생성 후 자동 lint 검사 실행 - 마크다운 코드 펜스 제거 로직 개선 - agent-config.yml 출력 명세에서 server.js 제거
- automation/README.md에 대화형 모드 사용법 추가 - 의존성 업데이트 (pnpm-lock.yaml)
- orchestrator.provider: openai → anthropic - orchestrator.model: claude-sonnet-4-20250514 - temperature 조정(0.3 → 0.2)
- automation/agents/spec-agent.ts - “기능 n” 넘버링 유도 및 기능별 TDD 사이클 섹션 추가 - automation/agents/test-agent.ts - spec.md에서 “### 기능 n:” 섹션 추출 - state/workflow-status.json의 current_feature_number 읽어서 현재 기능만 테스트 생성 - automation/agents/code-agent.ts - spec.md에서 “### 기능 n:” 섹션 추출 - state/workflow-status.json의 current_feature_number 읽어서 현재 기능만 구현 - state/workflow-status.template.json - feature.current_feature_number, total_features, completed_features 필드 추가
- 훅 동작 테스트 (src/__tests__/hooks/medium.useEventForm.spec.ts) - 초기 상태, 반복 설정, 초기 이벤트 반영, resetForm - 유틸 동작 테스트 (src/__tests__/unit/medium.repeatUtils.spec.ts) - daily / weekly / monthly(31일) / yearly(윤년) / 겹침 무시 검증 - 테스트는 모두 실패 상태 (RED) 유지
- useEventForm 훅에서 반복 일정 상태(repeatType, isRepeating, interval, endDate) 로직 구현 - generateRecurringEvents에서 반복 규칙(daily/weekly/monthly/yearly) 처리 및 윤년/31일 규칙 반영 - 모든 RED 테스트가 통과된 상태
- yearly 반복 로직을 cursor 기반으로 재구성하여 윤년 계산 안정화 - 종료일(endDate) 비교 조건 명확화 (cursor > end) - 함수별 상세 한글 주석 작성으로 가독성 향상
- 주/월 뷰 범위 계산 후 반복 일정 발생분을 전개하여 렌더링 - 검색/뷰 필터가 전개된 일정(expandedEvents)에 적용되도록 수정 - 반복 옵션 UI 활성화 및 훅 setter 연결
- 캘린더 뷰에서 반복 일정과 단일 일정을 구분하는 테스트 추가 - 아직 기능 미구현 상태로 테스트 실패(RED) 확인
- 반복 일정에 대해 반복 아이콘 표시 추가 - 단일 일정은 아이콘이 표시되지 않도록 조건 처리 - 반복 일정 표시 관련 통합 테스트(GREEN) 통과 확인
- RepeatIcon 컴포넌트 추가 (data-testid 부여 옵션) - 주/월 뷰, 리스트에서 RepeatIcon 사용 - 테스트 중복 아이콘 감지 문제 해결
- unit: 종료일 미설정 시 2025-12-31까지만 전개 - integration: 종료일 지정 시 종료일 이전 발생만 표시, 무종료는 12월까지만
- repeatUtils: endDate 없으면 2025-12-31까지 전개, endDate 있으면 그대로 사용
- getEffectiveEndDate: endDate 제공 시 그대로 사용, 미지정 시 2025-12-31 적용 - yearly(2/29) 전개가 2028/2032 생성되도록 수정
- 반복 일정 삭제 시 확인 다이얼로그 노출 테스트 - 단일 삭제(예 선택) 시 해당 일정만 삭제되는지 검증 - 전체 삭제(아니오 선택) 시 반복 일정의 모든 일정이 삭제되는지 검증
- 반복 일정 삭제 시 확인 다이얼로그 표시 - 단일 삭제: deletedRecurringDates 상태로 특정 날짜 인스턴스만 필터링 - 전체 삭제: DELETE /api/recurring-events/:repeatId API 호출로 모든 반복 일정 삭제 - repeat.id가 없는 경우에도 모달 표시 및 처리 - useCallback과 useMemo를 활용한 리렌더링 최적화 - 전체 삭제 시 deletedRecurringDates 상태 정리
- 반복 일정 삭제 핸들러 함수 분리 - handleRecurringDeleteClick: 삭제 버튼 클릭 처리 - handleSingleDelete: 단일 삭제 로직 분리 - handleDeleteAll: 전체 삭제 로직 분리 - 반복 일정 관련 유틸리티 함수 모듈화 (src/utils/recurringEventUtils.ts) - findOriginalEvent: 원본 이벤트 찾기 - getOriginalEventId: 전개된 이벤트에서 원본 ID 추출 - isRecurringEventType: 반복 일정 여부 확인 - getRepeatId: repeat.id 안전하게 추출 - 상태 관리 헬퍼 함수 분리 - clearDeletedRecurringDates: 삭제된 날짜 추적 정보 정리 - addDeletedRecurringDate: 단일 삭제된 날짜 추가 - 성능 최적화 - useCallback을 활용한 함수 메모이제이션 - 중복 코드 제거로 코드 라인 수 감소 - 타입 안정성 개선 - repeat.id 접근을 유틸리티 함수로 캡슐화 - 타입 단언 코드 중복 제거
- 반복 일정 수정 시 다이얼로그 표시 - "예" 선택 시: 단일 일정으로 변경, 반복 아이콘 제거 - "아니오" 선택 시: 전체 반복 일정 수정, 반복 아이콘 유지 - vi.setSystemTime으로 테스트 날짜를 2025-10-15로 고정 - 전체 수정 테스트에서 수정된 이벤트 개수와 반복 아이콘 개수 일치 확인
- handleSingleEdit: 단일 수정 처리, editedRecurringDates에 날짜 추가 - handleEditAll: 전체 수정 처리, editedRecurringDates 초기화 - addOrUpdateEvent에서 editingRecurringEvent로 원본 인식 - 단일 수정: POST로 새 이벤트 생성 (겹침 체크 생략) - 전체 수정: repeatId 있으면 PUT /api/recurring-events/:id, 없으면 PUT /api/events/:id - expandEventsForView에서 editedRecurringDates로 단일 수정 날짜 필터링 - handleSingleEdit에서 editingRecurringEvent 상태 유지 - addOrUpdateEvent에서 단일 수정 후 상태 정리
- 단일 수정/전체 수정의 중복된 상태 초기화 로직을 공통 함수로 추출 - fetch 호출과 에러 처리를 useEventOperations 훅 활용으로 통합 - editedRecurringDates 상태 관리 일관성 개선 - addOrUpdateEvent 함수의 복잡도 감소를 위한 분기 정리
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
과제 체크포인트
필수 스펙
기본 과제
공통 제출
기본 과제(Easy)
심화과제
AI agent를 생성하고 SPEC => RED 단계까지 진행되도록 구현했습니다.
심화 과제
과제 셀프회고
기술적 성장
1. TDD에 대한 이해와 적용
TDD(Test-Driven Development)는 단순히 테스트를 먼저 작성하는 개발 방식이 아니라
개발의 방향을 명확히 하는 사고 체계라는 점을 이번 과제를 통해 체감했습니다.
실패하는 테스트를 먼저 작성한다 = 무엇을 만들지부터 정확히 정의한다
테스트를 먼저 작성함으로써,
코드를 짜기 위한 설계가 아니라, 테스트를 만족시키는 설계가 자연스럽게 만들어졌습니다.
이는 AI가 코드를 생성할 때도 마찬가지로, 테스트 명세가 명확해야만 정확한 코드를 얻을 수 있다는 사실을 증명했습니다.
2. AI Agent 개념 이해와 역할 설계
AI Agent는 단일 모델이 아닌, 역할이 분리된 협업형 지능 시스템입니다.
즉, “하나의 거대한 AI”가 아니라 역할이 명확한 AI 팀을 구성하는 개념입니다.
각 에이전트는 “TDD 사이클의 한 단계”를 담당하고,
Orchestrator는 이를 순차적으로 실행해 AI 기반 자동 개발 파이프라인을 완성합니다.
3. 아키텍처적 이해
AI Agent 시스템은 아래 3개의 계층으로 구성된다고 이해했습니다.
“AI는 말을 잘하지만, 행동을 못한다.”
=> 그래서 Tool Layer를 통해 행동력을 부여해야 한다는 점이 인상 깊었습니다.
4. AI와 TDD의 결합 — 자동화된 개발 사이클
AI와 TDD를 결합하여 아래와 같은 자동 사이클로 구현했습니다.
Orchestrator → “반복 일정 기능을 구현해라”
↓
SpecAgent → 명세 정의
↓
TestAgent → 실패하는 테스트 작성 (RED)
↓
CodeAgent → 테스트 통과 코드 작성 (GREEN)
↓
RefactorAgent → 중복 제거 및 품질 개선 (REFACTOR)
↓
GitAgent → 자동 커밋 및 스냅샷
결과적으로 사람의 역할은 명확한 명세 작성과 AI가 만든 결과를 비판적으로 검증하는 일로 귀결됩니다.
5. AI의 활용을 위해 고려한 핵심 역량
AI를 잘 쓰려면, 오히려 기본기가 더 단단해야 한다는 점을 절실히 느꼈습니다.
6. 학습 및 깨달음
(예: “테스트 작성해줘” ❌ → “너는 TestAgent야, RED 단계 코드를 생성해.” ✅)
개인적 회고
=> “AI를 무분별하게 쓰는 건 빠른 길 같지만, 결국 본질을 흐린다.”
=> “명확한 문제 정의와 기본 개념 이해가 AI 활용의 핵심이다.”
=> “AI는 도구가 아니라, 잘 설계된 팀원이다.”
처음엔 막막했지만,
TDD와 AI Agent 개념을 이해하고 나니 AI와의 협업이 하나의 구조적 사고 과정으로 느껴졌습니다.
이 과제는 단순한 기능 구현을 넘어서, ‘AI를 통한 문제 해결 사고법’을 익히는 경험이었습니다.
그에 따른 과제 진행 초반에 한 날 것의 생각을 첨부해보았습니다. (하단 블로그에도 포함된 내용입니다.)
ㄴ 지금 보니 "어떻게 보면 하루만에 끝낼 수도 있는 과제"는 참 오만한 생각이었습니다ㅜㅜ
리뷰 받고 싶은 내용
spec-agent.ts)와 실제 코드(code-agent.ts) 간 싱크를 유지할 때(AI가 명세를 일관적으로 반영할 수 있도록) 어떤 방식으로 하는지 공유해주실 수 있나요?test-metrics.md)을 더 잘 반영하게 하려면 어떤 구조와 명세를 담으면 좋을까요?마지막으로 과제를 진행하며 작성한 블로그 링크 공유드립니다!
AI를 활용한 TDD(Test-Driven-Development)