Angularcdk
- 1. Angular CDK로 높은 퀄리티의 UI 개발하기 Seoul.js 라이트닝 토크
- 2. 나석주 코딩과 맥주를 사랑하는 개발자 주로 웹 프론트엔드 개발을 합니다. @타운컴퍼니 github.com/seokju-na seokju.me@gmail.com
- 3. @angular/cdk 구글이 Angular Material UI를 만들면서 공통적인 컴포넌트 작성 패턴들을 독립된 라이브러리로 만들어 배포함 https://material.angular.io/cdk • Angular 프레임워크를 위한 Component Dev Kit 라이브러리 • 해결하는 문제들 a11y(accessibility), bidirectional text, overlay, layout, table 등등
- 5. @angular/cdk 높은 퀄리티를 보장 : 접근성 고려, 국제화(i18n), 퍼포먼스, 양질의 문서 등 • 멋진 점 • 아쉬운 점 아직까지 지원하는 기능이 부족하다는 생각이 듭니다. (드래그 앤 드 롭, 가상 스크롤 등) IE11
- 6. @angular/cdk 높은 퀄리티를 보장 : 접근성 고려, 국제화(i18n), 퍼포먼스, 양질의 문서 등 • 멋진 점 • 아쉬운 점 아직까지 지원하는 기능이 부족하다는 생각이 듭니다. (드래그 앤 드 롭, 가상 스크롤 등) IE11
- 7. A11y Aria live (Live announcer), 포커스 관련 (FocusMonitor, FocusTrap), List Key 관리 등 • 웹 접근성 향상 • 몇 가지 예제를 보여 드리겠습니다.
- 8. FocusTrap : 포커스를 특정 DOM 아 래에 가둘 수 있습니다.
- 9. ListKeyManager를 이용해 쉽게 메뉴 아이템을 관리할 수 있습니 다. 메뉴 아이템이 포커스 되어야 한 다면 FocusKeyManager를 이용 합니다.
- 10. Portal Portal : 생성할 Component, 또는 Template과 관련 정보 PortalOutlet : Portal의 실제 DOM을 그려줄 위치 • 동적으로 Component 또는 TemplateRef 생성 • *ngComponentOutlet? 둘 다 Component를 동적으로 생성할 수 있나, Portal은 TemplateRef도 동적 생성을 지원합니다.
- 11. Portal PortalOutlet을 DOM Element에 지정할 수 있습니다. • DomPortalOutlet
- 12. Portal Directive로 View가 동적으로 생성될 위치를 지정할 수 있습니 다. • Portal Helper Directives • <router-outlet>과 기능이 유사 하다고 생각하시면 됩니다.
- 13. Overlay 오버레이에 표시할 내용을 Service 등으로 이벤트를 전달합니다. Host 컴포넌트가 이벤트를 받으면 내용을 표시합니다. • Angular에서 Overlay UI의 공통적인 패턴?
- 14. Overlay • Portal을 통해 Component 또는 TemplateRef 동적 생성 View 바인딩 사용 가능. 유연하게 템플릿 생성 가능 또한, 다수의 Overlay를 쉽게 관리할 수 있습니다.
- 16. Overlay Position - GlobalPositionStrategy - FlexibleConnectedPositionStrategy Scroll - NoopScrollStrategy - CloseScrollStrategy - BlockScrollStrategy - RepositionScrollStrategy • 여러 UI 전략들
- 17. Layout • 반응형 UI를 위한 스크린 크기 Detection
- 18. 그 외에 • import { TextFieldModule } from ‘@angular/cdk/text-field＇ AutofillMonitor - Injectable - 브라우저에 의해 자동 입력되는 값을 감지 cdkTextareaAutosize - Directive - Textarea를 콘텐츠에 맞게 자동으로 크기를 변경합니다.
- 19. 그 외에 • import { SelectionModel } from ‘@angular/cdk/collections＇ 하나 또는 그 이상의 아이템들을 리스트에서 선택할 수 있는 데이터 모델 선택 기능이 필요한 UI에 유용
- 20. 참조 • 유용한 블로그 글 Angular In Depth - 미디엄 블로그 https://blog.angularindepth.com/ - 좋은 Angular 글들이 많아요! ! Custom Overlays with Angular Overlays https://blog.thoughtram.io/angular/2017/11/20/custom- overlays-with-angulars-cdk
- 21. 예제 코드 • 깃헙에 예제 코드 몇 개 올렸습니다. 하지만 예제가 몇 개 없어요... https://github.com/seokju-na/angular-cdk-examples.git