Angular v16의 새로운 기능은 무엇인가요?

Google에서 개발하여 웹 애플리케이션 구축을 위한 오픈 소스 솔루션으로 일반적으로 사용되는 Angular 프레임워크는 개발자에게 동적이고 반응적이며 확장 가능한 웹 애플리케이션을 구축할 수 있는 포괄적인 도구 및 기능 세트를 제공합니다.

Angular의 최신 버전인 버전 16은 개발 프로세스와 애플리케이션의 전반적인 성능 및 안정성을 크게 개선하는 수많은 매력적인 개선 사항과 개선 사항을 제공합니다.

각도 신호

각도 신호를 사용하면 반응형 값을 생성하고 이러한 값 간의 관계를 형성할 수 있습니다. 이에 대한 간단한 예시는 Angular 애플리케이션의 컨텍스트에서 볼 수 있는데, Angular 신호 라이브러리를 사용하여 두 변수 간에 연결을 설정하여 한 변수를 변경하면 다른 변수도 그에 따라 조정되도록 할 수 있습니다.

 @Component ({
   selector: 'my-app',
   standalone: true,
   template: `
{{ fullName() }} <button (click)="setName('John')">Click</button>
`,
})
export class App {
   firstName = signal('Jane');
   lastName = signal('Doe');
   fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
   constructor() {
       effect(() => console.log('Name changed:', this.fullName()));
   }
   setName(newName: string) {
       this.firstName.set(newName);
   }
} 

앞서 언급한 코드 세그먼트는 ‘fullName’이라는 계산 값을 설정하며, 이 값은 ‘firstName’과 ‘lastName’의 신호 값에 의존합니다. 또한 참조하는 신호의 값이 변경될 때마다 실행되는 기능 단위(FU)인 효과를 설명합니다.

복합 엔티티를 구성하는 두 구성 요소 중 하나를 조정할 때 발생하는 영향의 크기는 다음 시나리오에서 관찰할 수 있습니다. 개인의 이름에 대한 별칭으로 “John”이 지정되면 개발 도구의 로그 출력에 다음과 같은 선언이 나타납니다:

  Name changed: John Doe. 

독립형 Ng 새 컬렉션

Angular는 버전 16에서 처음부터 독립형 프로젝트를 생성할 수 있는 새로운 기능을 도입했습니다. 이 독립형 회로도의 개발자 미리 보기를 테스트하려면 Angular CLI 버전 16을 설치한 후 다음 명령을 실행해야 합니다:

 ng new --standalone 

이 과정을 통해 `NgModule` 선언이 없는 보다 간소화된 프로젝트 아키텍처를 얻을 수 있습니다. 또한 프로젝트 내의 모든 생성기는 독립적으로 사용할 수 있는 자급자족 지시어, 컴포넌트 및 파이프를 생성합니다.

자동 경로 매개변수 매핑

이 문장은 이미 공식적이고 기술적인 언어로 작성된 것으로 보이므로 대체 문구를 제공할 수 없습니다.

 export const routes: Routes = [{
   path: 'search:/id',
   component: SearchComponent,
   resolve: {
       searchDetails: searchResolverFn
   }
}];
 

버전 16 이전의 이전 버전의 Angular에서는 특정 URL에 대한 URL 매개 변수, 쿼리 매개 변수 또는 관련 데이터에 액세스하기 위해 ActivatedRoute 서비스를 명시적으로 주입해야 했습니다.

죄송하지만 무엇을 말하는지 이해할 수 없습니다.가능

 @Component({
   ...
})
export class SearchComponent {
   readonly #activatedRoute = inject(ActivatedRoute);
   readonly id$ = this.#activatedRoute.paramMap(map(params => params.get('id')));
   readonly data$ = this.#activatedRoute.data.map(({
       searchDetails
   }) => searchDetails);
} 

최신 Angular 버전 16에서는 여러 경로 매개변수를 구성 요소의 입력에 직접 바인딩할 수 있으므로 여러 경로 매개변수를 추출하기 위해ActivatedRoute를 주입할 필요가 없어졌습니다.

모듈 시스템을 사용하는 소프트웨어 프로그램 내에서 앞서 언급한 기능을 활성화하려면 필요한 값을 지정하여 라우터모듈의 설정을 구성해야 합니다.

 RouterModule.forRoot(routes, {
   bindComponentInputs: true
})
 

단독 애플리케이션은 API가 아닌 함수를 호출해야 합니다.

 provideRoutes(routes, withComponentInputBinding()); 

이 기능을 활성화하면 구성 요소가 단순화됩니다.

 @Component({
   ...
})
export class SearchComponent {
   @Input() id!: string;
   @Input() searchDetails!: SearchDetails;
} 

필수 입력

Angular 커뮤니티는 필요한 입력 요소를 지정할 수 있는 기능의 구현을 간절히 기다려 왔습니다. 이전에는 개발자가 필요한 변수가 없는 경우 NgOnInit 수명 주기 내에서 예외를 발생시키거나 컴포넌트의 선택기를 변경하여 필수 입력을 통합하는 등 다양한 접근 방식을 활용했습니다.

Flair 16에서는 주석 작업의 메타데이터 내에서 사용자 입력을 구성할 수 있는 간단한 메커니즘을 도입하여 사용자 입력 통합이 더욱 간소화되었습니다. 이 방법은 최적의 효율성을 보장하기 위해 초기화 프로세스 중에 쉽게 액세스할 수 있는 구성 개체를 제공하는 것입니다.

 @Input({
   required: true
}) name!: string;
 

개발 서버로서의 Vite

Angular 14에서는 이전 버전에 비해 빌드 시간을 약 40% 단축하는 새로운 JavaScript 번들러인 EsBuild가 발표되었습니다. 그럼에도 불구하고 개발자는 개발 목적으로 개발 서버를 사용하는 동안 이러한 성능 향상을 경험할 수 없었습니다.

향후 출시될 Angular 버전에서는 Vite 빌드 도구 내에 EsBuild를 통합하여 개발 수명 주기 전반에서 활용도를 높일 수 있습니다.

이 기능을 사용하려면 다음 단계에 따라 angular.json 파일 내에서 애플리케이션의 빌드 구성을 수정해야 합니다:

 "architect": {
   "build": {
       "builder": "@angular-devkit/build-angular:browser-esbuild",
       "options": {
           ...
       }
   } 

이 기능은 아직 테스트 단계에 있으며 추가적으로 개선될 수 있음을 알려드립니다.

개발 경험 및 성능 향상

최신 Angular 버전 16에는 데이터의 효율적인 관리를 위한 Angular 신호, 독립형 프로젝트 생성 지원, URL 매개변수 자동 매핑, 요구 사항 처리, 더 나은 개발을 위한 Vite와의 원활한 통합 등 몇 가지 주목할 만한 발전이 도입되었습니다. 이러한 혁신은 개발 프로세스를 간소화하고 애플리케이션의 전반적인 성능을 향상시키기 위해 설계되었습니다.