HTML Template의 보관

---

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

• 위와 같은 html 문자열을 어딘가에 보관해야한다. javascript 코드 안에 이런 정적인 데이터를 보관하는 것은 좋지 않다.
• 보관 방법
  1. 서버에서 file로 보관하고 Ajax로 요청해서 받아온다.
  2. HTML 코드 안에 숨겨둔다.
• 많지 않은 코드라면 2번을 사용해도 좋다.

HTML 코드 안에 숨겨두기

• HTML의 script 태그는 type이 javascript가 아니라면 렌더링 하지 않고 무시한다. 이를 이용한 것이다.

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

<script type="text/javascript">
  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;
// content 클래스를 가진 ul이 body에 존재
</script>

template literal

const name = "junyoung";
const msg = `제 이름은 ${name}입니다.`;

• 위처럼 백틱과 ${}을 사용하면 문자열에 값을 쉽게 넣을 수 있다.
• 하지만 jsp 엔진을 거치면 name은 page, request, session, context에서 변수를 찾아 끼워 넣고, null이라면 해당 부분을 지워버린다.

const msg = `제 이름은 ${'${name}'}입니다.`;

• '${}'을 한번 더 감싸주어서 바깥쪽은 서버가, 안쪽은 자바스크립트가 처리하게 할 수 있다.
• 참고자료 : https://okky.kr/article/492977