HTML5Rocks/KO: [튜토리얼/한글화] HTML의 새로운 태그 Template: 클라이언트측 템플릿의 표준(HTML's New Template Tag: standardizing client-side templating)

2014년 2월 18일 화요일

[튜토리얼/한글화] HTML의 새로운 태그 Template: 클라이언트측 템플릿의 표준(HTML's New Template Tag: standardizing client-side templating)

HTML5Rocks의 웹 컴포넌트 관련 튜토리얼 중 +Eric Bidelman의 'HTML의 새로운 태그 Template: 클라이언트측 템플릿의 표준(HTML's New Template Tag: standardizing client-side templating)' 튜토리얼의 한국어 번역이 업데이트되었습니다.

Template는 웹 컴포넌트를 지탱하는 4가지 규격 중의 하나입니다. Template 규격 이전에도 여러가지 형태의 템플릿들이 자바스크립트 라이브러리나 프레임워크를 통해 제공되어 왔습니다만 이번에 템플릿에 대한 표준 규격이 작성됨에 따라 이러한 템플릿 기능을 네이티브 브라우저를 통해 활용할 수 있게 되었습니다.

이 튜토리얼은 템플릿을 어떻게 정의하고 컨텐츠와 연동할 수 있는지 설명합니다. 이로써 HTML5Rocks에 올라온 웹컴포넌트 관련 튜토리얼은 전부 번역되었으므로 아직 읽어보지 않으신 분들은 참조 링크에서 웹 컴포넌트에 관련된 내용을 일독해보시기를 권해드립니다.

"캡슐화된 컴포넌트를 정의하여 문서 내에서 재사용하고 요구사항에 따라 컴포넌트의 내부를 깨뜨리지 않으면서 확장할 수 있습니다. 계속해서 말씀드리지만 웹 컴포넌트는 프론트엔드에 있어 2014년에 빠질 수 없는 가장 중요한 개념 중의 하나가 될 것입니다."

TL;DR;

이 튜토리얼은 Template의 개념과 Template를 선언하고 컨텐츠를 적용하여 DOM을 런타임에 손쉽게 생성할 수 있도록 합니다.

템플릿은 뷰를 위한 기반 구조로 사용되는 미리 작성된 형식의 문서나 파일입니다. 즉, 형식(Format)를 한번 정의한 뒤 재사용하도록 하여 (마크업의 작성이나 런타임 마크업 생성 모듈과 같은) 추가적인 개발 작업으로부터 개발을 간편하게 만들어줍니다.

템플릿의 개념은 웹 개발에 있어 새로운 것은 아닙니다. 서버 측에서의 템플릿 활용뿐만 아니라 클라이언트에서도 우리가 주로 사용해오던 여러가지 방법들이 이미 존재합니다. "오프스크린" 상에서 DOM을 생성하고 이를 hidden 속성이나 display:none을 사용하여 뷰로부터 이를 감추는 오프스크린 DOM은 브라우저에서 제공하는 다양한 기능을 활용하여 템플릿을 구현할 수 있지만 문서 내의 다른 DOM에 영향을 주는 등의 부작용을 가지고 있습니다. 반대로 <script>를 오버로딩하고 <script>의 컨텐츠를 문자열로 처리하는 스크립트 오버로딩은 렌더링 이슈 및 비활성화를 해결하고 있으나 .innerHTML의 사용을 필요로 하고 이로 인한 보안 취약성이 존재합니다.

WhatWG HTML Templates 표준규격은 템플릿을 위한 표준적인 DOM 기반의 접근 방법을 기술하는 새로운 엘리먼트인 <template>를 정의하였으며 템플릿 컨텐츠는 사용시까지 비활성화되어 렌더링되지 않고 템플릿 안의 스크립트나 DOM이 다른 곳에 영향을 미치는 부작용이 없습니다. 선언/재활용 역시 마찬가지이며 또한 적용 위치 역시 자유롭기 때문에 많은 부분에서 활용이 가능합니다.

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