software

MCP를 사용한 Angular 21 가이드

발행: (2025년 12월 13일 오후 04:47 GMT+9)
8 min read
원문: Dev.to

Source: Dev.to

소개

Angular 21은 Model Context Protocol (MCP) 서버를 도입합니다. AI 편집기를 Angular CLI에 직접 연결하여 업데이트, 리팩터링 및 Zoneless와 같은 아키텍처 변경을 자동화하는 방법을 알아보세요.

이전에는 AI를 낯선 존재로 취급했습니다. 오류 메시지나 파일 내용을 복사‑붙여넣기 해서 ChatGPT에 전달하고, 프로젝트 구조를 이해해 주길 기대했죠. 도움이 되긴 했지만, 눈이 멀어 있었습니다.

Angular 21에서는 그 낯선 존재가 당신 집으로 이사 왔습니다.

Angular CLI(ng mcp)의 MCP 서버 출시로 애플리케이션을 관리하는 방식이 근본적으로 바뀝니다. 단순히 새로운 명령어가 아니라, AI 에이전트(예: Cursor, Windsurf, VS Code Copilot)가 프로젝트를 “인터뷰”하고, 특정 제약을 이해하며, 실제로 컴파일되는 마이그레이션을 실행할 수 있게 해주는 프로토콜입니다.

MCP란? (AI를 위한 “USB 포트”)

Model Context Protocol (MCP) 은 AI 모델이 로컬 도구와 데이터에 연결할 수 있게 해주는 오픈 표준입니다.

MCP 이전: angular.json 파일을 채팅에 붙여넣어 AI가 파일 구조를 알게 해야 했습니다.
MCP 이후: AI는 Angular CLI에 “이 워크스페이스에 있는 모든 프로젝트를 나열해줘”라고 물어보고, CLI는 정확한 구조, 빌드 목표, 라이브러리 의존성을 반환합니다.

Angular 21에서는 CLI가 MCP 서버 역할을 합니다. AI 편집기가 직접 호출할 수 있는 “도구”들을 노출합니다.

설정: Angular “에이전트”를 위한 5분

1. 서버 시작

Angular 21 워크스페이스 터미널에서:

ng mcp

이 명령은 IDE별로 필요한 설정 조각들을 생성합니다.

2. 편집기 연결 (예: Cursor)

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

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

주의: -y 플래그는 백그라운드에서 “Press y to install” 메시지가 차단되는 것을 방지하는 데 필수입니다.

“킬러 앱”: 컨텍스트 인식 마이그레이션

컨텍스트 인식 마이그레이션 은 기존의 정형화된 스키마보다 훨씬 강력합니다. 전통적인 ng update 스크립트는 경직되어 있어 흔치 않은 기업 아키텍처에서 깨질 수 있습니다. MCP 서버는 이 역학을 바꾸는 도구들을 제공합니다.

도구 1: get_best_practices

AI는 Angular 팀이 제공하는 최신 권장 사항을 받아와, 오래된 가정을 피할 수 있습니다.

도구 2: onpush_zoneless_migration

이 도구는 ChangeDetectionStrategy.Default 를 OnPush 로 바꾸기 전에 의존성 그래프를 분석합니다.

작업 흐름 예시:

  1. 사용자: “user-profile.ts 를 Zoneless 로 마이그레이션하고 싶어. 안전한지 확인해줘.”
  2. AI (내부 사고): list_projects 를 호출해 루트를 찾고 파일을 읽음.
  3. AI (내부 사고): ngOnInit 에 Observable 구독이 있음을 감지. Zoneless 환경에서 비동기 처리를 위한 get_best_practices 를 조회.
  4. AI (행동): “관리되지 않은 구독을 발견했어. Zoneless에서는 렌더링이 트리거되지 않아. 전략을 바꾸기 전에 이 user$ Observable을 toSignal() 로 변환하는 것을 권장해.”

AI는 단순히 솔루션을 적용하는 것이 아니라, 프레임워크 내부 논리를 바탕으로 당신과 리팩터링을 협상합니다.

도구 3: search_documentation

AI는 MCP 서버가 제공하는 오프라인 로컬 문서 인덱스를 조회해 API 서명에 대한 추측을 없앱니다.

실제 시나리오: “레거시” 정리

Angular 17 스타일의 컴포넌트가 HttpClientModule 과 RxJS 로 간단한 상태 관리를 하고 있다고 가정해봅시다.

Cursor에 보낼 프롬프트 (MCP 활성화 상태):

“dashboard.component.ts 를 Angular 21 최신 권장 사항에 맞게 리팩터링해줘. 먼저 get_best_practices 도구로 내 계획을 확인해줘.”

무슨 일이 일어날까?

  • AI는 get_best_practices 를 호출해 standalone: true, inject() 및 Signals 가 표준임을 학습합니다.
  • 실험적 도구 modernize (v21) 를 호출해 표준 스키마를 실행합니다.
  • constructor(private http: HttpClient) 를 private http = inject(HttpClient) 로 변환합니다.
  • BehaviorSubject 기반 상태를 signal 로 전환합니다.

결과 코드는 v21에 맞게 처음부터 작성된 것처럼 보이며, 단순히 v21에서 동작하도록 패치한 것이 아닙니다.

미래: 지속적인 유지보수

이번 출시로 Google이 CLI를 보는 시각이 바뀌었습니다. 이제 CLI는 단순 빌드 도구가 아니라 에이전트를 위한 인터페이스가 됩니다. 가까운 미래에 우리는 업데이트를 위해 “개발을 멈추는” 대신, 백그라운드에서 MCP를 통해 실행되는 에이전트가 다음과 같은 PR을 자동으로 생성할 것입니다:

  • “여기서 ControlValueAccessor 를 사용했네요. Signal Forms 의 새로운 입력 API 로 리팩터링하는 PR을 만들었습니다.”
  • “Angular v22 가 방금 나왔어요. angular.json 을 업데이트하고 vitest 로 테스트를 검증했습니다.”

요약: 단순 업데이트에 그치지 마세요

Angular 21 로 마이그레이션한다면, ng update 만 실행하고 컴파일 오류를 수동으로 해결하지 마세요.

  1. MCP 서버를 설치합니다.
  2. AI가 프로젝트를 매핑하도록 둡니다.
  3. 마이그레이션 계획을 AI에게 맡깁니다.

코드는 여전히 여러분의 책임이지만, 무거운 작업은 이제 머신이 담당합니다.

Back to Blog

관련 글

더 보기 »