Angularcdk

Angular CDK로 높은 퀄리티의
UI 개발하기
Seoul.js 라이트닝 토크

나석주 코딩과 맥주를 사랑하는 개발자
주로 웹 프론트엔드 개발을 합니다.
@타운컴퍼니
github.com/seokju-na
seokju.me@gmail.com

@angular/cdk
구글이 Angular Material UI를 만들면서 공통적인 컴포넌트 작성
패턴들을 독립된 라이브러리로 만들어 배포함
https://material.angular.io/cdk
• Angular 프레임워크를 위한 Component Dev Kit 라이브러리
• 해결하는 문제들
a11y(accessibility), bidirectional text, overlay, layout, table
등등

@angular/cdk
높은 퀄리티를 보장 : 접근성 고려, 국제화(i18n), 퍼포먼스, 양질의
문서 등
• 멋진 점
• 아쉬운 점
아직까지 지원하는 기능이 부족하다는 생각이 듭니다. (드래그 앤 드
롭, 가상 스크롤 등)
IE11

A11y
Aria live (Live announcer), 포커스 관련 (FocusMonitor,
FocusTrap), List Key 관리 등
• 웹 접근성 향상
• 몇 가지 예제를 보여 드리겠습니다.

FocusTrap : 포커스를 특정 DOM 아
래에 가둘 수 있습니다.

ListKeyManager를 이용해 쉽게
메뉴 아이템을 관리할 수 있습니
다.
메뉴 아이템이 포커스 되어야 한
다면 FocusKeyManager를 이용
합니다.

Portal
Portal : 생성할 Component, 또는 Template과 관련 정보
PortalOutlet : Portal의 실제 DOM을 그려줄 위치
• 동적으로 Component 또는 TemplateRef 생성
• *ngComponentOutlet?
둘 다 Component를 동적으로 생성할 수 있나, Portal은
TemplateRef도 동적 생성을 지원합니다.

Portal
PortalOutlet을 DOM
Element에 지정할 수 있습니다.
• DomPortalOutlet

Portal
Directive로 View가 동적으로
생성될 위치를 지정할 수 있습니
다.
• Portal Helper Directives
• <router-outlet>과 기능이 유사
하다고 생각하시면 됩니다.

Overlay
오버레이에 표시할 내용을 Service 등으로 이벤트를 전달합니다.
Host 컴포넌트가 이벤트를 받으면 내용을 표시합니다.
• Angular에서 Overlay UI의 공통적인 패턴?

Overlay
• Portal을 통해 Component 또는 TemplateRef 동적 생성
View 바인딩 사용 가능. 유연하게 템플릿 생성 가능
또한, 다수의 Overlay를 쉽게 관리할 수 있습니다.

Overlay
Position
- GlobalPositionStrategy
- FlexibleConnectedPositionStrategy
Scroll
- NoopScrollStrategy
- CloseScrollStrategy
- BlockScrollStrategy
- RepositionScrollStrategy
• 여러 UI 전략들

Layout
• 반응형 UI를 위한 스크린 크기 Detection

그 외에
• import { TextFieldModule } from ‘@angular/cdk/text-field＇
AutofillMonitor
- Injectable
- 브라우저에 의해 자동 입력되는 값을 감지
cdkTextareaAutosize
- Directive
- Textarea를 콘텐츠에 맞게 자동으로 크기를 변경합니다.

그 외에
• import { SelectionModel } from ‘@angular/cdk/collections＇
하나 또는 그 이상의 아이템들을 리스트에서 선택할 수 있는 데이터
모델
선택 기능이 필요한 UI에 유용

참조
• 유용한 블로그 글
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

예제 코드
• 깃헙에 예제 코드 몇 개 올렸습니다. 하지만 예제가 몇 개 없어요...
https://github.com/seokju-na/angular-cdk-examples.git

Angularcdk

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (6)

Semelhante a Angularcdk

Semelhante a Angularcdk (20)

Angularcdk