DevLog 프로젝트: 코딩 에이전트 도구 활용 가이드

풀스택 개발 로그 시스템을 AI 코딩 에이전트로 구축하는 완벽 가이드

📋 목차

• 개요
• 도구별 특성 분석
• 프로젝트 단계별 도구 활용 전략
• 백엔드 개발 워크플로우
• 프론트엔드 개발 워크플로우
• 통합 및 테스트
• 배포 및 운영
• 실전 시나리오
• 비용 최적화 전략
• FAQ

---

개요

DevLog 프로젝트 요구사항

기술 스택:

• Backend: Spring Boot 3.2.1 + MyBatis + PostgreSQL
• Frontend: React 18 + Tailwind CSS + Recharts
• DevOps: Docker + Docker Compose + Nginx

주요 기능:

• 37개 REST API 엔드포인트
• 5개 주요 UI 페이지 (Dashboard, Logs, Projects, Statistics, Settings)
• 실시간 통계 차트 및 시각화
• 무한 스크롤, 필터링, 검색
• 마크다운 에디터

프로젝트 규모:

• 예상 개발 기간: 3-4주
• 백엔드 코드: ~5,000 lines
• 프론트엔드 코드: ~8,000 lines
• 데이터베이스 테이블: 4개 (DevLog, Project, TechTag, LogTags)

---

도구별 특성 분석

1. Cursor (대리 - 빠른 실행자)

강점:

• ⚡ 최고의 속도: Tab 완성, Cmd+K 인라인 편집
• 🎯 IDE 통합: VS Code 포크로 완벽한 에디터 경험
• 🔄 Auto-run Mode: 테스트 자동 실행 및 수정
• 📊 모델 선택: GPT-5, Claude Sonnet 4.5, Gemini 2.5 Pro 전환 가능

약점:

• 컨텍스트 윈도우 제한 (실제 70K-120K)
• 복잡한 아키텍처 결정에 약함
• 장기 세션에서 컨텍스트 드리프트

DevLog에서의 역할:

• 반복적인 CRUD 구현
• UI 컴포넌트 빠른 프로토타이핑
• 작은 버그 즉시 수정
• CSS 스타일링 조정

최적 모드 설정:

# .cursorrules 예시
Mode: Agent Mode (복잡한 작업)
      Cmd+K (빠른 수정)
      Tab Completion (코딩 중)

Model Selection:
  - GPT-5: 복잡한 로직, 새로운 기능
  - Claude Sonnet 4.5: 코드 품질 중시
  - Gemini 2.5 Pro: UI 디자인, 시각화

Auto-run: Enabled
  Allow List: npm test, npm run build, mvn test
  Deny List: git push, rm -rf, drop table

Checkpoint: Enabled (모든 Agent 변경사항 자동 스냅샷)

---

2. Claude Code (과장 - 전략 수립자)

강점:

• 📋 Plan Mode: 체계적인 계획 수립
• 🧠 opusplan: Opus로 계획, Sonnet으로 실행
• 📚 200K 실제 컨텍스트: 전체 코드베이스 이해
• 🤝 Subagent 시스템: Explore, Plan, Task 자동 위임

약점:

• 터미널 기반으로 시각적 피드백 부족
• UI 작업에는 비효율적
• 속도는 Cursor보다 느림

DevLog에서의 역할:

• 프로젝트 아키텍처 설계
• REST API 엔드포인트 계획
• 데이터베이스 스키마 설계
• 복잡한 통계 로직 구현
• 리팩토링 전략

최적 모드 설정:

# Claude Code 설정
Model: opusplan (기본값)
  - Opus 4.5: 계획 단계
  - Sonnet 4.5: 실행 단계

Permissions:
  defaultMode: plan  # 복잡한 작업은 항상 계획부터
  autoApprove:
    - read: true
    - write: false  # 파일 쓰기는 수동 승인
    - bash: whitelist
  
Plan Mode Trigger:
  - "let's plan..."
  - Shift+Tab 두 번
  - 자동 (복잡도 감지)

Commands:
  /cost: 토큰 사용량 모니터링
  /clear: 컨텍스트 초기화 (작업 전환 시)
  /model: 모델 전환

