홈 > 커뮤니티 > IT뉴스
IT뉴스

10월 19일자로 Angular 7.0.0이 발표되었습니다.

Angular 7 - CLI 프롬프트, 버추얼 스크롤, 드래그 & 드랍

 

 드디어 Angular 7.0.0이 나왔습니다! 이 버전은 코어 프레임워크와 Angular Material, Angular CLI를 포함해서 플랫폼 전체에 적용되는 새 버전입니다. 이번 버전부터 툴 체인에 새로운 기능이 추가되었으며, 파트너 프로젝트 지원 기능도 강화되었습니다.

1*CQKUmJrBs-523I4GOiEUaA.gif

버추얼 스크롤을 사용하면 애플리케이션 반응 속도를 향상시킬 수 있습니다.

 

 

v7로 업데이트하는 방법

 

 지금까지는 Angular 버전을 업데이트할 때 이 사이트를 참고하는 것이 일반적이었습니다. 하지만 v6에 도입된 기능 덕분에 v6에서 v7로 업데이트하는 것은 아주 간단합니다. 다음 명령 하나만 실행하면 됩니다:

 

ng update @angular/cli @angular/core

 

 이 명령을 실행해본 사람들에 의하면 이 작업은 오래 걸리지 않으며 10분 안에 끝났다고 합니다 :)

 

 

CLI 프롬프트

 

 CLI는 이제 사용자가 ng new나 ng add @angular/material과 같은 명령을 실행했을 때 프롬프트로 동작합니다. Angular 라이브러리가 지원하는 기능을 좀 더 편하게 제공할 수 있습니다.

 

 CLI 프롬프트는 스키매틱(schematics)에 정의된 대로 동작하기 때문에 스키매틱을 지원하는 패키지는 모두 이 기능을 사용할 수 있습니다. 스키매틱 콜렉션에 x-prompt 키만 추가하면 됩니다.

 

 

"routing": {
"type": "boolean",
"description": "Generates a routing module.",
"default": false,
"x-prompt": "Would you like to add Angular routing?"
},
view rawschematic.json hosted with ❤ by GitHub

 

 

 

애플리케이션 성능 향상

 

 Angular 팀은 Angular 생태계를 지속적으로 분석하면서 성능 향상을 위해 힘써왔습니다. 그러던 중 많은 개발자가 개발용으로만 필요한 reflect-metadata 폴리필을 운영용에도 사용하고 있다는 것을 발견했습니다.

 

 이 문제를 해결하기 위해 ng update 명령으로 v7을 도입하게 되면 자동으로 polyfills.ts 파일에서 이 폴리필을 제거합니다. 이 폴리필은 JIT 컴파일러를 사용해서 애플리케이션을 빌드할 때 자동으로 포함되며, 운영용 빌드에는 제거된 채로 빌드될 것입니다.

 

 운영용 빌드에 적용되는 내용이 또 하나 있습니다. 이제 애플리케이션 번들링 결과물의 크기가 2MB 이상이면 경고가 표시되며, 5MB 이상이면 에러가 표시됩니다.  에러가 발생하는 기준값은 angular.json에서 변경할 수 있습니다.

 

 

"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}]
view rawangular.json hosted with ❤ by GitHub

 

 

 경고가 발생한 애플리케이션을 Chrome에서 실행시키면 Chrome 데이터 절약 모드가 동작하면서 다음과 같은 경고 메시지가 표시될 수도 있습니다.

 

1*jXHBMok5cNnkXD8O0a8gAg.png

Chrome 데이터 절약 모드 

 

 

Angular Material & CDK

 

 2018 년 들어 Material 디자인이 많이 변경되었습니다. Angular의 버전업에 맞춰 Angular Material도 v7로 업데이트 되었으며, Material 디자인 표준에 맞춰 일부 스타일이 변경되었습니다.

 

1*lgZYt3RBGM_c7HUcg85Zgg.png

Material 디자인을 사용하던 애플리케이션은 개발자가 따로 작업하지 않아도 새로운 디자인 표준이 적용됩니다.

 

 그리고 CDK에 새로운 기능이 추가되었습니다. 이번 버전부터는 드래그 & 드랍을 제공하는 DragDropModule과 버추얼 스크롤을 제공하는 ScrollingModule이 제공됩니다.

 

 

버추얼 스크롤

 

 버추얼 스크롤을 사용하면 현재 화면에 보이는 엘리먼트만 DOM에 추가하며 화면에 보이지 않는 엘리먼트는 자동으로 DOM에서 제거할 수 있습니다. 이 기능을 사용하면 길이가 아주 긴 리스트를 다룰 때 사용자에게 좀 더 나은 UX를 제공할 수 있습니다.

 

 

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>
view rawdragdrop.html hosted with ❤ by GitHub

 

 

버추얼 스크롤에 대해 자세하게 알아보세요.

 

 

드래그 & 드랍

 

1*i30ZQdBC7CKbXXdOrUNQcg.gif

드래그 & 드랍을 사용한 대시보드 예제 

 

 이제 CDK를 통해 드래그 & 드랍이 제공됩니다. 사용자가 항목을 옮기면 렌더링도 자동으로 수행되며, 리스트의 실제 순서를 변경하는 헬퍼 메소드(moveItemInArray)와 리스트끼리 아이템을 주고받는 메소드(transferArrayItem)도 제공됩니다.

 

 

<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
<div class="box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>
view rawdragdrop.html hosted with ❤ by GitHub

 

 

drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
}
view rawdragdrop.ts hosted with ❤ by GitHub

 

 

드래그 & 드랍에 대해 자세하게 알아보세요.

 

 

Select 엘리먼트의 접근성 개선

 

 mat-form-field 안에 사용되는 네이티브 select 엘리먼트의 접근성이 개선되었습니다. 이제 mat-select를 사용해도 네이티브 select 엘리먼트와 비슷한 성능, 접근성을 확보할 수 있습니다.

 

mat-select와 mat-form-field에 대해 자세하게 알아보세요.

 

 

Angular Elements

 

 이제 Angular Element에도 컨텐츠 프로젝션을 사용할 수 있습니다. 이 기능은 웹 표준을 사용합니다.

 

<my-custom-element>This content can be projected!</my-custom-element>

 

 

파트너 지원

 

 Angular는 Angular를 사용하는 개발자들의 커뮤니티 덕분에 수많은 혁신을 이룰 수 있었습니다. 이에 보답하기 위해 몇 가지 커뮤니티 프로젝트와 함께 작업하며 Angular를 더욱 개선하고 있습니다.

 

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기
  • 카카오스토리로 보내기
  • 네이버밴드로 보내기

Comments

홈 > 커뮤니티 > IT뉴스
IT뉴스
스터디맵
페이스북에 공유 트위터에 공유 구글플러스에 공유 카카오스토리에 공유 네이버밴드에 공유