Angular 4 업데이트 변경점 정리

Angular 4 가 업데이트 되었습니다. 

이 소식을 처음 접한 분들은 뭐? 2 나온지 얼마 되었다고 벌써 4야 ?  3는 어디갔어? 

또 새로 배워야 하나?  라는 걱정을 하실수도 있는데 전혀 아닙니다. 

Angular 2 부터는 버전 관리 방식이 바뀌어서 쉽게 기존 버전방식처럼 생각하면 

2.0 에서 2.1 로 바뀌었다고 보면 됩니다. 

angular 1 (지금은 AngularJS 죠 ) 에서 2 로 변할때의 초 슈퍼 울트라 대규모 업데이트가 아니란 거죠. 

걱정말고 계속 쓰면 됩니다. 

그럼 간단하게 Angular 4 의 변경점을 살펴봅시다.

What's New 

 이번 Angular 4 에서 중점적으로 두는 목표는 Angular 를 좀 더 작고 빠르게 만드는 것에 중점을 두었습니다. 

아직 모든 것이 완료 되지 않았지만 계속 해서 개선해 나갈 생각입니다. 

- View Engine 의 변경으로 AOT 컴파일을 시행 할 시 성능의 이점은 그대로 가지고 조금 더 번들파일의 용량을 

  줄여서 컴파일 되도록 변경했습니다. 

- Animation Package 를 @angular/core 에서 분리했습니다.. 

  이 변경효과로 만약 Animations 을 사용하지 않는다면  

  더이상 제품 번들에 Animation 과 관련된 코드는 추가 되지 않을 것 입니다. 

  그리고 이러한 변경으로 animation 과 관련된 문서를 쉽게 찾을 수 있고, 

  자동완성 기능역시 쉽게 활용할 수 있습니다.  

  ( 기존 @angular/core 에 몽땅 들어가있던 Animate 관련 패키지가 @angular/animates 로 분리 되었네요. )

New Features 

- *ngIf 와 *ngFor 의 성능 향상

   - *ngIf 에 else 기능이 추가되었습니다. 

- 기존 방식 

<div *ngIf="isLoading"> 

    true

</div>

<div *ngIf="!isLoading">

    false

</div>

- else 추가

<div *ngIf="isLoading" else elseLoading> 

    <p>true</p>

</div>

<ng-template #elseLoading> 

    <p>else true</p>

</ng-template>

ng-template 을 이용하여 else 부분에 들어갈 구문을 설정 할 수 있습니다.

*ngIf 와 *ngFor 에 Observable local 변수를 할당 할 수 있습니다.

<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>

Async as users 부분이 local 변수를 할당 받는 부분 입니다. 

Angular Universal

- Angular 에서 Server Side 를 컨트롤 하는 Angular Universal 이 Angular4 에 포함되었습니다. 

  해당 패키지는 @angular/platform-serve 에 포함되어 있습니다.

TypeScript 2.1 and 2.2 compatibility

- TypeScript 의 최신버전을 적용하여 Angualr 의 성능 향상과 더 나은 유형 검사를 제공합니다.

Packaging Changes

- 모듈 과 빌드의 변경으로 조금더 빠르고 작은 용량으로 빌드 할 수 있습니다. 

  ( 모듈형식 설명과 새로운 패키지 방식 설명이 있지만, 일반적으로 중요치 않으므로 패스 

    라고 하고 사실 뭔 소린지 모르겠음. 그냥 빨라졌다는 것 같네요 허허)

Updating to 4.0.0 

- Angular 4 로 업데이트 하십시오. 

On Linux/Mac: 

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,

platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save

On Windows:

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest

@angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest

@angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest

@angular/animations@latest typescript@latest --save

만약 Animation 을 사용하고 있는 중이라면 

root Ng-Module  에서 @angular/platform-browser/animations 에서 가져옵니다. 

@angular/core 에서 animate 를 사용하고 있다면 @angular/animations 로 바꾸십시오. 

공식 홈피에서 나온 변경점은 여기까지 입니다.

위 부분 외에도 자잘하게 많이 바뀌었지만 중요한 부분만 올려둔 것 같습니다.

대체적으로 성능, 용량 관련 부분이 업데이트 많이 되고

문법은 많이 바뀌진 않았네요.