CLAUDE.md 예시 (DevLog용):

# DevLog Project Context

## Tech Stack
- Backend: Spring Boot 3.2.1, MyBatis, PostgreSQL 15
- Frontend: React 18, Tailwind CSS, Recharts
- Build: Maven, NPM

## Critical Rules
- NEVER use camelCase for PostgreSQL column names (use snake_case)
- ALWAYS include transaction management for multi-table operations
- Frontend API calls MUST use axios interceptors for error handling
- UI colors MUST maintain WCAG AA contrast ratio

## Architecture Principles
- Backend: Controller → Service → Mapper (MyBatis)
- Frontend: Pages → Components → Services → Utils
- API responses: Always JSON with { success, data, error }

## Common Commands
- Backend test: cd backend && ./mvnw test
- Frontend dev: cd frontend && npm start
- Full stack: docker-compose up -d

## Known Issues
- PostgreSQL returns lowercase column names (use aliases in MyBatis)
- React Select dropdown visibility issue (z-index: 50)
- Chart rendering requires explicit width/height

---

3. Google Antigravity (PM - 자율 개발 관리자)

강점:

• 🚀 Agent-First 설계: 멀티 에이전트 병렬 작업
• 🌐 Browser Subagents: UI 자동 테스트 및 검증
• 📱 Manager View: 여러 에이전트 동시 모니터링
• 📸 Artifacts: 스크린샷, 워크스루, 계획 자동 생성
• 🔄 Self-Validation: 에이전트가 자체 검증

약점:

• 2025년 11월 출시로 아직 실험적
• 초기 사용자 리포트에서 오류와 느린 생성 속도 언급
• 무료 프리뷰이지만 향후 가격 정책 불확실

DevLog에서의 역할:

• 전체 기능 E2E 개발 (계획 → 구현 → 테스트)
• UI 컴포넌트 자동 브라우저 테스트
• 여러 페이지 동시 개발 (병렬 에이전트)
• 복잡한 통계 페이지 구현 및 검증

최적 모드 설정:

# Antigravity 설정
Development Mode: Agent-assisted
  # Agent-driven: 완전 자동 (위험)
  # Review-driven: 모든 작업 승인 필요 (느림)
  # Agent-assisted: 균형 (추천) ✓

Terminal Policy: Auto
  # 표준 명령어 자동 실행
  # 위험한 명령어만 확인 요청

Main Model: Gemini 3 Pro
  # 코드 추론, 대규모 컨텍스트, 멀티스텝 계획에 최적
  
Secondary Models:
  - Claude Sonnet 4.5: 코드 품질 중시 작업
  - Gemini 3 Deep Think: 복잡한 버그 디버깅
  
Work Mode:
  - Plan Mode: 복잡한 작업 (Dashboard 통계 등)
  - Fast Mode: 간단한 수정 (CSS 조정 등)

Browser Testing: Enabled
  # 모든 UI 변경 후 자동 브라우저 검증

Manager View 활용 전략:

Workspace 1: Backend API
  └─ Agent 1: DevLog CRUD APIs
  └─ Agent 2: Statistics APIs
  
Workspace 2: Frontend Pages
  └─ Agent 3: Dashboard + Charts
  └─ Agent 4: Logs List + Form
  
Workspace 3: Integration
  └─ Agent 5: E2E Testing
  └─ Agent 6: Docker Setup

Artifacts 예시:

Antigravity는 작업 완료 시 다음 Artifacts를 자동 생성합니다:

1. Task List: 계획된 작업 체크리스트
2. Implementation Plan: 상세 구현 계획
3. Screenshots: 완성된 UI 스크린샷
4. Browser Recording: 사용자 플로우 동작 영상
5. Test Results: 자동 테스트 결과

이를 통해 팀원이나 PM이 코드를 보지 않고도 진행 상황을 확인할 수 있습니다.

---

4. GPT-5.2 Codex (상무 - 품질 감독자)

강점:

