HTML templating

HTML templating 작업

 

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

 

HTML Templating은 HTML과 데이터를 섞어서 웹 화면에 변경을 주는 것이다.

template작업은 클라이언트에서 뿐만 아니라 백엔드에서 데이터를 조회한 다음 그 내용들을 클라이언트에 동적으로 HTML을 만들어서 보내줄 수 있다. 렌더링이 클라이언트에서 일어나는가, 서버에서 일어나는가는 고민거리이다. 이번 실습에서는 서버에서는 JSON 형태의 데이터를 받아오고, 클라이언트에서는 그것을 섞어서 동적으로 HTML을 만들 것이다.

서버에서 데이터를 받아와서 미리 만들어진 HTML template을 적용한다. 

 

HTML Templating 작업을 하기 위해서는 Ajax로 데이터를 가져오는 방법도 필요하고, 또 한 가지 templating을 어딘가에 보관해야 할 것이다.

 

아래와 같은 html 문자열을 어딘가 보관해야 한다. javascript 코드 안에서 정적인 데이터를 보관하는 것은 좋지 않기 때문이다.

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

 

방법 1) 서버에서 file로 보관하고 Ajax로 요청해서 받아온다.

방법 2) HTML 코드 안에 숨겨둔다.

 

간단한 것이라면 HTML 코드 안에 숨겨둘 수 있다. 만약 숨겨야 할 데이터가 많다면 별도 파일로 분리해서 Ajax로 가져오는 방법도 좋다. 

 

 

Templating

<!--HTML 중 script 태그는 type이 javascript가 아니라면, 렌더링 하지 않고 무시한다. 이러한 속성을 이용해서 javascript코드가 아닌 HTML Template를 숨겨둬서 작업을 하는 것이다.-->

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

<li>

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

</li>

</script>

 

 

 

 

 

 

 

참고  :  https://www.boostcourse.org/web316/lecture/254333?isDesc=false

웹 프로그래밍(풀스택)

https://jonsuh.com/blog/javascript-templating-without-a-library/  (라이브러리의 도움없이 templating 작업을 하는 방법)

JavaScript Templating Without a Library