Windsurf의 Cascade 모드로 레거시 리팩토링 자동화

문제 상황

회사 어드민 대시보드가 Next.js 12 버전에서 멈춰있었다. 컴포넌트가 200개가 넘는데 props drilling이 심각하고, 일부는 여전히 클래스 컴포넌트였다. 한 번에 마이그레이션하기엔 리스크가 컸다.

Windsurf Cascade 모드 활용

Cascade 모드는 단일 파일 수정이 아닌 연관된 파일들을 자동으로 탐색하며 수정한다. 테스트 삼아 UserList.tsx부터 시작했다.

// Before
class UserList extends React.Component {
  render() {
    return this.props.users.map(user => ...)
  }
}

Cascade에게 "이 컴포넌트를 함수형으로 변환하고, Context API로 props drilling 제거"라고 요청했다. Windsurf는 UserList뿐 아니라 부모 컴포넌트 3개와 관련 타입 정의까지 함께 수정했다.

실제 적용 과정

1. 먼저 테스트 코드가 있는 컴포넌트부터 시작
2. Cascade에 "이 컴포넌트와 하위 트리 전체를 함수형으로 변환" 지시
3. 생성된 PR 확인 후 단계별 머지
4. 약 70개 컴포넌트를 2주에 걸쳐 변환 완료

주의점

• Cascade는 맥락을 잘 파악하지만 100% 완벽하진 않았다
• 특히 상태 로직이 복잡한 경우 직접 검토 필수
• 한 번에 너무 많은 파일을 건드리면 리뷰가 힘들어진다
• 10~15개 파일 단위로 끊어서 진행하는 게 적절했다

결과

클래스 컴포넌트 제거와 함께 props drilling 문제도 상당 부분 해결됐다. 기존엔 손이 너무 많이 가서 미뤄뒀던 작업인데, Cascade 덕분에 현실적인 시간 내에 마칠 수 있었다. AI 도구가 단순 코드 생성을 넘어 리팩토링 워크플로우 자체를 바꾸고 있다는 걸 체감했다.