• 🔍 버그 탐지: 미묘한 버그와 보안 취약점 발견
• 🧐 Code Review: 체계적이고 신중한 분석
• ⏱️ Effort 파라미터: high, xhigh로 깊은 사고
• 📊 SWE-Bench Pro: 56.4% (최고 수준)

약점:

• 느린 속도 (깊게 생각하는 대가)
• 비용이 상대적으로 높음
• Raw 코딩보다는 분석에 특화

DevLog에서의 역할:

• 완성된 기능 최종 리뷰
• Critical 버그 디버깅
• 보안 취약점 검사
• 성능 최적화 제안
• 아키텍처 검토

최적 모드 설정:

# Codex CLI 설정
effort: "medium"  # 기본값
  # low: 빠른 답변
  # medium: 표준 품질
  # high: 복잡한 문제
  # xhigh: critical 이슈만 (매우 느림)

focus_areas:
  - security_vulnerabilities
  - race_conditions
  - memory_leaks
  - error_handling
  - edge_cases

review_scope:
  - new_features: true
  - refactoring: true
  - bug_fixes: false  # 간단한 버그는 생략

리뷰 체크리스트 예시:

# Codex Review Checklist

## Security
- [ ] SQL Injection 방지 (PreparedStatement)
- [ ] XSS 방지 (입력 검증)
- [ ] CSRF 토큰
- [ ] 비밀번호 해싱 (bcrypt)
- [ ] API Rate Limiting

## Performance
- [ ] N+1 쿼리 문제
- [ ] 불필요한 데이터베이스 호출
- [ ] 메모리 누수 가능성
- [ ] 동시성 문제 (race condition)

## Code Quality
- [ ] 예외 처리 완전성
- [ ] 로깅 적절성
- [ ] 테스트 커버리지 80% 이상
- [ ] 코드 중복 (DRY 원칙)

## Architecture
- [ ] 레이어 분리 (Controller/Service/Mapper)
- [ ] 단일 책임 원칙
- [ ] 의존성 주입

---

프로젝트 단계별 도구 활용 전략

Phase 0: 프로젝트 초기 설정 (1일)

주 도구: Claude Code (Plan Mode) + Antigravity

1. 아키텍처 설계 (Claude Code)

# Claude Code 실행
claude --model opusplan

# 대화
User: DevLog 프로젝트 전체 아키텍처를 설계해줘.
- Spring Boot + React 풀스택
- 37개 REST API
- 5개 주요 페이지
- Docker 배포

먼저 계획을 세우고, 디렉토리 구조를 만들어줘.

Claude의 Plan Mode 출력 예시:

# DevLog 프로젝트 아키텍처 계획

## Phase 1: 프로젝트 구조 생성
1. 루트 디렉토리 구조
2. Backend (Spring Boot) 스켈레톤
3. Frontend (React) 스켈레톤
4. Docker 설정

## Phase 2: 데이터베이스 설계
1. ERD 설계
2. schema.sql 작성
3. MyBatis 매퍼 설정

## Phase 3: 기본 설정
1. application.yml
2. CORS 설정
3. 환경 변수 관리

계속 진행할까요?

승인 후 Claude가 자동으로 구조 생성.

2. 병렬 에이전트 설정 (Antigravity)

Antigravity Manager View에서 3개 workspace 설정:

Workspace: Backend-Setup
  Agent: Spring Boot 프로젝트 초기화
  Tasks:
    - pom.xml 설정
    - application.yml 생성
    - 패키지 구조 생성
    
Workspace: Frontend-Setup
  Agent: React 프로젝트 초기화
  Tasks:
    - package.json 설정
    - Tailwind 설정
    - 라우터 구조 생성

Workspace: DevOps-Setup
  Agent: Docker 설정
  Tasks:
    - Dockerfile (backend)
    - Dockerfile (frontend)
    - docker-compose.yml

동시 진행: 3개 에이전트가 병렬로 작업하여 시간 절약 (3시간 → 1시간)

---

Phase 1: 백엔드 기본 구조 (2-3일)

주 도구: Claude Code (설계) → Cursor (구현) → Codex (리뷰)

1. 데이터베이스 스키마 (Claude Code Plan Mode)

claude --model opusplan

