Angular V15: 최신 기능과 업데이트

이번 글에서는 Angular V15의 새로운 기능과 업데이트에 대해 깊이 있게 다뤄보겠습니다. Angular 팀에서 2022년 11월 16일에 출시한 이 버전은 개발자들에게 많은 기대를 모으고 있습니다. Angular V15는 성능 향상과 개발 경험을 개선하기 위해 다양한 변화를 가져왔습니다. 이제 Angular V15의 주요 기능과 업데이트를 살펴보고, V14에서 V15로 업그레이드하는 방법까지 알아보겠습니다.

 

Angular V15: 최신 기능과 업데이트

 

Angular V15의 새로운 기능과 업데이트

독립형 API (Standalone API)

Angular V15의 주요 변화 중 하나는 독립형 API의 도입입니다. 이전에는 NgModules에 의존하여 애플리케이션을 개발했지만, 이제는 독립형 API를 통해 NgModules 없이도 애플리케이션을 개발할 수 있습니다. 이는 코드 양을 줄이고 개발 속도를 높이는 데 큰 도움이 됩니다. 독립형 API를 사용하면 HttpClient, Angular Elements, 라우터 등을 자유롭게 사용할 수 있으며, 단일 컴포넌트로도 애플리케이션을 실행할 수 있습니다.

 

디렉티브 구성 API (Directive Composition API)

Angular V15에서는 디렉티브 구성 API가 추가되었습니다. 이는 코드 재사용성을 높이는 데 매우 유용한 도구로, 개발자들이 Angular 애플리케이션을 만들 때 시간을 절약할 수 있게 해줍니다. 디렉티브 구성 API는 모든 디렉티브 선언을 포함하며, 이를 통해 호스트 컴포넌트의 수를 늘릴 수 있습니다.

 

이미지 디렉티브 (NgOptimized Image)

Angular 14에서 실험적으로 도입된 NgOptimized Image 디렉티브가 V15에서는 안정화되었습니다. 이 디렉티브는 이미지 다운로드 시간을 단축시키고, 자동으로 srcset을 생성하여 이미지를 적절한 크기로 업로드할 수 있도록 도와줍니다. 또한 Fill Mode를 통해 이미지의 크기를 부모 컨테이너에 맞게 자동으로 조정할 수 있습니다.

 

기능적 라우터 가드 (Functional Router Guards)

Angular V15에서는 기능적 라우터 가드가 도입되어 불필요한 코드를 줄이고 Angular 패키지 크기를 줄이는 데 기여합니다. 이는 트리 쉐이킹을 통해 이루어지며, 라우터의 기본 출력과 지연 로딩을 자동으로 언래핑하는 기능도 추가되었습니다.

 

더 나은 스택 트레이스 (Better Stack Traces)

개발자들이 디버깅할 때 겪는 어려움을 해결하기 위해, Angular V15에서는 스택 트레이스를 통해 코드에서 오류가 발생한 정확한 위치를 쉽게 파악할 수 있습니다. 이를 통해 문제를 빠르게 해결할 수 있습니다.

 

안정적인 MDC 기반 컴포넌트 (Stable MDC-Based Components)

Angular V15에서는 Material Design Component (MDC)를 기반으로 하는 안정적인 컴포넌트가 추가되었습니다. 새로운 컴포넌트는 기존의 구현 방식과 호환되며, 'legacy' import를 통해 접근할 수 있습니다.

 

기타 개선 사항

• 슬라이더에 범위 선택 옵션 추가
• CDK Listbox: WAI-ARIA Listbox 표준을 따르는 새로운 Angular 기본 요소
• 자동 언어 서비스 가져오기: 템플릿에 필요한 컴포넌트를 자동으로 가져오는 기능
• 확장된 esbuild 지원: 빠른 빌드 시간을 위해 ng build에서 esbuild 실험적 지원

 

Angular V14에서 V15로 업그레이드하는 방법

업그레이드 전 준비 사항

