Angular 21 & MCP: ‘수동’ 마이그레이션의 끝?

Source: Dev.to

수동 마이그레이션에서 에이전시 마이그레이션으로의 전환

과거에 개발자들은 오류 메시지나 파일 내용을 ChatGPT와 같은 AI 도구에 복사해 넣어 모델이 프로젝트 구조를 추론하길 기대했습니다. 이 방법은 도움이 되었지만 제한적이었습니다—AI가 코드베이스에 직접 접근할 수 없었기 때문입니다.

Angular 21에서는 Angular CLI 자체가 MCP 서버(ng mcp)가 됩니다. 이 프로토콜을 통해 AI 에이전트(예: Cursor, Windsurf, VS Code Copilot)가 프로젝트를 인터뷰하고 제약 조건을 이해하며 실제로 컴파일되는 마이그레이션을 실행할 수 있습니다.

MCP 전과 후

MCP 서버 설정하기

Angular 팀은 MCP 지원을 CLI에 직접 내장했습니다. Angular 21 워크스페이스에서 다음을 실행하세요:

ng mcp

이 명령은 IDE에 필요한 설정 스니펫을 생성하지만 데몬을 시작하지는 않습니다.

예시: Cursor 설정

Cursor를 사용한다면 프로젝트 루트에 .cursor/mcp.json 파일을 만들거나 편집합니다:

{
  "mcpServers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"]
    }
  }
}

Note
-y 플래그는 “설치를 진행하려면 y를 누르세요” 프롬프트가 백그라운드 프로세스를 멈추는 것을 방지합니다.

MCP가 중요한 이유: 컨텍스트‑인식 마이그레이션

표준 스키매틱은 고정된 “If A, then B” 패턴을 따릅니다. 복잡한 엔터프라이즈 코드베이스에서는 종종 깨지거나 수동 재작성을 요구하는 코드를 생성합니다. MCP는 AI가 다음을 할 수 있게 하는 도구를 노출합니다:

• 최신 Angular 팀 권고사항을 가져오기(get_best_practices).
• 안전한 마이그레이션을 위한 의존성 그래프 분석(onpush_zoneless_migration).
• 오프라인 문서 조회(search_documentation).

예시 워크플로: Zoneless 마이그레이션

1. 사용자 요청: “user-profile.ts를 Zoneless로 마이그레이션하고 안전한지 확인해 주세요.”
2. AI 동작:
   • list_projects를 호출해 해당 컴포넌트를 찾음.
   • 파일을 읽고 ngOnInit에서 Observable 구독을 감지.
   • Zoneless에서 비동기 처리를 위한 get_best_practices를 조회.
3. AI 권고:
   “관리되지 않은 구독을 발견했습니다. Zoneless에서는 이것이 렌더링을 트리거하지 않습니다. 변경 감지 전략을 전환하기 전에 user$observable을 toSignal()을 사용해 Signal로 변환하세요.”

AI는 맹목적인 수정을 적용하는 것이 아니라 프레임워크 내부 로직에 기반해 리팩터링을 협상합니다.

MCP를 통한 문서 활용

AI 에이전트는 이제 API 시그니처를 추측할 필요가 없습니다. MCP 서버가 제공하는 로컬 오프라인 문서 인덱스를 조회할 수 있습니다.

프롬프트 예시 (MCP가 활성화된 Cursor):

“dashboard.component.ts를 Angular 21 베스트 프랙티스에 맞게 리팩터링하세요. 먼저 get_best_practices 도구로 계획을 검증해 주세요.”

실행된 동작:

1. get_best_practices가 standalone: true, inject(), 그리고 Signals가 권장 패턴임을 알려줌.
2. AI가 실험적인 modernize 도구(v21)를 호출해 표준 스키매틱을 실행.
3. 수동 정리:
   • constructor(private http: HttpClient)를 private http = inject(HttpClient)로 변환.
   • BehaviorSubject 상태를 Signal로 변환.

최종 코드는 처음부터 Angular 21용으로 작성된 것처럼 보이며, 단순히 실행되도록 패치된 것이 아닙니다.

향후 전망: 지속적인 에이전시 업그레이드

이번 릴리스는 Google이 CLI를 순수 빌드 도구에서 에이전트를 위한 인터페이스로 바라보는 전환을 의미합니다. 곧 다음과 같은 백그라운드 에이전트를 볼 수 있을 것입니다:

• 자동으로 PR을 열기(예: “새 Signal Forms 입력 API로 ControlValueAccessor를 리팩터링했습니다.”)
• 새로운 Angular 버전이 출시된 후 설정 파일을 업데이트하고 테스트를 검증하기.

Angular 21 전환을 위한 팀 권고사항

1. MCP 서버 설치 (ng mcp).
2. AI 편집기 설정(예: Cursor)에서 생성된 MCP 설정을 사용하도록 구성.
3. AI에게 프로젝트를 매핑하고 마이그레이션 계획을 제안하도록 요청.
4. AI가 생성한 변경 사항을 검토하고 병합—코드 소유권은 여전히 여러분에게 있지만, 지루한 작업은 머신에게 넘깁니다.