User: PostgreSQL 스키마를 설계해줘.
테이블: DevLog, Project, TechTag, LogTags (다대다 관계)
모든 컬럼은 snake_case로.

Claude 출력:

• ERD 다이어그램 (Mermaid)
• schema.sql 파일
• 제약조건 및 인덱스
• 시드 데이터

2. MyBatis 매퍼 빠른 구현 (Cursor Agent Mode)

User (Cursor): schema.sql을 보고 모든 MyBatis 매퍼를 생성해줘.
- DevLogMapper.xml
- ProjectMapper.xml
- TechTagMapper.xml

각 매퍼는 CRUD + 통계 쿼리 포함.

Cursor의 장점:

• 빠른 속도로 반복적인 XML 작성
• 패턴 인식으로 일관된 스타일
• 즉시 컴파일 에러 확인

주의사항:

# .cursorrules
Rule: PostgreSQL column names
  - ALWAYS use snake_case in SQL
  - ALWAYS use AS alias in SELECT
  
Example:
  WRONG: SELECT createdAt FROM dev_logs
  RIGHT: SELECT created_at AS "createdAt" FROM dev_logs

3. Service 계층 구현 (Cursor + Claude Code)

전략:

• 단순 CRUD: Cursor로 빠르게
• 복잡한 통계 로직: Claude Code로 계획

# Claude Code
User: DevLogService의 getWeeklyStatistics() 메서드 로직을 계획해줘.
- 이번 주 일별 작업 시간 집계
- 활동 일수 계산
- 평균 작업 시간

# Claude Plan 출력
1. 이번 주 시작일/종료일 계산 (LocalDate)
2. Mapper로 일별 데이터 조회
3. Java Stream으로 집계
4. DTO 변환 및 반환

# 계획 승인 후 구현

4. 최종 리뷰 (Codex xhigh effort)

# Codex CLI
codex --effort xhigh

User: backend/src/main/java/com/vibecoding/devlog/service/
디렉토리의 모든 Service 클래스를 리뷰해줘.

중점 체크:
- 트랜잭션 관리
- 예외 처리
- SQL Injection 방지
- 동시성 문제

Codex 리뷰 예시:

Critical Issues Found:
1. DevLogService.create() - Line 142
   Issue: RuntimeException은 너무 일반적
   Recommendation: Custom ResourceNotFoundException 사용
   
2. StatisticsService.getMonthlyStats() - Line 89
   Issue: N+1 쿼리 문제 (루프 안에서 DB 호출)
   Recommendation: JOIN 쿼리로 한 번에 조회
   
3. ProjectService.delete() - Line 156
   Issue: 연관된 DevLog 삭제 로직 없음
   Recommendation: @Transactional + 연관 레코드 처리

---

Phase 2: 프론트엔드 구조 (3-4일)

주 도구: Antigravity (UI 개발) + Cursor (스타일링) → Codex (UX 리뷰)

1. 페이지 컴포넌트 병렬 개발 (Antigravity Manager View)

Manager View 설정:

Workspace 1: Dashboard
  └─ Agent: Dashboard 통계 + 차트
     Tasks:
       - StatisticsCard 컴포넌트
       - WeeklyChart (Recharts 바 차트)
       - RecentLogs 리스트
       - API 연동
     Browser Test: Enabled
     
Workspace 2: Logs
  └─ Agent: Logs 리스트 + 폼
     Tasks:
       - LogList 무한 스크롤
       - LogForm 입력 폼
       - 필터링 기능
     Browser Test: Enabled
     
Workspace 3: Statistics
  └─ Agent: Statistics 페이지
     Tasks:
       - 주간/월간 차트
       - 프로젝트 분포 파이 차트
       - 기술 스택 통계
     Browser Test: Enabled

장점:

• 3개 페이지 동시 개발 (시간 3배 절약)
• 각 에이전트가 독립적으로 작업
• Browser Subagent가 자동으로 UI 테스트
• Artifacts로 진행 상황 시각화

Antigravity Agent 대화 예시:

