Angular v.9.0.0 릴리즈 노트

안녕하세요. 한장현입니다.

 

꽤 오래 걸렸네요.

Angular는 원래 6개월 주기로 메이저 버전을 업데이트하는 정책을 유지했지만 이번 메이저 업데이트는 2019년 10~11월로 예정된 것에 비해 2개월가량 늦어졌습니다. 프론트엔드 프레임워크가 템플릿 엔진을 다른 것으로 바꾼다는 것이 얼마나 힘든 일인지, v.9.0.0 버전 CHANGELOG.md 파일을 봐도 Angular 팀이 굉장히 고생했던 것 같네요. 그만큼 Ivy를 포함해서 큰 변동사항이 있었던 것으로 보입니다.

 

어떤 부분이 얼마나 바뀌었는지, 도움이 될만한 기능이 있는지 Angular 블로그의 9.0.0 릴리즈 노트를 살펴봤습니다.

 

 

---

 

Angular 9 버전이 배포되었습니다 - Ivy 프로젝트 정식 도입

드디어 Angular 9.0.0 버전이 배포되었습니다! 이번 메이저 릴리즈는 플랫폼과 프레임워크는 물론이고 Angular Material, CLI에도 영향을 미치는 릴리즈입니다. 이번 릴리즈부터 Angular 애플리케이션은 Ivy 컴파일러를 빌드 타임과 실행 타임에 기본으로 사용하며, 컴포넌트를 테스트하는 방식도 개선되었습니다.

 

이번 업데이트는 Angular가 개발되는 3년동안 있었던 것 중에 가장 큰 규모의 업데이트입니다. 이 업데이트를 통해 개발자들이 더 나은 애플리케이션을 개발할 수 있기를 바라며, Angular 생태계도 더 발전할 수 있기를 바랍니다.

 

 

Angular 9 버전으로 업데이트하는 방법

버전업 방법에 대해 자세하게 알아보려면 역시 update.angular.io를 활용하는 것이 좋습니다. 그리고 업데이트를 수월하게 하려면 마지막 메이저 버전인 Angular 8에서 업데이트하는 것을 권장합니다.

 

먼저, 애플리케이션을 Angular 8버전으로 업데이트합니다.

ng update @angular/cli@8 @angular/core@8

 

그리고 9버전으로 업데이트합니다

ng update @angular/cli @angular/core

 

Angular 9버전으로 업데이트하면서 중요하게 바뀌는 부분이나 지원이 중단된 API를 확인하려면 Angular 문서의 Angular 9버전으로 업데이트하기 문서를 참고하세요.

 

 

Ivy

Angular 9버전부터는 Ivy 컴파일러와 런타임 엔진을 기본으로 사용하며, Ivy를 도입하기 위해 수백건의 버그 픽스가 있었습니다. 그 결과로 이제 다음과 같이 개선되었습니다.

 

• 번들 결과물의 크기가 작아졌습니다.
• 테스트 실행 속도가 개선되었습니다.
• 디버깅이 편해졌습니다.
• CSS 클래스와 스타일 바인딩이 개선되었습니다.
• 테입 체킹 로직이 개선되었습니다.
• 빌드 에러를 쉽게 확인할 수 있습니다.
• 빌드 시간이 줄었으며 AOT 빌드 옵션이 기본값으로 변경되었습니다.
• 다국어 처리가 편해졌습니다.

이제 이 내용들에 대해 자세하게 알아봅시다.

 

 

더 작아진 번들 결과물 크기

Ivy 컴파일러는 원래 트리 셰이킹과 관계없는 Angular 코드 부분을 제거하기 위해 설계되었으며, 개별 Angular 컴포넌트가 빌드된 코드를 작게 줄이는 것이 목표였습니다.

 

그래서 Ivy가 정식 도입된 이번 업데이트부터 Angular 애플리케이션의 크기가 클수록 획기적인 용량 변화를 확인할 수 있을 것입니다.

 

• Angular 구성요소를 조금만 사용하는 작은 Angular 애플리케이션은 Angular 쪽의 트리 셰이킹만로도 용량이 많이 줄어듭니다.
• 컴포넌트의 개수가 많고 애플리케이션의 규모가 크다면 팩토리 코드의 용량이 줄어든 혜택을 크게 받을 수 있습니다.
• 중간 정도 크기의 애플리케이션도 빌드 결과물의 크기가 약간 줄어드는 것을 확인할 수 있습니다. 다만, 이 경우에는 Angular의 트리 셰이킹의 영향이 크지 않고 팩토리 코드가 줄어든 영향을 제대로 느끼기에는 컴포넌트의 개수가 조금 적은 편입니다.

