Angular 4 마이그레이션 후기

배경

지난주 Angular 4가 정식 릴리즈되면서 프로젝트 마이그레이션을 진행했다. 사내 어드민 대시보드가 Angular 2.4 기반이었는데, 팀 내 논의 끝에 빠르게 업그레이드하기로 결정했다.

마이그레이션 과정

Angular 공식 문서에서는 breaking change가 거의 없다고 했고, 실제로도 그랬다.

npm install @angular/[email protected] @angular/[email protected] \
  @angular/[email protected] @angular/[email protected] \
  @angular/[email protected] @angular/[email protected] \
  @angular/[email protected] @angular/[email protected]

의존성 업데이트 후 빌드를 돌렸는데 deprecated API 경고만 몇 개 나오고 큰 문제는 없었다. TypeScript 2.1 이상이 필요해서 2.2로 함께 올렸다.

개선 사항

가장 체감되는 부분은 번들 크기였다. AOT 컴파일 시 기존 대비 약 25% 감소했다. View Engine 개선 덕분이라고 한다.

// 이제 *ngIf와 *ngFor를 함께 쓸 수 없다는 경고가 더 명확해졌다
<div *ngIf="items">
  <div *ngFor="let item of items">{{ item }}</div>
</div>

Animation 패키지가 @angular/platform-browser에서 분리되어 @angular/animations로 독립했다. 사용하지 않는 프로젝트는 번들에서 제외할 수 있게 되었다.

소감

Angular 2에서 4로 건너뛴 버전 넘버링이 화제였지만, 실제 마이그레이션은 매끄러웠다. semantic versioning을 따르겠다는 팀의 의지가 느껴진다. 다음 분기에 새 프로젝트는 Angular CLI로 시작할 예정이다.