User (Workspace 1): Dashboard를 구현해줘.
- 4개 통계 카드 (작업 시간, 로그 개수, 활성 프로젝트, 달성률)
- Recharts로 주간 바 차트
- 최근 5개 로그 표시
- Glassmorphism 디자인 스타일

Agent (Plan Mode 활성화):
Creating implementation plan...

Plan Artifact:
1. Layout Structure
   - Grid layout for stat cards
   - Chart container with responsive sizing
   - Recent logs section
   
2. API Integration
   - GET /api/statistics/dashboard
   - Error handling with toast notifications
   
3. Chart Configuration
   - Recharts BarChart with custom colors
   - Tooltip with formatted data
   - Responsive width/height
   
4. Styling
   - Glassmorphism: backdrop-blur-md
   - Dark theme colors
   - Smooth animations
   
Ready to implement? (yes/no)

User: yes

Agent (Fast Mode로 전환 후 구현):
✓ Created DashboardStatCard.jsx
✓ Created WeeklyChart.jsx
✓ Created RecentLogsList.jsx
✓ Updated Dashboard.jsx
✓ Integrated API calls

Testing in browser...
[Browser Subagent 자동 실행]

Screenshot Artifact Generated:
- Desktop view (1920x1080) ✓
- Tablet view (768x1024) ✓
- Mobile view (375x667) ✓

All tests passed!

생성된 Artifacts:

1. Plan Document: 상세 구현 계획 마크다운
2. Code Files: 모든 컴포넌트 파일
3. Screenshots: 3개 해상도 스크린샷
4. Browser Recording: 실제 동작 영상 (MP4)
5. Test Report: 자동 테스트 결과

2. 스타일 세밀 조정 (Cursor Cmd+K)

Antigravity가 기본 구조를 만들면, Cursor로 빠른 스타일 조정:

User (Cursor, Cmd+K):
선택한 코드: <div className="stat-card">

Instruction: 이 카드에 호버 효과 추가
- 마우스 오버 시 살짝 떠오르는 효과
- 부드러운 트랜지션 (0.3s)
- 그림자 강화

Cursor: [즉시 코드 수정]
className="stat-card hover:scale-105 hover:shadow-2xl transition-all duration-300"

Cursor의 장점:

• 인라인 수정으로 즉각적인 피드백
• CSS 클래스 자동완성
• 실시간 프리뷰 (브라우저 새로고침)

3. Recharts 통합 (Claude Code + Antigravity)

복잡한 차트는 역할 분담:

Claude Code: 차트 로직 계획

User: Statistics 페이지의 월간 차트 로직을 계획해줘.
- 일별 작업 시간 라인 차트
- 프로젝트별 파이 차트
- 기술 스택 바 차트 (Top 10)

Claude (Plan):
1. API 데이터 구조 정의
2. Recharts 설정 (색상, 툴팁, 레전드)
3. Responsive 처리
4. 빈 데이터 핸들링

Antigravity: 구현 + 자동 테스트

User (Antigravity): 위 계획대로 3개 차트를 구현하고 브라우저에서 테스트해줘.

Agent:
✓ MonthlyLineChart.jsx created
✓ ProjectPieChart.jsx created  
✓ TechStackBarChart.jsx created
✓ Statistics.jsx integrated

Browser Testing:
✓ Charts render correctly
✓ Tooltips show on hover
✓ Responsive on mobile
✓ No console errors

[Screenshot Artifacts 자동 생성]

4. UX 리뷰 (Codex)

codex --effort high

User: frontend/src/pages/ 의 모든 페이지를 UX 관점에서 리뷰해줘.

체크 항목:
- 접근성 (ARIA 라벨)
- 키보드 네비게이션
- 로딩 상태 표시
- 에러 메시지 명확성
- 모바일 사용성

Codex Review:
1. LogForm.jsx - Line 45
   Issue: 로딩 중에도 버튼 클릭 가능
   Recommendation: disabled={isLoading} 추가
   
2. Dashboard.jsx - Line 89
   Issue: 차트 로딩 시 빈 공간 (CLS 문제)
   Recommendation: Skeleton loader 추가
   
3. All Forms
   Issue: ARIA 라벨 누락
   Recommendation: aria-label 또는 aria-labelledby 추가

