[JavaScript] JavaScript HTML template

1. HTML template

- 반복적인 HTML 부분을 화면에서는 보이지 않는 template로 만들어 두고 서버에서 전달되는 JSON과 연결하여 반복적인 tag를 만들어 내는 기법

- 즉, 반복적인 HTML 코드를 template에 넣어놓고 JavaScript를 이용해서 받은 데이터로 교체해주고 HTML로 나타내주는 것이다.

- 바꾸고 싶은 데이터 부분을 {icon}, {img}, {title} ...로 해준 다음 JavaScript에서 서버에서 받은 데이터(JSON)의 각 데이터로 replace를 해준다. 그런 다음 원하는 태그 쪽에 appendChild() 해주면 된다.

- 여기서 그냥 태그를 appendChild를 해주면 여러 개가 적용이 되지 않는다.

- 그래서 태그이름.cloneNode(true);로 복사해서 반복적으로 appendChild 해줘야 한다.

2. 예시

* template가 있는 HTML

 <-- 
  교체할 부분을 파싱하여 수정해보자...
  교체할 내용을 {icon}, {title}, {label}, {company}, {text}, {img}
 -->
<template id="temp-card" type="text/template">
  <div class="card">
    <div class="head">
      <div>
        <img class="logo" src="{icon}" alt="광고 아이콘" />
        <span class="title">{title}</span>
        <img class="more" src="../images/more.png" alt="더보기 메뉴">
      </div>
      <div class="text">
        {label}
      </div>
    </div>
    <div class="body">
      <div class="image">
        <img src={img} alt="광고 메인 이미지" style="width: 100%;"/>
      </div>
      <div class="text">
        <div>
          <p>{company}</p>
          <p>{text}</p>
        </div>
        <button>더 알아보기</button>
      </div>
    </div>
    <div class="foot">
      <div class="btn-box active">
        <div>
          <img src="../images/home.png" alt="홈 바로가기"/>
          <span class="btn-text">좋아요</span>
        </div>
      </div>
      <div class="btn-box">
        <div>
          <img src="../images/youtube.png" alt="동영상 바로가기"/>
          <span class="btn-text">댓글 달기</span>
        </div>
      </div>
      <div class="btn-box">
        <div>
          <img src="../images/people.png" alt="사용자 바로가기" />
          <span class="btn-text">공유 하기</span>
        </div>
      </div>
    </div>
  </div>
</template>

 

* template를 사용하기 위한 JavaScript

window.onload = function() {
    // 일단 temple태그를 가져와 보자
    const tcard = document.querySelector("#temp-card");

    const li = document.createElement('li');
    li.innerHTML = tcard.innerHTML;

    // 원하는 화면 위치에 추가
    const frame = document.querySelector("#ul-frame");
    // 이걸로 하게 되면 여러 개의 template가 안됨
    // frame.appendChild(li);
    // frame.appendChild(li);

    // 이것처럼 cloneNode로 해야 여러 개의 template가 붙여짐
    // frame.appendChild(li.cloneNode(true));
    // frame.appendChild(li.cloneNode(true));
    // frame.appendChild(li.cloneNode(true));
    
    // JSON 데이터 받기
    const list = request.mainlist();

    list.forEach((item) => {
    	// 교체가 필요한 template 복사
        const element = li.cloneNode(true);

        let html = element.innerHTML;

        // 아이콘 교체
        html = html.replace("{icon}", item.icon);
        html = html.replace("{title}", item.title);
        html = html.replace("{label}", item.label);
        html = html.replace("{company}", item.company);
        html = html.replace("{text}", item.text);
        html = html.replace("{img}", item.img);

        // 수정된 HTML을 다시 DOM element(요소)에 반영
        element.innerHTML = html;

        // 부모의 자식 요소로 추가
        frame.appendChild(element);
    })
}