기술 부채 관리: 리팩토링 전략

        의도적
   ┌─────────────┬─────────────┐
신중│ 신중·의도적 │ 무모·의도적 │  무모
   │ "지금은 빠르게│ "내일 고치자│
   │  나중에 고침"│  (실제로는?)│
   ├─────────────┼─────────────┤
   │ 신중·우발적 │ 무모·우발적 │
   │ "이제 다른  │ "레이어드   │
   │  방법 알았네"│  아키텍처가  │
   │             │  뭐죠?"     │
   └─────────────┴─────────────┘
        우발적

[High Priority]
- 보안 이슈
- 빈번한 버그 발생 영역
- 핫스팟 (자주 변경)
- 출시 블로커

[Medium]
- 성능 저하
- 개발 속도 저하
- 새 기능 추가 어려움

[Low]
- 코드 스타일
- 사용 빈도 낮은 영역
- 곧 deprecated 예정


→ High만 즉시 해결
→ Medium은 boy scout rule
→ Low는 무시 OK

"항상 들어왔을 때보다 더 깨끗하게 떠나라"


기능 작업 시 같은 영역에:
- 명확한 변수명
- 함수 분리
- 타입 추가
- 작은 테스트


→ 한 번에 큰 리팩토링 X
→ 매 PR마다 5~10% 개선
→ 1년 후 코드베이스 80% 개선

오래된 시스템 → 새 시스템 점진 교체

[1단계] 새 코드 옆에 새 모듈 작성
- 작은 부분만 새 패턴
- 기존 코드 영향 X

[2단계] Facade로 라우팅
- 일부 기능 → 새 모듈
- 나머지 → 기존 코드

[3단계] 점진 이전
- 한 번에 1~2 기능
- 검증 후 다음

[4단계] 기존 코드 제거
- 모두 이전 완료
- 옛 코드 삭제


기간: 6개월~2년
장점: 항상 동작, 위험 분산

# 사용 안 하는 export 검출
pnpm dlx ts-prune

# 결과
src/utils/legacy.ts:5 - oldFunction
src/components/Old.tsx:1 - OldComponent
src/lib/deprecated.ts:23 - deprecatedHelper


# Knip — 더 강력
pnpm dlx knip
# → 미사용 export, 의존성, 파일 모두


# CI에 통합
- name: Find dead code
  run: pnpm dlx ts-prune --error

// 리팩토링 전:
// 1. 현재 동작 테스트로 캡처

describe('orderService.calculateTotal', () => {
  it('handles basic order', () => {
    const result = calculateTotal({ items: [...], discount: 0 });
    expect(result).toBe(50000);
  });

  it('applies percentage discount', () => {
    const result = calculateTotal({ items: [...], discount: { type: '%', value: 10 } });
    expect(result).toBe(45000);
  });

  // ... 모든 케이스
});


// 2. 리팩토링 — 테스트 통과 유지
// 3. 검증 — 같은 결과

# 복잡도 (cyclomatic complexity)
pnpm dlx eslint --rule 'complexity: ["error", 10]'


# 코드 중복
pnpm dlx jscpd src/


# 의존성 그래프
pnpm dlx madge --circular src/
# → 순환 의존성 검출


# 코드 cover
pnpm test --coverage
# → 80% 이상 목표


# SonarQube (종합)
- 버그·취약점·코드 스멜
- 기술 부채 시간 추정

// ❌ 1000줄 OrderService — 모든 것 한 곳
class OrderService {
  calculateTotal() { ... }
  applyDiscount() { ... }
  processPayment() { ... }
  sendEmail() { ... }
  updateInventory() { ... }
  generateInvoice() { ... }
  // ... 30 메서드
}


// ✅ 책임 분리
class OrderCalculator {
  calculateTotal() { ... }
  applyDiscount() { ... }
}

class PaymentProcessor {
  process() { ... }
}

class OrderNotifier {
  sendConfirmation() { ... }
}

class InventoryReserver {
  reserve() { ... }
  release() { ... }
}


class OrderService {
  constructor(
    private calculator: OrderCalculator,
    private payment: PaymentProcessor,
    private notifier: OrderNotifier,
    private inventory: InventoryReserver,
  ) {}

  async placeOrder(input: any) {
    const total = this.calculator.calculateTotal(input);
    await this.inventory.reserve(input.items);
    await this.payment.process(total);
    await this.notifier.sendConfirmation(input);
  }
}

// jQuery → React 마이그레이션 사례
[Phase 1] 새 페이지만 React
[Phase 2] 기존 페이지의 일부 컴포넌트 React로 mount
[Phase 3] 페이지 단위로 React 전환
[Phase 4] jQuery 제거


// Webpack → Vite
[Phase 1] dev 서버만 Vite (빠름)
[Phase 2] 빌드도 Vite
[Phase 3] webpack 제거


// CommonJS → ESM
- "type": "module" 점진 적용
- import/export로 변환
- __dirname 등 대체