---

Phase 3: API 통합 및 E2E 테스트 (2일)

주 도구: Antigravity (E2E) + Claude Code (버그 수정) + Codex (통합 리뷰)

1. E2E 시나리오 테스트 (Antigravity)

User (Antigravity): 다음 시나리오를 E2E로 테스트해줘.

시나리오:
1. 대시보드 접속
2. "새 로그 작성" 클릭
3. 폼 입력 (프로젝트 선택, 제목, 시간 등)
4. 저장
5. 로그 목록에 표시되는지 확인
6. 통계가 업데이트되는지 확인

Agent (Plan Mode):
E2E Test Plan:
1. Start dev servers (backend + frontend)
2. Navigate to http://localhost:3000
3. Click dashboard stat card
4. Fill form fields
5. Submit and verify API response
6. Check log appears in list
7. Verify dashboard stats updated

Executing...
[Browser Subagent 자동 실행]

Test Results:
✓ Dashboard loaded (2.1s)
✓ Form opened
✓ Fields filled
✗ Submit failed - API error 400

Error Screenshot captured.
Analyzing error...

Issue Found: 
- Frontend sends camelCase: { startTime: "09:00" }
- Backend expects snake_case: { start_time: "09:00" }

Recommendation: Add API request transformer

Antigravity의 자동 디버깅 능력:

1. 에러 스크린샷 캡처
2. 네트워크 요청 분석
3. 콘솔 로그 확인
4. 원인 파악 및 해결 제안

2. 버그 수정 (Claude Code)

claude

User: Antigravity가 발견한 버그를 수정해줘.
frontend/src/services/devLogApi.js에서 요청 변환 추가 필요.

Claude:
axios interceptor를 추가하여 camelCase → snake_case 변환하겠습니다.

[코드 생성]
// devLogApi.js
axios.interceptors.request.use((config) => {
  if (config.data) {
    config.data = toSnakeCase(config.data);
  }
  return config;
});

테스트해볼까요?

3. 최종 통합 리뷰 (Codex xhigh)

codex --effort xhigh

User: 전체 시스템을 리뷰해줘.
특히 다음 항목 중점:
- 프론트엔드 ↔ 백엔드 데이터 일관성
- 에러 핸들링 완전성
- 성능 병목 지점
- 보안 취약점

Codex Deep Analysis (5분 소요):

Critical Issues:
1. DevLogController.java - Line 67
   Race Condition: 동시에 같은 제목의 로그 생성 가능
   Fix: Unique constraint on (project_id, title, log_date)
   
2. Statistics.jsx - Line 134
   Performance: 차트 렌더링 시 전체 리렌더링
   Fix: React.memo + useMemo 최적화
   
3. All API calls
   Security: CORS는 설정했지만 CSRF 토큰 없음
   Fix: Spring Security CSRF 필터 추가

Medium Priority:
[10개 항목...]

Low Priority:
[15개 항목...]

---

Phase 4: Docker 배포 및 문서화 (1일)

주 도구: Claude Code (Docker 설정) + Cursor (문서 작성) + Antigravity (배포 테스트)

1. Docker 설정 (Claude Code)

claude --model opusplan

User: 프로덕션 배포용 Docker 설정을 만들어줘.
- Multi-stage build (크기 최적화)
- PostgreSQL 컨테이너
- Nginx 리버스 프록시
- 헬스 체크 포함

Claude (Plan Mode):
Docker 설정 계획:

1. Backend Dockerfile
   - Stage 1: Maven build
   - Stage 2: Runtime (JRE only)
   - Size: ~150MB (기본 600MB → 최적화)
   
2. Frontend Dockerfile
   - Stage 1: NPM build
   - Stage 2: Nginx serve
   - Size: ~50MB
   
3. docker-compose.yml
   - Service 3개: postgres, backend, frontend
   - Networks, volumes 설정
   - 헬스 체크 및 재시작 정책
   
계속할까요?

2. 문서 작성 (Cursor Agent Mode)

