바이브코딩 리팩터링 전략 심층 가이드 — AI가 만든 코드를 유지보수 가능한 구조로 전환하는 5단계

중복 함수 탐지 및 의존성 분석
# 유사 함수명 패턴 검색 (fetch, get, load로 시작하는 함수들)
grep -rn "const (fetch|get|load)" src/ --include="*.ts" --include="*.tsx"

# any 타입 사용 현황 파악
grep -rn ": any" src/ --include="*.ts" --include="*.tsx" | wc -l
grep -rn "as any" src/ --include="*.ts" --include="*.tsx" | wc -l

# 라인수 200 초과 파일 목록
find src/ \( -name "*.tsx" -o -name "*.ts" \) | xargs wc -l 2>/dev/null | sort -rn | head -20

# 파일 간 순환 의존성 탐지
npx madge --circular src/

# 시각화 (의존성 그래프 이미지 생성)
npx madge --image dependency-graph.svg src/

# 중복 코드 블록 탐지 (5줄 이상)
npx jscpd src/ --threshold 5 --reporters console

리팩터링 전 안전망 테스트 예시 (Vitest)
// utils/formatDate.test.ts — 리팩터링 전 현재 동작 고정
import { describe, it, expect } from 'vitest'
import { formatDate } from './formatDate'

describe('formatDate — 현재 동작 고정 테스트', () => {
  it('ISO 문자열을 한국어 날짜로 변환한다', () => {
    expect(formatDate('2026-07-12T09:00:00Z')).toBe('2026년 7월 12일')
  })
  it('null 입력에 빈 문자열을 반환한다', () => {
    expect(formatDate(null)).toBe('')
  })
  it('잘못된 날짜 형식에 원본 문자열을 반환한다', () => {
    expect(formatDate('not-a-date')).toBe('not-a-date')
  })
})

// 테스트 통과 확인 후 리팩터링 시작
// npx vitest run utils/formatDate.test.ts

API 클라이언트 중앙화 예시 (Before/After)
// ❌ Before: 컴포넌트마다 fetch 직접 호출 (에러 처리 제각각)
// UserProfile.tsx
useEffect(() => {
  fetch('/api/users/' + userId)
    .then(r => r.json())
    .then(setUser)
    .catch(console.error)
}, [userId])

// PostList.tsx (다른 패턴)
useEffect(() => {
  fetch('/api/posts')
    .then(async r => {
      if (!r.ok) throw new Error('Failed')
      return r.json()
    })
    .then(setPosts)
}, [])

// ✅ After: TanStack Query + 중앙화된 API 클라이언트
// src/lib/api.ts
export const api = {
  users: {
    get: (id: string): Promise<User> =>
      fetch('/api/users/' + id).then(r => {
        if (!r.ok) throw new Error('HTTP ' + r.status)
        return r.json()
      })
  },
  posts: {
    list: (): Promise<Post[]> =>
      fetch('/api/posts').then(r => {
        if (!r.ok) throw new Error('HTTP ' + r.status)
        return r.json()
      })
  }
}

// src/hooks/useUser.ts
import { useQuery } from '@tanstack/react-query'
import { api } from '@/lib/api'

export function useUser(id: string) {
  return useQuery({
    queryKey: ['user', id],
    queryFn: () => api.users.get(id),
    enabled: !!id
  })
}

// UserProfile.tsx — 깔끔해진 컴포넌트
const { data: user, isLoading, error } = useUser(userId)

Zod로 API 응답 타입 경계 설정
import { z } from 'zod'

// API 응답 스키마 정의
const UserSchema = z.object({
  id: z.string(),
  name: z.string(),
  email: z.string().email(),
  role: z.enum(['admin', 'user', 'viewer']),
  createdAt: z.string().datetime(),
  metadata: z.record(z.string()).optional()
})

type User = z.infer<typeof UserSchema>

// API 호출 지점에서 파싱 — 이후 코드는 타입 보장
async function fetchUser(id: string): Promise<User> {
  const response = await fetch('/api/users/' + id)
  if (!response.ok) throw new Error('HTTP ' + response.status)

  const raw = await response.json()

  const parsed = UserSchema.safeParse(raw)
  if (!parsed.success) {
    console.error('API 응답 형식 불일치:', parsed.error.format())
    throw new Error('Invalid user data from API')
  }

  return parsed.data // User 타입 완전 보장
}

// ❌ 기존 any 패턴
function displayUser(user: any) {
  return user.name.toUpperCase()  // 런타임 에러 가능성
}

// ✅ 개선 후
function displayUser(user: User) {
  return user.name.toUpperCase()  // 컴파일 단계에서 보장
}

컨테이너-프레젠터 분리 예시
// ❌ Before: 데이터 페칭 + 로직 + UI가 한 파일 (약 300줄)
export function UserDashboard({ userId }: { userId: string }) {
  const [user, setUser] = useState<any>(null)
  const [posts, setPosts] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    setLoading(true)
    Promise.all([
      fetch('/api/users/' + userId).then(r => r.json()),
      fetch('/api/posts?userId=' + userId).then(r => r.json())
    ])
      .then(([userData, postsData]) => {
        setUser(userData)
        setPosts(postsData)
      })
      .finally(() => setLoading(false))
  }, [userId])

  if (loading) return <div>로딩 중...</div>
  // ... 200줄의 UI
}

// ✅ After: 훅 + 컨테이너 + 프레젠터로 분리

// hooks/useUserDashboard.ts — 로직만
export function useUserDashboard(userId: string) {
  const { data: user, isLoading: userLoading } = useUser(userId)
  const { data: posts, isLoading: postsLoading } = useUserPosts(userId)
  return { user, posts: posts ?? [], isLoading: userLoading || postsLoading }
}

// containers/UserDashboardContainer.tsx — 데이터 연결
export function UserDashboardContainer({ userId }: { userId: string }) {
  const { user, posts, isLoading } = useUserDashboard(userId)
  if (isLoading) return <LoadingSkeleton />
  if (!user) return <NotFound />
  return <UserDashboardView user={user} posts={posts} />
}

// components/UserDashboardView.tsx — 순수 UI (테스트 쉬움)
interface Props { user: User; posts: Post[] }
export function UserDashboardView({ user, posts }: Props) {
  return (
    <div>
      <UserHeader user={user} />
      <PostList posts={posts} />
    </div>
  )
}

품질 지표 측정 명령어
# TypeScript any 커버리지 측정
npx typescript-coverage-report --threshold 90

# ESLint 순환 복잡도 + 라인 수 제한 설정 (.eslintrc.js)
module.exports = {
  rules: {
    'complexity': ['warn', { max: 6 }],
    'max-lines-per-function': ['warn', { max: 50 }],
    'max-depth': ['warn', { max: 3 }],
  }
}

# ESLint 실행 — 복잡한 함수 목록 확인
npx eslint src/ --rule '{"complexity": ["warn", 6]}'

# Next.js 번들 사이즈 분석
npx @next/bundle-analyzer

# 중복 코드 탐지 (jscpd)
npx jscpd src/ --threshold 5 --reporters console