{"id":6309,"date":"2019-03-13T05:47:05","date_gmt":"2019-03-12T20:47:05","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=6309"},"modified":"2020-05-28T12:44:08","modified_gmt":"2020-05-28T03:44:08","slug":"mustache-js%eb%a5%bc-%ec%9d%b4%ec%9a%a9%ed%95%9c-html-tag%ec%97%90-data%eb%a5%bc-binding","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=6309","title":{"rendered":"mustache.js\ub97c \uc774\uc6a9\ud55c HTML Tag\uc5d0 Data\ub97c Binding"},"content":{"rendered":"<p>\uc774 \uae00\uc740 <a href='http:\/\/www.gisdeveloper.co.kr\/?p=6304'>Include HTML<\/a>\uc774\ub77c\ub294 \uae00\uc744 \uae30\ucd08\ub85c \uc791\uc131\ub41c \uae00\uc785\ub2c8\ub2e4. Include HTML\uc740 \ub3d9\uc801\uc73c\ub85c \uc678\ubd80\uc758 HTML \ub9ac\uc18c\uc2a4\ub97c \uc6d0\ud558\ub294 \uc704\uce58\uc5d0 Include \ud574\uc8fc\ub294 \ubc29\ubc95\uc744 \uc124\uba85\ud569\ub2c8\ub2e4. \uc774\uc81c \uc774\ub807\uac8c Include HTML\uc744 \ud1b5\ud574 HTML \ub9ac\uc18c\uc2a4\ub97c \uc6d0\ud558\ub294 \uc704\uce58\uc5d0 \ud3ec\ud568\ud560 \ub54c, \uc6d0\ud558\ub294 \ub370\uc774\ud130\ub97c Binding \ud574\uc8fc\ub294 \ubc29\ubc95\uc744 \uc124\uba85\ud569\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574 mustache.js \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc774\uc6a9\ud569\ub2c8\ub2e4. mustache.js \ub77c\uc774\ube0c\ub7ec\ub9ac\ub294 \ub9ce\uc740 \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\ub97c \uc9c0\uc6d0\ud558\ub294\ub370, \uc5ec\uae30\uc11c\ub294 JS\ub97c \uc774\uc6a9\ud558\uc600\uc73c\uba70 \uad00\ub828 \ub9c1\ud06c\ub294 https:\/\/github.com\/janl\/mustache.js \uc785\ub2c8\ub2e4.<\/p>\n<p>\uba3c\uc800 \uba54\uc778 \ud398\uc774\uc9c0\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n<div id=\"containerA\"><\/div>\r\n<\/pre>\n<p>\uc704\uc758 id\uac00 containerA\uc778 DOM \uc694\uc18c\uc5d0 A.html \ub9ac\uc18c\uc2a4\ub97c \ud3ec\ud568\ud558\uace0\uc790 \ud569\ub2c8\ub2e4. A.html\uc758 \ub0b4\uc6a9\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n<h3>\uc870\ud68c\uacb0\uacfc<\/h3>\r\n<label>\uc774\ub984 : <\/label><span>{{name}}<\/span><br \/>\r\n<label>\ub098\uc774 : <\/label><span>{{age}}<\/span><br \/>\r\n<label>\uafc8 : <\/label><span>{{vision}}<\/span>\r\n<\/pre>\n<p>\uc704\uc758 {{ .. }}\ub85c \ubb36\uc778 3\uac1c\uc758 \ud56d\ubaa9\uc774 \ubcf4\uc785\ub2c8\ub2e4. \uc774 {{ .. }} \uc704\uce58\uc5d0 \uc6d0\ud558\ub294 \ub370\uc774\ud130\ub97c \ubc14\uc778\ub529\ud558\ub294 \uac83\uc778\ub370\uc694. \ubc14\uc778\ub529\ud558\uace0\uc790 \ud558\ub294 \ub370\uc774\ud130\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nlet data = {\r\n    name: \"\ud64d\uae38\ub3d9\",\r\n    age: function () {\r\n        let birthYear = 1576;\r\n        return new Date().getFullYear() - birthYear;\r\n    },\r\n    vision: \"\ubaa8\ub4e0 \uc138\uc0c1 \uc0ac\ub78c\uc774 \ubc30 \ubd80\ub974\uac8c \uc0ac\ub294 \uadf8\ub0a0\uae4c\uc9c0..\"\r\n};\r\n<\/pre>\n<p>name, age, vision\uc774 {{ .. }}\uc5d0 \uc9c0\uc815\ub41c \ub2e8\uc5b4\uc640 \ub3d9\uc77c\ud569\ub2c8\ub2e4. \uc774\ub807\uac8c \uac01 \ub370\uc774\ud130\uac00 1:1\ub85c \ub9e4\uce6d\ub429\ub2c8\ub2e4. \uc704\uc758 data\ub294 DBMS \uc870\ud68c\ub97c \ud1b5\ud574 \ub124\ud2b8\uc6cc\ud06c\ub97c \ud1b5\ud574 \uac00\uc838\uc62c \uc218\ub3c4 \uc788\uaca0\uc8e0. \uc774\uc81c \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \ud1b5\ud574 \uc678\ubd80\uc758 HTML \ub9ac\uc18c\uc2a4\ub97c \ubd88\ub7ec\uc624\uba74\uc11c \uc704\uc758 \ub370\uc774\ud130\ub97c \ubc14\uc778\ub529\ud574 \ud654\uba74\uc5d0 \ud45c\uc2dc\ud574 \uc90d\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nincludeHTML(document.querySelector('#containerA'), 'A.html', data);\r\n<\/pre>\n<p>\uc2e4\ud589\ud574\ubcf4\uba74 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2019\/03\/mustach.js.png\" alt=\"\" width=\"1634\" height=\"510\" class=\"aligncenter size-full wp-image-6310\" \/><\/p>\n<p>\uc55e\uc11c \uc791\uc131\ud55c includeHTML \ud568\uc218\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nfunction includeHTML(divContainer, urlHTML, data) {\r\n    let xhttp = new XMLHttpRequest();\r\n    xhttp.onreadystatechange = function () {\r\n        if (this.readyState == 4) {\r\n            if (this.status == 200) {\r\n                var result = Mustache.render(this.responseText, data);\r\n                divContainer.innerHTML = result;\r\n            } else if (this.status == 404) { divContainer.innerHTML = \"Page not found.\"; }\r\n        }\r\n    }\r\n\r\n    xhttp.open(\"GET\", urlHTML, true);\r\n    xhttp.send();\r\n}\r\n<\/pre>\n<p>\uc704\uc758 \ucf54\ub4dc \uc911 Mustache \ucf54\ub4dc\uac00 \ubcf4\uc774\ub294\ub370, \uc774 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 \uc544\ub798\uc758 \ucf54\ub4dc\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mustache.js\/3.0.1\/mustache.min.js\"><\/script>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\uc774 \uae00\uc740 Include HTML\uc774\ub77c\ub294 \uae00\uc744 \uae30\ucd08\ub85c \uc791\uc131\ub41c \uae00\uc785\ub2c8\ub2e4. Include HTML\uc740 \ub3d9\uc801\uc73c\ub85c \uc678\ubd80\uc758 HTML \ub9ac\uc18c\uc2a4\ub97c \uc6d0\ud558\ub294 \uc704\uce58\uc5d0 Include \ud574\uc8fc\ub294 \ubc29\ubc95\uc744 \uc124\uba85\ud569\ub2c8\ub2e4. \uc774\uc81c \uc774\ub807\uac8c Include HTML\uc744 \ud1b5\ud574 HTML \ub9ac\uc18c\uc2a4\ub97c \uc6d0\ud558\ub294 \uc704\uce58\uc5d0 \ud3ec\ud568\ud560 \ub54c, \uc6d0\ud558\ub294 \ub370\uc774\ud130\ub97c Binding \ud574\uc8fc\ub294 \ubc29\ubc95\uc744 \uc124\uba85\ud569\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574 mustache.js \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc774\uc6a9\ud569\ub2c8\ub2e4. mustache.js \ub77c\uc774\ube0c\ub7ec\ub9ac\ub294 \ub9ce\uc740 \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\ub97c \uc9c0\uc6d0\ud558\ub294\ub370, \uc5ec\uae30\uc11c\ub294 JS\ub97c \uc774\uc6a9\ud558\uc600\uc73c\uba70 \uad00\ub828 \ub9c1\ud06c\ub294 https:\/\/github.com\/janl\/mustache.js \uc785\ub2c8\ub2e4. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=6309\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;mustache.js\ub97c \uc774\uc6a9\ud55c HTML Tag\uc5d0 Data\ub97c Binding&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[],"class_list":["post-6309","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/6309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6309"}],"version-history":[{"count":7,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/6309\/revisions"}],"predecessor-version":[{"id":9505,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/6309\/revisions\/9505"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6309"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}