User (Cursor): 다음 문서를 작성해줘.
1. API_DOCUMENTATION.md - 37개 API 상세 문서
2. DEPLOYMENT.md - 배포 가이드
3. TROUBLESHOOTING.md - 문제 해결 가이드

템플릿과 기존 코드 참조해서 작성.

Cursor (Agent Mode):
✓ API_DOCUMENTATION.md (3,500 lines)
  - 모든 엔드포인트 설명
  - 요청/응답 예시
  - 에러 코드
  
✓ DEPLOYMENT.md (1,200 lines)
  - Docker 설치부터 실행까지
  - 환경 변수 설정
  - 트러블슈팅
  
✓ TROUBLESHOOTING.md (800 lines)
  - FAQ
  - 일반적인 오류
  - 해결 방법

3. 배포 테스트 (Antigravity)

User (Antigravity): docker-compose up으로 배포하고 전체 시스템을 테스트해줘.

Agent:
Deployment Plan:
1. Build Docker images
2. Start containers
3. Wait for health checks
4. Run E2E tests
5. Performance test (Apache Bench)

Executing...

✓ Images built (3min 42s)
✓ Containers started
✓ PostgreSQL ready (8s)
✓ Backend health check passed
✓ Frontend accessible

E2E Tests:
✓ User can create log
✓ Statistics update correctly
✓ Project management works
✓ Charts render
[10/10 tests passed]

Performance (ab -n 1000 -c 10):
- Avg response time: 45ms
- 99th percentile: 120ms
- Errors: 0

[Performance Report Artifact 생성]

---

백엔드 개발 워크플로우

CRUD API 구현 (예: DevLog API)

Step 1: 계획 (Claude Code Plan Mode)

claude --model opusplan

User: DevLog CRUD API를 구현하려고 해.
다음 엔드포인트가 필요해:
- GET /api/logs (필터링, 페이징)
- GET /api/logs/{id}
- POST /api/logs
- PUT /api/logs/{id}
- DELETE /api/logs/{id}

먼저 계획을 세워줘.

Claude Plan 출력:

# DevLog CRUD API 구현 계획

## 1. Domain Model (DevLog.java)
- id (Long)
- projectId (Long)
- title (String, 100자)
- description (String, 500자)
- startTime (LocalTime)
- endTime (LocalTime)
- workMinutes (Integer, 계산 필드)
- achievements (String)
- challenges (String)
- learnings (String)
- codeSnippets (String, JSON)
- logDate (LocalDate)
- mood (Enum: TERRIBLE, BAD, NEUTRAL, GOOD, GREAT)
- createdAt, updatedAt (LocalDateTime)

## 2. DTO Classes
- DevLogRequest (create/update)
- DevLogResponse (API 응답)
- DevLogListResponse (페이징)

## 3. MyBatis Mapper
- selectAll(filter, pagination)
- selectById(id)
- insert(devLog)
- update(devLog)
- delete(id)

## 4. Service Layer
- Transaction 관리
- 비즈니스 로직 (workMinutes 계산)
- 유효성 검증

## 5. Controller Layer
- @RestController
- @Validated
- Exception handling
- CORS

구현할까요?

Step 2: 구현 (Cursor Agent Mode)

Claude의 계획을 Cursor에 전달:

User (Cursor): 위 계획대로 DevLog CRUD를 구현해줘.
프로젝트 구조는 /backend/src/main/java/com/vibecoding/devlog/

Cursor (Agent Mode):
Creating files...

✓ domain/DevLog.java
✓ dto/DevLogRequest.java
✓ dto/DevLogResponse.java
✓ mapper/DevLogMapper.java
✓ mapper/DevLogMapper.xml
✓ service/DevLogService.java
✓ controller/DevLogController.java

Testing compilation...
✓ No compilation errors

Running tests...
✗ 2 tests failed

Analyzing failures...

Cursor가 실패한 테스트를 자동으로 분석하고 수정:

Test Failure: DevLogServiceTest.testCreate()
Issue: MockitoException - mapper.insert() not mocked

Fixing...
✓ Added @Mock annotation
✓ Added when(mapper.insert()).thenReturn(1)

Re-running tests...
✓ All tests passed (12/12)

