Angular 10 새로운 기능 > 시티즌 인사이트

본문 바로가기

시티즌 커뮤니티

시티즌 인사이트

IT&개발 정보 Angular 10 새로운 기능

페이지 정보

작성자 GrapeCity 작성일 20-07-08 00:00 조회 1,227회 댓글 0건

본문

9a187e1ffa5d9bd396a3d8699f156096_1598329422_7001.png
 

지난 6월 말에 Angular 버전 10.0.0이 릴리스되었습니다. 주요 릴리스인 Angular 10에는 Angular Material의 새로운 날짜 범위 선택기, TypeScript 버전 업그레이드, 라이브러리 버전 업데이트 등의 변경 사항이 포함되어 있습니다.

새로운 기능은 다음과 같습니다.

  • Ngtsc 컴파일러 인터페이스

  • 비동기 타임아웃 구성

  • 부실 잠금 파일 보고

  • basePaths의 지연 계산

  • 번역 파일 병합

  • 명시적 매핑


Angular 10의 새로운 기능

Angular 9 릴리스에는 Ivy 컴파일러가 도입되었습니다. 업그레이드된 Angular 10에서는 품질 및 성능 향상에 중점을 두었습니다.

Angular 10에서 가장 크게 업데이트된 것은 작업 영역을 생성할 때 더 엄격하게 설정할 수 있는 기능(선택 사항)입니다. 이렇게 설정하려면 ng new –strict라는 ng 명령을 실행할 때 엄격한 플래그를 활성화하면 됩니다. 이 플래그를 활성화하면 더 나은 유지 관리 편의성, 버그 캐칭(catching), 고급 최적화를 가능케 하는 새로운 설정으로 작업 영역이 초기화됩니다.


9a187e1ffa5d9bd396a3d8699f156096_1598329449_3315.jpg
 


Angular 10 - 주요 변경 사항:


TypeScript 3:

현재 TypeScript 3.9가 Angular 10에 도입되어 있고 TypeScript 3.8은 제거되었습니다. TypeScript 3.6 및 3.7도 이제 지원되지 않습니다.


기본 브라우저 구성 업데이트:

기본 브라우저 구성은 IE9, IE10과 같이 오래되고 덜 사용되는 브라우저는 배제하도록 업데이트되었습니다.


엄격한 프로젝트 설정:

선택 사항인 더 엄격한 설정을 사용해 ng new -- strict를 통해 새 작업 영역을 만들 때 프로젝트를 엄격하게 설정할 수 있습니다. 이렇게 하면 유지 관리 편의성이 향상되고, 버그 캐칭에 도움이 되며, CLI를 통해 앱에서 고급 최적화를 수행할 수 있습니다.


CommonJS 가져오기에 대한 경고:

CommonJS로 패키징된 종속성을 사용하면 응용 프로그램의 규모가 커지고 속도가 느려질 수 있습니다. 이제 Angular 10에서는 응용 프로그램이 이 번들 중 하나를 가져올 때 경고가 표시됩니다.


TSlib 및 TSLint 업데이트:

도우미 함수가 포함된 TypeScript용 런타임 라이브러리인 TSlib는 TSlib 2.0으로 업데이트되었습니다. TypeScript용 정적 분석 도구인 TSLint는 TSLint 6으로 업데이트되었습니다.


ESM5 및 FESM5 번들:

이제 Angular 패키지 형식에는 ESM5 또는 FESM5 번들이 포함되어 있지 않습니다. 이는 Angular 패키지 및 라이브러리에 대한 다운로드 및 설치 시간을 절약하기 위한 것입니다.


Angular Material 날짜 범위 선택기:

Angular 10 릴리스에는 새로운 날짜 범위 선택기 컨트롤도 포함되어 있습니다. 날짜 범위 선택기를 사용하려면 mat-date-range-input 및 mat-date-range-picker 컴포넌트를 사용하면 됩니다.


9a187e1ffa5d9bd396a3d8699f156096_1598329461_4794.png
 


Angular 10 - 기능:


Ngtsc 컴파일러 인터페이스:

프로젝트 인터페이스를 사용해 여러 개의 유형 검사 파일을 관리하는 ngtsc 컴파일러를 래핑하는 컴파일러 인터페이스가 추가되어, 필요에 따라 Scriptinfo를 만들어 냅니다.


비동기 타임아웃 구성:

이제 비동기 잠금 타임아웃을 구성할 수 있습니다. 따라서 ngcc.config.js 파일이 AsyncLocker에 대해 retryAttempts 및 retryDelay 옵션을 설정할 수 있게 되었습니다. 통합 테스트에서는 새로운 타임아웃 검사를 추가하고 ngcc.config.js 파일을 사용하여 타임아웃 시간을 줄임으로써 테스트가 너무 오래 지연되는 일을 방지합니다.


부실 잠금 파일 보고:

ngcc 성능을 향상하기 위해 이제 부실 잠금 파일을 즉시 보고할 수 있게 되었습니다. 그런 다음, tsconfig 파일의 캐싱된 사본을 보관하고 tsconfig 경로가 동일한 경우 재사용할 수 있습니다.


basePaths의 지연 계산:

