Web Component Introduction 번역 - 웹 컴포넌트 소개

이 글은 WEBCOMPONENTS.ORG 의 글을 번역한 것입니다.

 

소개

 

웹 컴포넌트란?

웹 컴포넌트는 웹 페이지에 재사용 가능하고 캡슐화된 새로운 커스텀 컴포넌트를 만들 수 있게 도와주는 웹 플랫폼 API 세트 입니다. 웹 컴포넌트 기반으로 만들어진 커스텀 컴포넌트와 위젯은 최신 브라우저에서 작동하고, HTML과 함께 작동하는 모든 Javascript 라이브러리 또는 프레임워크와 함께 사용할 수 있습니다.

 

웹 컴포넌트는 기존의 웹 표준을 기반으로 합니다. 웹 컴포넌트를 지원하는 기능이 현재 HTML과 DOM 스펙에 추가되고 있어, 웹 개발자는 쉽게 HTML을 커스텀 동작과 캡슐화된 디자인을 가진 새로운 엘레멘트로 확장할 수 있습니다.  

 

---

명세

웹 컴포넌트는 네 개의 주요 명세에 기반합니다.

 

Custom Elements

커스텀 엘레멘트 명세는 새로운 유형의 DOM 엘레멘트를 설계하고 사용하기 위한 기반을 제공합니다.

 

Shadow DOM

쉐도우돔 명세는 웹 컴포넌트에서 어떻게 캡슐화된 스타일과 마크업을 사용하는 지 정의합니다.

 

ES Modules

ES Modules 명세는 표준 기반의 모듈식 성능 방식으로 JS 문서의 포함과 재사용을 정의합니다.

 

HTML Template

HTML Template 명세는 페이지 로드 시 사용되지 않지만, 나중에 런타임에 인스턴스화할 수 있는 마크업 조각을 선언하는 방법을 정의합니다.

 

---

웹 컴포너트는 어떻게 사용할까

이 사이트에서는 당신의 웹 페이지에서 사용할 수 있는 새로운 HTML 엘레멘트를 제공합니다. 커스텀 엘레멘트를 사용하는 것은 매우 간단합니다. 예를 들어, 아래의 paper-button element를 보면

 

<script type="module" src="node_modules/@polymer/paper-button/paper-button.js"></script>
...
<paper-button raised class="indigo">raised</paper-button>

커스텀 엘레멘트를 설치하는 방법은 다양합니다. 사용하고 싶은 엘레멘트를 찾았을 때, 그것의 README 파일은 보고 설치 명령어를 확인하면 됩니다. 대부분의 엘레멘트는 요즘 NPM을 이용해 설치할 수 있습니다. NPM은 또한 컴포넌트의 종속성 설치도 처리합니다. 더 자세한 정보는 이 사이트를 참고하세요.

 

예시로, paper-button 의 개요 페이지 에서는 아래처럼 설치 방법을 알려줍니다.

 

mkdir my-new-app && cd my-new-app
npm install --save @polymer/paper-button

 

---

어떻게 새로운 HTML 엘레멘트를 정의할까?

이 섹션에서는 웹 컴포넌트 명세의 크로스브라우징을 위한 구문에 대해 설명합니다. 

 

Javascript의 customElements를 이용해 글로벌로 HTML태그를 정의합니다. 태그이름과 HTMLElement를 상속받는 Javascript 클래스를 넣고, customElements.define()을 호출하세요.

 

예시로,

 

class AppDrawer extends HTMLElement {...}
window.customElements.define('app-drawer', AppDrawer);

 

새로운 태그를 사용하려면,

 

<app-drawer></app-drawer>

 

커스텀 엘레멘트를 사용하는 방법은 <div>또는 다른 기존의 태그를 사용하는 것과 다를 것이 없습니다. 인스턴스는 페이지에서 선언될 수 있고,  동적으로 자바스트립트로 생성할 수 있으며, 이벤트 리스너도 붙일 수 있습니다.

 

<script>
// Create with javascript
var newDrawer = document.createElement('app-drawer');
// Add it to the page
document.body.appendChild(newDrawer);
// Attach event listeners
document.querySelector('app-drawer').addEventListener('open', function() {...});
</script>

 

---

Shadow Dom을 만들고 사용하는 방법

이 섹션에서는 쉐도우 돔 명세의 새로운 크로스 브라우저 버전 1을 이용해 쉐도우 돔을 만드는  방법을 설명합니다. 쉐도우 돔은 컴포넌트를 만들 수 있게 도와주는 새로운 돔 기능입니다. 쉐도우 돔은 어떤 엘레멘트에 속한 하위 트리로 생각할 수 있습니다. 

쉐도우 루트는 host 엘레멘트에 붙는 document 조각입니다. 엘레멘트에 쉐도우돔을 만들기 위해 쉐도우 루트를 붙이는 작업을 합니다. 엘레멘트에 쉐도우 돔을 만들기 위해 element.attachShadow()를 호출하세요.

 

const header = document.createElement('header');
const shadowRoot = header.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>'; // Could also use appendChild().
// header.shadowRoot === shadowRoot
// shadowRoot.host === header

 

 

---

웹 컴포넌트를 만드는 라이브러리 소개

웹 컴포넌트를 쉽게 빌드할 수 있도록 도와주는 라이브러리는 이미 많이 있습니다. 이 사이트의 라이브러리 섹션에 추가 세부 정보가 있지만, 아래 시도해 볼만한 몇가지를 소개합니다.

 

- Hybirds는 간단하고 기능적인 API를 이용해 웹 컴포넌트를 만드는 UI 라이브러리입니다.

- LitElement는 엘레멘트의 쉐도우 돔을 렌더링하기 위해 lit-html을 사용하고 엘레멘트의 속성을 관리하기 위해 API를 추가합니다.

- Polymer는 커스텀 엘레멘트를 생성하는 기능 셋트를 제공합니다.

- Slim.js는 ES6 기본 클래스의 상속을 이용하여 웹 컴포넌트에 데이터를 바인딩하고 확장 기능을 제공하는 가벼운 웹 컴포넌트 오픈소스 라이브러리입니다.

- Stencil 는 표준을 준수하는 웹 컴포넌트를 생성하는 오픈 소스 컴파일러입니다.