티스토리 뷰

웹/부스트코스

[WEB]HTML Templating

cll179 2018. 7. 29. 15:29

HTML Templationg

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

- 서버로 부터 데이터를 받고, 이 데이터를 반영하는 일이 많다. 이럴 때 HTML 형태는 그대로이고, 데이터만 변경이 되는 경우가 있는데, 그럴때 HTML Templating이라는 개념을 도입하면 좋다.

- 예를 들어, 아래 화면에 데이터를 Ajax로 받아와서 화면에 추가해야 한다고 생각해보자. JSON 형태의 데이터를 받을 것이고, 아래 리스트들의 내용은 모두 HTML 형태는 그대로이고 데이터만 서로 다르다. 이때 사용하는 개념이 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가 아니라면 렌더링하지 않고 무시한다.

바로 이걸 이용해 template을 숨겨둔다.

<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로 하면 된다.

 

실습 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<head>
  <style>
    .content > li{
      border : 1px solid gray;
    }
  </style>
</head>
<body>
  <h2>Template test example</h2>
  <ul class="content"></ul>
</body>
<script id="template-list-item" type="text/template">
  <li>
    <h4>{title}</h4><p>{content}</p><div>{price}</div>
  </li>
</script>
 
<script>
  //mock 데이터
  var data = [
        {title : "hello",content : "lorem dkfief",price : 2000},
        {title : "hello",content : "lorem dkfief",price : 2000}
  ];//원래는 json 데이터로 가져와야됨, 편의상 데이터를 가져왔다고 가정하고 바로 객체데이터로 선언
 
  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;
  console.log(html);
</script>
</html>
 cs


 

참고 사이트 : http://www.edwith.org/


※
본 게시물은 개인적인 용도로 작성된 게시물입니다. 이후 포트폴리오로 사용될 정리 자료이니 불펌과 무단도용은 하지 말아주시고 개인 공부 목적으로만 이용해주시기 바랍니다.

※

저작자표시 비영리 변경금지

'웹 > 부스트코스' 카테고리의 다른 글

[Spring]xml파일을 이용한 설정  (0) 2018.08.01
[Spring]Spring IoC/DI 컨테이너  (0) 2018.07.31
[WEB]이벤트 버블링과 이벤트 위임(Event Bubbling and Event Delegation)  (0) 2018.07.29
[WEB]Ajax 응답 처리와 비동기  (2) 2018.07.27
[WEB]JavaScript 배열  (0) 2018.07.06
댓글