HTML templating 실습 - accidentlywoo/legacyVue GitHub Wiki

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">

  • {title}

    {content}

    {price}
    • </script>` 이렇게 간단히 JavaScript에서 가져올 수가 있을 겁니다. `var html = document.querySelector("template-list-item");` 이후 작업은 replace로 하면 끝나죠.

    실습 코드

    `var data = [ {title : "hello",content : "lorem dkfief",price : 2000}, {title : "hello",content : "lorem dkfief",price : 2000} ];

    //html 에 script에서 가져온 html template. var html = document.querySelector("#template-list-item").innerHTML;

    var resultHTML = "";

    for(var i=0; i<data.length; i++) { resultHTML += html.replace("{title}", data[i].title) .replace("{content}", data[i].content) .replace("{price}", data[i].price); }

    document.querySelector(".content").innerHTML = resultHTML;`

    생각해보기

    1. template 작업이 반복적이거나 어떤 조건에 따라서 일부 데이터는 보이지 말아야 하는 것은 어떻게 처리해야 할까요?데이터 파싱작업이 꽤 번거로울 겁니다. template를 돕는 라이브러리들이 있습니다. 이를 찾아보고 그 사용법을 알아보세요. 2.ES6에서는 template literal이라는 것이 나왔습니다. 더는 replace 메서드를 사용하지 않고도 아주 쉽게 해결할 수가 있습니다. 이것도 어떻게 사용하는지 알아보면 좋습니다.
    ⚠️ **GitHub.com Fallback** ⚠️