HTML templating 실습

• 들어가기 전에

HTML Templating 작업을 하기 위해서는 Ajax로 데이터를 가져오는 방법도 필요하고, 또 한가지 template를 어딘가 보관해야 할 것이다. 몇 가지 방법이 있겠지만, 간단한 방법을 알아보자.

• 학습 목표

1. HTML Templating 처리 작업을 할 수 있다.

• 핵심 개념

- HTML Templating 작업의 이해

• HTML Template의 보관

- 아래와 같은 html 문자열을 어딘가 보관해야 한다. JavaScript 코드 안에서 이런 정적인 데이터를 보관하는 것은 좋지 않기 때문이다.

var html = "<li><h4>{title}</h4><p>{content}</p><div>{price}</div></li>";

· 서버에서 file로 보관하고 Ajax로 요청해서 받아온다.

· HTML 코드 안에 숨겨둔다

- 간단한 것이라면 HTML 안에 숨겨둘 수가 있다. 숨겨야 할 데이터가 많다면 별도 파일로 분리해서 Ajax로 가져오는 방법도 좋다. 하지만 많지 않은 데이터이므로 우리는 HTML 안에 잘 보관해두겠다.

• Templating

HTML 중 script 태그는 type이 JavaScript가 아니라면 렌더링하지않고 무시한다. 바로 그것을 이용하는 것이다.

<script id="template-list-item" type="text/template">
  <li>
      <h4>{title}</h4><p>{content}</p><div>{price}</div>
  </li>
</script>

이렇게 간단히 JavaScript에서 가져올 수가 있다.

var html = document.querySelector("template-list-item");

이후 작업은 replace로 하면 끝난다.