Angular 10 – 이에 대해 알아야 할 사항
게시 됨: 2020-10-07Angular는 최근 2020년 6월 24일에 새 버전을 출시했습니다. Angular 버전 9.0을 출시한 지 4개월 만에 출시되었습니다. 최신 Angular 10은 베타 버전입니다. 즉, Angular 팀이 Google에서 개발한 typescript 지향 프레임워크의 최신 버전의 최종 릴리스에 가까워지고 있습니다.
웹 개발자이거나 비즈니스용 웹 앱을 개발하려는 사람이라면 이 새 버전이 무엇을 제공하는지 알아야 합니다. 베타 버전은 마지막 버전이 출시된 지 4개월 만에 출시되기 때문에 히트인지 미스인지 궁금하실텐데요! 답을 찾을 수 있도록 도와드리겠습니다. Angular 10의 주요 기능을 자세히 살펴보겠습니다.
Angular 10의 특징
Angular 팀은 최신 버전이 과다한 새로운 기능을 도입하는 대신 주로 품질 도구와 생태계에 중점을 둘 것이라고 주장했지만 광범위한 연구를 수행하여 버전에서 기대할 수 있는 가치 제공의 포괄적인 목록을 제공했습니다. . 그럼 확인해 보겠습니다.
- 새 기간 선택기
Angular Material UI Component Library는 이제 새로운 날짜 범위 선택기를 갖추고 있습니다. 그것이 무엇인지 확실하지 않습니까? 날짜 범위 선택기를 웹 페이지에 첨부할 수 있습니다. 시간, 날짜 또는 "지난 20일"과 같은 미리 정의된 기간을 선택하기 위한 달력을 표시합니다.
사용자가 단일 날짜 대신 날짜 범위를 선택하도록 하려면 mat-date-range-picker 및 mat-date-range-input 구성 요소를 사용할 수 있습니다.
- 더 엄격한 설정(선택 사항)
Angular 10은 ng new로 새 작업 공간을 만드는 동안 더 엄격한 프로젝트 설정을 가지고 있습니다. 이 플래그를 활성화하면 유지 관리 개선, CLI가 애플리케이션에서 고급 최적화를 수행하도록 허용, 버그를 미리 잡는 등의 몇 가지 새로운 설정이 프로젝트에 도입됩니다.
다음은 strict 플래그의 기본 작업 범위입니다.
- 템플릿 유형 검사를 Strict로 전환
-TypeScript에서 더 엄격하게 활성화
- "any"를 유형 선언으로 사용하지 않도록 린트 규칙 구성
- 기본 번들 예산 줄이기
- CommonJS 가져오기에 대한 경고
CommonJS로 묶인 종속성을 사용하면 번들이 커지므로 애플리케이션 속도가 느려집니다. Angular 10은 빌드가 이러한 번들 중 하나를 가져오면 개발자에게 경고합니다. 그렇게 하면 종속성이 ECMAScript 모듈(ESM) 번들을 선호한다는 것을 알릴 수 있습니다.
- 업데이트
JavaScript 생태계와 동기화하기 위해 Angular의 종속성에 몇 가지 주요 업데이트가 도입되었습니다. 다음과 같습니다.
-TypeScript가 TypeScript 3.9로 업데이트되었습니다. 팀이 성능과 안정성을 개선하는 데 도움이 됩니다.
-TSLint가 v6으로 업데이트되었습니다.
-TSLib가 v2.0으로 업데이트되었습니다.
프로젝트 레이아웃도 업데이트되었습니다. 따라서 Angular 10에서 새로운 tsconfig.base.json 파일을 볼 수 있습니다. 이 파일은 IDE, 빌드 도구 해결 유형 및 패키지 구성을 더 잘 지원합니다.
이 외에도 최신 Angular 버전은 컴파일러 가속화, 경험 편집, 신속한 수정 및 완료와 같은 기능을 제공합니다.
- 향상된 ngcc 성능
이 Angular 10 기능은 프로그램 기반 진입점 찾기의 구현을 촉진합니다. 이것은 tsconfig.json 파일 정의 프로그램만 도달할 수 있는 진입점을 처리할 수 있습니다. 또한 종속성은 진입점 전시 내부에 숨겨져 있으며 매번 계산하지 않고도 읽을 수 있습니다.
진입점과 함께 각 패키지의 기본 경로는 파일에 저장할 필요가 없습니다. 따라서 응용 프로그램은 불필요한 빈 배열을 저장할 필요가 없습니다. 이 기능은 큰 노드 모듈의 경우에도 진입점에서 파일 크기를 표시하고 줄이는 데 도움이 됩니다. 이렇게 하면 성능이 크게 향상됩니다.
- 여러 파일 병합
최신 Angular 버전은 번거로움 없이 여러 번역 문서의 병합을 지원합니다. 이전 버전에서는 하나의 파일만 로드할 수 있었습니다. 이제 사용자는 로케일당 여러 문서를 지정할 수 있으며 모든 파일의 트랜잭션을 메시징 ID로 병합할 수 있습니다. 가장 중요한 문서는 나중에 대체 번역과 함께 먼저 배치됩니다.
- 비동기 잠금 시간 초과
Angular 10의 또 다른 흥미로운 점은 이 버전에서 비동기 잠금 시간 제한이 구성되어 있다는 것입니다. 이것은 AsyncLocker에서 재시도 지연 및 재시도 시도를 조정하기 위해 ngcc.config.js 파일을 지원합니다. 통합 테스트를 통해 개발자는 시간 초과를 모니터링하고 ngcc.config.js 파일을 사용하여 시간 초과 범위를 줄이고 테스트 시간이 오래 걸리는 것을 방지할 수 있습니다. 웹 애플리케이션 개발 회사 전문가들이 최신 Angular 버전을 크게 환영하는 것은 당연합니다!
- 라우터
CanLoad 가드는 최신 Angular 버전에서 UrlTree로 돌아갈 수 있습니다. UrlTree를 반환하는 CanLoad 가드는 최첨단 탐색을 무효화하고 리디렉션을 돕습니다. 이것은 사용 가능한 CanActivate 가드가 있는 현재 동작과 일치합니다. 여기에도 추가됩니다. 그러나 이는 사전 로드에 영향을 주지 않습니다.
- 엮다
AOT(Ahead-of-Time)는 빌드 시 앱과 해당 라이브러리를 컴파일합니다. 이것은 Angular 9 이후의 일반적인 관행입니다. 브라우저가 다운로드하고 이후에 해당 코드를 실행하기 전에도 빌드 시간 동안 코드를 변환할 수 있습니다. 당연히 이것은 브라우저에서 더 빠른 렌더링을 보장합니다. 컴파일러는 애플리케이션 JavaScript 내에서 외부 HTML 템플릿 및 CSS 스타일 시트를 인라인하여 소스 파일에 대한 별도의 AJAX 요청을 제거합니다.
Angular 10의 AOT에서 몇 가지 분명한 변경 사항이 있습니다.
1. 증분 컴파일은 더 나은 빌드 시간에 도달하는 데 도움이 됩니다.
2. 트리 쉐이킹과 매우 호환되는 생성된 코드로 더 나은 빌드 크기에 도달할 수 있습니다.
3. 이 버전을 사용하면 모듈 대신 구성 요소의 지연 로딩, 메타프로그래밍 또는 고차원 구성 요소, Zone.js를 기반으로 하지 않는 최신 변경 감지 시스템 등과 같은 여러 새로운 기능을 탐색할 수 있습니다.
- 버그 수정
이 버전에서는 여러 가지 버그가 수정되었습니다. 여기에는 컴파일러에서 주소가 지정되지 않은 범위 인스턴스 제거, 존재하지 않는 기호를 가져오는 동안 마이그레이션 관련 오류 해결, TestBed에서 재정의의 영향을 받는 모듈 식별 등이 포함됩니다. 또한 핵심에는 Terser Inlining 버그를 수정하기 위한 해결 방법이 있습니다.
- 더 나은 커뮤니티 참여
Angular는 이미 전체 스펙트럼을 통해 Angular 프로젝트에 가치를 제공하는 대규모 글로벌 개발자 커뮤니티를 보유하고 있습니다. 최근 조직 자체에서 전략을 채택하고 커뮤니티를 강화하고 플랫폼을 더욱 개선하기 위한 투자를 계획하고 있습니다.
- 지원 중단 및 제거
Angular 패키지 형식에는 더 이상 FESM5 또는 ESM5 번들이 포함되지 않습니다. 이를 통해 Angular 라이브러리 및 패키지에서 yarn 또는 npm install을 실행하는 동안 119MB의 다운로드 및 설치 시간을 절약할 수 있습니다. 이러한 형식은 ES5를 지원하기 위한 하향 조정이 개발 프로세스의 마지막에 수행되기 때문에 폐기될 수 있습니다.
또한 Angular 조직은 IE9, 10 및 Internet Explorer Mobile과 같은 이전 브라우저에 대한 지원을 더 이상 사용하지 않습니다.
- 기타 변경 사항
Angular 10은 몇 가지 획기적인 변화를 가져왔습니다. 예를 들어 Logic은 자정을 넘어 확장되는 날짜 기간의 서식 지정에 따라 업데이트됩니다. 응용 프로그램이 formatDate 또는 DatePipe 또는 b 및 B 형식 코드를 사용하는 경우 이 변경의 영향을 받습니다.
또 다른 변경 사항은 EMPTY를 반환하는 확인자가 탐색을 취소한다는 것입니다. 개발자는 default!Empty와 같은 특정 값으로 리졸버를 업데이트해야 합니다.
Angular NPM에는 Closure Compiler의 고급 최적화를 지원하는 몇 가지 jsdoc 주석이 포함되어 있지 않습니다. Closure Compiler를 사용하는 사람들은 NPM에 게시된 버전을 사용하는 것보다 소스에서 직접 빌드한 Angular 패키지를 사용하는 것이 좋습니다. 일시적으로 사용자는 현재 빌드 파이프라인을 사용할 수 있습니다.
이 버전에서 Vary 헤더는 ServiceWorker 캐시에서 소스를 검색하는 동안 간과됩니다. 그 결과 헤더가 유사하지 않더라도 소스를 검색합니다. 애플리케이션이 요청 헤더를 기반으로 응답을 구별해야 하는 경우 Angular ServiceWorker가 영향을 받는 리소스의 캐싱을 방지하도록 구성되어 있는지 확인합니다.
알 수 없는 요소에 대한 경고는 이제 오류로 표시됩니다. 이렇게 하면 앱이 중단되지 않지만 console.error를 통해 기록될 것으로 예상되는 도구를 실행할 수 있습니다.
Angular 10으로 업데이트하는 방법
최신 버전의 Angular로 업그레이드하려면 다음 명령을 사용할 수 있습니다.
ng 업데이트 @angular/cli @angular/core
다음은 Angular 버전 10으로 업데이트하는 데 대한 최종 지침입니다. 그러나 기술 전문 지식이 없으면 명령이 아무 소용이 없을 수 있습니다. 전문 Angular 개발 서비스에 참여하여 Angular 10으로 성공적으로 업데이트하십시오.
결론
Angular 10이 제공하는 모든 편리함 덕분에 앱 프레임워크 버전을 업그레이드해야 할 수도 있습니다. 우리를 믿으십시오. 노력할 가치가 있습니다.