Angular 상태의 7가지 핵심 사항 — Google I/O 2022
Google I/O 및 Angular 14의 하이라이트
Google I/O는 Google에서 주최하는 개발자 컨퍼런스입니다. "I/O"는 Input/Output의 약자이며 "Innovation in the Open"이라는 슬로건입니다.
Google은 정보로 가득 찬 2시간 동안의 I/O 기조 연설을 마쳤습니다. AI, Android, 그리고 물론 수많은 Pixel 하드웨어가 모두 언급되었습니다.
이것은 내가 이 포스트에서 요약하고 있는 것보다 훨씬 더 많은 것이 있다는 것을 말하려는 것입니다.
여기서 우리는 Angular와 이 프레임워크의 미래에 초점을 맞출 것입니다. 동안 언급된 핵심 사항 각도의 상태 Mark Thompson과 Emma Twersky는 Angular 14의 일부 주요 기능과 일치합니다.
Angular 14는 2022년 6월에 릴리스되지만 릴리스 후보 14.0.0-rc.1에 대한 자세한 내용은 Angular의 Github 페이지에서 읽을 수 있습니다!
7가지 핵심 사항을 살펴보면 이러한 변경 사항이 유기적으로 서로를 지원하고 구축하는 방법을 알 수 있습니다.
마찬가지로 Angular 14는 이러한 점 중 일부를 개선하여 Angular를 향상시킵니다.
Angular 팀은 Angular의 런타임과 컴파일러를 처음부터 다시 작성하여 이제 앱이 더 우수하고 효율적인 Ivy 렌더링 엔진으로 구동되도록 했습니다.
다음은 Ivy Engine이 제공하는 몇 가지 이점입니다.
- 트리 쉐이킹에 대한 강조 덕분에 유형 검사 및 오류 보고 개선, 디버깅 개선, 번들 크기 감소(자세한 내용은 아래 참조)
- VS 코드용 Angular 언어 서비스 플러그인
- Angular Dev Tools 브라우저 확장
Ivy는 Angular 애플리케이션에서 상당한 차이를 만들 것을 약속합니다.
위에서 말했듯이 Ivy는 나무 흔들기를 매우 강조합니다. 이것은 TypeScript 컴파일러가 코드를 검사하고 필요한 라이브러리를 결정한 다음 불필요한 코드를 제거하는 프로세스입니다.
결과적으로 배포된 코드가 훨씬 줄어들고 응용 프로그램의 로딩 속도가 향상됩니다.
또한 Ivy는 건물 구성 요소를 서로 더 독립적으로 만들어야 합니다. 이렇게 하면 애플리케이션을 다시 컴파일하는 동안 변경된 구성 요소를 컴파일하는 것만으로 개발 시간이 단축됩니다.
이로써 다음 하이라이트인 독립형 구성 요소로 넘어갑니다.
Angular 블로그에서 Standalone 구성 요소의 목표는 "NgModules 없이 구성 요소와 애플리케이션을 구축할 수 있도록 함으로써 상용구를 줄이고 Angular를 사용하고 배우기 쉽게 만듭니다.”
이것은 무엇보다도 새로운 개발자가 Angular를 더 쉽게 배울 수 있도록 하기 위해 중요합니다!
Angular 14 및 독립 실행형 구성 요소
독립 실행형 구성 요소는 Angular 14의 주요 기능 중 하나입니다.
독립 실행형 구성 요소는 기존 NgModule에 정의되어 있지 않으며 NgModule에 의존하지 않고 종속성을 처리합니다. 중개 NgModule에 대한 요구 사항 없이 직접 의존할 수 있습니다.
다음과 같이 구성 요소를 작성할 수 있어야 합니다.
import {Component} from '@angular/core';@Component({
standalone: true,
template: `Standalone component!`
})
export class LonelyComponent {}
독립형 플래그는 @Component 데코레이터의 메타데이터이며 구성 요소를 "독립 실행형"으로 지정합니다.
즉, standalone 플래그는 구성 요소를 개별적으로 사용할 수 있음을 나타냅니다.
많은 경우 독립 실행형 구성 요소는 상용구를 줄일 수 있습니다.
Angular 팀은 프레임워크를 처음 접하는 개발자를 위한 새로운 시작하기 경로를 설계하고 있습니다.
현재 학습 경로가 특히 신규 개발자에게 매우 가파르기 때문에 이는 매우 좋은 소식입니다.
내 작은 Angular 튜토리얼은 곧 쓸모없게 될 것입니다. 그러나 거기에 더 나은 것이 있다면 분명히 전체 커뮤니티에 도움이 될 것입니다.
아시다시피 Angular는 기본적으로 모범 사례가 내장된 독단적인 프레임워크입니다.
Angular는 강력한 기본값과 모범 사례를 유지하기 위해 노력합니다. 이 비전을 지원하고 개발자가 가장 많이 요청한 기능을 구현하기 위해 Angular는 Angular 템플릿에서 유형이 지정된 양식에 대한 지원을 추가하고 있습니다.
Angular 14 및 형식화된 형식
Angular 템플릿에서 유형이 지정된 양식에 대한 지원은 유형 검사 및 오류 보고는 물론 더 나은 디버깅을 향상시키기 위해 요청된 기능입니다.
다음 코드를 살펴보자. 이것은 Angular 팀에서 제공한 프로토타입 코드를 단순화한 것입니다.
의 값을 설정하려고 했습니다. firstName 속성을 숫자로 변경했고 즉시 TypeScript 오류가 발생했습니다. TS 오류: '10' 유형의 인수는 '문자열 | 없는.'
17행의 코드가 populate() 메서드가 실행되지 않으면 TypeScript에서 오류를 알려줍니다.
다른 상황에서는 로컬에서 내 앱을 시도하는 동안 우연히 발견했습니다. 또는 더 나쁜 것은 사용자가 프로덕션에서 며칠 또는 몇 주 후에 나에게 말할 것입니다.
Stackblitz에서 Angular 14를 사용하여 이 예제를 찾고 Angular 13을 사용하여 동일한 코드와 비교합니다.
Angular 13을 사용하면 잠재적으로 위험한 코드에도 불구하고 불평하지 않고 앞으로 나아갈 수 있다는 것을 빠르게 알 수 있습니다.
Angular는 독단적인 프레임워크임에도 불구하고 다음과 같은 다양한 요구 사항을 지원할 수 있다는 점을 분명히 했습니다.
- 인디 개발자: 새로운 독립 실행형 구성 요소를 사용하면 너무 많은 상용구 없이 쉽게 시작할 수 있습니다. CLI는 이미 새로운 Angular 앱, 구성 요소 및 기타 작업을 다음과 같이 매우 쉽게 만들 수 있습니다.
ng new. - Startups: Angular Language Service는 개발자가 일관된 코드를 생성하도록 보장합니다. 개발자는 입력 및 도구 덕분에 배포 전에 실수를 발견할 수 있습니다.
- 확장: 국제화 및 PWA(프로그레시브 웹 앱)가 유용할 것입니다. 게다가, 독단적이기 때문에 다른 프로젝트에서 작업을 시작하기 쉽고 그것이 어떻게 보일지 정확히 알 수 있습니다.
- 대규모 조직: 다음 단계로 마이크로프론트엔드?
이 모든 것에서 update.angular.io를 사용하여 새로운 주요 버전이 나올 때마다 또는 더 자주 Angular를 업데이트하는 것은 상당히 쉽습니다.
고유한 페이지 제목을 더 쉽게 정의할 수 있는 새로운 기능입니다. 이것은 웹 프레임워크의 일반적인 접근성 문제를 해결합니다.
독특하고 짧은 페이지 이름을 제공하는 11y 서비스를 사용하면 사람들이 웹 페이지의 내용과 목적을 즉시 이해할 수 있습니다. 페이지 제목은 스크린리딩 소프트웨어가 보고하는 첫 번째 요소이기 때문에 시각 장애가 있는 사용자에게 매우 중요합니다.
Angular는 단일 페이지 앱이므로 새 페이지로 전환하는 것과 같은 대부분의 전환에는 페이지 새로 고침이 필요하지 않습니다. 최근까지는 각 페이지의 제목이 동일하여 페이지의 내용이나 목적을 이해하는 데 쓸모가 없었습니다.
Angular 14로 접근성 향상
Angular 14에서 라우터는 고유한 페이지 이름을 구축하는 매우 쉬운 방법과 함께 제공됩니다.
const routes: Routes = [
{ path: 'shop', component: HomeComponent, title: 'Home - CompanyName' },
{ path: 'about', component: ShopComponent, title: 'Shop - CompanyName' },
{ path: 'locate', component: ContactsComponent, title: 'Contacts - CompanyName' },
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', component: HomeComponent },
];이렇게 하면 개발자가 페이지 제목을 만들 때 표준 관행을 더 쉽게 따를 수 있습니다.
더 많은 진단 기능은 코드 편집기가 배포 전에 개발자에게 일반적인 실수를 경고하는 데 도움이 됩니다. 여기에 두 가지 새로운 CLI 명령이 있습니다.
ng analytics: 분석 설정을 제어하고 인쇄하는 방법ng cache: 캐시 정보를 제어하고 출력하는 방법
현재 컴파일러는 경고를 제공하지 않으며 컴파일을 방해하는 치명적인 오류가 있는 경우에만 실패합니다.
추가 진단을 사용하면 사소한 오류 또는 foo?? foo가 nullable이 아닌 경우 'bar'입니다.
Github의 문제에 따르면 제안된 솔루션은 "엄격하게 치명적인 오류가 아닌 사용자 템플릿에 대한 경고/정보 진단을 제공하는 "확장 템플릿 진단" 검사를 활성화하는 컴파일러의 새로운 개인 플래그.
이 문제는 대부분 필요한 인프라 구축에 관한 것이지만 시스템을 검증하기 위해 한두 가지 간단한 검사를 포함해야 합니다.".
YouTube에서 전체 State of Angular 비디오를 확인하십시오.
'로 회담을 마무리한다.Angular 개발자에게 이보다 더 좋은 때는 없었습니다.'
최소한 지금은 프로젝트에서 Angular를 사용하기에 아주 멋진 순간입니다!
읽어 주셔서 감사합니다.
최근댓글