1 / 54

Web Components 개요

Web Components 개요. Agenda. Web Components 란 무엇인가 ? Web Components 의 구성요소 템플릿 데코레이터 커스텀 요소 Shadow DOM Web Components 는 Web 을 어떻게 바꿀 것인가 ?. Web Components 란 무엇인가 ?. →Web 의 UI 를 「 컴포넌트화 」 하기 위한 스펙군. Web 에는 컴포넌트화가 필요하다. 유지 , 보수성. Web 에는 컴포넌트화가 필요하다. 재이용성. 개발효율.

lalo
Download Presentation

Web Components 개요

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Components개요

  2. Agenda • Web Components란 무엇인가? • Web Components의 구성요소 • 템플릿 • 데코레이터 • 커스텀 요소 • Shadow DOM • Web Components는 Web을 어떻게 바꿀 것인가?

  3. Web Components란 무엇인가? →Web의 UI를「컴포넌트화」하기 위한 스펙군

  4. Web에는컴포넌트화가필요하다.

  5. 유지, 보수성 Web에는컴포넌트화가필요하다. 재이용성 개발효율

  6. Web Components 개요 • Google에 의해 스펙 제안 • 2012/10 현재, Google Chrome이 일부를 이미 구현함 • 일부 스펙이 공식 초안으로써 공개 • 일반적으로 사용 가능하게끔 하기 위해서는 아직 시간이 걸릴 듯 하다

  7. Web Components의 구성요소 • Web Components를 구성하는 4개의 요소 템플릿 데코레이터 커스텀 요소 Shadow DOM

  8. HTML 템플릿

  9. HTML 템플릿 • 현재 JavaScript로 UI를 주무르는 방법은 두가지가 있다. • 문자열 템플릿 • DOM조작

  10. HTML 템플릿 • 현재 JavaScript로 UI를 주무르는 방법은 두가지가 있다. • 문자열 템플릿 • DOM을 고려하지 않음 • 비표준 • DOM조작 <script id="tmpl1" type="text/x-handlebars-template"> <div>...</div> </script>

  11. HTML 템플릿 • 현재 JavaScript로 UI를 주무르는 방법은 두가지가 있다. • 문자열 템플릿 • DOM조작 • 코드를 작성하기 힘들다 • 결과를 예측하기 어렵다 var div = document.getElementById('...'); div.setAttribute('key', 'value'); var p = document.createElement('p'); p.innerHTML = '...'; div.appendChild(p);

  12. HTML 템플릿 • 현재 JavaScript로 UI를 주무르는 방법은 두가지가 있다. • 문자열 템플릿 • DOM조작 • 코드를 작성하기 힘들다 • 결과를 예측하기 어렵다 HTML템플릿으로 해결!

  13. HTML 템플릿 정의방법 • <template>요소를 사용한다. • <template> 안에 평소대로 HTML를 기술한다 • <template>은 랜더링되지 않는다. • <body>, <head>에 정의 <html> <head> <template id="t"> <div id="message"></div> </template> </head> <body></body> </html>

  14. HTML 템플릿을 사용한다 • Content 설정으로부터 내부 DOM을 취득한다. <template id="t"> <div id="message"></div> </template> vartmplElem = document.getElementById('t'); vartmpl = tmplElem.content.cloneNode(); … elem.appendChild(tmpl);

  15. HTML템플릿 • 솔직히, 이것만으로는 전혀 편리하지 않다. • 데코레이터, 커스텀 요소에서 사용되는 범용요소라고 이해해야한다. • 「템플릿이다」라는 시맨틱을 부여할 수 있다는 것이 장점. • 지금까지의 <script>요소보다 보기좋다. <script type="text/x-handlbars-template"> </script>

  16. 데코레이터

  17. CSS의 한계를 뛰어넘는다 CSS의 한계는? DOM 조작이 불가능하다

  18. <ul> <li> <i>아이콘</i> <span>앱 센터</span> <span>2</span> </li> … </ul> … 대충 요정도로 끝날것 같은 부분이지만… 쩜쩜쩜

  19. 데코레이터 • 요소를 「데코레이션」하기위한 구조 • HTML안에서 정의하고, CSS안에서 사용한다

  20. 데코레이터의 정의 • <decorator>요소와<template>요소를 사용하여 정의한다. <decorator id="labelDecorator"> <template> 라벨： </template> </decorator>

  21. 데코레이터의 사용 • CSS안에서 decorator설정을 사용하여 요소에 지정한다. /* 모든 label요소를 「라벨:」 로 변경 */ label { decorator: url(#labelDecorator); } <label for="name"> 이름 </label> <input id="name">

  22. 데코레이터의 사용 • 템플릿 안에서 <content>요소를 사용하여 요소내용을 투입할 장소 지정이 가능하다. <decorator id="labelDecorator"> <template> <!-- 여기에 요소내용이 투입됨 --> <content></content>： </template> </decorator> <label for="name"> 이름 </label> <input id="name">

  23. 여러 개의 <content>요소 지정하기 • <content>는 복수지정이 가능하다. • Select속성을 적용하여 요소내용의 일부를 추출하여 투입할 수 있다. <decorator id="fieldRowDecorator"> <template> <div> <!– 여기에 요소 내용이 투입됨--> <content select="label"></content>： </div> <!– 남은 요소는 여기에 투입됨--> <div id="field"><content></content></div> </template> </decorator>

  24. 여러 개의 <content>요소 지정하기 /* 라벨과 필드의 조합 */ .fieldRow { decorator: url(#fieldDecorator); } <div class="fieldRow"> <label for="name"> 이름 </label> <input id="name"> </div>

  25. Advanced:데코레이터의 스타일링 • scope 속성이 부여된 style요소를 사용 <decorator id="fieldRowDecorator"> <template> <style scoped>...</style> … </template> </decorator>

  26. Advanced:데코레이터내의 이벤트 처리 • 데코레이터는listen()이라는 메소드를 사용하여 이벤트 핸들러를 등록한다. • 데코레이터의 코드가 실행되는것은, 로드될때 딱 한 번. <decorator id="decorator-event-demo"> <script> function h(event) { alert(event.target); } this.listen( {selector: "#b", type: "click", handler: h}); </script> <template> <content></content> <button id="b">Bar</button> </template> </decorator>

  27. 데코레이터 • 어디까지나 “표시”를 목적으로 하는 기능이다. • Shadow DOM(나중에 설명)은 지니지 않는다. • 데코레이터로 정의된 DOM에는 접근할 방법이 없다. • 스타일링 목적의 필요없는마크업을 극적으로 줄일 수 있기 때문에 꽤 강력하다.

  28. 커스텀 요소

  29. 커스텀 요소란? 요소를 내가 직접 만들수 있어요!!!!

  30. 커스텀 요소의 정의 • <element>요소를 사용한다. • name속성에 요소명을 지정한다. • 새로 만드는 요소에는 「x-」라는 접두어를 반드시 붙여야한다. • extends속성에 미지원 브라우저에서 보일 요소를 지정해 준다. <element name="x-fancybutton” extends="button"> <template> <!–- 데코레이터와 동일 --> … </template> </element>

  31. 커스텀 요소의 사용 • 요소에 is속성을 지정하여 커스텀 요소의 명칭을 지정한다. • 대상이 되는 요소는 커스텀 요소의 extends와 일치해야할 필요가 있다. <buttonis="x-fancybutton"> <span>버튼입니당</span> </button>

  32. Advanced:커스텀 요소의 인스턴스화 • 커스텀 요소는 통상적인 요소와 동일하게 document.createElement()로 인스턴스화가 가능하다. • constructor속성으로 생성자를 생성할 수도 있다. var e = document.createElement('x-fancybutton'); <element name="x-fancybutton" extends="button" constructor="FancyButton">...</element> varfancyButton = new FancyButton();

  33. Advanced:커스텀 요소의 클래스 정의 • 생성자의 프로토 타입을 변경하여 요소의 독자적인 퍼포먼스를 추가한다. <element ... constructor="FancyButton"> <script> FancyButton.prototype.razzle = ... // constructor속성을 사용하지 않은 경우에는 // 아래 코드로 생성자에 접근 // varFancyButton = this.generatedConstructor; </script> ... </element>

  34. Advanced:커스텀 요소의 라이프 사이클 • 커스텀 요소는 아래와 같은 라이프 사이클 이벤트를 잡고 처리를 행한다. • created • attributeChanged • inserted • removed <element extends="time" name="x-clock"> <script> this.lifecycle({ inserted: function(){ this.startUpdatingClock(); }, removed: function() { this.stopUpdatingClock(); } }); </script> </element>

  35. Shadow DOM

  36. Shadow DOM이란? • 개발자의 시선에서 숨겨진 DOM 트리 • 복잡한 내부구조를 은폐하고 심플한 DOM으로 보이게 할 수 있다.(=캡슐화)

  37. Shadow DOM의 구현상황 • Google Chromeに은 Shadow DOM이 구현되어 있다. • 표준적인 요소의 대부분이 Shadow DOM으로 구현되어 있다. • video/audio/textarea/details/input...

  38. Shadow DOM을 “보자” • chrome://flags에서 다음의 설정을 ON으로 한다. • Shadow DOM을 체크 • <style scoped>을 체크 • Shadow DOM을 사용하기 위해서 필요 • 개발자 툴의 테스트를 사용하기로 설정한다. • Shadow DOM 내용을 개발자툴에서 보기 위해서 필요

  39. Shadow DOM을 “보자” • 표준적인 요소가 Shadow DOM에 의해 구축되어있는것을 확인한다.

  40. Advanced:Shadow DOM의 동작 이해하기 • Shadow DOM을 사용한 요소(Shadow Host)의 “안쪽”에는 2개의 DOM트리가 있다. <element name="x-fancybutton" extends="button"> <template> <content></content> <div>...</div> </template> </element> 커스텀 요소의 정의에 포함되는 DOM트리. 이 트리는 개발자의 눈에 보이지 않는다. （Shadow DOM） 커스텀 요소 내에 중첩되어있는 DOM트리. 이 트리는 Shadow DOM으로 대체된다. <button is="x-fancybutton"> <span>버튼</span> </button>

  41. Advanced:Shadow DOM의 동작 이해하기 • 두 종류의 DOM트리

  42. Advanced:Shadow DOM의 동작 이해하기 • Shadow DOM으로 대체된다.

  43. Advanced:Shadow DOM의 동작 이해하기 • 본래의 DOM트리는 <content>요소 위치에 투입된다. <element name="x-fancybutton" extends="button"> <template> <content></content> <div>...</div> </template> </element> <button is="x-fancybutton"> <span>버튼</span> <div>...</div> </button> <button is="x-fancybutton"> <span>버튼</span> </button>

  44. Advanced:Shadow DOM 사용 • Chrome에서는 이미 Shadow DOMAPI를 이용 가능도록 되어있다. • WebKitShadowRoot를 적용하여 임의의 요소를 Shadow Host로 할 수 있다.

  45. Advanced:Shadow DOM 사용 • 아래의 코드를 Shadow DOMAPI를 사용하여 형성한다. <!DOCTYPE html> <div id="shadowHost"> 본래 있던 DOM트리 </div> <div id="shadowSubtree"> <style scoped> #origTree { color: red; } </style> <h1>Shadow DOM Subtree</h1> <div id="origTree"> <content></content> </div> </div>

  46. Advanced:Shadow DOM 사용 // Shadow Host가 되는 요소를 취득 var shadowHost = document.getElementById('shadowHost'); // Shadow Host로 변환 // 이 시점에서 본래의 DOM트리는 일단 비표시됨 varshadowRoot = new WebKitShadowRoot(shadowHost); // Shadow DOM 서브트리가 되는 요소 varshadowSubtree = document.getElementById('shadowSubtree'); // Shadow DOM서브트리로 지정 // 표시되는것은 이 요소가 된다. // <content>요소 부분에 본래의 DOM트리가 표시된다.shadowRoot.appendChild(shadowSubtree);

  47. Web Components는 Web을 어떻게 바꿀 수 있을까?

  48. UI프레임워크의이용방법이 통일됨 $('#list').somelist(); <ul data-role="listview"> </ul> <ulis="x-somelist"> </ul> <uldojoType="x.y.SomeList"> </ul>

  49. 외부 컴포넌트를 불러옴 • link엘리먼트를 사용하여 외부 컴포넌트를 불러올 수 있다. <link rel="components" href="URL"> CDN에 의한 컴포넌트 배포등을 기대할 수 있다

  50. Web UI개발의 분업이 가능해짐 컴포넌트 이용자 (Low skill) HTML마크업 CSS 스타일링 컴포넌트 개발자 (high skill) HTML/CSS/JS를 구사한 컴포넌트 개발 개발 표준 책정 타사 컴포넌트의 선정 등

More Related