HTML5Rocks/KO: [튜토리얼/한글화] Shadow DOM 101

2014년 2월 5일 수요일

[튜토리얼/한글화] Shadow DOM 101

HTML5Rocks의 Shadow DOM 관련 튜토리얼 중 +Dominic Cooney의 'Shadow DOM 101(섀도 DOM 101)' 튜토리얼의 한국어 번역이 업데이트되었습니다.

웹 컴포넌트 관련 튜토리얼마다 말씀드리는 내용입니다만 Shadow DOM 역시 이전의 Custom Element나 HTML Imports처럼 웹 컴포넌트를 지탱하는 4가지 규격 중의 하나입니다. Shadow DOM은 DOM에 대한 캡슐화(Encapsulation)와 같은 매우 강력한 기능을 제공합니다. HTML5Rocks에는 다음과 같이 Shadow DOM에 대한 3개의 튜토리얼이 업데이트되어 있습니다.

Shadow DOM 101 - Shadow DOM의 기초적인 개념 및 구조
Shadow DOM 201: CSS and Styling - Shadow DOM의 CSS 규칙 적용 및 스타일화 방법
Shadow DOM 301: Advanced Concepts and DOM API - 다중 ShadowRoot 사용 및 자바스크립트를 통한 삽입 등의 발전된 DOM 동작

이 튜토리얼은 Shadow DOM에 대한 기초 개념과 Shadow DOM을 이용하여 내용(Contents)와 표현(Presentation)이 어떻게 분리될 수 있는지에 대해 설명합니다.

"Shadow DOM의 가장 큰 장점 중의 하나는 캡슐화이기도 하지만 기본적으로 감춰진 DOM을 제어하기 위한 Shadow Root와 이를 투영하기 위한 Shadow Host를 이용하여 컨텐츠와 표현을 분리합니다. Shadow DOM은 이를 이용하여 캡슐화된 DOM 트리를 HTML 문서에 활용할 수 있는 가장 기초적인 개념과 원칙을 제공합니다. Shadow DOM은 웹 프론트엔드에 있어 2014년에 빠질 수 없는 가장 중요한 개념 중의 하나가 될 것입니다."

TL;DR;

이 튜토리얼은 Shadow DOM의 개념과 Shadow DOM을 이용하여 컨텐츠와 표현을 계층적으로 분리하는 방법들을 다루고 있습니다.

웹 페이지를 개발할 때 몇 가지 UI 요소들은 지속적으로 재활용됨에도 불구하고 개발자가 올바른 DOM Tree를 구축하기 위해 마크업을 재작성하고 UI 요소를 둘러싸는 다른 요소들과의 구조적인 이슈들을 해결하기 위해 추가적인 작업을 필요로 합니다. 이러한 과정에서 발생하는 복잡한 DOM 트리들(좀 더 정확하게는 Tag Soup)은 재사용성과 개발 효율성에 크게 영향을 미치는 부분이기도 합니다.

Shadow DOM에서 제공하는 섀도 호스트(Shadow)는 문서 상에서 섀도 루트(Shadow Root)가 관리하는 Shadow DOM Tree 투영의 가장 기본적인 방법을 제공합니다. 표현(Presentation)과 내용(Contents)의 분리는 위와 같은 문제(Tag Soup)를 해결해줄 뿐만이 아니라 보다 근본적인 기능-즉, 개발된 UI 요소의 재사용을 위한 가장 기본적이고도 중요한 기능-을 제공합니다.

보다 자세한 내용은 튜토리얼을 참고하시기 바랍니다.