Angular v20 발표

1 day ago 7

리액티비티(reactivity) 관련 주요 API를 안정화하며, Zoneless 기능을 개발자 프리뷰로 공개함
Chrome DevTools와의 통합 등으로 디버깅 경험과 개발 효율성을 크게 향상시킴
GenAI 개발 지원, llms.txt 도입 및 AI 앱 구축 가이드와 예제 오픈 소스로 제공함
기존 NgIf, NgFor, NgSwitch를 공식적으로 폐기하고 내장 control flow로 전환을 권장함
Angular 공식 마스코트를 커뮤니티 투표로 선정하는 새로운 프로젝트를 시작함

Angular v20 주요 특징

지난 몇 년간 Angular는 Signals 기반 리액티비티, Zoneless 앱 등으로 큰 변화를 이끌었음
Angular v20에서는 진행 중인 기능의 안정성과 개발자 경험 개선에 집중했음

리액티비티(reactivity) 기능 안정화

Signals, computed, input, view queries API가 안정화 단계에 진입함
effect, linkedSignal, toSignal API도 안정화되어 신뢰성 있는 비동기 상태 관리가 가능해짐
Google, YouTube 등 대규모 서비스에서 input latency 35% 개선 등 성공 사례가 공유됨

새로운 실험적 API: resource, httpResource

resource API로 signal 변화에 따라 비동기 요청 및 스트리밍 데이터 처리가 쉬워짐
httpResource로 신호 기반 HTTP 요청 지원, signal에서 바로 요청 결과 사용 가능
WebSocket 등 다양한 스트리밍 데이터 패턴을 signal로 간단히 관리 가능함

Zoneless 기능 개발자 프리뷰

SSR 환경에서 Node.js의 unhandledRejection, uncaughtException 기본 핸들러 내장
클라이언트에서는 provideBrowserGlobalErrorListeners로 글로벌 에러 리스닝 가능
angular.json에서 zone.js polyfill을 제거하고 zoneless 모드로 전환하는 가이드 제공

서버 사이드 렌더링 고도화

증분 하이드레이션(incremental hydration), 라우트별 렌더링 모드가 안정화됨
필요한 UI만 뷰포트 진입 시 다운로드/하이드레이션해 JS 트래픽 최소화 실현
라우트 별로 SSR/CSR/Prerender 등 다양한 렌더링 모드 설정 가능

개발자 경험 및 생산성 향상

Chrome DevTools와 협업해 Angular 전용 성능 트랙 제공, 프레임워크 내부 렌더링, 이벤트, 체인지 디텍션 등 실시간 파악 가능
createComponent의 동적 생성, 디렉티브 적용, 신호 기반 바인딩 등 API 개선
템플릿에서 지수 연산자(**), in 연산자 및 untagged 템플릿 리터럴 지원
@for trackFn 미호출, nullish coalescing 오용, 구조적 디렉티브 미입력 등 진단 기능 강화

스타일 가이드 및 호스트 바인딩 개선

10년간의 사례를 바탕으로 스타일 가이드 단순화 및 현대화
파일/클래스명 접미사 기본 미생성, HostBinding/HostListener 대신 host 오브젝트 권장
typeCheckHostBindings 옵션 추가로 바인딩 오류 실시간 감지 지원

DevTools/테스트 환경 개선 및 Angular Material

증분 하이드레이션, deferrable view 디버깅 기능 Angular DevTools에 추가
Karma 대체로 vitest 지원, watch 모드 및 브라우저 테스트 실험적 도입
Material 버튼 컴포넌트 M3 스펙 부합, 용어 정비, 애니메이션/모션 제어 등 품질 개선

GenAI 및 LLM 지원

LLM이 최신 Angular 코드를 학습하도록 llms.txt 도입, 오픈 소스 샘플/가이드 제공
Genkit, Vertex AI 등과 연동 가이드, 실습 라이브 스트림, 베스트 프랙티스 공개

내장 control flow 도입과 구조적 디렉티브 폐기

v17 도입된 내장 control flow가 직관적, 타입 안정성, 성능 등 다방면에서 우수함
*ngIf, *ngFor, *ngSwitch는 v22에서 완전 제거 예정, 코드 마이그레이션 schematic 제공

공식 Angular 마스코트 프로젝트

Angular의 정체성과 커뮤니티 상징성을 강화할 공식 마스코트 후보 제시 및 RFC 오픈
로고에서 영감을 받은 쉴드 모양, Anglerfish(아귀) 캐릭터 등 제안
커뮤니티 투표 및 피드백으로 최종 선정, 이름 제안도 가능

앞으로의 로드맵

v20에서 리액티비티, zoneless, 증분 하이드레이션 등 대규모 기능을 다듬고 안정화
Selectorless, signal-forms, 유닛 테스트 개선, 마스코트 등 차기 대형 프로젝트 준비 중
커뮤니티의 적극적 의견 수렴을 통해 발전 방향 결정 예정

Read Entire Article