Embed Size (px)
DESCRIPTION
팀 주간세미나(2014/03/14)자료. 웹 컴포넌트란 무엇인지 알아보았습니다.
Citation preview
Introduction to
Web Components
1. 웹 애플리케이션이란 ?
2. 웹 컴포넌트란 ?
3. 웹 컴포넌트를 지탱하는 규격들 .
1. 웹 애플리케이션이란 ?
문서 처리를 지원하기 위해 문서에 추가되는 정보 . 마크업 정보는 문서의 논리적
구성이나
체제와 같은 문서의 포맷을 지정하거나 , 문서 내용의 찾아보기 또는 찾아보기 작업
(indexing)
방법을 지정하거나 , 문서 내용 중의 요소와 같은 문서 또는 다른 문서 중의 다른
요소와의
연결 (link) 을 지정한다 . 마크업 정보를 표현하는 언어를 마크업 언어라고 한다 .
마크업 정보를
문서 중에 삽입하는 작업을 말한다 .
출처 : [ 네이버 지식백과 ] 마크업 [markup] (IT 용어사전 ,
한국정보통신기술협회 )
마크업 [markup]
1. 문서 처리를 지원하기 위해 문서에 추가되는 정보 . • 마크업 정보는 문서의 논리적 구성이나 체제와 같은 문서의 포맷을
지정하거나 ,
• 문서 내용의 찾아보기 또는 찾아보기 작업 (indexing) 방법을 지정하거
나 ,
• 문서 내용 중의 요소와 같은 문서 또는 다른 문서 중의 다른 요소와의 연결(link) 을 지정한다 .
• 마크업 정보를 표현하는 언어를 마크업 언어라고 한다 .
2. 마크업 정보를 문서 중에 삽입하는 작업 .
출처 : [ 네이버 지식백과 ] 마크업 [markup] (IT 용어사전 , 한국정보통신기술협회 )
HTML (Hypertext Markup Language)
Web Page
Ajax
Web Application
Component
Jindo Component
jQuery Widgets
Bootstrap
2. 웹 컴포넌트란 ?
지금 여러분이 개발하고 있는컴포넌트 ... 안녕들 하십니까 ?
• 기존 방법으로 쓰이는 자바스크립트 라이브러리 컴포넌트를 W3C 에서 웹 컴포넌트 (Web Com-ponent) 라는 명세 (Specification) 를 표준화시키고 있음 .
• 현재 WorkingDraft ( 초안 ) 단계 (1/4)
• 컴포넌트의 캡슐화 (HTML/CSS/JavaScript)
• 네이티브 엘리먼트 ( 성능 개선 )
Web Components
W3C Working Drafthttp://www.w3.org/TR/2013/WD-components-intro-20130606/
웹 컴포넌트를 지탱하는 규격들 .
Shadow DOM
HTML Template
Custom Element
HTML Imports
설정하기 chrome://flags (about:flags)
HTML 가져오기 사용 Enable-html-imports
실험용 자바스크립트 사용Enable-Javascript-harmony
실험용 웹 플랫폼 기능 사용Enable-experimental-web-platform-features
설정하기 Settings > General > Show Shadow DOM
Shadow DOM
HTML5 Tag <video>
1. DOM 트리의 캡슐화 문제를 다루고 있음 .- Style- Script
2. 크롬 25 버전 이상에서 prefix 붙여 사용 가능함 .( 설정하기 > 실험용 웹 플랫폼 기능 사용일 경우 prefix 필요 없음 )
Shadow DOM can be applied to an element by calling the createShadowRoot method. This returns a ShadowRoot node which can then be populated with DOM nodes.
An element with shadow DOM is called a shadow host. When an element has shadow DOM, the element's children are not rendered; the content of the shadow DOM is rendered instead.
Hello, Shadow DOM!
CreateShadowRoot
스타일 훅 (Hook)• CSS 셀렉터 ^ 와 ^^• CSS 변수 사용
스타일의 상속 및 재설정• .resetStyleInheritance
false - 디폴트 . 상속 가능한 CSS 속성들이 상속을 유지true - 경계에서 상속가능한 속성들을 initial 으로 재설정
• .applyAuthorStylestrue - 저작자의 문서 내에 정의된 속성을 적용 .false - 디폴트 . 저작 스타일은 섀도 트리에 적용되지 않음 .
배포된 노드들의 스타일링• ::content 의사 엘리먼트 (pseudo element)• 삽입지점들에서 스타일을 재설정하기
이벤트Shadow Boundary 를 넘지 못하는 이벤트 abort, error, select, change, load, reset, resize, scroll, selectstart
덧붙여서… Style Scoped attribute
http://html5doctor.com/the-scoped-attribute/
HTML Template
Template특별한 어플리케이션을 위한 시작점으로 사용되는 미리 작성된 형식을 가진 문서나 파일 .즉 , 형식 (Format) 은 사용될 때마다 매번 재생성하지 않아도 됨 .
1. 이것의 컨텐츠는 활성화가 될 때까지 효과적으로 비활성화됩니다 . 기본적으로 여러분의 마크업 숨겨진 DOM 이며 렌더링되지 않습니다 .
2. 템플릿 안의 어떠한 컨텐츠라도 부작용을 가지지 않습니다 . 템플릿이 사용될 때까지 스크립트는 실행되지 않으며 이미지는 로딩되지 않고 오디오는 재생되지 않는 등
3. 컨텐츠는 문서 내에 있지 않도록 고려되어야 합니다 . 메인 페이지에서 document.getElementById() 나 querySelector() 의 사용은 템플릿의 자식 노드들을 반환하지 않을 것입니다 .
4. 템플릿은 <head>, <body> 혹은 <frameset> 내의 어느 곳에도 위치할 수 있습니다 . " 어느 곳에서도 " 는 <template> 가 content model 의 자식들을 제외한 ...HTML 파서가 허가하지 않는 모든 위치에서도 안전하게 사용될 수 있다는 것을 의미한다는데 주의하시기 바랍니다 . 또한 아래에서 보시다시피 <table> 이나 <select> 의 자식처럼 둘 수도 있습니다 .
Custom Element
Modern web apps: built with <div> soup.
1. 새로운 엘리먼트를 개발자가 정의할 수 있음• 하나의 태그에 사용자 지정 기능을 함께 논리적으로 제공하기• 새 HTML/DOM elements 정의하기• 다른 elements 로부터 확장된 element 만들기• 존재하는 DOM element 의 API 확장하기
2. 주의사항• 엘리먼트 이름은 반드시 dash(-) 를 포함해야 함 .
새로운 엘리먼트를 등록하는 방법
기본적으로 HTMLElement 를 상속받으나 , 변경 가능함 .
네이티브 엘리먼트를 확장하는 방법 - prototype 을 반드시 상속받아야 함- 지원하지 않는 브라우저에서는 HTMLUnknownElement 이다 .
Unresolved elements그들의 정의가 브라우저에 등록되기 전엔 선언되거나 만들어 질 수 없다 .
이름 상속받은 parent 예Unresolved element HTMLElement <x-tabs>, <my-element>,
<my-awesome-app>
Unknown element HTMLUnknownElement <tabs>, <foo_bar>
Lifecycle callback methodselement 가 존재하는 시간 중 흥미로운 시간의 활용을 위한 방법을 정의할 수 있다 .
Callback 이름 호출되는 시기
createdCallback element 의 인스턴스가 생성되었을 때
attachedCallback document 에 인스턴스가 삽입되었을 때
detachedCallback document 에서 인스턴스가 삭제되었을 때
attributeChangedCallback(attrName, oldVal, newVal)
속성이 추가되거나 , 삭제되거나 , 갱신되었을 때
HTML Imports
Script <script type="javascript" src="js/common.js">
CSS <link rel="stylesheet" type="text/css" href="css/common.css">
Tags <img>, <video> , <audio> , <iframe> ...
기존 웹페이지 Imports 방식
선언하기 .<link rel="import" href=“xxx.html">
사용하기 . Chrome ver.31 이상부터 지원됨 . 다른 도메인일 경우 CORS(Cross-Origin Resource Sharing) 가 되어야 함 지원 여부를 확인할 수 있음 . onload, onerror 이벤트 사용할 수 있음 . import 를 동적으로 변경할 수 있음 . import 된 페이지의 DOM 에 접근 가능함 .
Shadow DOM• 컴포넌트를 구성하는 DOM 과 스타일을 캡슐화 .
HTML Template• DOM 의 복제를 통한 재사용 .
Custom Element• 사용할 엘리먼트를 개발자가 직접 등록할 수 있음 .• 컴포넌트의 명시적인 Alias 를 선언 .
HTML Imports• 웹 문서 내에 외부 리소스를 포함 (Import) 하기 위한 기능을
제공
http://www.polymer-project.org/
http://mozilla.github.io/brick/
Library
Building blocks for the web (Google)https://www.youtube.com/watch?v=VMVj_jR75vE
UI Components for Modern Web Apps (Mozilla with xTag)
• [ 튜토리얼 /MashUp] 웹 컴포넌트 : 차세대 프론트엔드 웹 개발로 가는 관문(Web Component: the Gate of Next Front-end Web Developments)http://html5rocksko.blogspot.kr/2014/02/mashup-web-component-evolution-of-web-development.html
• Web Components: A Tectonic Shift for Web Developmenthttps://html5-demos.appspot.com/static/webcomponents/index.htmlhttps://developers.google.com/events/io/sessions/318907648
• Introduction to Web Components http://www.w3.org/TR/components-intro/
• WebComponents.orghttp://webcomponents.github.io/
• The Chromium Projects > Blink > Web Componentshttp://www.chromium.org/blink/web-components
• 웹 컴포넌트http://helloworld.naver.com/helloworld/188655
끝 .
끝 .
