손영배 블로그 누구나 쉽게 이해하고 습득하기

HTML template이란? 본문

Web/예약서비스 만들기

HTML template이란?

손영배 2020. 1. 6. 20:21

HTML과 data를 섞어서 html 화면에 변화를 주는 것.

 

1. HTML Templating 작업이란?

반복적인 HTML 부분을 template로 만들어두고, 서버에서 온 데이터(주로JSON)을 결합해서, 화면에 추가하는 작업이라고 할 수 있습니다. 

 

랜더링이 서버에서 할까? 클라이언트에서 할까?는 고민사항이다.

문자열을 replace 해서 변환하는 작업을 해보자

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

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

var result = html.replace("{title}", data.title)
                 .replace("{content}", data.content)
                 .replace("{price}", data.price);

 

1. HTML Template의 보관

  • 서버에서 file로 보관하고 Ajax로 요청해서 받아온다.
  • HTML 코드안에 숨겨둔다(?)

2. 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>

 

적용예시

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

    <script>
        //mock data. 서버에서 가져온 데이터
        var data = [
            {title : "hello", content : "lorem dkfief", price : 2000},
            {title : "hello", content : "lorem dkfief", price : 2000}
        ];

        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;
    </script>
</body>

'Web > 예약서비스 만들기' 카테고리의 다른 글

HTML 이벤트를 효율적으로 등록하는 방법  (0) 2020.01.06
CSS transition로 웹 애니메이션 효과 주기  (0) 2020.01.05
JavaScript로 웹 애니메이션 효과 주기  (0) 2020.01.05
GNB, LNB, SNB, FNB 용어 설명  (0) 2020.01.04
'Web/예약서비스 만들기' Related Articles more