티스토리 뷰

부스트코스 웹 프로그래밍/3. 웹 앱 개발: 예약서비스 1

5. WEB UI - FE (5)

haaak 2019. 8. 3. 11:48

5) HTML templating 실습

HTML Template의 보관

  • 아래와 같은 html 문자열, template을 어딘가 보관해야 합니다. Javascript코드 안에서 이런 정적인 데이터를 보관하는 건 좋지 않기 때문입니다.

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

 

  • Template 보관 방법
    • 서버에서 file로 보관하고 Ajax로 요청해서 받아옵니다.
    • HTML코드 안에 숨겨둔다(?)
  • 간단한 것이라면 HTML 안에 숨겨둘 수가 있습니다.
    숨겨야 할 데이터가 많다면 별도 파일(a.template, b.template)로 분리해서 Ajax로 가져오는 방법도 좋습니다.
    하지만 여기서는 많지 않은 데이터이므로 우리는 HTML 안에 잘 보관해두겠습니다.

Templating

  • HTML 중 script 태그는 type이 javascript가 아니라면 렌더링하지 않고 무시합니다.
    바로 이걸 이용하는 겁니다. HTML템플릿을 숨길 수 있습니다.

<script id="template-list-item" type="text/template">

  <li>

      <h4>{title}</h4><p>{content}</p><div>{price}</div>

  </li>

</script>

 

  • 이렇게 간단히 javascript에서 가져올 수가 있을 겁니다.
    이후 작업은 replace를 호출하여 처리하면 됩니다.

var html = document.querySelector("template-list-item");

 

실습 코드

<html>

<head>

</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}

];

 

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

</script>

</html>

 

생각해보기

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

 

'부스트코스 웹 프로그래밍 > 3. 웹 앱 개발: 예약서비스 1' 카테고리의 다른 글

6. Tab UI 실습 - FE (2)  (0) 2019.08.03
6. Tab UI 실습 - FE (1)  (0) 2019.08.03
5. WEB UI - FE (4)  (0) 2019.08.03
5. WEB UI - FE (3)  (0) 2019.08.03
5. WEB UI - FE (2)  (0) 2019.08.03
공유하기 링크
Comments
Related Articles more