2019. 5. 15. 20:51ㆍJavaScript
핵심
- HTML Templating?
- String의 replace()
Ajax로 데이터를 서버에서 받아와 화면에 뿌려줄 상황을 생각해봅시다.
JSON포맷으로 데이터를 받고 SNS댓글을 여러 사람들이 달면 차곡차곡 댓글이 아래로 쌓입니다. 그런 것들이 html태그를 차곡차곡 쌓아주게 됩니다.
여기에 templating이라는 개념을 도입하면 좋습니다.
templating
HTML이 반복되는 부분은 template로 만들고, 서버에서 받은 데이터(보통 JSON포맷)을 결합해 화면에 추가하는 작업입니다. HTML과 데이터(JSON)를 섞어서 웹 화면에 어떤 변화를 주는 것. 보통 이런 Templating작업은 Client에서만 하는 게 아니라 서버에서 데이터를 조회 후 그 내용들을 동적으로 HTML을 만들어서 보내주는 그런 식으로 되어집니다.
그림 : templating이 일어나는 과정
코드로 살펴봅시다:>
var data = [
{ title : "damaged JEAN",
content : "18f/w hot item",
price : 75000
},
{
title: "long-sleeve T-shirt",
content: "2019s/s new!",
price: 25000
}];
var html = "<li><h4>{title}</h4><p>{content}</p><div>{price}</div></li>";
data.forEach( (el) => {
let result = html.replace("{title}",el.title)
.replace("{content}", el.content)
.replace("{price}", el.price);
el.innerHTML += result;
console.log(result);
})
JSON데이터가 배열로 여러 개의 정보가 담겨 있는 경우가 더 많으니 배열로 forEach 반목문으로 배열의 JSON데이터를 바인딩해서 출력해봤습니다.
<li><h4>damaged JEAN</h4><p>18f/w hot item</p><div>75000</div></li>
<li><h4>long-sleeve T-shirt</h4><p>2019s/s new!</p><div>25000</div></li>
브라우저의 콘솔창에 JSON데이터가 templating되어 나오는 것을 확인할 수 있습니다. 실제 html코드에서도 이와 같은 방식으로 바인딩하여 서버에서 받아온 데이터를 html 템플릿에 맞춰 출력할 수 있습니다.
HTML Templating 작업
Tamplating 작업을 위해서는 Ajax로 데이터를 가져오고 또 template를 어딘가에 보관해야 합니다. 간단한 방법을 알아봅시다.
위의 코드에서는
var html = "<li><h4>{title}</h4><p>{content}</p><div>{price}</div></li>";이와 같이 html문자열을 JS코드 안에서 정적인 데이터를 보관하는 건 좋지 못한 코드입니다.
방법1. 서버에서 file로 보관 후 Ajax로 요청해서 받아옵니다.
ex) a.template / b.template이렇게 여러 개 만들어거 각각 필요한 템플릿을 서버에서 가져옴.
방법2. HTML 코드 안에 숨겨둡니다.
숨겨야 할 데이터가 많다면 별도 파일을 분리해서 Ajax로 가져오는 방법도 좋지만, 간단한 데이터는 이렇게 방법2를 사용합니다.
<script id="template-list-item" type="text/template">
<li>
<h4>{title}</h4>
<p>{content}</p>
<div>{price}</div>
</li>
</script>type에 javascript가 아니면! 브라우저에서 렌더링하지 않고 무시합니다!!
바로 이것을 이용해서 HTML코드 안에 숨길 수 있습니다:>
<html>
<head>
<link rel="stylesheet" href="delegate.css">
</head>
<body>
<h2>template test example</h2>
<ul class="content"></ul>
</body>
<!-- 숨기는 html데이터!!-->
<script id="template-item" type="text/template">
<h4>{name}</h4>
<p>{age}</p>
<div>{job}</div>
</script>
<script>
// 서버에서 ajax로 가져온 json 데이터
var virtualData = [{name: "jin", age:27, job: "developer"}, {name:"kai", age: 25, job: "desginer"}];
// html에 script에서 가져온 html template.
var html = document.querySelector("#template-item").innerHTML;
var result = "";
virtualData.forEach((list)=>{
result += html.replace("{name}", list.name)
.replace("{age}", list.age)
.replace("{job}",list.job);
})
document.querySelector(".content").innerHTML = result;
</script>
</html>위의 코드에서 template-item이란 id값을 가진 script태그는 type이 javascript가 아니므로 브라우저가 읽지 않고 무시합니다! 바인딩을 위한 html코드만 작성해주고 실제 JS코드에서 가져와서 사용합니다
브라우저에서 확인하면 데이터가 잘 바인딩 된 것을 확인할 수 있습니다. 실제 프로젝트에서는 저처럼 가짜 JSON이 아닌 서버에서 보낸 값으로 바인딩 하시면 됩니다 :>
[ edwith - 웹프로그래밍 부스트코스 ] 를 개인적으로 공부하고 정리한 공간입니다. 잘못된 부분은 피드백 주시면 감사하겠습니다
'JavaScript' 카테고리의 다른 글
| [JavaScript] var / const / let 와 scope 끄적끄적 (0) | 2019.05.19 |
|---|---|
| [JavaScript] event.target을 이용한 event delegation(이벤트 위임)과 이벤트 버블링 (0) | 2019.05.15 |
| [JavaScript] JavaScript에서 애니메이션(setTimeout, requestAnimationframe) (0) | 2019.05.13 |
| [JavaScript] XmlHttpRequest을 이용한 ajax (Asynchronous Javascript And XML) (0) | 2019.05.11 |
| [JavaScript] 자바스크립트 객체(Object) (0) | 2019.05.08 |