프론트기술/Angular

Angular 14 가 릴리즈 되었습니다.

RevFactory 2022. 6. 5. 00:26

Angular 14

Angular 14 (2022년 06월 02일)

Angular 14

- Angular 14 공식 발표 (Blog)
- Angular 14 Github 14.0.0
- Angular 14 Release Note
- Angular 14 Upgrade Guide (Check List)
- supported TypeScript version to v4.7 (v4.6 이전의 TypeScript 지원 안함)
- Node.js v14.15 이상

Angular 14 새로운 주요 Features

- Typed Forms
- Standalone Components (Preview)
- 개선사항
  - Bind to protected compoennt member
  - Optional injectors in Embedded Views
  - NgModel OnPush
- CDK 새로운 기능 추가 (menu, dialog)
- 모범 사례 소개
- Angular DevTools 오프라인 및 Firefox에서 사용 가능
 
 
 
 

Typed Forms

Reactive Form 에 타입을 지정하여 사용자 경험을 개선합니다.
 
AS-IS
form = new FormGroup({
    email: new FormControl(null),
    age: new FormControl(null),
});
 
TO-BE
form = new FormGroup({
    email: new FormControl<string|null>(null),
    age: new FormControl<number|null>(null),
});
 
타입이 정해져있기 때문에 아래와 같은 코드에서 email 이 string 타입인지 알 수 있기 때문에 length 를 불러올 수 있게 됩니다.
console.log(this.form.value.email.length);
 
다만, 버전 업데이트 이후, 모든 코드에 타입을 업데이트 할 수 없는 상황이라면, 아래와 같이 Untyped 를 붙여서 Angular 13 및 이전 버전에 있던 FormControls 및 FormGroups를 다시 제공하여 이전처럼 동작하게 할 수 있습니다.
 
이전 버전의 기능 유지 시
form = new UntypedFormGroup({
    email: new UntypedFormControl(null),
    age: new UntypedFormControl(null),
});
 
자세한 내용은 아래 링크에서 확인 가능합니다.
 
 

Standalone Components

Angular 컴포넌트를 독립적으로 실행할 수 있게 합니다. 아직은 개발자 Preview 버전으로 제공되며, 계속 변경될 수 있습니다.
Angular 와 React를 비교할 때 가장 많은 공격? 을 당하는 부분이 바로 이 점인데요. Angular는 Framework 형태로 제공 되다보니, 가볍게 컴포넌트를 개발하려고 할때도 불필요한 모듈이 필요합니다. Angular팀에서는 간소화된 방식을 제공하기 위해 독립 실행 가능한 컴포넌트를 추가하였습니다.
 
아래 코드에서 보는 것처럼 standalone 이라는 속성이 Component 정보에 추가되어 단독 실행 가능한 컴포넌트임을 지정합니다. 이렇게 지정될 경우 해당 컴포넌트에 필요한 컴포넌트나 모듈만 import 할 수 있습니다.
 
@Component({
  standalone: true,
  selector: 'photo-gallery',
  imports: [ImageGridComponent],
  template: `
    ... <image-grid [images]="imageList"></image-grid>
  `,
})
export class PhotoGalleryComponent {
  // component logic
}
 
이렇게 만든 컴포넌트는 ngModule 없이 단독 실행이 가능합니다.
ngModule 을 구성하는 AppModule 이 필요 없어집니다. AppModule 이 사라지면서 부트스트랩 방식도 변경이 필요한데, 아래와 같이 부트스트랩 방식을 변경해 줍니다.
 
main.ts
import {bootstrapApplication} from '@angular/platform-browser';
import {PhotoAppComponent} from './app/photo.app.component';

bootstrapApplication(PhotoAppComponent);
 
아직은 개발자 Preview 단계라서 IDE Support 도 안되고, 방식도 계속 변경이 되기 때문에 사용할 수는 없지만 매우 기대가 큰 기능일 것 같습니다.
 
 
자세한 내용은 아래 링크에서 확인 가능합니다.
 
 

Angular CLI 자동완성

Angular CLI에 자동완성 기능이 추가되었습니다.
TAB을 누르면 사용 가능한 다양한 명령과 옵션이 보여집니다.
 
아래 명령어로 자동완성을 설정합니다.
ng completion
 
MacOS 및 Linux 에서 지원하며, Windows의 cmd나 Powershell 에서는 지원하지 않는다고 합니다. 다만 WSL 환경에서는 가능합니다.
 
 

개선사항

- Bind to protected compoennt member
  protected 멤버에 대한 바인딩 기능
@Component({
  selector: 'my-component',
  template: '{{ message }}',  // Now compiles!
})
export class MyComponent {
  protected message: string = 'Hello world';
}
 
- Optional injectors in Embedded Views
viewContainer.createEmbeddedView(templateRef, context, {
  injector: injector,
})
 
- NgModel OnPush
@Component({
  selector: 'my-component',
  template: `
    <child [ngModel]="value"></child>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
class MyComponent {}
 
 
 

Reference