[ Angular ] Angular 4.0 정식 release (4.0에서 달라진점)

Angular가 Semantic Versioning(유의적 버전관리)에 따라 v4.0.0이 3월 23일 github에 정식 release 되었습니다.

이전에 작성하였던 4.0 베타 릴리즈 정보 및 릴리즈 주기 관련된 글(이전글 보러가기)처럼 3월에 정식 버전이 release되었네요.

4.0으로 변경되면서 어떠한점이 달라졌는지 간단하게 정리해 보았습니다.

정리하기전에 해당 글에서는 용어를 아래와 같이 사용하고 있습니다 .(관련하여 피드백 주시면 감사하겠습니다.)

- angular 2.0 -> angular v2

- angular 4.0 -> angular v4

- 공식 문서 분리

angular v2와 angular v4 의 문서가 분리되었습니다.

angular v2는 레거시 문서로 해당 링크로 별도 분리되었습니다. https://v2.angular.io/docs/ts/latest/

그리고 신규 릴리즈된 angular v4는 angular.io로 변경되었습니다. https://angular.io/docs/ts/latest/guide/

기존에 angular v2를 사용하시던 분들은 변경된 문서 url에서 매뉴얼을 보시거나 마이그레이션 가이드를 확인하여 v4로 변경하셔야합니다.

- angular-cli 1.0

angular v4 출시로 angular v4 프로젝트를 관리할 수 있도록 angular-cli 1.0이 출시되었습니다.

기존에 사용하던 angular-cli를 변경하는 방법은 해당 링크에서 확인 가능합니다.

- 더 작고 빨라졌다.

AOT를 통한 컴퍼넌트의 코드들이 60% 정도 줄었으며, production 코드의 크기가 백키로단위로 줄어들었다고 합니다.

- 애니메이션 별도 패키지화

기존 angular v2는 animation을 @angular/core에서 불러오고 있어서 애니메이션을 사용 안하여도 production 코드에 애니메이션 코드들이 포함되는 문제가 있었습니다.

그러나 angular v4부터는 @angular/platform-browser/animations로 분리되어 애니메이션을 사용하는 경우만 해당 모듈을 불러와서 자동 완성 및 코드 분리에 유리해졌습니다.

- 더 향상된 ngIf, ngFor

angular v4의 템플릿 바인딩 구문에서는 ngIf와 ngFor가 사용이 가능하며, 로컬 변수 할당이 가능해졌다고합니다.

<div *ngIf="userList | async as users; else loading">
  <user-profile *ngFor="let user of users; count as count" [user]="user">
  </user-profile>
 <div>{{count}} total users</div>
</div>
<ng-template #loading>Loading...</ng-template>

- Angular Universal

Angular를 서버에서 실행 할 수 있도록 해주는(서버렌더링) angular universal의 @angular/platform-server 프로젝트가 업데이트 되었습니다.

Angular Universal에 관한 데모는 링크에서 확인하시면 됩니다. 추가적인 문서와 코드 샘플은 추후 업데이트 된다고 합니다.

- TypeScript 2.1과 2.2의 지원

TypeScript 최신버전으로 업데이트 하였다고합니다. 이 업데이트로 ngc 컴파일의 속도가 향상되었다고 합니다.

- 템플릿용 소스맵 제공

템플릿 중 오류가 발생하면 컨텍스트를 제공하는 소스맵을 생성한다고 합니다.

그외에 Packaging관련 변경사항이 있으며(사실 이부분은 읽어봐도 이해가 안가서 기재를 안하였습니다.) 해당 내용들은 공식블로그에서 확인 가능합니다.

기존 학습용 프로젝트를 아직 마이그레이션을 진행 안하였는데, 마이그레이션 가이드를 따라 마이그레이션 진행할 예정입니다.

가이드가 워낙 상세해서 크게 무리는 없을것으로 예상되네요. 다만.. 최근 회사 업무가 바빠서 조금 미루고 있는건 함정이네요...

블로그 포스트 중 angular-cli 관련 포스트가 있는데 angular-cli 1.0이 release되어서 해당 포스트 업데이트도 할 예정입니다.