[Web] HTML Templating
HTML Templating
반복적인 html 부분을 template으로 만들어두고 서버에서 온 데이터(주로 json)을 결합해서, 화면에 추가하는 작업
예를 들어 다음과 같은 화면을 출력해야 한다면? 코드가 엄청나게 길어 질 것이다. 상품의 수에 따라 계속해서 코드가 늘어나지만 그 형태는 모두 같다. 이렇게 반복적인 부분을 간편하게 출력하는데 사용되는 것이 templating이다.
실습 예제
replace는 메서드 체이닝 방식으로 호출하면서 간단하게 작성할 수 있다.
만약 data가 배열형태로 있다면 어떻게 해야 할까? for문도 사용 가능하고 forEach도 가능하다.
위의 방법도 좋지만 코드가 계속해서 길어진다면 전체코드의 가독성이 좋지 않다. 따라서 위와 같은 html 문자열을 어딘가 보관하는 것이 필요하다. javascript 내에서 정적 데이터를 보관하는 것은 좋지 않기 때문이다. 여러가지 방법이 있는데, 가져와야 할 데이터의 양이 많은 경우엔 Ajax로 가져오는 방법도 좋다. 하지만 양이 적은 경우 html 안에 보관하는 방법도 있다.
HTML태그 중 script의 속성으로 그 type이 script가 아닐 경우 렌더링하지 않고 무시하는 속성이 있다. 이를 이용해서 template을 숨겨놓을 것이다.
예제
template을 돕는 라이브러리도 굉장히 많다. 필요에 따라 찾아보고 잘 이용 할 줄 알아야 할 것 같다. ES6에서는 template literal 이란느 것이 새로 나왔다. 이것을 사용하면 replace 메서드를 사용하지 않아도 된다. 모든 브라우저에서 지원되는 내용은 아니지만 지원하는 브라우저가 많으므로 알아보면 좋을 것이다.
간단한 template literal 예제
참고 : https://jonsuh.com/blog/javascript-templating-without-a-library/
반복적인 html 부분을 template으로 만들어두고 서버에서 온 데이터(주로 json)을 결합해서, 화면에 추가하는 작업
예를 들어 다음과 같은 화면을 출력해야 한다면? 코드가 엄청나게 길어 질 것이다. 상품의 수에 따라 계속해서 코드가 늘어나지만 그 형태는 모두 같다. 이렇게 반복적인 부분을 간편하게 출력하는데 사용되는 것이 templating이다.
실습 예제
var data = { title:"title", content:"content", price:2000};
var html = "<li><h4>{title}</h4><p>{content}</p><div>{price}</div></li>";
html.replace("{title}",data.title)
.replace("{content}",data.content)
.replace("{price}",data.price)
| cs |
replace는 메서드 체이닝 방식으로 호출하면서 간단하게 작성할 수 있다.
만약 data가 배열형태로 있다면 어떻게 해야 할까? for문도 사용 가능하고 forEach도 가능하다.
var data=[{title:"title1", content:"contents1",price:2000},
{title:"title2", content:"contents2",price:3000},
{title:"title3", content:"contents3",price:4000}];
var html = "<li><h4>{title}</h4><p>{content}</p><div>{price}</div></li>";
var resultHTML=[];
data.forEach(function(element){
var result = html.replace("{title}",element.title)
.replace("{content}",element.content)
.replace("{price}",element.price);
log.innerHTML+= result;
})
| cs |
위의 방법도 좋지만 코드가 계속해서 길어진다면 전체코드의 가독성이 좋지 않다. 따라서 위와 같은 html 문자열을 어딘가 보관하는 것이 필요하다. javascript 내에서 정적 데이터를 보관하는 것은 좋지 않기 때문이다. 여러가지 방법이 있는데, 가져와야 할 데이터의 양이 많은 경우엔 Ajax로 가져오는 방법도 좋다. 하지만 양이 적은 경우 html 안에 보관하는 방법도 있다.
HTML태그 중 script의 속성으로 그 type이 script가 아닐 경우 렌더링하지 않고 무시하는 속성이 있다. 이를 이용해서 template을 숨겨놓을 것이다.
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content li{
border:1px solid gray;
}
ul{
list-style: none;
}
</style>
</head>
<body>
<h2>template test example</h2>
<ul class="content"></ul>
</body>
<!--template 숨겨 놓은 script-->
<script id="template-list-item" type="text/template">
<li>
<h4>{title}</h4><p>{content}</p><div>{price}</div>
</li>
</script>
<!-- 실제 js코드-->
<script>
var html = document.querySelector("#template-list-item").innerHTML;
var ul = document.querySelector("ul");
var oReq = new XMLHttpRequest();
oReq.addEventListener("load",function(){
var data = JSON.parse(oReq.responseText);
data.forEach(function(element){
var resultHTML = html.replace("{title}",element.title)
.replace("{content}",element.content)
.replace("{price}",element.price);
console.log(resultHTML);
ul.innerHTML+=(resultHTML);
})
});
oReq.open("GET","./data.txt")
oReq.send();
</script>
</html>
| cs |
template을 돕는 라이브러리도 굉장히 많다. 필요에 따라 찾아보고 잘 이용 할 줄 알아야 할 것 같다. ES6에서는 template literal 이란느 것이 새로 나왔다. 이것을 사용하면 replace 메서드를 사용하지 않아도 된다. 모든 브라우저에서 지원되는 내용은 아니지만 지원하는 브라우저가 많으므로 알아보면 좋을 것이다.
간단한 template literal 예제
completeTemplate= (title, content, price) => {
return`
<li>
<h4>${title}</h4><p>${content}</p><div>${price}</div>
</li>
`
}
let resultHTML ="";
data.forEach(elem => {
resultHTML += completeTemplate(elem.title, elem.content, elem.price);
})
document.querySelector(".content").innerHTML = resultHTML;
| cs |
참고 : https://jonsuh.com/blog/javascript-templating-without-a-library/
No comments: