Angular 16 (2023년 5월 4일)

Angular 16

- Angular 16 공식 발표 (Blog)
- Angular 16 Github 16.0.0
- Angular 16 Release Note

- Angular 16 Upgrade Guide (Check List)
- supported TypeScript version to v5.0

- supported Node.js v16.14.x, v18.10.x

Angular 16 새로운 주요 Features

반응성 개선

  - 변경 감지 프로세스 중 계산이 줄어들어 런타임 성능이 향상되었습니다.

  - 애플리케이션 전체에서 뷰의 종속성과 데이터 흐름을 명확하게 정의하는 반응성에 대한 더 간단한 멘탈 모델입니다.

  - 향후 릴리스에서 영향을 받는 구성 요소의 변경 사항만 확인할 수 있는 세분화된 반응성.

  - 모델이 변경되었을 때 프레임워크에 알리는 신호를 사용하여 향후 릴리스에서 Zone.js를 선택 사항으로 설정할 수 있는 기능.

  - 각 변경 감지 주기에서 재계산에 따른 불이익 없이 계산된 프로퍼티를 제공합니다.

  - 반응형 입력을 도입할 계획을 통해 RxJS와의 상호 운용성 향상.

Angular Signals (개발자 프리뷰)

  - Signals은 Angular 애플리케이션 내에서 상태 변경을 관리할 수 있는 기능

  - Solid.js에서 영감을 받은 신호는 get() 메서드를 사용하여 값을 반환하는 함수이며, set() 메서드를 사용하여 새 값으로 호출하여 업데이트

  - Signal 을 사용하면 종속성이 변경될 때 자동으로 업데이트되는 반응형 값 그래프를 생성

  - RxJS 옵저버블과 결합하여 강력하고 선언적인 데이터를 생성

필수 컴포넌트 입력

  - 개발자는 컴포넌트의 특정 입력을 필수로 표시하여 상위 컴포넌트가 해당 입력을 제공하거나 오류를 던지도록 할 수 있음

  - 이 기능은 버그와 입력 오류를 동시에 잡아내고 컴포넌트가 효율적으로 작동하는 데 필요한 모든 데이터를 수신하도록 보장

비파괴 Hydration (개발자 프리뷰)

  - Angular는 하이드레이션 및 서버 측 렌더링의 성능과 개발자 경험을 개선하기 위해 Chrome Aurora 팀과 파트너십

  - React와 Next.js에는 이미 하이드레이션이 지원되었지만 Angular에서 구현하기에는 복잡한 기능이었음

  - SSR 애플리케이션을 더 빠르고 원활하게 만들 수 있게 됨

  - Angular는 애플리케이션을 처음부터 다시 렌더링하지 않고 내부 데이터 구조를 구축하는 동안 기존 DOM 노드를 살펴보고 해당 노드에 이벤트 리스너를 연결

  - 이점

    콘텐츠 깜박임 없음,

    더 나은 웹 코어 바이탈

    미래 지원 아키텍처

    기존 애플리케이션과의 손쉬운 통합

    ngSkipHydration 속성을 사용하여 수화 기능을 점진적으로 채택

기타 기능 및 개선 사항

- Tailwind CSS에 대한 기본 지원

- CSS 격리 지원

- 보안을 개선하고 크로스 사이트 스크립팅(XSS) 공격을 방지

- 라우터 데이터의 동적 가져오기 기능으로 ActivatedRoute 서비스를 주입하지 않고도 라우터 정보를 컴포넌트 입력에 쉽게 바인딩

- Angular Material에는 새로운 날짜 범위 선택기 컴포넌트가 포함