9. HTML templating

HTML <template> 요소는 페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 javascript를 사용해 인스턴스를 생성할 우 있는 HTML 코드를 담을 방법을 제공한다.

 

template === 콘텐츠 조각을 나중에 사용하기 위해 담아놓는 컨테이너.

 

💨 templating

 

HTML이 반복되는 부분은 template로 만들고, 서버에서 받은 데이터(JSON 포멧) 을 결합해 화면에 추가하는 작업이다.

HTML과 데이터를 섞어서 웹 화면에 보여주는 작업으로써 서버에서 데이터를 조회 후 그 내용들을 동적으로 HTML로 만들어서 보내주는 식으로 진행된다.

 

 

💨 templating을 하는 방법 

 

#1. 서버에서 file 로 보관 후 Ajax로 요청해서 받아오기.

 

대규모 프로젝트에서 사용.

server1.template 이런 식으로 여러 개를 만들어서 각각 필요할 때 가져온다. 

 

#2. 

 

const Clock = mung.create({
  template: function () {
    return `
    <div class="clock" style="background-color: ${this.backgroundColor};">
      <h3>${this.title}</h3>
      <p>${this.time}</p>
    </div>;
    `;
  },
});

 

 

const currentTime = getTimeStamp();

const currentClock = new Clock({
  title: "현재 시간",
  backgroundColor: "#bdf9e5",
  time: currentTime,
});
currentClock.render();

const digitalTimer = setInterval(() => {
  const $time = document.querySelector(".clock p");
  $time.innerHTML = getTimeStamp();
}, 1000);

 

 

이런 식으로 사용하는 방법도 있다. 이 때 주의해야할 점이 있는데, 

 

HTMLTemlateElement는 content 속성을 가진다는 것이다. content는 템플릿이 담고 있는 DOM 하위 트리를 나타내는 DocumentFragment 이다.

 

function createNode(html) {
  const tempNode = document.createElement("template");
  tempNode.innerHTML = html;

  return tempNode.content.firstChild;
}

 

 

이런 식으로 content를 거쳐 가져와야한다.