작은 규모의 앱은 30% 정도 번들 결과물 크기가 줄어들고, 큰 규모의 앱은 25~40% 정도 줄어듭니다. 중간 규모의 앱도 소폭 감소합니다.

 

테스트 속도 개선

Ivy 환경에서 실행되는 TestBed 객체의 구현방식이 좀 더 효율적으로 개선되었습니다.

 

이전까지 TestBed는 각각의 테스트가 실행될 때마다 모든 컴포넌트를 다시 컴파일했습니다. 이 컴포넌트의 내용이 변경되지 않았어도 그랬습니다.

 

하지만 Ivy 환경에서는 컴포넌트가 수동으로 오버라이드 되지 않는 한 컴포넌트를 다시 컴파일하지 않습니다. 테스트할 때마다 이 과정을 생략하는 것만으로도 테스트 속도는 크게 개선되었습니다.

 

그 결과 테스트 실행 속도는 40% 정도 빨라졌습니다. 개발자들이 각자 애플리케이션으로 직접 확인해봐도 테스트 시간이 40~50% 정도 줄어든 것을 확인할 수 있을 것입니다.

 

 

디버깅 방식 개선

Ivy는 디버깅 툴을 좀 더 다양하게 제공합니다. Ivy가 개발자 모드에서 실행되고 있다면 이제부터 Angular 앱을 디버깅하기 위해 ng 객체를 활용할 수 있습니다.

 

• 개발자 도구에서 컴포넌트, 디렉티브 등과 같은 Angular 인스턴스에 접근할 수 있습니다.
• 이 인스턴스에 있는 메소드를 직접 실행하거나 상태를 변경할 수 있습니다.
• 변화 감지 로직이 제대로 도는지 확인하기 위해 applyChanges 함수를 수동으로 실행할 수 있습니다.

그리고 Ivy는 함수 실행 스택도 좀 더 보기 편하게 개선되었습니다. ExpressionChangedAfterItHasBeenCheckedError를 예로 들면, 이전에 이렇게 표시되었습니다.

 

 

이제부터는 이 함수 실행 스택이 좀 더 유용한 단위로 표시되기 때문에 수정이 필요한 부분으로 바로 이동할 수 있습니다.

 

 

이 함수 실행 스택에서 AppComponent_Template 부분을 클릭하면 Angular가 생성한 코드의 어느 부분에서 에러가 발생했는지 바로 이동해서 확인할 수 있습니다:

그리고 이 부분이 문제인 것이 맞다면, Angular 사용방법이 잘못되지 않았는지, 컴포넌트의 구현 방식은 제대로 되었는지 이어서 확인할 수 있을 것입니다.

 

 

CSS 클래스와 스타일 바인딩 방식 개선

Ivy 컴파일러와 실행환경은 스타일을 다루는 방식도 개선되었습니다. 이전까지는 서로 충돌하는 스타일이 존재할 때 이 스타일들이 작게 쪼개져서 해당 스타일을 대체하는 방식으로 동작했습니다. 이제 Ivy에서는 이 스타일들이 좀 더 예측가능한 범위로 병합됩니다.

 

다음과 같은 컴포넌트가 있다고 합시다:

 

 

 

 

이전까지는 유효하다고 평가되는(win) 스타일만 바인딩되었고, 표현식이 실행되는 시점에도 영향을 받았습니다. 이 코드에서는 myColor와 myOtherColor가 undefined라고 해도 정적으로 선언된 'red' 색상은 무시됩니다.

 

하지만 9버전부터는 더이상 타이밍에 영향을 받지 않으며, 좀 더 명확하고 일관된 순서로 스타일이 지정됩니다. 이제는 가장 구체적으로 지정된 스타일이 항상 우선 적용됩니다. 그래서 [style.color]는 언제나 [style] 보다 우선 순위로 바인딩됩니다.

 

다만, 하위호환성을 보장하기 위해 [ngStyle]과 [ngClass]가 바인딩되는 과정은 이전과 동일하게 유지했습니다. 이 두 방식은 이전에 존재하는 스타일과 충돌하더라도 새롭게 지정하는 값으로 바인딩됩니다.

 

스타일 우선순위에 대해 자세히 알아보려면 템플릿 문법 가이드 문서를 참고하세요.

 

그리고 굳이 의도하지는 않았지만 이런 방식으로 개선되면서 이제 CSS 커스텀 프로퍼티(CSS 변수)를 사용할 수 있습니다.

 

 

 

타입 체크 방식 강화

