[Angular] Angular 10 Now Available !

 

 

https://blog.angular.io/version-10-of-angular-now-available-78960babd41

Version 10 of Angular Now Available

 

Angular 9가 나온지 얼마 지나지 않아서 10이 나왔다.

Angular 공식 블로그에 올라온 글을 해석해봤다. 

 

Version 10.0.0 is here! This is a major release that spans the entire platform, including the framework, Angular Material, and the CLI. This release is smaller than typical; it has only been 4 months since we released version 9.0 of Angular.

이번 10.0.0 버전에서는 프레임워크, Angular Material, Angular CLI를 포함한 전반적인 플랫폼이 릴리즈 되었다.

Angular 9이 4달 전에 나왔기 때문에, 전보다는 변경 사항이 적은 편이다.

 

 

 

 

Release 1. New Date Range Picker

---

첫 번째 릴리즈로는 Angualr Material에 새로운 Date Range Picker가 추가되었다. 

전에는 <mat-datepicker-toggle />만 써봤는데, 다음에 써볼 일이 생기면 써봐야지. 언젠가 time picker도 만들어줬으면 좋겠다.

로그 검색할 때 초 단위로 검색이 필요해서 timepicker가 생기면 참 편할텐데...(내가 만들 생각 안함;;)

 

새로운 Date Range Picker는 아래 링크에서 확인할 수 있다.

Guide : https://next.material.angular.io/components/datepicker/overview#date-range-selection

Angular Material

 

Demo: https://stackblitz.com/angular/nknyovevygv?file=src%2Fapp%2Fdate-range-picker-overview-example.html

Basic date range picker - StackBlitz

 

 

 

 

 

 

 

Release 2. Warnings about CommonJS imports

---

When you use a dependency that is packaged with CommonJS, it can result in larger slower applications.
Starting with version 10, we now warn you when your build pulls in one of these bundles. If you’ve started seeing these warnings for your dependencies, let your dependency know that you’d prefer an ECMAScript module (ESM) bundle.

 

만약 CommonJS로 패키지된 dependency를 사용한다면, 애플리케이션이 크게 느려질 수 있다.

Angualr 10 부터, 빌드가 이러한 번들(CommonJS로 패키지된 dependency) 중 하나를 가져올 때 경고할 것이다. 

애플리케이션에서 사용한 dependency들에 대해 경고 메세지가 보이기 시작하면, ECMAScript 모듈 번들을 선호한다는 것을 해당 dependency에 알리세요. 

 

즉 CommonJS로 패키지된 모듈 번들보다는 ECMAScript 모듈 번들을 사용하라는 이야기 같다.

CommonJS가 왜 앱을 무겁게 만드는지는 아래 글에 잘 나와있으니 읽어보면 좋다.

 

https://web.dev/commonjs-larger-bundles/

How CommonJS is making your bundles larger

 

 

 

 

 

 

Release 3. Optional Stricter Settings

---

Angular 10 에서는 좀 더 엄격한 새 프로젝트 생성 기능을 제공한다.

기존 새 프로젝트 생성 명령어인 ng new 에서 '--strict'를 붙이면 된다.

ng new --strict

 

 

Enabling this flag initializes your new project with a few new settings that improve maintainability, help you catch bugs ahead of time, and allow the CLI to perform advanced optimizations on your app. Specifically, the strict flag does the following:
- Enables strict mode in TypeScript
- Turns template type checking to Strict
- Default bundle budgets have been reduced by ~75%
- Configures linting rules to prevent declarations of type 'any'
- Configures your app as side-effect free to enable more advanced tree-shaking

 

'--strict'의 의미는 아래와 같다.

- TypeScript에서 strict mode를 가능하게 한다. (Javascript의 strict mode)

- 템플릿 유형 검사를 Strict 모드로 바꾼다. (참고: https://angular.kr/guide/template-typecheck)

- 기본 번들 예산을 최대 75% 감소했다.

- 'any' 타입의 선언을 막기 위해 linting 규칙을 구성한다. (Linting -> TSLint 생각하면 됨)

- 고급 tree-shaking을 가능하게 하기 위해 앱을 side-effect 없이 구성한다. Tree-shaking은 실제로 사용되지 않는 모듈의 import, export 구문을 없애는 것이다.

 

이처럼 '--strict' 플래그는 Angular CLI가 사용자 애플리케이션에서 고급화된 최적화를 수행할 수 있도록 하고, 사용자가 버그를 먼저 잡을 수 있도록 하고, 유지보수성을 향상시킴으로써 새 프로젝트를 초기화한다.

 

 

 

 

 

 

Release 4. Keeping Up to Date with the Ecosystem

---

Javascript echosystem에 맞추기 위해 Angular dependency들 중 몇 가지의 버전 업데이트가 있었다.

• TypeScript bumped to TypeScript 3.9
• TSLib has been updated to v2.0
• TSLint has been updated to v6

 

Javascript Echosystem 이란?

서로 통합될 때 개발을 편리하게 해주는 소프트웨어 패키지, 라이브러리, 기타 리소스 모음. 예를 들어 React 라이브러리는 Facebook을 기반으로하고, Angular 프레임워크는 Google을, Vue.js는 독립적인 개발자가 디자인 한 것처럼 다른 개발자와 공급자가 만든 도구이다.

 

 

 

 

Release 5. New Default Browser Configuration

---

새 프로젝트의 기본 브라우저 구성이 업데이트되었다. 오래된 프로젝트와 덜 사용되는 브라우저를 제외하도록 변경되었다.

Angular 9 버전과 10 버전의 브라우저 구성차이는 블로그에 자세히 나와있다.

업데이트된 브라우저들은 기본적으로 ES5 빌드를 비활성화하기 때문에,

만약 ES5 빌드를 필요로 하는 브라우저가 필요한 경우, .browserslistrc 파일에 원하는 브라우저 정보를 추가하면 된다.

 

 

 

 

 

 

 

Release 6. Angular Team Fixit

---

이건 대충 요약하면 우리가 3주동안 2000건이 넘는 이슈들을 처리했다!!!!! 700개 정도 이슈가 남았다..!!!!!! 

 

 

 

 

 

 

 

 

Release 7. Deprecations and Removals

---

We’ve made several new deprecations and removals from Angular.
The Angular Package Format no longer includes ESM5 or FESM5 bundles, saving you 119MB of download and install time when running yarn or npm install for Angular packages and libraries. These formats are no longer needed as any downleveling to support ES5 is done at the end of the build process.
Based on heavy consultation with the community, we are deprecating support for older browsers including IE 9, 10, and Internet Explorer Mobile.

 

Angular에서 몇 가지 새로운 지원과 제거가 진행되었다.

Angular Package Format은 더이상 ESM5 또는 FESM5 번들을 포함하지 않는다. 이로써 사용자는 yarn 또는 npm으로 Angular 패키지와 라이브러리를 설치할 때 119MB를 절약할 수 있다. 이러한 포맷들은 더이상 필요로하지 않는다. 

이러한 포맷들은 ES5를 지원하기 위한 다운레벨링이 빌드 프로세스의 끝 부분에 실행되기 때문에 더이상 필요하지 않다.

커뮤니티와의 긴밀한 협의를 바탕으로 IE 9, 10 및 Internet Explorer Mobile을 포함한 이전 브라우저에 대한 지원이 중단된다.

 

 

 

 

 

 

 

 

 

 

 

마지막으로 올 가을에 나올 Angular 11을 기다리며.. (。•́︿•̀。)