[javascript] Underscore.js를 사용하여 HTML 문자열을 만드는 방법은 어떻게 되나요?
- 먼저, Underscore.js 라이브러리를 HTML 파일에 추가합니다.
<script>
태그를 사용하여 Underscore.js 파일을 로드합니다.
<script src="underscore.js"></script>
- 다음으로, HTML 템플릿을 작성합니다. Underscore.js 템플릿 문법을 사용하여 HTML 요소를 동적으로 생성할 수 있습니다. HTML 템플릿은
<script>
태그 내에 작성합니다. 템플릿 내에는 템플릿 변수를 사용하여 동적인 데이터를 삽입할 수 있습니다.
<script type="text/template" id="template">
<div class="post">
<h2><%= title %></h2>
<p><%= content %></p>
</div>
</script>
- Underscore.js의
_.template
함수를 사용하여 템플릿을 컴파일합니다. 컴파일된 템플릿은 자바스크립트 함수로 반환됩니다. 템플릿 함수는 인자로 데이터 객체를 받아서 HTML 문자열을 생성합니다.
var templateString = document.getElementById('template').innerHTML;
var template = _.template(templateString);
var data = {
title: '제목',
content: '내용'
};
var htmlString = template(data);
- 이제
htmlString
변수에는 컴파일된 HTML 문자열이 저장되어 있습니다. 이를 사용하여 HTML 요소를 동적으로 생성하거나 다른 HTML 요소에 삽입할 수 있습니다.
document.getElementById('container').innerHTML = htmlString;
위의 과정을 따라가면 Underscore.js를 사용하여 동적인 HTML 문자열을 생성하고 출력할 수 있습니다.