Angular 컴파일러는 TypeScript보다 좀 더 깐깐하게 타입을 체크합니다. 이것은 개발자들이 애플리케이션을 개발단계에서부터 빠르게 버그를 발견하고 처리할 수 있도록 하기 위한 것입니다.

 

이번 릴리즈부터 타입 체크와 관련된 플래그가 2개 더 추가됩니다:

• fullTemplateTypeCheck - 이 옵션을 활성화하면 컴파일러가 템플릿에 있는 모든 항목을 검사합니다. (ngIf, ngFor, ng-template 등)
• strictTemplates - 이 옵션을 활성화하면 가장 깐깐한 타입 체크 룰을 적용합니다.

템플릿 타입 체크 옵션에 대해 자세하게 알아보려면 템플릿 타입 체크 가이드 문서를 참고하세요.

 

 

빌드 에러 개선

Ivy 컴파일러는 개발자가 좀 더 쉽게 이해할 수 있는 빌드 에러 메시지를 제공합니다.

 

View Engine을 사용하는 Angular 8 버전에서는 컴파일 에러가 이런 식으로 표시되었습니다:

Ivy를 사용하는 Angular 9 버전에서는 같은 에러가 이렇게 표시됩니다:

 

 

빌드 속도 개선, AOT 컴파일러가 기본으로 변경됨

Ivy를 도입하면서 컴파일 성능도 크게 개선되었습니다.

이 때 이야기하는 컴파일 성능이란, TypeScript 컴파일러와 비교할때 Angular 컴파일러의 부하가 얼마나 큰지를 의미합니다. Angular 가이드 문서 앱(angular.io)로 컴파일 성능 개선을 확인해보니 이 부하는 0.8배 에서 0.5배로 줄었으며, 40% 정도 개선되었다고 판단됩니다.

이 결과는 AOT 빌드 속도도 굉장히 빨라졌다는 것을 의미하기 때문에 이제부터는 개발 단계에서 빌드할 때도 AOT 빌드를 제대로 활용할 수 있습니다. 이제 `ng serve` 로 빌드해도 운영용으로 빌드할 때와 같은 시간이 걸립니다. Angular 개발 환경이 좀 더 개선되었기를 바랍니다.

그리고 이 과정을 거치면서 이제 entryComponents를 지정하지 않아도 됩니다. 이런 유형의 컴포넌트는 이제 Angular가 자동으로 인식해서 필요할 때만 컴파일됩니다.

 

 

다국어 지원(i18n) 개선

다국어 지원 기능은 Angular가 제공하는 기능 중에서도 가장 중요한 것 중 하나로 꼽힙니다. 이 기능을 활용하면 개별 다국어를 효율적으로 처리할 수 있으며 각 문구에 따라 애플리케이션도 타이트하게 최적화할 수 있습니다. Angular 9버전부터는 다국어 추출 단계가 빌드 이후 시점로 옮겨졌고 10배 정도 더 빠르게 개선되었습니다.

 

@angular/localize와 angular.json 설정에 대해 자세하게 알아보려면 이 문서를 참고하세요.

 

 

기타 개선사항

Angular 팀은 이 외에도 Angular 전반의 사용성을 개선하기 위해 열심히 노력하고 있습니다.

 

 

ng update 개선

ng update가 동작하는 방식이 안정되었으며, 좀 더 많은 정보를 제공하도록 개선되었습니다.

 

• 항상 최신 Angular CLI로 실행합니다. Angular 8.3.19부터는 패키지 버전을 업데이트할 때 업데이트하는 버전의 Angular CLI를 사용합니다.
• 진행상황이 표시되는 방식이 개선되었습니다. 이제는 ng update가 실행되는 동안 어떤 처리를 하고 있는지 좀 더 많은 정보를 제공합니다.
• 업데이트 디버깅이 편해졌습니다. 지금까지는 ng update 실행이 종료되었을 때 최종 결과만 간단하게 표시했습니다. Angular 9 버전은 이제 --create-commits 플래그를 제공합니다. ng update --create-commits 명령을 실행하면 이제 각 마이그레이션 단계가 끝날때마다 어떻게 영향을 주었는지 표시합니다. 이 내용을 확인하면 마이그레이션 과정이 어떻게 진행되는지 알 수 있으며, 문제가 생겼을 때 처리하기도 편해질 것입니다.

 

'providedIn' 옵션 추가

Angular에서 @Injectable 서비스를 만들면 이 서비스가 어떤 인젝터에 등록되어야 할지 반드시 선택해야 합니다. 이전까지는 모듈과 `root`를 선택할 수 있었지만 이제 두 옵션이 추가되었습니다.

 

