# Angular v21 발표

> Clean Markdown view of GeekNews topic #24531. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=24531](https://news.hada.io/topic?id=24531)
- GeekNews Markdown: [https://news.hada.io/topic/24531.md](https://news.hada.io/topic/24531.md)
- Type: GN+
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2025-11-22T09:36:20+09:00
- Updated: 2025-11-22T09:36:20+09:00
- Original source: [blog.angular.dev](https://blog.angular.dev/announcing-angular-v21-57946c34f14b)
- Points: 1
- Comments: 2

## Topic Body

- **Angular v21**은 AI 중심 웹 개발 시대에 맞춰 **Signal Forms, Angular Aria, MCP 서버, Vitest, Zoneless 변경 감지** 등 주요 기능을 포함한 대규모 업데이트  
- **Signal Forms**는 Signals 기반의 반응형 폼 관리로 타입 안전성과 스키마 기반 검증을 제공  
- **Angular Aria**는 접근성을 우선한 **헤드리스 UI 컴포넌트 라이브러리**로, 8가지 패턴과 13개 구성요소를 개발자 스타일에 맞게 커스터마이징 가능  
- **Vitest**가 기본 테스트 러너로 채택되어 안정화되었으며, **zone.js**는 기본 포함 대상에서 제외되어 **Zoneless** 전략이 표준화  
- 새 문서 사이트와 **AI 튜터, MCP 서버 도구**를 통해 개발자 경험과 AI 통합 역량을 강화한 점이 이번 버전의 핵심  

---

### 주요 기능 개요
- Angular v21은 **AI 지원 개발 환경**과 **확장 가능한 웹 애플리케이션** 구축을 위한 기능을 대폭 강화  
- 새 버전은 **Signal Forms, Angular Aria, MCP 서버, Vitest, Zoneless 변경 감지**를 중심으로 구성  
- 새 애플리케이션은 기본적으로 **zone.js를 포함하지 않음**, 대신 Zoneless 전략을 채택  
- Angular CLI는 **Vitest를 기본 테스트 러너**로 설정, Karma와 Jasmine은 여전히 지원  
- AI 에이전트와 협업 가능한 **MCP 서버**가 안정화되어 LLM이 최신 Angular 기능을 활용 가능  

### Signal Forms (실험적 기능)
- **Signal Forms**는 Signals 기반의 **반응형 폼 상태 관리 라이브러리**  
  - 폼 모델이 signal로 정의되어 필드와 자동 동기화  
  - **타입 안전성**과 **스키마 기반 검증 로직** 내장  
- `form()`과 `[field]` 지시자를 사용해 템플릿과 바인딩  
- `ControlValueAccessor` 없이 커스텀 컴포넌트 바인딩 가능  
- 이메일 검증, 정규식 매칭 등 기본 검증 패턴 포함, 커스텀 검증자 추가 가능  
- 현재 **실험적 단계**로, 피드백을 기반으로 개선 예정  

### Angular Aria (개발자 프리뷰)
- **Angular Aria**는 접근성을 최우선으로 한 **헤드리스 UI 컴포넌트 라이브러리**  
  - 8가지 패턴(Accordion, Combobox, Grid, Listbox, Menu, Tabs, Toolbar, Tree)과 13개 컴포넌트 제공  
  - 모든 컴포넌트는 **비스타일 상태**로 제공되어 자유로운 커스터마이징 가능  
- 설치 명령: `npm i @angular/aria`  
- Angular 팀은 세 가지 컴포넌트 개발 경로를 제시  
  - Angular Aria: 접근성 중심 헤드리스 컴포넌트  
  - CDK: Drag & Drop 등 **행동 프리미티브** 제공  
  - Angular Material: **Material Design 스타일**의 완성형 컴포넌트  

### MCP 서버와 AI 통합
- **MCP 서버**는 Angular CLI에 내장된 AI 지원 도구 서버로, v21에서 **안정화**  
- 주요 기능  
  - **get_best_practices**: 모범 사례 제공  
  - **search_documentation**: 공식 문서 검색  
  - **find_examples**: 최신 Angular 예제 제공  
  - **onpush_zoneless_migration**: Zoneless 전환 계획 생성  
  - **ai_tutor**: AI 기반 Angular 학습 도우미  
- MCP 서버를 통해 **LLM의 지식 컷오프 문제를 해소**, Signal Forms와 Angular Aria 같은 최신 기능 활용 가능  

### Vitest 기본 테스트 러너
- **Vitest**가 Angular의 **기본 테스트 러너로 안정화**  
  - `ng test` 명령으로 실행 가능  
  - Karma는 2023년 이후 폐기, Jest와 Web Test Runner는 v22에서 제거 예정  
- 기존 프로젝트는 Karma/Jasmine 계속 사용 가능  
- `ng g @schematics/angular:refactor-jasmine-vitest` 명령으로 **자동 마이그레이션** 지원  

### Zoneless 변경 감지
- **zone.js**는 브라우저 API를 패치해 변경 감지를 수행했으나, 성능 한계 존재  
- **Signals 기반 Zoneless 변경 감지**가 v21에서 기본값으로 전환  
  - 2024년 기준 Google 내부 신규 앱의 절반 이상이 Zoneless 사용  
  - HTTP Archive 기준 1,400개 이상 공개 앱이 Zoneless 채택  
- Zoneless의 장점  
  - **Core Web Vitals 개선**, **번들 크기 감소**, **디버깅 단순화**, **비동기 처리 호환성 향상**  
- 기존 앱은 [마이그레이션 가이드](https://angular.dev/guide/zoneless#removing-zonejs) 또는 MCP 서버의 `onpush_zoneless_migration` 도구 활용 가능  

### 문서 및 개발자 경험 개선
- **angular.dev** 사이트 전면 개편  
  - 새로운 랜딩 페이지와 최신 개념 중심의 문서 구조  
  - **AI 개발 리소스 허브**(angular.dev/ai) 신설  
  - **Signals 튜토리얼**, **라우팅**, **DI**, **Material 테마**, **Tailwind CSS** 가이드 업데이트  
- MCP 서버의 `search_documentation` 도구로 최신 문서 검색 가능  

### 추가 개선 사항
- **CLDR 라이브러리** v47로 업데이트 (통화·날짜 포맷 개선)  
- **템플릿 내 정규식 지원**, **Signals 포매터 내장**, **IntersectionObserver 옵션 커스터마이즈** 가능  
- **SimpleChanges 제네릭화**, **KeyValue 파이프 개선**, **Material 유틸리티 클래스 추가**  
- **CDK Overlay**가 브라우저 기본 popover 사용으로 접근성 향상  
- Angular DevTools에 **Route 시각화 및 Signal 그래프** 추가  

### 커뮤니티 기여
- v20 이후 **215명**이 Angular 코드베이스에 기여  
- 주요 기여  
  - **Jaime Burgos**: 마이그레이션 및 진단 개선  
  - **Angelo Parziale**: NgClass/NgStyle 변환 마이그레이션 추가  
  - **Hryhorii Avcharov**: DevTools에 Transfer State 탭 추가  
  - **Luke Beach**, **Ruslan Lekhman**, **Cédric Exbrayat**, **Younes Jaaidi** 등 Vitest 및 CDK 관련 기능 개선  

### 기타
- Angular 마스코트 투표 결과는 **2025년 11월 20일 YouTube 릴리스 이벤트**에서 공개 예정  
- Angular 팀은 Signal Forms와 Angular Aria를 통해 **확장성과 자신감을 갖춘 웹 앱 개발 환경**을 지속적으로 발전시킬 계획  
- `ng update` 명령으로 최신 버전으로 업그레이드 가능

## Comments



### Comment 46685

- Author: aqqnucs
- Created: 2025-11-23T08:47:12+09:00
- Points: 1

llm 성능이 떨어지는 언어나 프레임워크는 저렇게 mcp 서버를 제공해서 답변 품질을 높이는걸까요

### Comment 46675

- Author: tested
- Created: 2025-11-22T18:04:57+09:00
- Points: 1

오피셜 MCP 서버 지원이 좋아보이는데 리액트도 비슷한 게 있는지