성능 향상을 위해 basePaths의 계산을 지연시켜 TargetedEntryPointFinder에서 필요한 경우에만 작업이 수행되게 했습니다. 전에는 찾기가 인스턴스화될 때마다 basePaths가 계산되었는데, 이는 대상 진입점이 이미 처리되었을 때는 헛일에 불과했습니다.


번역 파일 병합:

전에는 로캘당 한 개의 번역 파일만 허용되었습니다. 이제 사용자는 로캘당 여러 개의 번역 파일을 지정할 수 있고, 각 파일의 트랜잭션은 메시징 ID에 의해 병합됩니다.


알 수 없는 요소 경고:

이제 알 수 없는 요소에 대한 경고는 오류로 기록됩니다. console.error를 통해 어떤 것도 기록되지 않을 것으로 기대하는 도구에서는 이것이 문제를 일으킬 수 있지만 앱을 중단하지는 않습니다.


JSDoc 메모 제거:

이제 Angular NPM에는 클로저 컴파일러의 고급 최적화를 지원하기 위한 특정 JSDoc 메모가 포함되어 있지 않습니다.


자정을 넘기는 기간(단위: 일) 서식 지정:

자정을 넘기는 기간(단위: 일) 서식 지정을 개선하기 위해 로직을 업데이트했습니다. b 또는 B 서식 코드로 시간의 서식을 지정할 때 렌더링된 문자열은 여러 날에 걸친 기간을 적절히 처리하지 못했습니다. 대신에 로직은 AM의 default case를 사용했습니다.


CanLoad에서 Urltree 반환 가능:

이제 CanLoad에서 UrlTree를 반환할 수 있게 되었습니다. UrlTree를 반환하는 CanLoad 가드는 현재 탐색을 취소하고 리디렉션됩니다. 이는 추가된 CanActivate 가드에 사용할 수 있는 현재 동작과 일치합니다. 이것은 사전 로드에 영향을 미치지 않습니다. CanLoad 가드는 모든 사전 로드를 차단하며, CanLoad 가드가 포함된 모든 회전은 사전 로드되지 않고 가드가 사전 로드의 일부로 실행되지 않습니다.


비어 있는 확인자 취소 탐색:

EMPTY를 반환하는 모든 확인자는 이제 탐색을 취소합니다. 탐색을 계속하도록 허용하려면 개발자는 자신의 확인자를 업데이트하여 default!Emtpy와 같은 일부 값을 업데이트해야 합니다.


엔터티 자동 완성 제거:

의심스러운 값과 성능 문제로 인해 &amp와 같은 HTML 엔터티에서 자동 완성이 제거되고 있습니다.


EntryPoint 매니페스트 성능 향상:

진입점 매니페스트의 크기를 줄이고 매니페스트에 캐싱 기술을 사용함으로써 응용 프로그램 성능을 향상했습니다. 또한 종속성 캐싱이 진입점 매니페스트에서 이루어져 매번 계산되는 대신 거기서 읽힙니다.


명시적 매핑:

명시적 매핑이 클로저에서 devmode 파일로 노출됩니다. 이 기능은 프로덕션 빌드 입력을 devmode 등가물로 번역해야 하는 개발 도구를 염두에 둔 것입니다.


버그 수정:

ModuleWithProviders 제네릭 속성:

ModuleWithProviders 패턴이 Ivy 컴파일러와 함께 작동하는 데 필요한 제네릭 매개 변수가 필요했지만 보기 엔진으로 인해 제네릭 유형이 생략될 수 있었습니다. 이 문제를 수정했고, ModuleWithProviders의 경우 제네릭이 필수가 되었습니다.


데코레이팅되지 않은 클래스:

Angualr를 사용하는 데코레이팅되지 않은 클래스의 파생 클래스를 데코레이팅하기 위해 데코레이팅되지 않은 클래스 마이그레이션에 로직이 추가되었습니다.


Urlmatcher 유형:

전에는 Urlmatcher의 유형이 null을 반환할 수 있다는 사실을 반영하지 않았습니다. 이제 이 릴리스에서는 Urlmatcher의 유형이 항상 null을 반환할 수 있다는 사실을 반영합니다.

holey 배열에서 정의되지 않은 식을 방지하는 컴파일러, 존재하지 않는 기호를 가져올 때 마이그레이션 오류를 방지하는 핵심 등 다수의 버그 수정이 이루어졌습니다. Terser 인라인 처리 버그에 대해서도 핵심에서 문제를 해결했습니다. 또 다른 버그 수정을 통해 TestBed의 재정의로 영향을 받는 모듈을 적절하게 식별합니다.


Angular 10으로 업그레이드하는 방법

GitHub에서 Angular 10 릴리스를 확인하실 수 있습니다. 현재 Angular 설치를 업데이트하려면 다음 명령을 실행하면 됩니다.

ng update @angular/cli @angular/core</td>

Wijmo의 Angular 10 지원을 발표하게 되어 정말 기쁩니다! Wijmo는 버전 1(AngularJS)부터 Angular를 지원해 왔습니다. 당사는 Angular 개발자에게 엔터프라이즈급 응용 프로그램 빌드를 위한 강력한 도구 집합을 제공하는 데 최선을 다하고 있습니다.

오늘 Wijmo와 함께 Angular 10 응용 프로그램 사용을 시작할 수 있음을 발표하게 되어 기쁩니다!


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

댓글목록

등록된 댓글이 없습니다.

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