• platform - providedIn: 'platform'과 같이 지정하면 서비스가 플랫폼 인젝터에 등록됩니다. 플랫폼 인젝터는 단 하나만 존재하기 때문에 화면에 존재하는 모든 애플리케이션에서 이 서비스를 사용할 수 있습니다.
• any - 서비스를 모든 모듈(지연로딩되는 모듈 포함)에 등록합니다.

providedIn에 대해 자세하게 알아보려면 이 문서를 참고하세요.

 

 

컴포넌트 하네스(harnesses, 보조기구)

컴포넌트를 테스트하려면 원하는 컴포넌트를 찾거나 이벤트를 발생시키기 위해 CSS 셀렉터와 같은 기법을 활용했습니다. 그래서 컴포넌트 라이브러리가 변경되면 이 컴포넌트를 사용하는 코드도 수정해야 했습니다.

 

Angular 9는 이 과정을 개선하기 위해 컴포넌트 하네스를 도입했습니다. 이제는 좀 더 추상적으로 컴포넌트에 접근하기 때문에 컴포넌트의 필요한 부분만 안정적으로 테스트할 수 있습니다.

 

실제로 Angular Material의 컴포넌트들은 이 방식으로 테스트하고 있습니다. Component Dev Kit(CDK)에서도 이 내용을 확인할 수 있습니다.

 

이전까지는 이렇게 테스트했습니다:

 

 

 

이제 하네스를 사용하면 이렇게 테스트할 수 있습니다:

 

 

 

Angular Material 컴포넌트의 하네스나 커스텀 컴포넌트 만들기 문서도 참고해 보세요.

 

 

새로운 컴포넌트

이제는 YouTube나 Google Maps를 애플리케이션에 직접 내장할 수 있습니다.

 

• youtube-player를 사용하면 YouTube 플레이어를 애플리케이션에 인라인으로 렌더링할 수 있습니다. 이전처럼 IFrame 플레이어 API를 사용하는 것보다 훨씬 나을 것입니다.
• google-maps 컴포넌트도 활용할 수 있습니다. 이 컴포넌트는 일반 Angular 컴포넌트와 거의 비슷하게 동작하기 때문에 기존 Google Maps API를 활용하는 것과 비교했을 때 지도를 렌더링한다던지, 마커를 표시하는 것과 같은 작업을 좀 더 편하게 할 수 있습니다.

 

IDE & 언어 지원 서비스 개선

Go to definition과 개선된 기능 데모

Visual Studio Marketplace로 제공하는 Angular 언어 지원 서비스 확장기능이 대폭 개선되었습니다. 새 버전에서는 객체를 참조하는 성능과 안정성이 개선되었고, 처리가 지연된 버그도 다수 해결되었습니다. 그리고 이런 기능도 추가되었습니다:

 

• TextMate 문법 지원기능이 추가되었습니다. 이제 인라인 템플릿과 외부 파일 템플릿에 문법 하이라이트 기능이 제대로 동작합니다.
• templateUrl과 styleUrls에 "Go to definition" 기능을 활용할 수 있습니다.
• 툴팁으로 NgModule과 타입 정보가 표시됩니다.

 

TypeScript 3.7 지원

Angular는 현재 TypeScript 3.6과 3.7 버전에 동작하도록 만들어졌습니다. TypeScript 3.7에 도입된 선택 체이닝(optional chaining) 기능이 워낙 강력하기 때문에 3.7도 포함되었으며, 생태계의 호환성을 유지하기 위해 Zone.JS나 RxJS과 같은 패키지 버전도 일부 올라갔습니다.

 

 

커뮤니티 분들에게 감사드립니다.

 

이번 릴리즈는 2년간 모두가 노력했던 결실입니다. 이 릴리즈를 통해 만들어낼 미래와 가능성을 생각하면 흥분하지 않을 수 없습니다. 그리고 이 결실은 커뮤니티의 수많은 분들이 있었기 때문에 이룰 수 있었습니다.

 

(컨트리뷰터 명단 생략)

 

언급되지 않은 커뮤니티 분들과 GDE 분들에게도 물론 감사드립니다. Angular 팀은 모든 분들이 전해준 피드백과 이슈 리포트, 문제 재현을 활용하며 최선의 결과물을 만들기 위해 노력했습니다. 이 과정에서 4000개가 넘는 Angular 9 버전의 앱을 만들기도 했습니다.

 

Pawel Kozlowski와 그의 스폰서 Amadeus에 대해서도 감사드립니다. Pawel은 2년 넘게 Ivy 프로젝트에 참여하면서 프로젝트가 성공에 이르기까지 아주 중요한 역할을 했습니다.

 

릴리즈에 대한 피드백은 github이나 twitter로 부탁드립니다!