Angular 14 릴리스 기능 및 업데이트 가이드 > 시티즌 인사이트

본문 바로가기

IT&개발 정보 Angular 14 릴리스 기능 및 업데이트 가이드

페이지 정보

작성자 GrapeCity 작성일 22-08-22 10:19 조회 573회 댓글 0건

본문

Angular 14가 공식적으로 출시되었습니다! 이 Angular 버전에는 지정된 형식, 독립 실행형 컴포넌트 및 Angular CDK의 새로운 기본 기능과 같은 많은 강력한 기능이 포함되어 있습니다.



독립 실행형 컴포넌트로 Angular 간소화


독립 실행형 컴포넌트는 NgModules의 요구 사항을 줄여 응용 프로그램을 빌드하는 간소화된 방법을 제공하기 위한 것입니다. 사용할 준비가 된 반면에 안정적인 API는 아니며 잠재적으로 Angular의 일반적인 이전 버전과의 호환 가능 모델 외에서 변경됩니다.

독립 실행형 컴포넌트, 지시문 및 파이프가 있는 standalone: true 플래그를 사용하면 @NgModule() 없이 @component()에서 바로 가져오기를 추가할 수 있습니다. 이 기능은 계속해서 다음 달에도 빌드됩니다.



형식이 정해진 Angular 양식


이 기능은 Angular의 주요 Github 문제인 Angular 반응형 양식 패키지의 엄격한 형식 구현을 끝내는 것입니다. 형식이 지정된 양식은 양식 컨트롤, 그룹 및 배열 내부 값이 전체 API 표면에서 형식이 안전한지 확인합니다. 이는 특히 중첩된 복잡한 표면에 대해 더욱 안전한 형식을 활성화합니다.



간소화된 모범 사례


Angular 14는 Angular에 대한 새로운 변경 감지 지침부터 매우 편리한 사용자 환경을 전달하도록 설계되었습니다. v14에는 개발자가 라우팅부터 코드 편집기, Angular의 새로운 수정 감지 지침까지 프리미엄 응용 프로그램을 빌드할 수 있는 도구가 포함됩니다.



간소화된 페이지 제목 접근성


또다른 권장 모범 사례는 응용 프로그램의 제목 페이지가 독특하게 통신되도록 합니다. v13.2에서 Angular 라우터의 새로운 Route.title 특성은 이를 수월하게 해줍니다. 이제 제목 추가는 추가 가져오기에 대한 요구 사항이 필요하지 않으며 강력하게 형식이 지정됩니다.



확장된 개발자 진단


새로운 확장된 진단은 템플릿에 대한 더 많은 통찰력과 개선할 수 있는 방법을 제공하는 확장 가능한 프레임워크를 제공합니다. 진단은 런타임 전에 버그를 포착하여 템플릿에 대한 정확하고 실행 가능한 제안 사항이 있는 컴파일 시간 경고를 제공합니다.



Banana-in-a-Box(상자 안 바나나) 오류


개발자가 일반적으로 저지르는 구문 오류는 양방향 바인딩에 대괄호와 괄호를 바꿔 요구되는 [()] 대신 ([])가 생기는 것입니다. "banana"(괄호)는 "box"(대괄호) 안에 있어야 합니다.

이는 일반적인 오류인 반면 기술적으로는 계속 유효한 구문입니다. CLI는 이것이 유효하지만 드문 사례라고 인지합니다. v13.2 릴리스에서는 이 실수에 대한 상세한 메시지와 CLI 및 코드 편집기 내에서 이를 수정하는 방법에 대한 지침도 제공됩니다.



Null 가능이 아닌 값에서 Null 병합 포착


확장된 진단은 Angular 템플릿에서 Null 병합 연산자(??)로 실수가 생기게 합니다.

이는 입력이 Null이 가능하지 않는 경우 일어나며 유형이 Null을 구성하지 않거나 정의되지 않았음을 의미합니다.