Step 3: 리뷰 (Codex)

codex --effort high

User: 방금 구현한 DevLog CRUD 코드를 리뷰해줘.
backend/src/main/java/com/vibecoding/devlog/

중점:
- 트랜잭션 경계
- 예외 처리
- 유효성 검증
- 보안 (SQL Injection)

Codex Review:

✓ Good:
- MyBatis PreparedStatement 사용 (SQL Injection 방지)
- @Transactional 적절히 사용
- @Validated로 요청 검증

⚠ Issues:

1. DevLogService.create() - Line 45
   Problem: RuntimeException은 너무 일반적
   
   Current:
   if (result == 0) {
       throw new RuntimeException("Failed to create log");
   }
   
   Better:
   if (result == 0) {
       throw new ResourceCreationException("DevLog creation failed");
   }

2. DevLogController.delete() - Line 89
   Problem: 삭제 전 존재 여부 확인 없음
   
   Add:
   DevLog existing = service.findById(id);
   if (existing == null) {
       throw new ResourceNotFoundException("DevLog not found: " + id);
   }
   service.delete(id);

3. DevLogMapper.xml - Line 67
   Problem: 동적 쿼리에서 null 체크 누락
   
   Current:
   AND project_id = #{projectId}
   
   Better:
   <if test="projectId != null">
       AND project_id = #{projectId}
   </if>

Step 4: 수정 적용 (Cursor)

User (Cursor): Codex가 지적한 3가지 이슈를 수정해줘.

Cursor:
✓ Created ResourceCreationException.java
✓ Updated DevLogService.create()
✓ Updated DevLogController.delete()
✓ Updated DevLogMapper.xml

Re-running tests...
✓ All tests passed

---

복잡한 통계 API 구현 (예: Weekly Statistics)

Step 1: 로직 설계 (Claude Code)

claude

User: 주간 통계 API를 구현해야 해.

요구사항:
- 이번 주 일별 작업 시간 (월~일)
- 활동 일수
- 평균 작업 시간
- 총 로그 개수
- 가장 많이 사용한 기술 스택 Top 5

복잡한 로직이니까 먼저 계획 세워줘.

Claude (Analyze):
주간 통계는 여러 테이블 조인이 필요하고 집계 로직이 복잡하네요.
Plan Mode로 전환하겠습니다.

[Plan Mode 자동 활성화]

Plan:
1. 날짜 계산 로직
   - 이번 주 월요일 (getWeekStart)
   - 이번 주 일요일 (getWeekEnd)
   
2. SQL 쿼리 설계
   - 일별 집계 (GROUP BY log_date)
   - 기술 스택 집계 (JOIN log_tags, tech_tags)
   - 단일 쿼리 vs 여러 쿼리 (성능 고려)
   
3. Java 집계 로직
   - Stream API로 데이터 변환
   - 빈 날짜 채우기 (0으로)
   - DTO 매핑

4. 캐싱 전략
   - 통계는 자주 조회되므로 캐싱 고려
   - TTL: 10분
   
구현 방법 제안:
A. 단일 복잡 쿼리 (1 DB call, 복잡한 SQL)
B. 여러 간단 쿼리 (3 DB calls, 간단한 SQL)

어느 쪽이 좋을까요?

User: B로 가자. 코드 가독성이 더 중요해.

Claude:
좋습니다. 다음과 같이 구현하겠습니다.

Mapper:
1. selectDailyWorkTime(startDate, endDate)
   → List<DailyWorkTime>
   
2. selectWeeklyTechStackStats(startDate, endDate)
   → List<TechStackStat>
   
3. selectWeeklyLogCount(startDate, endDate)
   → Integer

Service:
1. 날짜 범위 계산
2. 3개 Mapper 호출
3. Stream으로 집계
4. DTO 변환

[구현 시작...]

Step 2: MyBatis XML (Cursor)

``` User (Cursor): Claude가 설계한 3개 쿼리를 StatisticsMapper.xml에 구현해줘.

• selectDailyWorkTime
• selectWeeklyTechStackStats
• selectWeeklyLogCount

Cursor: ✓ Added to StatisticsMapper.xml