HTML5Rocks/KO: [튜토리얼/한글화] HTML Imports: 웹을 위한 #include(HTML Imports: #include for the web)

2013년 11월 28일 목요일

[튜토리얼/한글화] HTML Imports: 웹을 위한 #include(HTML Imports: #include for the web)

HTML5Rocks의 'HTML Imports: 웹을 위한 #include (HTML Imports: #include for the web)' 튜토리얼의 한국어 번역이 업데이트되었습니다.

HTML Imports 역시 이전의 Custom Element처럼 웹 컴포넌트를 지탱하는 4가지 규격 중의 하나입니다.

Shadow DOM이 컴포넌트의 DOM, CSS, JS를 감추는 역할(encapsulation)을 하고
HTML Template가 DOM의 복제 및 재 사용성을 제공하며
Custom Element는 웹 문서에서 사용할 엘리먼트를 모듈에서 직접 등록할 수 있도록 하는 기능을 제공하여 컴포넌트의 명시적인 alias를 선언하는 역할을 한다면
HTML Imports는 웹 문서 내에 외부 리소스를 포함(Import)하기 위한 기능을 제공합니다.

(사실 여기에 Decorator가 추가되는데 이 부분은 아직 정확하게 규격화가 되지 않아서 따로 진행되고 있는 바는 없습니다. 간략하게는 Web Component의 동적인 Enhancement에 대한 관리 방법을 제공하기 위한 규격으로 판단됩니다.)

TL;DR;

웹에서 각기 다른 형태의 리소스들은 개별적으로 로딩을 위한 메커니즘을 가지고 있고 이를 통해 개별적인 리소스에 대해서는 지속적으로 재사용 가능한 사례를 만들어 내고는 있습니다. 그렇다면 웹 컨텐츠(HTML, CSS, JS)는 어떤가요?

<iframe>의 경우 사용이 가능하며 실제적인 방법이지만 무겁고 세부적인 제어에 있어서는 굉장히 큰 노력을 필요로 하면서도 결국 불가능한 부분들이 있습니다. 그외에도 Ajax를 사용하거나 <script> 태그를 응용한 각종 핵(hack)이 존재합니다. 동작을 위한 정말 굉장한 노력을 필요로 하는 웹 컨텐츠(HTML/JS/CSS 등)에 대해 하나의 패키지처럼 관리하며 로딩할 수 있는 메커니즘이 있다면 어떨까요?

HTML Imports는 Web Components의 일부로 일컬어지는 HTML 문서를 다른 HTML 문서들에 가져오기 위한 방법입니다. 또한 Import는 CSS, JavaScript 혹은 '.html' 외의 어떠한 것도 가져올 수 있습니다. 다시 말해서 이러한 것이 Import를 HTML/CSS/JS의 로딩과 관련된 환상적인 도구로 자리잡아 줍니다.

이 글에서는 아래 내용에 대한 개념 설명과 예제를 설명하고 있습니다.