{"id":5654,"date":"2018-10-07T17:11:39","date_gmt":"2018-10-07T08:11:39","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=5654"},"modified":"2020-05-28T13:19:28","modified_gmt":"2020-05-28T04:19:28","slug":"dat-gui","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=5654","title":{"rendered":"dat.GUI\uc758 API \uc815\ub9ac"},"content":{"rendered":"<p>dat.GUI\ub294 \uac12\uc744 GUI\ub97c \ud1b5\ud574 \uc9c1\uad00\uc801\uc73c\ub85c \ubcc0\uacbd\ud558\uc5ec \uae30\ub2a5\uc744 \ud14c\uc2a4\ud2b8\ud574 \ubcfc \uc218 \uc788\ub294 javascript \uae30\ubc18\uc758 \ub9e4\uc6b0 \uc9c1\uad00\uc801\uc778 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4.<\/p>\n<p>dat.gui\ub97c js\uc5d0\uc11c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 \uac04\ub2e8\ud788 CDN\uc744 \ud1b5\ud574 \uc544\ub798\ucc98\ub7fc \ud398\uc774\uc9c0\uc5d0 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \ud3ec\ud568\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/dat-gui\/0.7.3\/dat.gui.min.js\"><\/script>\r\n<\/pre>\n<p>\uc544\ub798\ub294 dat.GUI\uc758 \uac00\uc7a5 \uac04\ub2e8\ud55c \uc608\uc81c\uc785\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nvar MyData = function() {\r\n    this.dataString = \"Dip2K\";\r\n    this.dataNumber = 0.7;\r\n    this.dataBoolean = false;\r\n    this.dataFunction = function() {\r\n        alert(\r\n            \"dataString: \" + this.dataString + \"\\n\" +\r\n            \"dataNumber: \" + this.dataNumber + \"\\n\" +\r\n            \"dataBoolean: \" + this.dataBoolean\r\n        );\r\n    };\r\n};\r\n\r\nwindow.onload = function() {\r\n    var myData = new MyData();\r\n        \r\n    var gui = new dat.GUI();\r\n   \r\n    gui.add(myData, \"dataString\");\r\n    gui.add(myData, \"dataNumber\");\r\n    gui.add(myData, \"dataBoolean\");\r\n    gui.add(myData, \"dataFunction\");\r\n}\r\n<\/pre>\n<p>\uad00\ub9ac\ud558\uace0\uc790 \ud558\ub294 \ub370\uc774\ud130\ub294 \ud568\uc218\uc5d0 \ub300\ud55c new \ud638\ucd9c\uc744 \ud1b5\ud55c this\uc5d0 \ubc14\uc778\ub529\ub418\uc5b4\uc838\uc57c \ud569\ub2c8\ub2e4. \uc704\uc758 \ucf54\ub4dc\ub97c \uc2e4\ud589\ud574 \ubcf4\uba74 \uc544\ub798\uc640 UI\uac00 \ud398\uc774\uc9c0\uc758 \uc6b0\uce21 \uc0c1\ub2e8\uc5d0 \ud45c\uc2dc\ub429\ub2c8\ub2e4.<\/p>\n<p>[xyz-ihs snippet=&#8221;DAT-GUI-1&#8243;]<\/p>\n<p>\uc704\uc758 UI\uc5d0\uc11c \ubcf4\ub294 \uac83\ucc98\ub7fc \ud568\uc218\uc758 new \ud638\ucd9c\ub85c this\uc5d0 \ubc14\uc778\ub529\ub41c dataString, dataNumber, dataBoolean, dataFunction\uc740 \uac01\uac01\uc758 \ub370\uc774\ud130 \ud0c0\uc785\uc5d0 \ub530\ub77c \uc801\uc808\ud55c UI\ub85c \ud45c\uc2dc\ub418\uba70 \uc0ac\uc6a9\uc790\uac00 \uc27d\uac8c \ubcc0\uacbd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. function \ud0c0\uc785\uc758 \ub370\uc774\ud130\ub294 \ubc84\ud2bc UI\ub85c \ud45c\uc2dc\ub418\uba70 \ubc84\ud2bc \ud074\ub9ad\uc2dc\uc5d0 \ud574\ub2f9 \ud568\uc218\uac00 \ud638\ucd9c\ub429\ub2c8\ub2e4.<\/p>\n<p>\uc774 \uc815\ub3c4\ub9cc \ub418\uc5b4\ub3c4 dat.gui\ub97c \uc801\uc808\ud558\uac8c \ud65c\uc6a9\ud560 \uc218 \uc788\uc9c0\ub9cc, \uc5ec\uae30\uc5d0 \ub367\ubd99\uc5ec \ubcc0\uc218\uac12\uc5d0 \ub300\ud55c \uc81c\uc57d \uc870\uac74\uc758 \uc9c0\uc815 \ub4f1 \ub2e4\uc591\ud55c \ud65c\uc6a9\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/p>\n<p>\uc608\ub97c \ub4e4\uc5b4, dataString \ubcc0\uc218\uc5d0 \ub300\ud574\uc11c \uc785\ub825\ubc1b\uc744 \uc218 \uc788\ub294 \ubb38\uc790\uc5f4\uc744 Dip2K, James, Anold\ub85c \uc81c\ud55c\ud558\uace0 \uc2f6\ub2e4\uba74 \ub2e4\uc74c\ucc98\ub7fc \ucf54\ub4dc\ub97c \uc791\uc131\ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\ngui.add(myData, \"dataString\", [\"Dip2K\", \"James\", \"Anold\"]);\r\n<\/pre>\n<p>dataNumber\uc5d0 \ub300\ud574\uc11c 0~100 \uc0ac\uc774\uc758 \uac12\ub9cc\uc744 \uc785\ub825\ubc1b\uc73c\uba70 0.1 \ub2e8\uc704\ub85c \uac12\uc758 \uc99d\uac00, \uac10\uc18c\ud558\uace0\uc790 \ud55c\ub2e4\uba74 \uc544\ub798\ucc98\ub7fc \ucf54\ub4dc\ub97c \uc791\uc131\ud558\uba74 \ub418\uad6c\uc694.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\ngui.add(myData, \"dataNumber\", 0, 100).step(0.1);\r\n<\/pre>\n<p>dataNumber\uac00 \ube44\ub85d \uc218\uce58 \ud0c0\uc785\uc774\uc9c0\ub9cc, \ud56d\ubaa9\uc73c\ub85c\uc368 \uc120\ud0dd \ubc1b\ub3c4\ub85d \ud558\uace0 \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud55c \uc218\uce58\uac12\uc744 \uc9c0\uc815\ud558\ub294 \ubc29\uc2dd\ub3c4 \uac00\ub2a5\ud55c\ub370, \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\ngui.add(myData, \"dataNumber\", { A: 0, B:50, C:100 });\r\n<\/pre>\n<p>\uc0c9\uc0c1\uac12\uc5d0 \ub300\ud55c \uc9c1\uad00\uc801\uc778 \uc785\ub825\ub3c4 \uac00\ub2a5\ud569\ub2c8\ub2e4. \uadf8 \uc608\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nvar MyData = function() {\r\n    this.dataString = \"Dip2K\";\r\n    this.dataNumber = 50;\r\n    this.dataBoolean = false;\r\n\r\n    this.dataColor1 = \"#ff0000\";\r\n    this.dataColor2 = [ 0, 255, 0 ];\r\n    this.dataColor3 = { h: 350, s: 0.5, v: 0.7 };\r\n\r\n    this.dataFunction = function() {\r\n        alert(\r\n            \"dataString: \" + this.dataString + \"\\n\" +\r\n            \"dataNumber: \" + this.dataNumber + \"\\n\" +\r\n            \"dataBoolean: \" + this.dataBoolean + \"\\n\" +\r\n            \"dataColor1: \" + this.dataColor1 + \"\\n\" +\r\n            \"dataColor2: \" + this.dataColor2 + \"\\n\" +\r\n            \"dataColor3: \" + this.dataColor3\r\n        );\r\n    };\r\n};\r\n\r\nwindow.onload = function() {\r\n    var myData = new MyData();\r\n\r\n    var gui = new dat.GUI();\r\n\r\n    gui.add(myData, \"dataString\", [\"Dip2K\", \"James\", \"Anold\"]);\r\n    gui.add(myData, \"dataNumber\", 0, 100).step(0.1);\r\n    gui.add(myData, \"dataBoolean\");\r\n\r\n    gui.addColor(myData, \"dataColor1\");\r\n    gui.addColor(myData, \"dataColor2\");\r\n    gui.addColor(myData, \"dataColor3\");\r\n            \r\n    gui.add(myData, \"dataFunction\");\r\n}\r\n<\/pre>\n<p>\uadf8\ub7f0\ub370 \ub9cc\uc57d, \uac12\uc758 \ubcc0\uacbd\uc774 dat.gui\uac00 \uc544\ub2cc \ub2e4\ub978 \uacf3\uc5d0\uc11c \uc774\ub8e8\uc5b4\uc9c4 \ub2e4\uba74, \ubcc0\uacbd\ub41c \uac12\uc744 dat.gui\uc5d0\uc11c \ubc18\uc601\ud574 \uc918\uc57c \ud560 \uac83\uc785\ub2c8\ub2e4. \uc774\ub294 \ub9e4\uc6b0 \uac04\ub2e8\ud569\ub2c8\ub2e4. \uc989, \uc544\ub798\ucc98\ub7fc listen\uc744 \ud638\ucd9c\ud574 \uc8fc\uba74 \ub429\ub2c8\ub2e4. \uc774 listen \ud568\uc218\ub294 \ud0c0\uc774\uba38\ub97c \uc0dd\uc131\ud558\uace0 \uc774 \ud0c0\uc774\uba38\uc5d0\uc11c \uac12\uc758 \ubcc0\uacbd \uc5ec\ubd80\ub97c \uac80\uc0ac\ud558\uc5ec dat.gui\uc5d0 \ubc18\uc601\ud574\uc8fc\uac8c \ub429\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\ngui.add(myData, \"dataNumber\").listen();\r\n<\/pre>\n<p>\ub05d\uc73c\ub85c dat.gui\ub97c \ud1b5\ud55c \uac12\uc758 \ubcc0\uacbd\uc774 \ubc1c\uc0dd\ud558\uba74, \uc774\uc5d0 \ub300\ud55c \uc774\ubca4\ud2b8\uac00 \ud638\ucd9c\ub418\ub3c4\ub85d \ud560 \uc218 \uc788\ub294\ub370, \uadf8 \uc608\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\ngui.add(myData, \"dataNumber\").onChange(\r\n    function(v) {\r\n        \/\/alert(v);\r\n    }).onFinishChange(\r\n    function(v) {\r\n        alert(v);\r\n    });\r\n<\/pre>\n<p>onChange\ub294 \uac12 \ubcc0\uacbd \uc911\uc758 \ub9e4 \uc21c\uac04 \ubc1c\uc0dd\ud558\ub294 \uc774\ubca4\ud2b8\uc774\uace0, onFinishChange\ub294 \ucd5c\uc885\uc801\uc778 \uac12\uc758 \ubcc0\uacbd\uc774 \ubc1c\uc0dd\ud560 \ub54c \ud638\ucd9c\ub418\ub294 \uc774\ubca4\ud2b8\uc785\ub2c8\ub2e4.<\/p>\n<p>\uc774\uc678\uc5d0\ub3c4 dat.gui\ub294 \uc124\uc815\ub41c \uac12\uc744 localStorage\uc5d0 \uc800\uc7a5\ud560 \uc218 \uc788\ub294 \uae30\ub2a5\ub3c4 \uc788\ub2e4\ub294 \uac83\ub3c4 \uc54c\uc544\ub450\uc2dc\uba74 \uc720\uc6a9\ud560\ub4ef\ud569\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>dat.GUI\ub294 \uac12\uc744 GUI\ub97c \ud1b5\ud574 \uc9c1\uad00\uc801\uc73c\ub85c \ubcc0\uacbd\ud558\uc5ec \uae30\ub2a5\uc744 \ud14c\uc2a4\ud2b8\ud574 \ubcfc \uc218 \uc788\ub294 javascript \uae30\ubc18\uc758 \ub9e4\uc6b0 \uc9c1\uad00\uc801\uc778 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. dat.gui\ub97c js\uc5d0\uc11c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 \uac04\ub2e8\ud788 CDN\uc744 \ud1b5\ud574 \uc544\ub798\ucc98\ub7fc \ud398\uc774\uc9c0\uc5d0 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \ud3ec\ud568\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\ub294 dat.GUI\uc758 \uac00\uc7a5 \uac04\ub2e8\ud55c \uc608\uc81c\uc785\ub2c8\ub2e4. var MyData = function() { this.dataString = &#8220;Dip2K&#8221;; this.dataNumber = 0.7; this.dataBoolean = false; this.dataFunction = function() { alert( &#8220;dataString: &#8221; &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=5654\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;dat.GUI\uc758 API \uc815\ub9ac&#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":[12],"tags":[],"class_list":["post-5654","post","type-post","status-publish","format-standard","hentry","category-opensource"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5654","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=5654"}],"version-history":[{"count":15,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5654\/revisions"}],"predecessor-version":[{"id":9569,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5654\/revisions\/9569"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5654"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}