오늘의 회고
사내에서 제공하는 웹 커리큘럼 진행 중 오늘은 참 생각이 많았던 날이다.
아직 배울 것이 많고 부족한 점이 많다는 점을 느꼈다. 사실 HTML에서 <template> 이라는 태그가 존재하는 것도 오늘 조사하며 알게되었다.
'Basic Knowledge' 가 중요하다고 항상 생각해왔지만 아직은 많은 공부가 필요해 보인다.
오늘 학습한 것
- HTML Template
- Clean Code
HTML Template
템플릿은 우리가 흔히 아는 Django 혹은 Node.js 같은 웹 프레임워크에서 흔하게 접할 수 있다. HTML에서도 Template을 통해 MVC 패턴의 View 를 구현할 수 있다.
Template 태그를 소개하는 페이지에는 이렇게 말하고 있다.
"...사용될 때마다 매번 재생성하지 않아도 됩니다...." 여러분은 어떠실지 모르겠지만 전 추가작업을 피하는 것을 사랑합니다. 왜 웹플랫폼은 개발자가 명확하게 관리해야 하는 무언가에 대한 네이티브 지원이 부족할까요?
WhatWG THML Templates 표준규격은 위와 같은 문제를 해결해준다. 이는 템플릿을 위한 표준적인 DOM 기반의 접근 방법을 기술하는 새로운 엘리먼트인 <template> 을 정의한다.
<template> 태그 안에 있는 요소들은 페이지 로딩 시에는 사용되지 않도록 하지만, 런타임에는 인스턴스화 할 수 있는 아주 유용한 태그이다.
기능 검출
function supportsTemplate() {
return 'content' in document.createElement('template');
}
if (supportsTemplate()) {
// Good to go!
} else {
// Use old templating techniques or libraries.
}기능의 활성화를 위해 DOM 엘리먼트를 생성하고 .content 속성이 존재하는지 위와 같이 검사한다.
Template Content 선언
<template id="mytemplate">
<img src="" alt="great image">
<div class="comment"></div>
</template>위 코드를 보면 <template> 이라는 태그 안에 content들이 정의되어 있는 모습을 볼 수 있다. <template> 안에 있는 태그들은 비활성화 되어있는 상태 이며 복제가능한 DOM 덩어리 이다.
기본적인 특징
<template> 소개 페이지의 기본적인 특징들을 인용한다.
<template>내에서 컨텐츠를 감싸는 것은 우리에게 몇가지 중요한 속성들을 제공합니다.
1. 이것의 컨텐츠는 활성화가 될 때까지 효과적으로 비활성화됩니다. 기본적으로 여러분의 마크업 숨겨진 DOM이며 렌더링되지 않습니다.
2. 템플릿 안의 어떠한 컨텐츠라도 부작용을 가지지 않습니다. 템플릿이 사용될 때까지 스크립트는 실행되지 않으며 이미지는 로딩되지 않고 오디오는 재생되지 않습니다.
3. 컨텐츠는 문서 내에 있지 않도록 고려되어야 합니다. 메인 페이지에서document.getElementById()나querySelector()의 사용은 템플릿의 자식 노드들을 반환하지 않을 것입니다.
4. 템플릿은<head>,<body>혹은<frameset>내의 어느 곳에도 위치할 수 있습니다. 어느 곳에서도는<template>가 content model의 자식들을 제외한...HTML 파서가 허가하지 않는 모든 위치에서도 안전하게 사용될 수 있다는 것을 의미한다는데 주의하시기 바랍니다. 또한 아래에서 보시다시피<table>이나<select>의 자식처럼 둘 수도 있습니다.
<table>
<tr>
<template id="cells-to-repeat">
<td>some content</td>
</template>
</tr>
</table>템플릿 활성화 하기
템플릿을 사용하기 위해서는 비활성화 되어있는 템플릿을 활성화 해야 한다. 그렇지 않으면 템플릿 내부의 컨텐츠는 렌더링 되지 않는다.
활성화를 위한 가장 쉬운 방법은 document.importNode()를 사용하여 템플릿의 .content의 완전한 복사본(깊은 복사)을 생성하는 것이다.
여기서 .content 는 템프릿의 내부를 포함하는 DocumentFragment이다.
var t = document.querySelector('#mytemplate');
// 런타임에 src를 지정합니다.
t.content.querySelector('img').src = 'logo.png';
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);