확장된 진단은 ng 빌드, serve 동안 및 실시간으로 Angular 언어 서비스로 경고를 표시합니다. 이러한 진단은 tsconfig.json에서 구성할 수 있으며 여기서 진단을 경고, 오류 또는 억제로 간주할지 여부를 지정할 수 있습니다.



트리-쉐이킹이 가능한(Tree-shakeable) 오류 메시지


이 Angular 14 릴리스에는 새로운 런타임 오류 코드가 포함됩니다. 강력한 오류 코드는 디버깅을 단순하게 해줍니다.

이를 통해 개발자는 최적화 도구를 빌드하여 생산 번들에서 메시지(긴 문자열)를 트리-쉐이킹하는 동안 오류 코드를 유지할 수 있습니다.

프로덕션 문제를 디버깅하는 동안 전체 텍스트를 감지하기 위해 Angular는 Angular 참조 설명서를 확인하고 개발 환경에서 실수를 복제하는 것을 권장합니다.



Typescript 4.7 지원


Angular 14는 현재 TypeScript 4.7을 지원하고 이제 기본적으로 ES2020을 대상으로 하여 CLI에서 레벨을 낮출 필요 없이 더 작은 코드를 제공할 수 있도록 합니다.



보호되는 컴포넌트 멤버에 바인딩


이제 템플릿에서 직접 보호되는 컴포넌트 멤버를 바인딩할 수 있습니다. 이를 통해 재사용 가능한 컴포넌트의 공용 API 표면을 더 잘 제어할 수 있습니다.



포함된 보기의 선택적 인젝터


Angular 14는 ViewContainorRef.createEmbeddedView 및 TemplateRef.createEmbeddedView를 통해 포함된 보기를 개발하는 동안 선택적 인젝터 전달에 대한 지원을 추가합니다. 그러면 인젝터는 특정 템플릿 내에서 종속성 동작을 개인화할 수 있도록 합니다.



NgModel onPush


NgModel 변경 사항은 이제 OnPush 컴포넌트의 UI에 반영됩니다.



CDK의 새로운 기본 요소


Angular의 컴포넌트 개발 키트는 Angular 컴포넌트를 빌드하기 위한 도구 제품군을 제공합니다.

14에서 Angular는 CDK Menu 및 Dialog를 안정적으로 증진시키고 있습니다. V14에는 WAI-ARIA 메뉴 및 메뉴바 디자인 패턴을 기반으로 액세스 가능한 사용자 정의 컴포넌트를 만드는 데 사용할 수 있는 새로운 CDK 기본 요소가 있습니다.



컴포넌트 테스트 장비의 hasHarness 및 getHarnessOrNull


Angular 14에는 하네스가 있는지 여부를 확인할 HarnessLoader의 새로운 메서드가 포함되며 하네스가 있는 경우 하네스 인스턴스를 반환합니다.



Angular CLI의 향상된 기능


Angular 14에서 사용되지 않는 카멜식 지원은 제거되었으며 결합된 별칭 사용에 대한 지원이 추가되었습니다.



ng


Completion

Angular 14는 ng serve와 같은 명령어에 실시간 자동 완성을 도입합니다. 명령줄에서 오류가 발생하는 경우 오타는 종종 중요한 기여자가 됩니다. 이를 해결하기 위해 Angular 14는 ng completion을 실행하며 실시간 미리 입력 완성을 도입합니다.


Analytics

CLI의 분석 명령을 통해 분석 설정을 제어하고 분석 정보를 인쇄할 수 있습니다. 상세한 출력 효율성은 분석 구성을 명확하게 전달하며 원격 측정 데이터를 팀에 제공합니다.


Cache 

Ng cache는 명령줄에서 캐시 정보를 제어하고 인쇄하는 방법을 제공합니다. 이를 통해 디스크를 활성화, 비활성화하거나 삭제하고 통계와 정보를 인쇄할 수 있습니다.



  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2022 GrapeCity inc.