Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular2를 위한 컴포넌트 분석과 개발

3,823 views

Published on

Angular 2는 HTML 5 웹 컴포넌트 기술을 포함합니다. 이 기술은 Angular 2 컴포넌트를 존재케한 기반기술입니다. 본 슬라이드는 이와 관련하여 2가지 흐름을 가지고 있습니다.

- 전반부는 웹 컴포넌트가 Angular 2 컴포넌트가 되기까지의 과정을 설명합니다.
- 후반부는 컴포넌트 트리 구조를 기반으로한 컴포넌트 상호작용에 대해 설명합니다.

필요하신 분에게 조금이라도 도움이 되었으면 좋겠습니다. 감사합니다.


CHANGE LOG

2016-06-27 : @input 데코레이터 설명교정
2016-06-26 : 쉐도우 돔 / 쉐도우 호스트관련 보다 정확한 문장으로 수정
2016-06-25 : 업로드

Published in: Software
  • Be the first to comment

Angular2를 위한 컴포넌트 분석과 개발

  1. 1. Component Analysis and Development for Angular2 Angular2를 위한 컴포넌트 분석과 개발 2016년 06월 25일 정진욱
  2. 2. 웹 컴포넌트
  3. 3. • 웹 컴포넌트는 W3C의 표준 • 웹 컴포넌트 이용을 위해 보완 라이브러리 필요 – webcomponent.js와 Polymer Library 이용 • 웹 컴포넌트의 구성요소 – HTML 탬플릿 – HTML 임포트 – 쉐도우 돔 – 커스텀 엘리먼트 웹 컴포넌트 (web components)
  4. 4. • 탬플릿 태그를 이용한 재사용 HTML 정의가능 – 탬플릿 태그내의 엘리먼트들은 랜더링 되지 않음 HTML 탬플릿 <template id=“nav-item-template"> <div class=’nav’> <div class=“item">메인</div> <div class=“item">서비스 소개</div> <div class=“item">서비스 특징</div> </div> </template>
  5. 5. • 외부 HTML 탬플릿 문서를 가져오는 방법 – 문서를 가져오기 위해 CORS 허용설정 필요 HTML Import <link rel="import" href="http://mydomain/my-elements.html"> HTML문서 임포트 예 <script> var link = document.querySelector('link[rel="import"]'); var content = link.import; var el = content.querySelector('.info'); document.body.appendChild(el.cloneNode(true)); </script> 외부에 정의한 HTML 탬플릿 사용
  6. 6. • 노출 되지 않는 돔이다. • 쉐도우 경계를 가져 외부 접근이 불가함 (캡슐화) 쉐도우 돔 (Shadow Dom) <button class="blue">버튼</button> <script> var button = document.querySelector('button'); var root = button.createShadowRoot(); root.innerHTML = '<style>' + ':host { color:blue; }' + '</style>' + '<content></content>'; </script> 버튼에 대한 쉐도우 돔 만들기
  7. 7. • 문서 돔은 쉐도우 돔을 랜더링 하지 않음 – 즉 쉐도우 호스트와 연결된 쉐도우 돔은 문서 DOM과 별개로 사전 랜더링됨 쉐도우 돔 문서 DOM 쉐도우 돔 (Shadow Dom)
  8. 8. • 쉐도우 돔은 독립 스타일을 가짐 쉐도우 돔 (Shadow Dom) 쉐도우 경계 독립 스타일 (스타일이 캡슐화됨)
  9. 9. • 사용자가 정의하며 확장  컴포넌트 커스텀 엘리먼트 var myProto = Object.create( HTMLButtonElement.prototype ) myProto.createdCallback = callback; var helloButton = document.registerElement( 'hello-button', { prototype: myProto, extends: 'button' } ) function callback (){ this.onclick = function ( event ){ alert( this.id + " " + this.value ); }} 콜백함수에 이벤트 등록 엘리먼트 확장 자바스크립트를 이용한 커스텀 엘리먼트 정의
  10. 10. • 커스텀 엘리먼트 사용 커스텀 엘리먼트 <button is="hello-button" id="Hello" value="World"> Hello World! </button> HTML에서 커스텀 엘리먼트 입력 버튼 커스텀 엘리먼트의 실행결과
  11. 11. • Angular 2는 웹 컴포넌트 기술을 사용한다. – 탬플릿 태그를 이용한다. – 쉐도우 돔을 통해 돔과 스타일을 캡슐화 한다. – 컴포넌트는 커스텀 태그이다 – 다른 탬플릿에 대한 임포트가 가능하다. 웹 컴포넌트와 Angular 2 컴포넌트
  12. 12. 엘리먼트에서 컴포넌트로 전환
  13. 13. • 블록구조는 블록 모양의 웹 페이지 구조를 말함 • 블록구조는 HTML 5 의 시맨틱 태그로 표현함 블록구조 (block structure) 블록구조를 만드는 HTML5 블록 엘리먼트
  14. 14. • 블록 엘리먼트는 UI를 가지며 컴포넌트로 전환가능 블록 엘리먼트를 컴포넌트로 전환 서비스 장점 빠르다 쉽다 무료다 해피 주식회사 만든 section 컴포넌트의 UI <nav>태그  컴포넌트 컴포넌트로 대체한 시맨틱태그
  15. 15. • 컴포넌트는 자식 컴포넌트를 포함할 수 있음 중첩 컴포넌트 (nested component) 컴포넌트자식 컴포넌트 부모 컴포넌트
  16. 16. 컴포넌트 트리 • 중첩 컴포넌트의 계층구조는 트리형임 컴포넌트 트리 (component tree)
  17. 17. • 블록 엘리먼트는 Angular 2 컴포넌트로 전환가능 – 컴포넌트로 영역과 블록 구조를 정의함 • Angular 2 컴포넌트는 중첩 가능하다. – 즉, 컴포넌트로 블록 구조를 잡고 컴포넌트가 컴포넌트를 포함하는 방식으로 웹 어플리케이션을 만든다. 엘리먼트와 Angular 2 컴포넌트
  18. 18. Angular 2 컴포넌트 개발
  19. 19. 컴포넌트란? • 서비스 컴포넌트 아키텍쳐에서의 컴포넌트 의미 – 명세에 따른 배포, 조립, 재사용 가능한 서비스 구성단위 • Angular 2 컴포넌트 – 웹 페이지에서 재사용 가능한 사용자 정의 엘리먼트 – 컴포넌트 = 탬플릿 + 로직
  20. 20. 외부모듈 호출 컴포넌트 클래스 정의 컴포넌트 메타데이터 설정 Angular 2 컴포넌트 구조 import { Component } from '@angular/core'; @Component({ selector: 'my-component', template:'탬플릿이 위치하는 곳' }) export class MyComponent { //로직이 위치하는 곳 } ts
  21. 21. 컴포넌트 용어정의 import { Component } from '@angular/core'; @Component({ selector: 'my-component', template:`<div>hello {{component}}!</div> <button (click)="hello()">hello</button>` }) export class MyComponent { constructor() {} name:string; sayHello() {} } 컴포넌트 장식자 Angular 라이브러리 모듈 모듈 명 클래스 명 모듈 공개 (클래스모듈) 외부 모듈 호출 컴포넌트 지시자 탬플릿 속성 탬플릿 표현식 바인딩타입 생성자 메서드 컴포넌트 메서드 탬플릿 입력 변수
  22. 22. • 컴포넌트 장식자를 이용해 컴포넌트 설정 진행 컴포넌트 데코레이터 @Component({ selector: 'my-component', template:'' }) 재사용 가능한 UI 정의
  23. 23. • 컴포넌트 초기화 – 컴포넌트 초기화 훅 ngOnInit은 생성자 이후에 호출됨 컴포넌트 초기화 export class MyComponente implements OnInit { constructor() { } ngOnInit() { } } 훅 메서드 (OnInit의 상속유무와 관계없이 호출됨) 생성자를 이용한 컴포넌트 초기화
  24. 24. • 컴포넌트에서 자식 컴포넌트 포함하기 중첩 컴포넌트 표현 import { Component } from '@angular/core'; @Component({ selector: 'my-app', template:’<my-profile></my-profile>’ }) import { Component } from '@angular/core'; @Component({ selector: 'my-profile‘, template:’나의 프로필입니다.’ }) export class MyComponent { } 자식 컴포넌트 부모 컴포넌트
  25. 25. • 컴포넌트에서 서비스 주입받기 컴포넌트 서비스 주입 import { Injectable } from '@angular/core'; @Injectable() export class HelloService { getName() { return "Hello"; } } import { HeroService } from './hero.service'; @Component({ selector: 'my-app', template: ``, providers: [HeroService]}) export class AppComponent implements OnInit { constructor(private heroService: HeroService) { } } 서비스 컴포넌트
  26. 26. • 부모 자식 컴포넌트간 데이터를 주고 받는 방법 • 상호작용을 위한 장식자 – @input : 부모로 부터 입력 받음 – @output : 자식이 부모 컴포넌트에게 데이터 전달 컴포넌트 상호작용
  27. 27. import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ selector: 'my-voter', template: ` <h4>{{name}}</h4> <button (click)="vote(true)" [disabled]="voted">Agree</button> <button (click)="vote(false)" [disabled]="voted">Disagree</button> `}) export class VoterComponent { @Input() name: string; @Output() onVoted = new EventEmitter<boolean>(); voted = false; vote(agreed: boolean) { this.onVoted.emit(agreed); // 부모 컴포넌트에 이벤트 전달 this.voted = true; }} 컴포넌트 상호작용 자식 컴포넌트
  28. 28. 컴포넌트 상호작용 import { Component } from '@angular/core'; import { VoterComponent } from './voter.component'; @Component({ selector: 'vote-taker', template: ` <h2>Should mankind colonize the Universe?</h2> <h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3> <my-voter *ngFor="let voter of voters" [name]="voter" (onVoted)="onVoted($event)"> </my-voter>`, directives: [VoterComponent] }) export class VoteTakerComponent { agreed = 0; disagreed = 0; voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto']; onVoted(agreed: boolean) { agreed ? this.agreed++ : this.disagreed++; } } 부모 컴포넌트 자식 컴포넌트 이벤트 대기
  29. 29. • http://w3c.github.io/webcomponents/spec/custom/ • https://www.w3.org/TR/shadow-dom/ • http://w3c.github.io/webcomponents/spec/imports • https://angular.io/docs/ts/latest/guide/component- styles.html • https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html • https://angular.io/docs/ts/latest/cookbook/component- communication.html 참고자료
  30. 30. 고맙습니다 고맙습니다

×