Week 4: 레거시 코드 완전 정복 & 종합 실전
AI-First Engineering 최종 실전 과정
📚 과정 개요
Week 4에서는 레거시 시스템을 안전하게 현대적 아키텍처로 전환하는 검증된 방법론을 학습합니다. The State of Vibe Coding의 6단계 프로세스를 활용하여 실제 프로덕션 환경에서 위험 없이 시스템을 재구축하는 실전 역량을 완성합니다.
⏱️ 총 학습시간
120분
Part 1 (60분) + Part 2 (60분)
🎯 학습 목표
- ✅ 안전한 레거시 전환 마스터
- ✅ 테스트 기반 리팩토링
- ✅ 팀 프로젝트 완성
🔥 실전 프로젝트
4명 1팀으로 60분 내에 크리에이터 포트폴리오 빌더 MVP를 AI를 활용하여 완성합니다.
🔄 Part 1: AI로 레거시 코드 리팩토링
📖 학습 자료
The State of Vibe Coding에서 제시하는 검증된 레거시 전환 방법론을 학습합니다.
💡 이 방법론은 실제 프로덕션 환경에서 수십 개 프로젝트에 적용되어 검증되었습니다.
🎯 6단계 안전한 레거시 전환 프로세스 (20분)
Unit Test 추가
기존 코드의 핵심 비즈니스 로직에 대한 단위 테스트를 작성합니다. 각 함수와 모듈의 현재 동작을 정확히 캡처하는 것이 목표입니다.
// Example: 기존 함수에 대한 테스트 작성
describe('calculateDiscount', () => {
it('should apply 10% discount for premium users', () => {
const result = calculateDiscount(1000, 'premium');
expect(result).toBe(900);
});
it('should not apply discount for regular users', () => {
const result = calculateDiscount(1000, 'regular');
expect(result).toBe(1000);
});
});E2E Test 추가 (Playwright)
사용자 시나리오 기반의 엔드투엔드 테스트를 Playwright로 작성합니다. 전체 워크플로우가 정상 동작함을 검증합니다.
// Example: Playwright E2E 테스트
import { test, expect } from '@playwright/test';
test('user can complete checkout process', async ({ page }) => {
await page.goto('/products');
await page.click('[data-testid="add-to-cart"]');
await page.click('[data-testid="checkout"]');
await page.fill('[name="email"]', 'user@example.com');
await page.click('[data-testid="confirm-order"]');
await expect(page.locator('.success-message')).toBeVisible();
});모든 테스트 Pass 확인
작성한 모든 테스트가 통과하는지 확인합니다. 이는 현재 시스템의 동작을 정확히 캡처했음을 의미합니다.
# 모든 테스트 실행 yarn test # E2E 테스트 실행 yarn test:e2e # 테스트 커버리지 확인 yarn test:coverage
Codebase 복사 & 재작성
원본 코드를 보존하면서 새로운 디렉토리에 복사합니다. 이제 Claude Code를 활용하여 현대적 아키텍처로 재작성합니다.
# 안전한 작업을 위한 브랜치 생성 git checkout -b refactor/legacy-to-nextjs # Claude Code에게 지시 "현재 PHP 기반 시스템을 Next.js + Firebase로 재작성해줘. 기존 비즈니스 로직은 동일하게 유지하되, 다음 기술 스택을 사용해: - Next.js 15 App Router - TypeScript - Firebase (Firestore + Auth) - Tailwind CSS 기존 테스트가 모두 통과하도록 동일한 API를 제공해야 해."
테스트 기반 검증
기존 테스트 스위트를 새로운 코드에 대해 실행합니다. 모든 테스트가 통과해야만 동일한 동작을 보장할 수 있습니다.
# 새 코드에 대해 기존 테스트 실행 yarn test # 모든 테스트가 통과할 때까지 반복: # 1. 테스트 실행 # 2. 실패한 테스트 확인 # 3. AI에게 수정 요청 # 4. 1번으로 돌아가기
점진적 배포 (Feature Flag)
한 번에 모든 사용자를 전환하지 않습니다. Feature Flag를 사용하여 5% → 20% → 50% → 100% 순서로 점진적으로 롤아웃합니다.
// Feature Flag 예시 (Firebase Remote Config)
import { getRemoteConfig, getValue } from 'firebase/remote-config';
const remoteConfig = getRemoteConfig();
const useNewSystem = getValue(remoteConfig, 'use_new_checkout').asBoolean();
export function CheckoutPage() {
if (useNewSystem) {
return <NewCheckoutSystem />;
}
return <LegacyCheckoutSystem />;
}
// Firebase Console에서 비율 조정:
// Day 1: 5% 사용자에게 새 시스템 노출
// Day 3: 문제없으면 20%로 증가
// Day 7: 50%로 증가
// Day 14: 100% 전환 완료💼 실전 케이스: 레거시 시스템 전환 (40분)
📋 시나리오
현재 시스템: PHP 5.6 기반의 10년 된 전자상거래 플랫폼
문제점: 느린 성능, 보안 취약점, 유지보수 어려움, 모바일 최적화 부족
목표: Next.js + Firebase로 완전 재구축하되, 비즈니스 로직은 100% 유지
실습 단계
Claude에게 현재 코드 분석 요청
"첨부한 PHP 코드베이스를 분석해줘. 다음 내용을 정리해줘: 1. 핵심 비즈니스 로직 (상품 관리, 주문 처리, 결제) 2. 데이터베이스 스키마 3. 외부 API 통합 (결제 게이트웨이 등) 4. 사용자 인증 플로우 5. 주요 기능별 파일 구조 각 기능이 어떻게 동작하는지 상세히 설명해줘."
테스트 코드 자동 생성
"분석한 비즈니스 로직을 기반으로 다음 테스트를 작성해줘: 1. Unit Tests: - 할인 계산 로직 - 재고 관리 로직 - 배송비 계산 로직 2. Integration Tests: - 주문 생성 플로우 - 결제 처리 플로우 - 주문 취소/환불 플로우 3. E2E Tests (Playwright): - 회원가입 → 상품 검색 → 장바구니 → 결제 → 주문 완료 - 주문 내역 조회 → 주문 취소 테스트는 기존 PHP 시스템의 동작을 정확히 검증해야 해."
새로운 아키텍처 설계
"다음 기술 스택으로 새로운 시스템을 설계해줘: Frontend: - Next.js 15 (App Router) - TypeScript - Tailwind CSS - React Query (데이터 페칭) Backend: - Firebase Functions (서버리스) - Firestore (NoSQL DB) - Firebase Auth (인증) - Stripe (결제) 다음 내용을 포함해서 설계 문서를 작성해줘: 1. 폴더 구조 2. 데이터베이스 스키마 (Firestore collections) 3. API 엔드포인트 설계 4. 상태 관리 전략 5. 보안 설정 (Firestore Rules)"
단계별 마이그레이션 플랜
"마이그레이션 계획을 단계별로 작성해줘: Phase 1 (Week 1-2): 기반 구축 - Next.js 프로젝트 셋업 - Firebase 프로젝트 생성 및 설정 - 인증 시스템 구현 - 기본 UI 컴포넌트 라이브러리 Phase 2 (Week 3-4): 핵심 기능 구현 - 상품 카탈로그 - 장바구니 - 주문 시스템 - 결제 통합 Phase 3 (Week 5): 데이터 마이그레이션 - MySQL → Firestore 데이터 이관 스크립트 - 데이터 무결성 검증 Phase 4 (Week 6): 테스트 & QA - 모든 테스트 통과 확인 - 성능 테스트 - 보안 감사 Phase 5 (Week 7-8): 점진적 배포 - Feature flag 설정 - 5% → 20% → 50% → 100% 롤아웃 - 모니터링 및 버그 수정"
🎯 Part 1 완료 체크리스트
- ✅ 6단계 레거시 전환 프로세스 이해
- ✅ Unit Test 및 E2E Test 작성 능력
- ✅ AI를 활용한 코드 분석 및 재작성
- ✅ 테스트 기반 검증 프로세스
- ✅ Feature Flag를 통한 안전한 배포 전략
🎓 AI-First Engineering 과정 완료!
축하합니다! 4주간의 여정을 통해 여러분은 이제 AI를 활용한 현대적 개발의 모든 것을 마스터했습니다.
개발 생산성 200% 향상
AI를 활용한 효율적인 개발 프로세스
Production-Ready 아키텍처
실전에서 바로 적용 가능한 설계 능력
레거시 전환 마스터
안전한 리팩토링과 마이그레이션
팀 리더십
조직을 AI-First로 전환하는 역량
🚀 이제 여러분의 차례입니다!
배운 내용을 현업에 적용하고, 팀을 이끌고, 차세대 엔지니어링 리더가 되어보세요.
📚 참고 자료
🎓 추가 학습
- The State of Vibe Coding (레거시 전환 방법론)
- Test-Driven Development 심화
- Feature Flag 전략
🛠️ 도구 & 플랫폼
💬 커뮤니티
- 코스 카카오톡 채널 (질문 & 토론)
- 주간 오피스 아워
- 프로젝트 쇼케이스