• Angular V15는 Node.js 버전 14.20.x, 16.13.x, 18.10.x와 호환됩니다.
• TypeScript 버전 4.8 이상이 설치되어 있어야 합니다.

 

업그레이드 절차

애플리케이션 프로젝트 디렉토리에서 다음 명령어를 실행합니다:

ng update @angular/core@15 @angular/cli@15

 

Angular Material 부품을 업데이트합니다:

ng update @angular/material@15

 

1. Angular V15에서는 CSS @keyframes에 컴포넌트의 스코프 접두사가 추가되므로, TypeScript에서 keyframe 이름을 사용할 수 없습니다. 이를 해결하려면 뷰 인캡슐레이션을 변경하거나 코드에서 Define Keyframes의 모든 인스턴스를 업데이트해야 합니다.
2. tsconfig.json에서 enable을 제거할 필요가 없습니다.
3. 기본 클래스에 생성자 상속과 DI를 사용할 때 데코레이터를 사용해야 합니다. 이러한 기본 클래스가 @Injectable 또는 @Directive로 주석 처리되지 않으면 컴파일러가 오류를 발생시킵니다.
4. ControlValueAccessor가 적용된 후에는 setDisabledState를 사용하여 비활성 상태를 설정합니다. FormsModule.withConfig 또는 ReactiveFormsModule.withConfig를 사용하여 반복을 피할 수 있습니다.
5. 각 ActivatedRouteSnapshot 객체에 제목 속성을 설정해야 합니다. 제목은 V15에서 필수 속성입니다.
6. Router에서는 상대적 링크 해상도를 수정할 수 없습니다. 이제 표준 버그 패치를 피하기 위해 상대적 링크 해상도를 사용할 필요가 없습니다.
7. DATE_PIPE_DEFAULT_TIMEZONE 토큰 대신 DATE_PIPE_DEFAULT_OPTIONS를 사용하여 시간대를 설정합니다. DATE_PIPE_DEFAULT_TIMEZONE은 버전 15에서 더 이상 사용되지 않습니다.
8. 보안 관련 특성을 속성이나 프로퍼티로 바인딩할 수 있는 iframe 인스턴스가 있을 수 있습니다. 이를 해결하려면 최신 버전으로 업그레이드하여 더 엄격한 표준을 준수해야 합니다.
9. Injector.get(InjectFlags)의 인수를 injection으로 바꿉니다. V15에서는 InjectFlags Injector.get() 뷰 지원이 제거되었습니다.
10. TestBed.inject에 InjectFlags 인수를 사용했던 기존 인스턴스를 InjectOptions 인수를 사용하도록 업데이트합니다. TestBed.inject(InjectFlags) 옵션은 Angular 15에서 더 이상 사용되지 않습니다.
11. @Injectable 또는 InjectionToken과 함께 제공되는 ngModule을 사용하는 것이 권장되지 않습니다.
12. @Injectable 또는 InjectionToken과 함께 제공되는 any를 사용하는 것이 권장되지 않습니다.
13. RouterLinkWithHref를 RouterLink로 대체합니다. RouterLinkWithHref 디렉티브는 15 버전에서 더 이상 사용되지 않습니다.
14. Angular Material v15에서 컴포넌트가 MDC를 기반으로 리팩토링되어 DOM과 CSS 클래스에 영향을 미칩니다. 업그레이드 후 애플리케이션과 상호작용을 시각적으로 확인하는 것이 좋습니다.

 

 

결론

Angular V15는 안정성, 개발자 생산성, 성능을 향상시키기 위해 많은 노력을 기울였습니다. Angular 팀은 개발자들의 피드백을 반영하여 훌륭한 기능과 개선 사항을 제공했습니다. 앞으로도 Angular 팀이 가져올 새로운 개선 사항을 기대해 봅니다.

제품 소유자이거나 프로젝트에 Angular를 사용하려는 계획이 있다면, 지금이 Angular를 배우기 좋은 시기입니다. Angular V15의 다양한 기능과 개선 사항을 통해 더 나은 애플리케이션을 개발할 수 있을 것입니다.