{"id":5538,"date":"2018-07-26T15:42:30","date_gmt":"2018-07-26T22:42:30","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=5538"},"modified":"2025-06-13T21:23:10","modified_gmt":"2025-06-14T04:23:10","slug":"tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/ko\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/","title":{"rendered":"\ud29c\ud1a0\ub9ac\uc5bc: Vue.js, Node.js, Express \ubc0f Couchbase Server\ub97c \uc0ac\uc6a9\ud558\uc5ec \uad00\uc2ec \uc9c0\uc810 \uc571 \ube4c\ub4dc\ud558\uae30"},"content":{"rendered":"<p><span class=\"image\"><a class=\"image\" title=\"https:\/\/www.couchbase.com\/downloads\" href=\"https:\/\/www.couchbase.com\/blog\/ko\/downloads\/\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/badge\/Couchbase-v5.5.0-red.svg\" alt=\"Couchbase v5.5.0 red\" \/><\/a><\/span> <span class=\"image\"><a class=\"image\" title=\"https:\/\/opensource.org\/licenses\/Apache-2.0\" href=\"https:\/\/opensource.org\/licenses\/Apache-2.0\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/badge\/License-Apache%202.0-green.svg\" alt=\"License Apache%202.0 green\" \/><\/a><\/span><\/p>\n<div id=\"preamble\">\n<div class=\"sectionbody\">\n<h2 id=\"_introduction\" class=\"discrete\">\uc18c\uac1c<\/h2>\n<div class=\"paragraph\">\n<p>\uc774 \ud29c\ud1a0\ub9ac\uc5bc\uc5d0\uc11c\ub294 \ub2e4\uc74c\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc804\uccb4 \uc2a4\ud0dd \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ube4c\ub4dc\ud569\ub2c8\ub2e4. <a title=\"https:\/\/vuejs.org\/\" href=\"https:\/\/vuejs.org\">Vue.js<\/a>, <a title=\"https:\/\/nodejs.org\/\" href=\"https:\/\/nodejs.org\/\">Node.js<\/a>, <a title=\"https:\/\/expressjs.com\/\" href=\"https:\/\/expressjs.com\">Express<\/a>\ubc0f <a title=\"https:\/\/www.couchbase.com\/\" href=\"https:\/\/www.couchbase.com\/blog\/ko\/\">\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uc11c\ubc84<\/a>. \uc774\ub7ec\ud55c \ud504\ub808\uc784\uc6cc\ud06c \uc678\uc5d0\ub3c4, \uc6b0\ub9ac\ub294 <a title=\"https:\/\/developers.google.com\/maps\/documentation\/\" href=\"https:\/\/developers.google.com\/maps\/documentation\/\">Google \uc9c0\ub3c4<\/a> \uadf8\ub9ac\uace0 <a title=\"https:\/\/developer.here.com\/develop\/rest-apis\" href=\"https:\/\/developer.here.com\/develop\/rest-apis\">\uc5ec\uae30 \uc7a5\uc18c<\/a> REST API.<\/p>\n<\/div>\n<div id=\"toc\" class=\"toc\">\n<div id=\"toctitle\" class=\"title\">\n<div class=\"paragraph\">\n<p><strong>\uc694\uc57d<\/strong> \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac \ubcf5\uc81c <a title=\"https:\/\/github.com\/couchbaselabs\/points-of-interest:\" href=\"https:\/\/github.com\/couchbaselabs\/points-of-interest:\">\uc5ec\uae30<\/a>.<\/p>\n<\/div>\n<p>\ucf58\ud150\uce20<\/p>\n<\/div>\n<ul class=\"sectlevel1\">\n<li><a title=\"\" href=\"#_what_well_build\">\uad6c\ucd95\ud560 \ub0b4\uc6a9<\/a><\/li>\n<li><a title=\"\" href=\"#_what_you_need\">\ud544\uc694\ud55c \uac83<\/a><\/li>\n<li><a title=\"\" href=\"#_getting_started\">\uc2dc\uc791\ud558\uae30<\/a><\/li>\n<li><a title=\"\" href=\"#_the_web_client_skeleton\">\uc6f9 \ud074\ub77c\uc774\uc5b8\ud2b8 \uc2a4\ucf08\ub808\ud1a4<\/a>\n<ul class=\"sectlevel2\">\n<li><a title=\"\" href=\"#_generating_the_vue_js_client_scaffolding\">Vue.js \ud074\ub77c\uc774\uc5b8\ud2b8 \uc2a4\uce90\ud3f4\ub529 \uc0dd\uc131\ud558\uae30<\/a><\/li>\n<li><a title=\"\" href=\"#_restructuring_and_fixup\">\uad6c\uc870 \uc870\uc815 \ubc0f \uc218\uc815<\/a><\/li>\n<li><a title=\"\" href=\"#_install_dependencies_and_build\">\uc885\uc18d\uc131 \uc124\uce58 \ubc0f \ube4c\ub4dc<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a title=\"\" href=\"#_the_web_server_skeleton\">\uc6f9 \uc11c\ubc84 \uc2a4\ucf08\ub808\ud1a4<\/a><\/li>\n<li><a title=\"\" href=\"#_fleshing_out_the_client_and_server\">\ud074\ub77c\uc774\uc5b8\ud2b8 \ubc0f \uc11c\ubc84 \uad6c\uccb4\ud654\ud558\uae30<\/a>\n<ul class=\"sectlevel2\">\n<li><a title=\"\" href=\"#_the_web_client_code\">\uc6f9 \ud074\ub77c\uc774\uc5b8\ud2b8 \ucf54\ub4dc<\/a><\/li>\n<li><a title=\"\" href=\"#_the_web_server_code\">\uc6f9 \uc11c\ubc84 \ucf54\ub4dc<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a title=\"\" href=\"#_the_couchbase_server_eventing_service_code\">\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uc11c\ubc84 \uc774\ubca4\ud2b8 \uc11c\ube44\uc2a4 \ucf54\ub4dc<\/a>\n<ul class=\"sectlevel2\">\n<li><a title=\"\" href=\"#_eventing_meta_data_bucket\">\uba54\ud0c0\ub370\uc774\ud130 \ubc84\ud0b7 \uc774\ubca4\ud2b8<\/a><\/li>\n<li><a title=\"\" href=\"#_adding_a_function\">\ud568\uc218 \ucd94\uac00\ud558\uae30<\/a><\/li>\n<li><a title=\"\" href=\"#_deploying_a_function\">\ud568\uc218 \ubc30\ud3ec<\/a><\/li>\n<li><a title=\"\" href=\"#_understanding_the_function_code\">\ud568\uc218 \ucf54\ub4dc \uc774\ud574\ud558\uae30<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a title=\"\" href=\"#_final_steps\">\ucd5c\uc885 \ub2e8\uacc4<\/a><\/li>\n<li><a title=\"\" href=\"#_source\">\ucd9c\ucc98<\/a><\/li>\n<li><a title=\"\" href=\"#_webinar\">\uc6f9 \uc138\ubbf8\ub098<\/a><\/li>\n<li><a title=\"\" href=\"#_postscript\">\ud3ec\uc2a4\ud2b8 \uc2a4\ud06c\ub9bd\ud2b8<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"sect1\">\n<h2 id=\"_what_well_build\">\uad6c\ucd95\ud560 \ub0b4\uc6a9<\/h2>\n<div class=\"sectionbody\">\n<div class=\"paragraph\">\n<p>\ub3c4\uc2dc \ubaa9\ub85d\uc5d0\uc11c \uc120\ud0dd\ud55c \ud638\ud154 \uc8fc\ubcc0\uc758 \uad00\uc2ec \uc9c0\uc810(POI)\uc744 \ud45c\uc2dc\ud558\ub294 \ub2e8\uc77c \ud398\uc774\uc9c0 \uc6f9 \uc571\uc744 \ub9cc\ub4e4\ub824\uace0 \ud569\ub2c8\ub2e4. POI\ub294 \ub300\ud654\ud615 Google \uc9c0\ub3c4\uc5d0 \ud45c\uc2dc\ub429\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \ucd5c\uc885 \uacb0\uacfc\ub97c \ubcf4\uc5ec\uc8fc\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc785\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"imageblock\">\n<div class=\"content\"><img decoding=\"async\" src=\"https:\/\/raw.githubusercontent.com\/couchbaselabs\/blog-source-code\/master\/Greeley\/0048POI\/images\/POI.gif\" alt=\"Animated Application Demo\" \/><\/div>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc880 \ub354 \uace0\uae09 \uae30\uc220\uc744 \ubcf4\uc5ec\uc8fc\uae30 \uc704\ud574 \uba87 \uac00\uc9c0 \ucd94\uac00 \ubcc0\ud615\uc774 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"ulist\">\n<ul>\n<li>\ub3c4\uc2dc\ub294 \uac19\uc740 \ub3c4\uc2dc\uc5d0 \uc778\uadfc \ud638\ud154\uc774 \uc788\ub294 \uacf5\ud56d\uc744 \ub9e4\uce6d\ud558\uc5ec \uc120\ud0dd\ub429\ub2c8\ub2e4.<\/li>\n<li>REST \ud638\ucd9c\uc744 \uc0ac\uc6a9\ud558\uc5ec POI\ub97c \uac80\uc0c9\ud558\uc9c0\ub9cc \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \uc800\uc7a5\ud569\ub2c8\ub2e4.<\/li>\n<li>\ud074\ub77c\uc774\uc5b8\ud2b8 \uce21\uc5d0\uc11c\ub294 \ub2e4\uc74c\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud478\uc2dc\ub97c \ud1b5\ud574 \ub370\uc774\ud130\ub97c \uc218\uc2e0\ud569\ub2c8\ub2e4. <a title=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Server-sent_events\/Using_server-sent_events\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Server-sent_events\/Using_server-sent_events\">\uc11c\ubc84 \uc804\uc1a1 \uc774\ubca4\ud2b8<\/a>.<\/li>\n<\/ul>\n<\/div>\n<div class=\"paragraph\">\n<p>\ucf54\ub4dc\ub294 \uc9e7\uc9c0\ub9cc Vue\uc758 \ubc18\uc751\ud615 \ub370\uc774\ud130 \ubc14\uc778\ub529 \ubc0f \uc18d\uc131 \uc885\uc18d\uc131 \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud558\uc5ec \uba87 \uac00\uc9c0 \uae30\uc220\uc744 \ubcf4\uc5ec\uc90d\ub2c8\ub2e4. Couchbase\uc758 \uba87 \uac00\uc9c0 \uac15\ub825\ud55c \uae30\ub2a5\uacfc \uacb0\ud569\ud558\uba74 \ub9ce\uc740 \uc791\uc5c5 \uc5c6\uc774\ub3c4 \uba4b\uc9c0\uace0 \uc798 \uc791\ub3d9\ud558\ub294 \uc571\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"sect1\">\n<h2 id=\"_what_you_need\">\ud544\uc694\ud55c \uac83<\/h2>\n<div class=\"sectionbody\">\n<div class=\"paragraph\">\n<p>\uc774 \uc571\uc740 \uc804\uc801\uc73c\ub85c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \uc81c\uc791\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc2dc\uc791\ud558\ub824\uba74 \uba87 \uac00\uc9c0 \uc900\ube44\ubb3c\ub9cc \uc788\uc73c\uba74 \ub429\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"olist arabic\">\n<ol class=\"arabic\" start=\"https:\/\/www.couchbase.com\/get-started\">\n<li><a title=\"https:\/\/nodejs.org\/\" href=\"https:\/\/nodejs.org\/\">Node.js<\/a> \uc124\uce58\ub41c<\/li>\n<li><a title=\"https:\/\/www.couchbase.com\/downloads\" href=\"https:\/\/www.couchbase.com\/blog\/ko\/downloads\/\">\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uc11c\ubc84<\/a> 5.5.0 \uc774\uc0c1 \uc124\uce58<\/li>\n<\/ol>\n<\/div>\n<div class=\"paragraph\">\n<p>\ub610\ud55c \ub2e4\uc74c\uc744 \uc704\ud55c \ud0a4\ub3c4 \ubc1b\uc544\uc57c \ud569\ub2c8\ub2e4. <a title=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/get-api-key\" href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/get-api-key\">Google \uc9c0\ub3c4 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 API<\/a> \ubc0f <a title=\"https:\/\/developer.here.com\/develop\/rest-apis\" href=\"https:\/\/developer.here.com\/develop\/rest-apis\">HERE REST API<\/a>. \ub458 \ub2e4 \ubb34\ub8cc\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4(\uc81c\ud55c \uc0ac\ud56d \uc788\uc74c).<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ub370\uc774\ud130\ub294 Couchbase Server \ubc30\ud3ec\uc5d0 \uae30\ubcf8 \uc81c\uacf5\ub418\ub294 \uc0d8\ud50c\ub85c \uc81c\uacf5\ub429\ub2c8\ub2e4.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"sect1\">\n<h2 id=\"_getting_started\">\uc2dc\uc791\ud558\uae30<\/h2>\n<div class=\"sectionbody\">\n<div class=\"paragraph\">\n<p>\uc6f9 \ud074\ub77c\uc774\uc5b8\ud2b8 \ucf54\ub4dc\ubd80\ud130 \uc2dc\uc791\ud558\uc5ec \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uad6c\uc870\ub97c \uad6c\ucd95\ud558\uaca0\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uc11c\ubc84 \uce21 Node + Express \ucf54\ub4dc\uc785\ub2c8\ub2e4. \ub9c8\uc9c0\ub9c9\uc73c\ub85c \uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uc11c\ubc84 \uce21\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\ub2e4\uc74c\uc744 \ud3ec\ud568\ud558\uc5ec N1Ql \ucffc\ub9ac\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. <a title=\"https:\/\/developer.couchbase.com\/documentation\/server\/current\/n1ql\/n1ql-language-reference\/from.html#topic_rnt_zfk_np__section_ek1_jnx_1db\" href=\"https:\/\/developer.couchbase.com\/documentation\/server\/current\/n1ql\/n1ql-language-reference\/from.html#topic_rnt_zfk_np__section_ek1_jnx_1db\">ANSI \uac00\uc785<\/a>. \uc774 \uc571\uc740 \uc0c8\ub85c\uc6b4 <a title=\"https:\/\/developer.couchbase.com\/documentation\/server\/current\/eventing\/eventing-overview.html\" href=\"https:\/\/developer.couchbase.com\/documentation\/server\/current\/eventing\/eventing-overview.html\">\uc774\ubca4\ud2b8 \uc11c\ube44\uc2a4 \ubc0f \uae30\ub2a5<\/a>. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc\ub97c \uc0b4\ud3b4\ubcf4\ub294 \uac83\uc73c\ub85c \ub9c8\ubb34\ub9ac\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc2dc\uc791\ud558\ub824\uba74 \ud504\ub85c\uc81d\ud2b8\ub97c \ubcf4\uad00\ud560 \uc0c8 \ub514\ub809\ud130\ub9ac\ub97c \ub9cc\ub4ed\ub2c8\ub2e4. \uba85\ub839 \ud504\ub86c\ud504\ud2b8\ub97c \uc5f4\uace0 \ud574\ub2f9 \ub514\ub809\ud130\ub9ac\ub85c \uc804\ud658\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"sect1\">\n<h2 id=\"_the_web_client_skeleton\">\uc6f9 \ud074\ub77c\uc774\uc5b8\ud2b8 \uc2a4\ucf08\ub808\ud1a4<\/h2>\n<div class=\"sectionbody\">\n<div class=\"sect2\">\n<h3 id=\"_generating_the_vue_js_client_scaffolding\">Vue.js \ud074\ub77c\uc774\uc5b8\ud2b8 \uc2a4\uce90\ud3f4\ub529 \uc0dd\uc131\ud558\uae30<\/h3>\n<div class=\"paragraph\">\n<p>\uc6f9 \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 \ub2e4\uc74c\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. <a title=\"https:\/\/vuejs.org\/\" href=\"https:\/\/vuejs.org\">Vue.js<\/a>.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>Vue CLI\ub97c \uc0ac\uc6a9\ud558\uc5ec \uae30\ubcf8 \ud504\ub85c\uc81d\ud2b8\ub97c \ub9cc\ub4e4\uaca0\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud074\ub77c\uc774\uc5b8\ud2b8\uc640 \uc11c\ubc84 \uce21\uc744 \uc27d\uac8c \ud1b5\ud569\ud558\ub294 \ubc29\ubc95\uc744 \ubcf4\uc5ec\ub4dc\ub9ac\uaca0\uc2b5\ub2c8\ub2e4. <a title=\"https:\/\/webpack.js.org\/\" href=\"https:\/\/webpack.js.org\/\">\uc6f9\ud329<\/a>. \uc774\ub807\uac8c \ud558\uba74 \ud30c\uc77c\uc744 \uc57d\uac04 \uc7ac\uc815\ub82c\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc544\uc9c1 \uc124\uce58\ud558\uc9c0 \uc54a\uc740 \uacbd\uc6b0 npm\uc744 \uc0ac\uc6a9\ud558\uc5ec Vue CLI\ub97c \uc124\uce58\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<pre class=\"lang:sh decode:true\">npm install -g @vue\/cli<\/pre>\n<p>\uc800\ub294 <a title=\"https:\/\/getbootstrap.com\/\" href=\"https:\/\/getbootstrap.com\/\">\ubd80\ud2b8\uc2a4\ud2b8\ub7a9<\/a>. Boostrap\uacfc Vue\ub97c \ud1b5\ud569\ud558\ub294 \ud504\ub85c\uc81d\ud2b8\ub294 \uc801\uc5b4\ub3c4 \ub450 \uac1c \uc774\uc0c1 \uc788\uc2b5\ub2c8\ub2e4. \uc800\ub294 <a title=\"https:\/\/bootstrap-vue.js.org\/\" href=\"https:\/\/bootstrap-vue.js.org\/\">\ubd80\ud2b8\uc2a4\ud2b8\ub7a9 \ubdf0<\/a>. \uc774\uac83\uc740 \uc2e4\uc81c\ub85c \ud544\uc694\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc6d0\ud55c\ub2e4\uba74 \uc774 \uc885\uc18d\uc131\uc744 \uc81c\uac70\ud558\ub294 \uac83\uc740 \uadf8\ub9ac \uc5b4\ub835\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\ud504\ub85c\uc81d\ud2b8 \uc0c1\uc6a9\uad6c\ub97c \ub9cc\ub4ed\ub2c8\ub2e4. \uc5ec\uae30\uc11c \uac04\ub2e8\ud55c \uc6f9\ud329 \ud15c\ud50c\ub9bf\uc774 \ub4f1\uc7a5\ud569\ub2c8\ub2e4. \ud15c\ud50c\ub9bf\uc758 <code>init<\/code> \uba85\ub839\uc744 \uc2e4\ud589\ud558\uba74 \uba87 \uac00\uc9c0 \uc9c8\ubb38\uc774 \ud45c\uc2dc\ub429\ub2c8\ub2e4. \uae30\ubcf8\uac12\uc744 \uc0ac\uc6a9\ud574\ub3c4 \uad1c\ucc2e\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:sh decode:true\">npm install -g @vue\/cli-init\r\nvue init bootstrap-vue\/webpack-simple client<\/pre>\n<\/div>\n<\/div>\n<div class=\"sect2\">\n<h3 id=\"_restructuring_and_fixup\">\uad6c\uc870 \uc870\uc815 \ubc0f \uc218\uc815<\/h3>\n<div class=\"paragraph\">\n<p>\uc774\uc81c \ud074\ub77c\uc774\uc5b8\ud2b8 \ub514\ub809\ud1a0\ub9ac\ub85c \uc804\ud658\ud569\ub2c8\ub2e4. \ud074\ub77c\uc774\uc5b8\ud2b8 \ub514\ub809\ud130\ub9ac\uc5d0\uc11c <code>package.json<\/code> \uadf8\ub9ac\uace0 <code>.gitignore<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4. \uc774\ub807\uac8c \ud558\uba74 \ud504\ub85c\uc81d\ud2b8 \uc804\uccb4\uc5d0\uc11c \ud30c\uc77c\uc744 \uacf5\uc720\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<pre class=\"lang:sh decode:true\">cd client\/\r\nmv package.json .gitignore ..<\/pre>\n<p>\uc6f9\ud329 \uad6c\uc131\uc5d0\ub3c4 \uc791\uc740 \ubc84\uadf8\uac00 \uc788\uc2b5\ub2c8\ub2e4. Open <code>webpack.config.js<\/code>. \ub85c \uc2dc\uc791\ud558\ub294 \uc139\uc158 \uc544\ub798<\/p>\n<\/div>\n<div class=\"paragraph\">\n<pre class=\"lang:default decode:true\">        test: \/\\.(png|jpg|gif|svg)$\/,<\/pre>\n<p>\uc635\uc158 \uc904\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \ubcc0\uacbd\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<\/div>\n<div class=\"sect2\">\n<pre class=\"lang:default decode:true\">           name: 'assets\/[name].[ext]?[hash]'<\/pre>\n<h3 id=\"_install_dependencies_and_build\">\uc885\uc18d\uc131 \uc124\uce58 \ubc0f \ube4c\ub4dc<\/h3>\n<div class=\"paragraph\">\n<p>\uae30\ubcf8 \uc885\uc18d\uc131\uc744 \ucd08\uae30\ud654\ud558\uace0 \uc124\uce58\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<pre class=\"lang:sh decode:true\">npm \uc124\uce58<\/pre>\n<p>\ub2e4\ub978 \uc885\uc18d \uc694\uc18c\ub97c \uc124\uce58\ud569\ub2c8\ub2e4. \uc774\ub4e4 \uc911 \ub2e4\uc218\ub294 \ud45c\uc900 \ud328\ud0a4\uc9c0(\ubaa8\uac74, \ubc14\ub514 \ud30c\uc11c)\uc785\ub2c8\ub2e4. \uc800\ub294 <a title=\"https:\/\/github.com\/axios\/axios\" href=\"https:\/\/github.com\/axios\/axios\">axios<\/a> \ub124\ud2b8\uc6cc\ud06c \ud1b5\ud654\uc758 \uacbd\uc6b0\u00a0<a title=\"https:\/\/www.npmjs.com\/package\/sse-channel\" href=\"https:\/\/www.npmjs.com\/package\/sse-channel\">sse-channel<\/a> \ub294 \uba4b\uc9c4 \uc11c\ubc84 \uc804\uc1a1 \uc774\ubca4\ud2b8 \ud328\ud0a4\uc9c0\uc785\ub2c8\ub2e4. \uc81c\uac00 \uc0ac\uc6a9\ud574 \ubcf8 \ub2e4\ub978 \ud328\ud0a4\uc9c0\ubcf4\ub2e4 \uc870\uae08 \ub354 \uc815\uad50\ud558\uace0 \uc0ac\uc6a9\ud558\uae30 \uc27d\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 Vue\uc5d0\uc11c Google \uc9c0\ub3c4\ub97c \uc27d\uac8c \uc791\uc5c5\ud560 \uc218 \uc788\ub294 \ud328\ud0a4\uc9c0\uac00 \uc788\uc2b5\ub2c8\ub2e4. <a title=\"https:\/\/www.npmjs.com\/package\/vue2-google-maps\" href=\"https:\/\/www.npmjs.com\/package\/vue2-google-maps\">vue2-google-maps<\/a>.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\ub098\uba38\uc9c0 \uc885\uc18d\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uc774 \uc124\uce58\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc5d0\ub294 \uc11c\ubc84\uc5d0 \ud544\uc694\ud55c \uac83\ub4e4\uc774 \ud3ec\ud568\ub429\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<pre class=\"lang:sh decode:true\">npm install --save vue2-google-maps axios express sse-channel dotenv morgan debug cookie-parser body-parser bluebird couchbase<\/pre>\n<p>\uc774\ub807\uac8c \ud558\uba74 \uc81c\ub300\ub85c \uc791\ub3d9\ud558\ub294 Vue \uae30\ubc18 \ud504\ub7f0\ud2b8\uc5d4\ub4dc\ub97c \uc5bb\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \uad6c\ucd95\ud558\uae30 \uc704\ud574 <code>package.json<\/code> \ub97c \ud55c \ub2e8\uacc4 \uc62c\ub9ac\ub824\uba74 npm \uc2a4\ud06c\ub9bd\ud2b8 \uc139\uc158\uc744 \uc870\uc815\ud574\uc57c \ud569\ub2c8\ub2e4. \ud3b8\uc9d1 <code>package.json<\/code> \ub97c \ud504\ub85c\uc81d\ud2b8 \ub8e8\ud2b8\uc5d0 \ucd94\uac00\ud558\uace0 \ube4c\ub4dc \uc904\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \ubcc0\uacbd\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<pre class=\"lang:default decode:true\">    \"build\": \"cd client &amp;&amp; cross-env NODE_ENV=production webpack --progress --hide-modules &amp;&amp; cp index.html dist\/\"<\/pre>\n<p>\uc774\uc81c \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c <code>npm \uc2e4\ud589 \ube4c\ub4dc<\/code>.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc5f4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <code>index.html<\/code> \ud30c\uc77c\uc744 \uc2e4\ud589\ud574\ub3c4 \uc791\ub3d9\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc11c\ubc84 \uc0dd\uc131\uc73c\ub85c \uac74\ub108\ub6f0\uac70\ub098 \ub3c5\ub9bd \uc2e4\ud589\ud615 \ud074\ub77c\uc774\uc5b8\ud2b8\ub9cc \ud655\uc778\ud558\ub824\ub294 \uacbd\uc6b0 \uc5ec\uae30\uc5d0\uc11c \ubb38\uc81c\ub97c \ud574\uacb0\ud574 \ubcf4\uc138\uc694.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"sect1\">\n<h2 id=\"_the_web_server_skeleton\">\uc6f9 \uc11c\ubc84 \uc2a4\ucf08\ub808\ud1a4<\/h2>\n<div class=\"sectionbody\">\n<div class=\"paragraph\">\n<p>\ud504\ub85c\uc81d\ud2b8 \ub8e8\ud2b8\ub85c \ub2e4\uc2dc \uc774\ub3d9\ud558\uc5ec \uc11c\ubc84 \ub514\ub809\ud130\ub9ac\ub97c \uc900\ube44\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:sh decode:true\">mkdir server\r\ncd server<\/pre>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc11c\ubc84\ub97c \uc9c1\uc811 \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc0c8 \ud30c\uc77c\uc744 \ud3b8\uc9d1\ud558\uc5ec \uae30\ubcf8 \uc571\uc744 \uc2dc\uc791\ud569\ub2c8\ub2e4. <code>app.js<\/code>. \ub2e4\uc74c\uc744 \ubd99\uc5ec\ub123\uace0 \uc800\uc7a5\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:js decode:true\">const express = require('express');\r\n\r\nconst debug = require('debug')('poi:server');\r\nconst path = require('path');\r\nconst logger = require('morgan');\r\nconst cookieParser = require('cookie-parser');\r\nconst bodyParser = require('body-parser');\r\nconst http = require('http');\r\n\r\nconst app = express();\r\n\r\napp.use(logger('dev'));\r\napp.use(bodyParser.json());\r\napp.use(bodyParser.urlencoded({ extended: false }));\r\napp.use(cookieParser());\r\n\r\napp.use(function(req, res, next) {\r\n  res.header(\"Access-Control-Allow-Origin\", \"*\");\r\n  res.header(\"Access-Control-Allow-Headers\", \"Origin, X-Requested-With, Content-Type, Accept\");\r\n  next();\r\n});\r\n\r\napp.use(express.static(path.join(__dirname, '..\/client')));\r\n\r\n\/\/ catch 404 and forward to error handler\r\napp.use(function(req, res, next) {\r\n  console.dir(req);\r\n  console.dir(res);\r\n  let err = new Error('Not Found');\r\n  err.status = 404;\r\n  next(err);\r\n});\r\n\r\n\/\/ error handler\r\napp.use(function(err, req, res, next) {\r\n  \/\/ set locals, only providing error in development\r\n  res.locals.message = err.message;\r\n  res.locals.error = req.app.get('env') === 'development' ? err : {};\r\n\r\n  \/\/ render the error page\r\n  res.status(err.status || 500);\r\n  res.render('error');\r\n});\r\n\r\n\/\/ HTTP server\r\nhttp.createServer(app).listen(8080);<\/pre>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc774\uac83\uc740 \ucd5c\uc885 \ubc84\uc804\uc758 \uac04\uc18c\ud654\ub41c \ubc84\uc804\uc785\ub2c8\ub2e4. \uc55e\uc11c \ub9cc\ub4e0 \uc0c1\uc6a9\uad6c \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c \uc81c\uacf5\ud558\uae30\ub9cc \ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc774 \uc2dc\uc810\uc5d0\uc11c \ub2e4\uc74c\uc744 \uc2e4\ud589\ud560 \uc218 \uc788\uc5b4\uc57c \ud569\ub2c8\ub2e4. <code>\ub178\ub4dc app.js<\/code> \ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ud0ed\uc744 \uc5f4\uace0 \ub2e4\uc74c \uc704\uce58\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4. <code><a class=\"bare\" title=\"https:\/\/localhost:8080\/\" href=\"https:\/\/localhost:8080\">https:\/\/localhost:8080<\/a><\/code>. \ub2e4\uc74c\uacfc \uac19\uc740 \ub0b4\uc6a9\uc774 \ud45c\uc2dc\ub420 \uac83\uc785\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"imageblock\">\n<div class=\"content\"><img decoding=\"async\" src=\"https:\/\/raw.githubusercontent.com\/couchbaselabs\/blog-source-code\/master\/Greeley\/0048POI\/images\/BaseVueClient.png\" alt=\"Vue Client Template\" \/><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"sect1\">\n<h2 id=\"_fleshing_out_the_client_and_server\">\ud074\ub77c\uc774\uc5b8\ud2b8 \ubc0f \uc11c\ubc84 \uad6c\uccb4\ud654\ud558\uae30<\/h2>\n<div class=\"sectionbody\">\n<div class=\"sect2\">\n<h3 id=\"_the_web_client_code\">\uc6f9 \ud074\ub77c\uc774\uc5b8\ud2b8 \ucf54\ub4dc<\/h3>\n<div class=\"paragraph\">\n<p>\uc774\uc81c \ub3cc\uc544\uac00\uc11c \uc2e4\uc81c \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ud074\ub77c\uc774\uc5b8\ud2b8 \ub514\ub809\ud1a0\ub9ac\uc758 \ud558\uc704 \ub514\ub809\ud130\ub9ac\uc778 <code>src<\/code>\ub97c \ud074\ub9ad\ud558\uace0 \ud30c\uc77c\uc744 \uc5fd\ub2c8\ub2e4. <code>App.vue<\/code>. \ub2e4\uc74c\uacfc \uac19\uc774 \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:default decode:true\" data-url=\"https:\/\/raw.githubusercontent.com\/couchbaselabs\/points-of-interest\/master\/client\/src\/App.vue\">&lt;template&gt;\r\n  &lt;div id=\"app\"&gt;\r\n    &lt;div class=\"container\"&gt;\r\n      &lt;div class=\"row justify-content-center\"&gt;\r\n        &lt;div class=\"col-12\"&gt;\r\n          &lt;h2&gt;Points of Interest&lt;\/h2&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-md-12\"&gt;\r\n          &lt;b-dropdown id=\"cities\" v-bind:text=display class=\"m-md-2\"&gt;\r\n            &lt;b-dropdown-item-button v-for=\"city in cities\" v-bind:key=\"city.name\" v-on:click=\"selected = city\"&gt;{{ city.name }}&lt;\/b-dropdown-item-button&gt;\r\n          &lt;\/b-dropdown&gt;\r\n          &lt;b-table id=\"destinations\" :items=\"destinationsProvider\" :fields=\"fields\" @row-clicked=\"hotelSelected\" striped hover&gt;&lt;\/b-table&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-md-12\"&gt;\r\n          &lt;GmapMap ref=\"map\" style=\"width: 100%; height: 400px;\" :zoom=\"16\" :center=\"{lat: 43.542619, lng: 6.955665}\"&gt;\r\n            &lt;GmapMarker v-for=\"(marker, index) in poi\"\r\n              :key=\"index\"\r\n              :position=\"{ lat: marker.position[0], lng: marker.position[1] }\"\r\n              :icon=\"{ url: marker.icon }\"\r\n            \/&gt;\r\n          &lt;\/GmapMap&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-8\" \/&gt;\r\n        &lt;div class=\"col-4\" id=\"tagline\"&gt;\r\n            Powered by &lt;img src=\".\/assets\/logo.png\"&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/template&gt;\r\n\r\n&lt;script&gt;\r\nimport axios from 'axios'\r\n\r\nconst serverURL = location.origin;\r\nconst server = axios.create({ baseURL: serverURL });\r\nconst es = new EventSource(`${serverURL}\/events\/poi`);\r\n\r\nexport default {\r\n  name: 'app',\r\n  data() {\r\n    return {\r\n      fields: [\r\n        { key: 'name', label: 'Hotel Name', sortable: true },\r\n        { key: 'address', sortable: false },\r\n        { key: 'airportname', label: 'Airport Name', sortable: true },\r\n        { key: 'icao', label: 'ICAO Code', sortable: true }\r\n      ],\r\n      selected: null,\r\n      cities: [],\r\n      poi: []\r\n    }\r\n  },\r\n  computed: {\r\n    display: function() {\r\n      return this.selected ? this.selected.name : 'Choose a city';\r\n    }\r\n  },\r\n  watch: {\r\n    selected: function() {\r\n      this.$root.$emit('bv::refresh::table', 'destinations');\r\n    }\r\n  },\r\n  methods: {\r\n    destinationsProvider(context) {\r\n      if (null === this.selected) return [];\r\n\r\n      let promise = server.get(`\/records\/hotels\/byCity\/${this.selected.name}`);\r\n\r\n      return promise.then(response =&gt; {\r\n        return(response.data);\r\n      }).catch(error =&gt; {\r\n        return [];\r\n      });\r\n    },\r\n    hotelSelected(record, index) {\r\n      this.$refs.map.panTo({ lat: record.geo.lat, lng: record.geo.lon });\r\n\r\n      server.post('\/records\/select\/geo', record.geo)\r\n      .catch(error =&gt; {\r\n        console.log(error)\r\n      });\r\n    }\r\n  },\r\n  mounted: function() {\r\n    es.addEventListener('poi', event =&gt; this.poi = JSON.parse(event.data));\r\n\r\n    server.get('\/records\/destinations')\r\n    .then(response =&gt; {\r\n      this.cities = response.data;\r\n    })\r\n    .catch(error =&gt; {\r\n      console.log(error)\r\n    });\r\n  }\r\n}\r\n&lt;\/script&gt;\r\n\r\n&lt;style&gt;\r\n#app {\r\n  font-family: 'Avenir', Helvetica, Arial, sans-serif;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n  text-align: center;\r\n  color: #2c3e50;\r\n  margin-top: 60px;\r\n}\r\n\r\n#tagline img {\r\n  height: 38px;\r\n  margin: 10px;\r\n}\r\n\r\nh1, h2 {\r\n  font-weight: normal;\r\n}\r\n\r\nul {\r\n  list-style-type: none;\r\n  padding: 0;\r\n}\r\n\r\nli {\r\n  display: inline-block;\r\n  margin: 0 10px;\r\n}\r\n\r\na {\r\n  color: #42b983;\r\n}\r\n&lt;\/style&gt;<\/pre>\n<p>\uc774\uac83\uc774 \ud074\ub77c\uc774\uc5b8\ud2b8 \uce21 \ucf54\ub4dc\uc758 \ub300\ubd80\ubd84\uc785\ub2c8\ub2e4.<\/p>\n<p>\ud15c\ud50c\ub9bf \uc139\uc158\uc774\ub098 CSS\uc5d0 \ub300\ud574\uc11c\ub294 \uc790\uc138\ud788 \uc124\uba85\ud558\uc9c0 \uc54a\uaca0\uc2b5\ub2c8\ub2e4. \ud55c \uac00\uc9c0 \uba4b\uc9c4 \uc694\uc18c\ub97c \uc9c0\uc801\ud558\uaca0\uc2b5\ub2c8\ub2e4. Here API\ub294 \ubb34\uc5c7\ubcf4\ub2e4\ub3c4 \uc9c0\ub3c4\uc5d0\uc11c \uc0ac\uc6a9\ud558\uae30\uc5d0 \uc801\ud569\ud55c \uc544\uc774\ucf58\uc5d0 \ub300\ud55c \ub9c1\ud06c\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4. \ud750\ub984\uc744 \ub530\ub77c\uac00\ub2e4 \ubcf4\uba74 \uc9c0\ub3c4 \ub9c8\ucee4\uac00 \ud3ec\ud568 URL\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud574\ub2f9 \uc544\uc774\ucf58\uc744 \uc9c1\uc811 \ub85c\ub4dc\ud558\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"sect3\">\n<h4 id=\"_wiring_up_the_vue_databinding\">Vue \ub370\uc774\ud130 \ubc14\uc778\ub529 \uc124\uc815<\/h4>\n<div class=\"paragraph\">\n<p>\uc2a4\ud06c\ub9bd\ud2b8 \uc139\uc158\uc744 \uc0b4\ud3b4\ubcf4\uba74 Vue\uc758 \ubc18\uc751\ud615 \uae30\ub2a5\uc744 \ub9ce\uc774 \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \ubd80\ubd84\uc744 \uc774\ud574\ud558\ub824\uba74 Vue\uc5d0 \ub300\ud574 \uc5b4\ub290 \uc815\ub3c4 \uc775\uc219\ud558\ub2e4\uba74 \ub3c4\uc6c0\uc774 \ub420 \uac83\uc785\ub2c8\ub2e4. <a title=\"https:\/\/vuejs.org\/v2\/guide\/computed.html\" href=\"https:\/\/vuejs.org\/v2\/guide\/computed.html\">\uacc4\uc0b0\ub41c \uc18d\uc131 \ubc0f \uac10\uc2dc\uc790<\/a>, <a title=\"https:\/\/vuejs.org\/v2\/guide\/instance.html\" href=\"https:\/\/vuejs.org\/v2\/guide\/instance.html\">\ub370\uc774\ud130, \uba54\uc11c\ub4dc \ubc0f \ub77c\uc774\ud504\uc0ac\uc774\ud074 \ud6c5<\/a>.<\/p>\n<p>\uc6b0\ub9ac\ub294 <code>\ud0d1\uc7ac<\/code> \ub77c\uc774\ud504\uc0ac\uc774\ud074 \ucf5c\ubc31\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc11c\ubc84\uc5d0\uc11c \ubcf4\ub0b8 \uc774\ubca4\ud2b8\uc5d0 \ub300\ud55c \ub9ac\uc2a4\ub108\ub97c \ucd94\uac00\ud558\uace0 \ucc98\uc74c\uc5d0 \ub3c4\uc2dc \ub4dc\ub86d\ub2e4\uc6b4 \ubaa9\ub85d\uc744 \ucc44\uc6b8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc5ec\uae30\uc11c \ube44\uc988\ub2c8\uc2a4 \ub85c\uc9c1\uc758 \ub354 \ubb34\uac70\uc6b4 \uc791\uc5c5\uc740 \ub370\uc774\ud130\ubca0\uc774\uc2a4 \ucffc\ub9ac\uc5d0\uc11c \uc774\ub8e8\uc5b4\uc9d1\ub2c8\ub2e4.<\/p>\n<p>\ub3c4\uc2dc \uc120\ud0dd\uc774 \uc5b4\ub5bb\uac8c \uc791\ub3d9\ud558\ub294\uc9c0 \ucd94\uc801\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ubc84\ud2bc \ub4dc\ub86d\ub2e4\uc6b4\uc758 \ubaa8\ub4e0 \ud56d\ubaa9\uc5d0\ub294 \ub2e4\uc74c\uc744 \uc124\uc815\ud558\ub294 \ud074\ub9ad \ub9ac\uc2a4\ub108\uac00 \ubc14\uc778\ub529\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. <code>\uc120\ud0dd<\/code> \ub97c \ud574\ub2f9 \ud56d\ubaa9\uc758 \ub3c4\uc2dc \ub370\uc774\ud130\uc5d0 \ucd94\uac00\ud569\ub2c8\ub2e4. \uac10\uc2dc \uba54\uc11c\ub4dc\uac00 \uc815\uc758\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. <code>\uc120\ud0dd<\/code>. \ub610\ud55c Vue\ub294 \uacc4\uc0b0\ub41c \ud504\ub85c\ud37c\ud2f0\ub97c \uc790\ub3d9\uc73c\ub85c \uc778\uc2dd\ud569\ub2c8\ub2e4. <code>\ub514\uc2a4\ud50c\ub808\uc774<\/code> \uc5d0 \ub530\ub77c \ub2ec\ub77c\uc9d1\ub2c8\ub2e4. <code>\uc120\ud0dd<\/code>.<\/p>\n<p>\uc989, \ub4dc\ub86d\ub2e4\uc6b4\uc744 \ud1b5\ud574 \ub3c4\uc2dc\uac00 \uc120\ud0dd\ub420 \ub54c\ub9c8\ub2e4 \uc77c\ub828\uc758 \ud65c\ub3d9\uc774 \uc774\ub8e8\uc5b4\uc9d1\ub2c8\ub2e4. \ubcc0\uacbd <code>\uc120\ud0dd<\/code> \uc6d0\uc778 <code>\ub514\uc2a4\ud50c\ub808\uc774<\/code> \ub97c \ub2e4\uc2dc \uacc4\uc0b0\ud558\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4. \uadf8\ub7ec\uba74 \ub4dc\ub86d\ub2e4\uc6b4 \ubc84\ud2bc \ud14d\uc2a4\ud2b8\uac00 \ub2e4\uc74c\uacfc \uac19\uc774 \uc124\uc815\ub429\ub2c8\ub2e4. <code>\ub514\uc2a4\ud50c\ub808\uc774<\/code>. . <code>\uc120\ud0dd<\/code>\uba54\uc11c\ub4dc\uc758 <code>\uc2dc\uacc4<\/code> \uc139\uc158\uc740 \uc0c8 \ub3c4\uc2dc\ub97c \uc120\ud0dd\ud560 \ub54c\ub9c8\ub2e4 \ud638\ud154 \ubaa9\ub85d \ud14c\uc774\ube14\uc744 \uc0c8\ub85c \uace0\uce58\ub3c4\ub85d \ud2b8\ub9ac\uac70\ud569\ub2c8\ub2e4.<\/p>\n<p>\ud45c <code>\ud56d\ubaa9<\/code> \ub294 <code>\ubaa9\uc801\uc9c0 \uacf5\uae09\uc790<\/code> \uc544\ub798 <code>\uba54\uc18c\ub4dc<\/code>. \ud14c\uc774\ube14\uc744 \uc0c8\ub85c \uace0\uce58\uba74 \ud574\ub2f9 \ucf54\ub4dc\uac00 \uc2e4\ud589\ub429\ub2c8\ub2e4. \uc6d0\ub798 \ub3c4\uc2dc \ubaa9\ub85d\uacfc \ub9c8\ucc2c\uac00\uc9c0\ub85c \uc11c\ubc84 REST \uc5d4\ub4dc\ud3ec\uc778\ud2b8\ub97c \ud1b5\ud574 \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \ub300\ud55c \ube44\ub3d9\uae30 \ud638\ucd9c\uc744 \ud1b5\ud574 \ud638\ud154\uc744 \uac00\uc838\uc635\ub2c8\ub2e4.<\/p>\n<p>Vue\ub294 \uc5ec\uae30\uc11c \ub9ce\uc740 \ubd80\ubd84\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 \ud14c\uc774\ube14\uc744 \uc0c8\ub85c \uace0\uce58\ub294 \ud638\ucd9c\uc740 \ub370\uc774\ud130\ub97c \uc989\uc2dc \uc218\uc2e0\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. Vue\ub294 REST \ud638\ucd9c\uc774 \ubc18\ud658\ub420 \ub54c\ub9c8\ub2e4 DOM\uc758 \uad00\ub828 \ubd80\ubd84\uc744 \uc790\ub3d9\uc73c\ub85c \ub2e4\uc2dc \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4. \uc6b0\ub9ac\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \ubc14\uc778\ub529\uc744 \uc9c0\uc815\ud558\ub294 \uac83 \uc678\uc5d0\ub294 \ubc30\uc120\uc744 \uc81c\uacf5\ud560 \ud544\uc694\uac00 \uc5c6\uc2b5\ub2c8\ub2e4. <code>\ud56d\ubaa9<\/code> \uadf8\ub9ac\uace0 <code>\ub300\uc0c1 \uacf5\uae09\uc790<\/code>.<\/p>\n<\/div>\n<\/div>\n<div class=\"sect3\">\n<h4 id=\"_completing_the_web_client\">\uc6f9 \ud074\ub77c\uc774\uc5b8\ud2b8 \uc644\uc131\ud558\uae30<\/h4>\n<div class=\"paragraph\">\ud074\ub77c\uc774\uc5b8\ud2b8 \uce21\uc744 \uc644\uc131\ud558\ub824\uba74 \uba87 \uac00\uc9c0 \uc9e7\uc740 \ub2e8\uacc4\ub97c \ub354 \uac70\uccd0\uc57c \ud558\ub294\ub370, Google \uc9c0\ub3c4\ub97c \uc9c0\uc6d0\ud558\ub294 \ubaa8\ub4c8\uc744 \uac00\uc838\uc640\uc11c \ud0a4\ub97c \uc81c\uacf5\ud574\uc57c \ud569\ub2c8\ub2e4. \ud3b8\uc9d1 <code>main.js<\/code>. \uac00\uc838\uc624\uae30 \uc904\uc744 \ucd94\uac00\ud558\uace0 Vue\uc5d0 \uc0c8 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud558\ub3c4\ub85d \uc9c0\uc2dc\ud569\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \ucd5c\uc885 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/div>\n<div>\n<pre class=\"lang:js decode:true\">import config from '.\/config'\r\nimport Vue from 'vue'\r\nimport BootstrapVue from \"bootstrap-vue\"\r\nimport App from '.\/App.vue'\r\nimport \"bootstrap\/dist\/css\/bootstrap.min.css\"\r\nimport \"bootstrap-vue\/dist\/bootstrap-vue.css\"\r\nimport * as VueGoogleMaps from 'vue2-google-maps'\r\n\r\nVue.use(BootstrapVue)\r\n\r\nVue.use(VueGoogleMaps, {\r\n  load: {\r\n    key: config.googleMapsKey\r\n  }\r\n})\r\n\r\nnew Vue({\r\n  el: '#app',\r\n  render: h =&gt; h(App)\r\n})<\/pre>\n<\/div>\n<div class=\"paragraph\">\n<p>\ud30c\uc77c\uc5d0\uc11c Google \uc9c0\ub3c4 API \ud0a4\ub97c \ub85c\ub4dc\ud569\ub2c8\ub2e4. <code>config.js<\/code>. \ud574\ub2f9 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc9c0\uae08\uc740 \uc774 \ud50c\ub808\uc774\uc2a4\ud640\ub354 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:js decode:true\">export default {\r\n  googleMapsKey: ''\r\n}<\/pre>\n<\/div>\n<div class=\"paragraph\">\n<p>\ud504\ub85c\uc81d\ud2b8\ub97c \ub2e4\uc2dc \ube4c\ub4dc(<code>npm \uc2e4\ud589 \ube4c\ub4dc<\/code>). \uc11c\ubc84\ub97c \uc2dc\uc791\ud558\uace0 \uc0ac\uc774\ud2b8\ub97c \ub2e4\uc2dc \ub85c\ub4dc\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \uc2e4\uc81c \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc2dc\uc791\ub418\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"imageblock\">\n<div class=\"content\"><img decoding=\"async\" src=\"https:\/\/raw.githubusercontent.com\/couchbaselabs\/blog-source-code\/master\/Greeley\/0048POI\/images\/RealClientBase.png\" alt=\"Initial Version of Tutorial Client\" \/><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"sect2\">\n<h3 id=\"_the_web_server_code\">\uc6f9 \uc11c\ubc84 \ucf54\ub4dc<\/h3>\n<div class=\"paragraph\">\n<p>\ub2e4\uc74c\uc73c\ub85c \uc11c\ubc84 \uce21\uc744 \uc791\uc131\ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc11c\ubc84\ub294 \uc6f9 \ud398\uc774\uc9c0\ub97c \uc81c\uacf5\ud558\uace0 \ud544\uc694\ud55c REST API\ub97c \ub178\ucd9c\ud569\ub2c8\ub2e4. API\ub294 \ub300\ubd80\ubd84 \ub370\uc774\ud130\ubca0\uc774\uc2a4 \uae30\ub2a5\uc744 \ud3b8\ub9ac\ud558\uac8c \ud328\ud0a4\uc9d5\ud55c \uac83\uc785\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc11c\ubc84 \uc18c\uc2a4\uc5d0\uc11c \uc6d0\ubcf8 <code>app.js<\/code> \uc774\uac78\ub85c.<\/p>\n<pre class=\"lang:js decode:true\">global.Promise = require('bluebird');\r\nrequire('dotenv').config();\r\n\r\nconst express = require('express');\r\n\r\nconst debug = require('debug')('poi:server');\r\nconst path = require('path');\r\nconst favicon = require('serve-favicon');\r\nconst logger = require('morgan');\r\nconst cookieParser = require('cookie-parser');\r\nconst bodyParser = require('body-parser');\r\nconst http = require('http');\r\nconst https = require('https');\r\nconst fs = require('fs');\r\n\r\nconst couchbase = require('couchbase');\r\nconst cluster = new couchbase.Cluster(process.env.CLUSTER);\r\ncluster.authenticate(process.env.CLUSTER_USER, process.env.CLUSTER_PASSWORD);\r\n\r\nconst app = express();\r\n\r\napp.locals.couchbase = couchbase;\r\napp.locals.cluster = cluster;\r\napp.locals.travel = cluster.openBucket('travel-sample');\r\napp.locals.eventing = cluster.openBucket('eventing');\r\n\r\napp.use(favicon(path.join(__dirname, 'images\/favicon.ico')));\r\n\r\napp.use(logger('dev'));\r\napp.use(bodyParser.json());\r\napp.use(bodyParser.urlencoded({ extended: false }));\r\napp.use(cookieParser());\r\n\r\napp.use(function(req, res, next) {\r\n  res.header(\"Access-Control-Allow-Origin\", \"*\");\r\n  res.header(\"Access-Control-Allow-Headers\", \"Origin, X-Requested-With, Content-Type, Accept\");\r\n  next();\r\n});\r\n\r\napp.use(express.static(path.join(__dirname, '..\/client')));\r\n\r\nconst records = require('.\/routes\/records');\r\napp.use('\/records', records);\r\nconst events = require('.\/routes\/events');\r\napp.use('\/events', events);\r\n\r\n\/\/ catch 404 and forward to error handler\r\napp.use(function(req, res, next) {\r\n  console.dir(req);\r\n  console.dir(res);\r\n  let err = new Error('Not Found');\r\n  err.status = 404;\r\n  next(err);\r\n});\r\n\r\n\/\/ error handler\r\napp.use(function(err, req, res, next) {\r\n  \/\/ set locals, only providing error in development\r\n  res.locals.message = err.message;\r\n  res.locals.error = req.app.get('env') === 'development' ? err : {};\r\n\r\n  \/\/ render the error page\r\n  res.status(err.status || 500);\r\n  res.render('error');\r\n});\r\n\r\n\/\/ HTTP server\r\n\r\nconst http_port = process.env.HTTP_PORT;\r\nconst http_server = http.createServer(app);\r\n\r\nhttp_server.listen(http_port);\r\n\r\nhttp_server.on('error', onError);\r\nhttp_server.on('listening', onListening);\r\n\r\n\/\/ HTTPS server\r\n\r\nconst options = {\r\n  key: fs.readFileSync(path.join('ssl', 'key.pem')),\r\n  cert: fs.readFileSync(path.join('ssl', 'cert.pem'))\r\n};\r\n\r\nconst https_port = process.env.HTTPS_PORT;\r\nconst https_server = https.createServer(options, app);\r\n\r\nhttps_server.listen(https_port);\r\n\r\nhttps_server.on('error', onError);\r\nhttps_server.on('listening', onListening);\r\n\r\n\/**\r\n * Event listener for HTTP\/S server \"error\" event.\r\n *\/\r\n\r\nfunction onError(error) {\r\n  if (error.syscall !== 'listen') {\r\n    throw error;\r\n  }\r\n\r\n  let bind = typeof port === 'string'\r\n    ? 'Pipe ' + port\r\n    : 'Port ' + port;\r\n\r\n  \/\/ handle specific listen errors with friendly messages\r\n  switch (error.code) {\r\n    case 'EACCES':\r\n      console.error(bind + ' requires elevated privileges');\r\n      process.exit(1);\r\n      break;\r\n    case 'EADDRINUSE':\r\n      console.error(bind + ' is already in use');\r\n      process.exit(1);\r\n      break;\r\n    default:\r\n      throw error;\r\n  }\r\n}\r\n\r\n\/**\r\n * Event listener for HTTP\/S server \"listening\" event.\r\n *\/\r\n\r\nfunction onListening() {\r\n  let addr = this.address();\r\n  let bind = typeof addr === 'string'\r\n    ? 'pipe ' + addr\r\n    : 'port ' + addr.port;\r\n  debug('Listening on ' + bind);\r\n}<\/pre>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc8fc\uc694 \ucc28\uc774\uc810\uc740 Couchbase \uc11c\ubc84 \ub178\ub4dc \ud074\ub77c\uc774\uc5b8\ud2b8 \uc124\uc815\uacfc REST \uc5d4\ub4dc\ud3ec\uc778\ud2b8\uc5d0 \ub300\ud55c \uacbd\ub85c\uc758 \ubc30\uc120\uc785\ub2c8\ub2e4. \uadf8 \uc678\uc5d0\ub3c4 http\uc640 https\ub97c \ud1b5\ud55c \uc11c\ube44\uc2a4\uc640 \uac19\uc740 \ub2e4\ub978 \ucd94\uac00 \ucf54\ub4dc\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ubd80\ubd84\uc740 \ub2e4\ub8e8\uc9c0 \uc54a\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"sect3\">\n<h4 id=\"_connecting_to_couchbase_server\">\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uc11c\ubc84\uc5d0 \uc5f0\uacb0<\/h4>\n<div class=\"paragraph\">\n<p>\ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \uc5f0\uacb0\ud558\uae30 \uc704\ud55c \ub450 \uac1c\uc758 \ucf54\ub4dc \ube14\ub85d\uc740 \ub9e4\uc6b0 \uac04\ub2e8\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:js decode:true\">const couchbase = require('couchbase');\r\nconst cluster = new couchbase.Cluster(process.env.CLUSTER);\r\ncluster.authenticate(process.env.CLUSTER_USER, process.env.CLUSTER_PASSWORD);\r\n\r\n...\r\n\r\napp.locals.couchbase = couchbase;\r\napp.locals.cluster = cluster;\r\napp.locals.travel = cluster.openBucket('travel-sample');\r\napp.locals.eventing = cluster.openBucket('eventing');<\/pre>\n<\/div>\n<div class=\"paragraph\">\n<p>\ucc98\uc74c \uc138 \uc904\uc740 Couchbase \ub178\ub4dc \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c \uac00\uc838\uc624\uace0, \ub370\uc774\ud130\ubca0\uc774\uc2a4 \ub178\ub4dc \ud074\ub7ec\uc2a4\ud130\ub97c \ub098\ud0c0\ub0b4\ub294 \uc0c8 \ud074\ub7ec\uc2a4\ud130 \uac1d\uccb4\ub97c \uc0dd\uc131\ud558\uace0, \ud574\ub2f9 \ud074\ub7ec\uc2a4\ud130\uc5d0 \uc778\uc99d\ud569\ub2c8\ub2e4. \uadf8\ub7ec\uba74 \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \ub300\ud55c \uc5f0\uacb0\uc774 \uc2dc\uc791\ub429\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\ud3b8\uc758\ub97c \uc704\ud574 \ud074\ub77c\uc774\uc5b8\ud2b8 \ubc0f \ud074\ub7ec\uc2a4\ud130 \uac1c\uccb4\uc5d0 \ub300\ud55c \ucc38\uc870\ub97c \ub2e4\uc74c \uc8fc\uc18c\uc5d0 \ucd94\uac00\ud569\ub2c8\ub2e4. <code>app.locals<\/code>. \ub530\ub77c\uc11c \uc804 \uc138\uacc4\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\ub9c8\uc9c0\ub9c9\uc73c\ub85c \uc774 \ucf54\ub4dc\ub294 \ub450 \ubc84\ud0b7\uc5d0 \ub300\ud55c \uc5f0\uacb0\uc744 \uc124\uc815\ud558\uace0 \uc800\uc7a5\ud569\ub2c8\ub2e4. <a title=\"https:\/\/developer.couchbase.com\/documentation\/server\/current\/architecture\/core-data-access-buckets.html\" href=\"https:\/\/developer.couchbase.com\/documentation\/server\/current\/architecture\/core-data-access-buckets.html\">\ubc84\ud0b7<\/a> \ub294 \uce74\uc6b0\uce58\ubca0\uc774\uc2a4\uc758 \ub192\uc740 \uc218\uc900\uc758 \uc870\uc9c1 \uad6c\uc870\uc785\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uccab \ubc88\uc9f8 \ubc84\ud0b7\uc740 Couchbase Server \uc124\uce58\uc640 \ud568\uaed8 \uc81c\uacf5\ub418\ub294 \uc0d8\ud50c \ub370\uc774\ud130\ub85c \ucc44\uc6b0\uaca0\uc2b5\ub2c8\ub2e4. \ub450 \ubc88\uc9f8 \ubc84\ud0b7\uc758 \uacbd\uc6b0, \uc5ec\uae30\uc11c\ub294 \uc57d\uac04 \uc218\uc815\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uba54\ud0c0\ub370\uc774\ud130 \ubc84\ud0b7\uc774 \ud544\uc694\ud569\ub2c8\ub2e4. <a title=\"https:\/\/developer.couchbase.com\/documentation\/server\/5.5\/eventing\/eventing-overview.html\" href=\"https:\/\/developer.couchbase.com\/documentation\/server\/5.5\/eventing\/eventing-overview.html\">\uc774\ubca4\ud2b8 \uc11c\ube44\uc2a4<\/a>. \uc55e\uc73c\ub85c \uc0b4\ud3b4\ubcf4\uaca0\uc9c0\ub9cc \uae30\ubcf8 \ubc84\ud0b7\uc774 \uc544\ub2cc \ub2e4\ub978 \uacf3\uc5d0 \uc800\uc7a5\ud574\uc57c \ud558\ub294 \uba87 \uac00\uc9c0 \ucd94\uac00 \ubb38\uc11c\ub9cc \uc800\uc7a5\ud558\uba74 \ub429\ub2c8\ub2e4. \uc138 \ubc88\uc9f8 \ubc84\ud0b7\uc744 \ub9cc\ub4dc\ub294 \ub300\uc2e0 \uc774\ubca4\ud2b8 \ubc1c\uc0dd \ub370\uc774\ud130\uc640 \ud568\uaed8 \ub123\uc5c8\uc2b5\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc73c\ub85c \ud504\ub85c\ub355\uc158 \ud658\uacbd\uc5d0\uc11c\ub294 \uc774 \ub2e8\ucd95\ud0a4\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<\/div>\n<div class=\"sect3\">\n<h4 id=\"_static_files_and_api_routes\">\uc815\uc801 \ud30c\uc77c \ubc0f API \uacbd\ub85c<\/h4>\n<div class=\"paragraph\">\n<p>\ud074\ub77c\uc774\uc5b8\ud2b8 \ucf54\ub4dc\uc5d0\uc11c \uad6c\ucd95\ud55c \uc815\uc801 \ud398\uc774\uc9c0\ub97c \uc81c\uacf5\ud558\uace0 \uc11c\ubc84 \ub370\uc774\ud130 API\ub97c \uad6c\uc131\ud558\uae30 \uc704\ud574 Express\uc5d0 \uc9c0\uc2dc\ud574\uc57c \ud558\ub294 \ucf54\ub4dc\uac00 \uba87 \uc904\ub9cc \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:js decode:true\">app.use(express.static(path.join(__dirname, '..\/client')));\r\n\r\nconst records = require('.\/routes\/records');\r\napp.use('\/records', records);\r\nconst events = require('.\/routes\/events');\r\napp.use('\/events', events);<\/pre>\n<\/div>\n<div class=\"paragraph\">\n<p>\ubcf4\uc77c\ub7ec \ud50c\ub808\uc774\ud2b8 <code>index.html<\/code> \uc571\uc758 \ud648 \ud398\uc774\uc9c0\uc5d0 <code>dist<\/code> \ub97c \ubaa8\ub4e0 \ud30c\uc77c \uacbd\ub85c\uc5d0 \ucd94\uac00\ud569\ub2c8\ub2e4. \uc989, \uc815\uc801 \ud30c\uc77c\uc740 \uc2e4\uc81c\ub85c \ub2e4\uc74c\uacfc \uac19\uc740 \ub8e8\ud2b8 \ub514\ub809\ud130\ub9ac\uc5d0\uc11c \uc81c\uacf5\ub429\ub2c8\ub2e4. <code>\/\ud074\ub77c\uc774\uc5b8\ud2b8\/dist<\/code>.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\ub370\uc774\ud130 API\ub97c \ub450 \uac1c\uc758 \uadf8\ub8f9\uc73c\ub85c \ubd84\ub9ac\ud558\uc5ec \uc77c\ubc18\uc801\uc778 <code>\uacbd\ub85c<\/code> \ud558\uc704 \ub514\ub809\ud1a0\ub9ac\uc5d0 \uc788\uc2b5\ub2c8\ub2e4. \ub85c \uc2dc\uc791\ud558\ub294 \uc5d4\ub4dc\ud3ec\uc778\ud2b8\uac00 \uc788\uc2b5\ub2c8\ub2e4. <code>\ub808\ucf54\ub4dc<\/code>. \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uac80\uc0c9\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uadf8\ub9ac\uace0 <code>\uc774\ubca4\ud2b8<\/code> \uacbd\ub85c\ub294 \uace0\uc720\ud569\ub2c8\ub2e4. \uc5d4\ub4dc\ud3ec\uc778\ud2b8\ub294 \uc6f9 \ud074\ub77c\uc774\uc5b8\ud2b8\uc640 \uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uc774\ubca4\ud2b8 \uc11c\ube44\uc2a4 \ubaa8\ub450\uc5d0\uc11c \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc774\uc81c <code>\ub808\ucf54\ub4dc<\/code> \ucf54\ub4dc\ub97c \uba3c\uc800 \uc785\ub825\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<\/div>\n<div class=\"sect3\">\n<h4>\ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc561\uc138\uc2a4 API<\/h4>\n<pre class=\"lang:js decode:true\">const express = require('express');\r\nconst router = express.Router();\r\n\r\nrouter.get('\/destinations', async function(req, res, next) {\r\n  let couchbase = req.app.locals.couchbase;\r\n  let travel = req.app.locals.travel;\r\n  let queryPromise = Promise.promisify(travel.query, { context: travel });\r\n\r\n  let query = `SELECT DISTINCT airport.city as name\r\n              FROM \\`travel-sample\\` airport\r\n              INNER JOIN \\`travel-sample\\` hotel\r\n              USE HASH(probe)\r\n              ON hotel.city = airport.city\r\n              WHERE airport.type = 'airport'\r\n              AND hotel.type = 'hotel';`;\r\n\r\n  query = couchbase.N1qlQuery.fromString(query);\r\n\r\n  await queryPromise(query)\r\n  .then(rows =&gt; res.json(rows))\r\n  .catch(err =&gt; {\r\n    console.log(err);\r\n    res.status(500).send({ error: err });\r\n  });\r\n});\r\n\r\nrouter.get('\/hotels\/byCity\/:id', async function(req, res, next) {\r\n  let couchbase = req.app.locals.couchbase;\r\n  let travel = req.app.locals.travel;\r\n  let queryPromise = Promise.promisify(travel.query, { context: travel });\r\n\r\n  let query = `SELECT hotel.name, hotel.address, airport.airportname, airport.icao, hotel.geo\r\n              FROM \\`travel-sample\\` airport\r\n              INNER JOIN \\`travel-sample\\` hotel\r\n                ON hotel.type = 'hotel' AND hotel.city = airport.city\r\n              WHERE airport.type = 'airport'\r\n                AND airport.city = '${req.params.id}'\r\n              LIMIT 5;`;\r\n\r\n  query = couchbase.N1qlQuery.fromString(query);\r\n\r\n  await queryPromise(query)\r\n  .then(rows =&gt; res.json(rows))\r\n  .catch(err =&gt; {\r\n    console.log(err);\r\n    res.status(500).send({ error: err });\r\n  });\r\n});\r\n\r\nrouter.post('\/select\/geo', async function(req, res, next) {\r\n  let couchbase = req.app.locals.couchbase;\r\n  let travel = req.app.locals.travel;\r\n  let queryPromise = Promise.promisify(travel.query, { context: travel });\r\n\r\n  let location = JSON.stringify(req.body);\r\n\r\n  let query = `UPSERT INTO \\`travel-sample\\` (KEY, VALUE) VALUES('trigger', ${location})`;\r\n\r\n  query = couchbase.N1qlQuery.fromString(query);\r\n\r\n  await queryPromise(query)\r\n  .then(response =&gt; res.json(response))\r\n  .catch(err =&gt; {\r\n    console.log(err);\r\n    res.status(500).send({ error: err });\r\n  });\r\n});\r\n\r\nmodule.exports = router;<\/pre>\n<div class=\"paragraph\">\n<p>\uc5ec\uae30\uc5d0\ub294 \uc138 \uac00\uc9c0 \uacbd\ub85c\uac00 \uc815\uc758\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4, <code>\/\ubaa9\uc801\uc9c0<\/code>, <code>\/hotels\/byCity\/:id<\/code>\ubc0f <code>\/\uc120\ud0dd\/\uc9c0\uc5ed<\/code>. \ubaa8\ub450 \uae30\ubcf8 \uad6c\uc870\ub294 \ub3d9\uc77c\ud569\ub2c8\ub2e4. \ub370\uc774\ud130\ubca0\uc774\uc2a4 \ucc38\uc870\ub97c \uac00\uc838\uc624\uace0, \ube14\ub8e8\ubc84\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \ucffc\ub9ac \uba54\uc11c\ub4dc\uc758 \ud504\ub85c\ubbf8\uc2a4 \ubc84\uc804\uc744 \ub9cc\ub4e4\uace0, \ucffc\ub9ac \uba54\uc11c\ub4dc\uc5d0 \ub300\ud55c <a title=\"https:\/\/www.couchbase.com\/n1ql\" href=\"https:\/\/www.couchbase.com\/blog\/ko\/n1ql\/\">N1QL<\/a> \ucffc\ub9ac\ub97c \uc2e4\ud589\ud558\uace0 \uacb0\uacfc\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uac00\uc7a5 \uac04\ub2e8\ud55c \ucffc\ub9ac\ubd80\ud130 \uc2dc\uc791\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<\/div>\n<div class=\"sect3\">\n<h4 id=\"_n1ql_queries\">N1QL \ucffc\ub9ac<\/h4>\n<div class=\"paragraph\">\n<p>\uc6b0\ub9ac\ub294 <code>\/\uc120\ud0dd\/\uc9c0\uc5ed<\/code> \uc5d4\ub4dc\ud3ec\uc778\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790\uac00 \ud604\uc7ac \uc120\ud0dd\ud55c \ud638\ud154\uc744 \uc800\uc7a5\ud569\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \ucffc\ub9ac \ubd84\uc11d \uacb0\uacfc\uc785\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:default decode:true\">UPSERT INTO \\`travel-sample\\` (KEY, VALUE) VALUES('trigger', ${location})<\/pre>\n<\/div>\n<div class=\"paragraph\">\n<p><code>UPSERT<\/code> \uc740 \ubb38\uc11c\ub97c \uc218\uc815\ud558\uac70\ub098 \ubb38\uc11c\uac00 \uc5c6\ub294 \uacbd\uc6b0 \uc0c8\ub85c \ub9cc\ub4ed\ub2c8\ub2e4. \uc120\ud0dd\ud55c \ud638\ud154\uc758 \uc9c0\ub9ac\uc801 \uc704\uce58\ub97c \ubb38\uc11c\uc5d0 \ub2e4\uc74c\uacfc \uac19\uc740 ID\ub85c \uc800\uc7a5\ud569\ub2c8\ub2e4. <code>\ud2b8\ub9ac\uac70<\/code>. \uc774\uc0c1\ud558\uac8c \ub4e4\ub9b4 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \ub098\uc911\uc5d0 \uc774\ubca4\ud2b8 \ucf54\ub4dc\uc5d0 \ub300\ud574 \uc124\uba85\ud558\uba74 \ub354 \uc774\ud574\uac00 \uc26c\uc6b8 \uac83\uc785\ub2c8\ub2e4. \uc6b0\ub9ac\uac00 \uc815\ub9d0\ub85c \uad00\uc2ec \uc788\ub294 \uac83\uc740 \ud638\ud154 \uc704\uce58\uac00 \uc544\ub2c8\ub77c \uadfc\ucc98\uc758 \uad00\uc2ec \uc9c0\uc810\uc785\ub2c8\ub2e4. \uc774 \ubb38\uc11c\ub294 \uc774\ub7ec\ud55c \uad00\uc2ec \uc9c0\uc810\uc744 \uac80\uc0c9\ud558\ub294 \uc2dc\ud000\uc2a4\ub97c \uc124\uc815\ud569\ub2c8\ub2e4. \ub530\ub77c\uc11c \ubb38\uc11c\ub97c \ud638\ucd9c\ud558\ub294 \uc774\uc720\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. <code>\ud2b8\ub9ac\uac70<\/code>.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\ub2e4\uc74c\uc740 \uc0dd\uc131\ub41c \ubb38\uc11c\uc758 \uc608\uc785\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"listingblock\">\n<div class=\"title\">\n<p><strong>\ud2b8\ub9ac\uac70<\/strong><\/p>\n<pre class=\"lang:js decode:true\">{\r\n  \"accuracy\": \"APPROXIMATE\",\r\n  \"lat\": 43.9397954,\r\n  \"lon\": 4.805895400000054\r\n}<\/pre>\n<\/div>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc774\ud574\ud558\ub824\uba74 <code>\/hotels\/byCity\/:id<\/code> \ucffc\ub9ac\ub97c \uc0ac\uc6a9\ud558\ub824\uba74 \uba3c\uc800 \uba87 \uac00\uc9c0 \uc608\uc81c \ubb38\uc11c\ub97c \uc0b4\ud3b4\ubcf4\uc138\uc694.<\/p>\n<\/div>\n<div class=\"listingblock\">\n<div class=\"title\">\n<p><strong><strong>hotel_1359<\/strong><\/strong><\/p>\n<pre class=\"lang:js decode:true\">{\r\n  \"address\": \"13-15 Avenue Monclar\",\r\n  \"alias\": null,\r\n  \"checkin\": null,\r\n  \"checkout\": null,\r\n  \"city\": \"Avignon\",\r\n  \"country\": \"France\",\r\n  \"description\": \"Family run hotel overlooking a flowered garden, within a private carpark. Internet wi-fi available in the whole building. Recently renovated rooms with the typical Provencal style. 7 languages spoken. Private taxi service.\",\r\n  \"directions\": \"just behind the central station, which faces the main avenue of downtown and the bus station\",\r\n  \"email\": null,\r\n  \"fax\": \"04 26 23 68 31\",\r\n  \"free_breakfast\": true,\r\n  \"free_internet\": false,\r\n  \"free_parking\": true,\r\n  \"geo\": {\r\n    \"accuracy\": \"APPROXIMATE\",\r\n    \"lat\": 43.9397954,\r\n    \"lon\": 4.805895400000054\r\n  },\r\n  \"id\": 1359,\r\n  \"name\": \"Avignon Hotel Monclar\",\r\n  \"pets_ok\": true,\r\n  \"phone\": \"+33 4 90 86 20 14\",\r\n  \"price\": \"Double room with ensuite shower and bathroom \u20ac30-60, studios and apartments from \u20ac75, breakfast \u20ac7 can be taken in the garden in season 7:30AM 11AM\",\r\n  \"public_likes\": [\"Vicente Williamson\"],\r\n  \"reviews\": [...],\r\n  \"state\": \"Provence-Alpes-C\u00f4te d'Azur\",\r\n  \"title\": \"Avignon\",\r\n  \"tollfree\": null,\r\n  \"type\": \"hotel\",\r\n  \"url\": \"https:\/\/hotel-monclar.com\/en\",\r\n  \"vacancy\": true\r\n}<\/pre>\n<\/div>\n<\/div>\n<div class=\"listingblock\">\n<div class=\"title\">\n<p><strong><strong>airport_1361<\/strong><\/strong><\/p>\n<pre class=\"lang:default decode:true\">{\r\n  \"airportname\": \"Caumont\",\r\n  \"city\": \"Avignon\",\r\n  \"country\": \"France\",\r\n  \"faa\": \"AVN\",\r\n  \"geo\": {\r\n    \"alt\": 124,\r\n    \"lat\": 43.9073,\r\n    \"lon\": 4.901831\r\n  },\r\n  \"icao\": \"LFMV\",\r\n  \"id\": 1361,\r\n  \"type\": \"airport\",\r\n  \"tz\": \"Europe\/Paris\"\r\n}<\/pre>\n<\/div>\n<\/div>\n<div class=\"paragraph\">\n<p>\ud638\ud154 \ud14c\uc774\ube14\uc5d0\ub294 \ud638\ud154 \uc774\ub984, \uc8fc\uc18c, \uc9c0\ub9ac\uc801 \uc704\uce58, \uacf5\ud56d \uc774\ub984 \ubc0f \uacf5\ud56d \ucf54\ub4dc\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \ub2f9\uc5f0\ud788 \ub450 \ubb38\uc11c\uc758 \ub370\uc774\ud130\ub97c \uacb0\ud569\ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574 <code>\ub0b4\ubd80 \uac00\uc785<\/code>. \ucffc\ub9ac\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:default decode:true\">SELECT hotel.name, hotel.address, airport.airportname, airport.icao, hotel.geo\r\nFROM `travel-sample` airport\r\nINNER JOIN `travel-sample` hotel\r\n  ON hotel.type = 'hotel' AND hotel.city = airport.city\r\nWHERE airport.type = 'airport'\r\n  AND airport.city = '${req.params.id}'\r\nLIMIT 5;<\/pre>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc0b4\ud3b4\ubcf4\uba74 \ub3d9\uc77c\ud55c \ubc84\ud0b7\uc758 \ubb38\uc11c\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc870\uc778\uc744 \uc218\ud589\ud560 \uc218 \uc788\uc74c\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub354 \uba85\ud655\ud558\uac8c \ud558\uae30 \uc704\ud574 \ubcc4\uce6d\uc744 \uc0ac\uc6a9\ud588\uc2b5\ub2c8\ub2e4. \uac01 \ubb38\uc11c\uc758 \ub3c4\uc2dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc870\uc778 \uc870\uac74\uc744 \uad6c\uc131\ud569\ub2c8\ub2e4. \ub610\ud55c \ubb38\uc11c <code>\uc720\ud615<\/code>\ub97c \uc870\uc778 \uc870\uac74\uacfc <code>\uc5b4\ub514<\/code> \uc808\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4. \uc870\uc778 \uc870\uac74\uc740 \ub9e4\uc6b0 \uc815\uad50\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c \ub0b4\uc6a9\uc744 \uc77d\uc5b4\ubcf4\uc138\uc694. <a title=\"https:\/\/www.couchbase.com\/blog\/ansi-join-support-n1ql\/\" href=\"https:\/\/www.couchbase.com\/blog\/ko\/ansi-join-support-n1ql\/\">\ube14\ub85c\uadf8<\/a> \uac8c\uc2dc\ubb3c\uc5d0\uc11c \uc790\uc138\ud55c \ub0b4\uc6a9\uacfc \uc608\ub97c \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\ub9c8\uc9c0\ub9c9\uc73c\ub85c \ucc98\uc74c\uc5d0 \ub3c4\uc2dc \ubaa9\ub85d\uc744 \uc5b4\ub5bb\uac8c \ub9cc\ub4e4\uc5c8\ub294\uc9c0 \uc0b4\ud3b4\ubd05\uc2dc\ub2e4. \ub2e4\uc74c\uc740 <code>\/\ubaa9\uc801\uc9c0<\/code>\uc5d4\ub4dc\ud3ec\uc778\ud2b8.<\/p>\n<pre class=\"lang:default decode:true\">SELECT DISTINCT airport.city as name\r\nFROM `travel-sample` airport\r\nINNER JOIN `travel-sample` hotel\r\nUSE HASH(probe)\r\n  ON hotel.city = airport.city\r\nWHERE airport.type = 'airport'\r\n  AND hotel.type = 'hotel';<\/pre>\n<\/div>\n<div class=\"paragraph\">\n<p>\ubc18\ud658\ub418\ub294 \uc720\uc77c\ud55c \uacb0\uacfc\ub294 \ub3c4\uc2dc \uc774\ub984 \ubaa9\ub85d\uc785\ub2c8\ub2e4. \uc774 \uacbd\uc6b0 \ub0b4\ubd80 \uc870\uc778\uc744 \ud544\ud130\ub85c \ud6a8\uacfc\uc801\uc73c\ub85c \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uacf5\ud56d \ub3c4\uc2dc\uc640 \ud638\ud154 \ub3c4\uc2dc\ub97c \uc77c\uce58\uc2dc\ud0a4\uba74 \ub450 \ub3c4\uc2dc\uac00 \ubaa8\ub450 \uc788\ub294 \ub3c4\uc2dc \ubaa9\ub85d\ub9cc \ubc18\ud658\ub429\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\ub0b4\ubd80 \uc870\uc778\uc740 \uc54c\uace0\ub9ac\uc998\uc801\uc73c\ub85c \ub450 \uac00\uc9c0 \uc811\uadfc \ubc29\uc2dd\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uccab \ubc88\uc9f8\ub85c \uc0b4\ud3b4\ubcf8 \uc870\uc778\uc740 \uae30\ubcf8 \uc911\ucca9 \ub8e8\ud504 \uc870\uc778\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc774 \ub9c8\uc9c0\ub9c9 \uc608\ub294 \uc778\uba54\ubaa8\ub9ac \ud574\uc2dc \ud14c\uc774\ube14\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc774\ub807\uac8c \ud558\uba74 \ud2b9\ud788 \ub450 \ub370\uc774\ud130 \uc9d1\ud569 \uc911 \ud558\ub098\uac00 \uc791\uc740 \uacbd\uc6b0 \uc870\uc778 \uc18d\ub3c4\ub97c \ud06c\uac8c \ub192\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc5ec\uae30\uc11c\ub294 <a title=\"https:\/\/developer.couchbase.com\/documentation\/server\/current\/n1ql\/n1ql-language-reference\/from.html#story-h2-10\" href=\"https:\/\/developer.couchbase.com\/documentation\/server\/current\/n1ql\/n1ql-language-reference\/from.html#story-h2-10\">\"USE HASH()\"<\/a> \ud78c\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \ucffc\ub9ac \ucd5c\uc801\ud654\ub97c \uc6d0\ud558\ub294 \ubc29\uc2dd\uc744 N1QL\uc5d0 \uc54c\ub824\uc90d\ub2c8\ub2e4. \"\ud504\ub85c\ube0c\" \uce21\uba74\uacfc \"\ube4c\ub4dc\" \uce21\uba74\uc774 \uc788\uc2b5\ub2c8\ub2e4. \ud574\uc2dc \ud14c\uc774\ube14\uc740 \ube4c\ub4dc \ucabd \ub370\uc774\ud130\uc5d0\uc11c \uc791\uc131\ub429\ub2c8\ub2e4. \uc870\uc778\uc740 \ud504\ub85c\ube0c \ucabd \ub370\uc774\ud130\uc5d0\uc11c \uc870\ud68c\ub97c \uc218\ud589\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc704\uc5d0\uc11c \uc81c\uacf5\ud55c \ud78c\ud2b8\ub294 \uc774 \uacbd\uc6b0 \ud504\ub85c\ube0c \uce21\uc5d0 \ud638\ud154 \ub370\uc774\ud130\ub97c \uc0ac\uc6a9\ud558\ub3c4\ub85d N1QL\uc5d0 \uc9c0\uc2dc\ud569\ub2c8\ub2e4. \uc989, \uacf5\ud56d \ub370\uc774\ud130\uc5d0\uc11c \ud14c\uc774\ube14\uc744 \uad6c\ucd95\ud55c \ub2e4\uc74c \ud638\ud154 \ub370\uc774\ud130\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud574\uc2dc \uc870\ud68c\ub97c \uc218\ud589\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc774\uc804\uc5d0 \ud574\ubcf4\uc9c0 \uc54a\uc558\ub2e4\uba74 \uc6f9 \uad00\ub9ac \ucf58\uc194\uc758 \uc77c\ubd80\uc778 Couchbase Server \ucffc\ub9ac \uc6cc\ud06c\ubca4\uce58\uc5d0\uc11c \uc774\ub7ec\ud55c \ucffc\ub9ac\ub97c \uc9c1\uc811 \uc0ac\uc6a9\ud574 \ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n<\/div>\n<\/div>\n<div class=\"sect3\">\n<h4 id=\"_server_sent_events\">\uc11c\ubc84 \uc804\uc1a1 \uc774\ubca4\ud2b8<\/h4>\n<div class=\"paragraph\">\n<p>\uc5d0 \ub300\ud55c \uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108 \uc124\uc815\uc740 \uc774\ubbf8 \uc5b8\uae09\ud588\uc2b5\ub2c8\ub2e4. <a title=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Server-sent_events\/Using_server-sent_events\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Server-sent_events\/Using_server-sent_events\">\uc11c\ubc84 \uc804\uc1a1 \uc774\ubca4\ud2b8<\/a> \ub97c \ud074\ub77c\uc774\uc5b8\ud2b8 \uce21\uc5d0 \ud45c\uc2dc\ud569\ub2c8\ub2e4. \uc774 \ub450 \uc5d4\ub4dc\ud3ec\uc778\ud2b8\ub294 \uc11c\ubc84\uc5d0 \ubb34\uc5c7\uc774 \ud544\uc694\ud55c\uc9c0 \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:js decode:true\">const express = require('express');\r\nconst router = express.Router();\r\nconst sse = require('sse-channel');\r\n\r\nconst poi = new sse();\r\n\r\nrouter.get('\/poi', (req, res) =&gt; poi.addClient(req, res));\r\n\r\nrouter.post('\/poi', async function(req, res, next) {\r\n  res.send('');\r\n\r\n  let msg = { event: 'poi' };\r\n\r\n  msg.data = JSON.stringify(req.body);\r\n\r\n  poi.send(msg);\r\n});\r\n\r\nmodule.exports = router;<\/pre>\n<\/div>\n<div class=\"paragraph\">\n<p>\"\uac00\uc838\uc624\uae30\" \ubc84\uc804\uc758 <code>poi<\/code> \uc5d4\ub4dc\ud3ec\uc778\ud2b8\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \ud638\ucd9c\ub420 \ub54c <code>\uc774\ubca4\ud2b8 \uc18c\uc2a4<\/code> \uac00 \uad6c\uc131\ub429\ub2c8\ub2e4. \ud638\ucd9c\uc790\ub97c \ud074\ub77c\uc774\uc5b8\ud2b8\ub85c \ucd94\uac00\ud558\uae30\ub9cc \ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc800\ud76c\ub294 '\ud3ec\uc2a4\ud2b8' \ubc84\uc804\uc744 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0 \ub370\uc774\ud130\ub97c \uc804\uc1a1\ud558\ub294 \uc911\uac04 \ub2e8\uacc4\ub85c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 <code>res.send('');<\/code> \uc904\uc5d0\uc11c \uc791\ub3d9 \ubc29\uc2dd\uc5d0 \ub300\ud55c \ud78c\ud2b8\ub97c \uc5bb\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ubca4\ud2b8 \ucf54\ub4dc\uc5d0\uc11c\ub294 N1QL cURL \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc774 \uc5d4\ub4dc\ud3ec\uc778\ud2b8\ub85c \ub370\uc774\ud130\ub97c \ud478\uc2dc\ud569\ub2c8\ub2e4. \ube48 \uc751\ub2f5\uc740 \ud574\ub2f9 \ud2b8\ub79c\uc7ad\uc158\uc744 \uc885\ub8cc\ud558\uae30 \uc704\ud55c \uac83\uc785\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uadf8\ub7f0 \ub2e4\uc74c \uc11c\ubc84\ub294 \ub370\uc774\ud130\ub97c \uc218\uc2e0 \uc911\uc778 \ubaa8\ub4e0 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0 \uc804\ub2ec\ud569\ub2c8\ub2e4. \ub354 \uc790\uc138\ud55c \ub0b4\uc6a9\uc774 \uc788\uc2b5\ub2c8\ub2e4. \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uace0 \uc2f6\uc73c\uc2dc\ub2e4\uba74 <a title=\"https:\/\/www.html5rocks.com\/en\/tutorials\/eventsource\/basics\/\" href=\"https:\/\/www.html5rocks.com\/en\/tutorials\/eventsource\/basics\/\">\uc774 \ubb38\uc11c<\/a> \uc5d0\ub294 \uc88b\uc740 \uc815\ubcf4\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<\/div>\n<div class=\"sect3\">\n<h4 id=\"_finishing_the_server\">\uc11c\ubc84 \uc644\ub8cc<\/h4>\n<div class=\"paragraph\">\n<p>\ud504\ub85c\uc81d\ud2b8\uc758 \uc11c\ubc84 \uce21\uc744 \uc644\uc131\ud558\ub824\uba74 \ud558\uc704 \ub514\ub809\ud130\ub9ac\ub97c \ub9cc\ub4ed\ub2c8\ub2e4. <code>\uacbd\ub85c<\/code> \uc11c\ubc84 \ub514\ub809\ud130\ub9ac \uc544\ub798\uc5d0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\ubcf5\uc0ac <code>\ub808\ucf54\ub4dc<\/code> \uc704\uc758 \ucf54\ub4dc\ub97c \uacbd\ub85c \uc544\ub798\uc758 \ud30c\uc77c\uc5d0 <code>records.js<\/code>. \ubcf5\uc0ac <code>\uc774\ubca4\ud2b8<\/code> \ub77c\ub294 \ud30c\uc77c\uc5d0 \uc704\uc758 \ucf54\ub4dc\ub97c <code>events.js<\/code>. \ub9c8\uc9c0\ub9c9\uc73c\ub85c \uc11c\ubc84 \ub514\ub809\ud130\ub9ac \uc790\uccb4\uc5d0 \ub2e4\uc74c\uacfc \uac19\uc740 \uc774\ub984\uc758 \uc0c8 \ud30c\uc77c\uc744 \ub9cc\ub4ed\ub2c8\ub2e4. <code>.env<\/code>. \uc5ec\uae30\uc5d0 \ub2e4\uc74c \uad6c\uc131 \ub9e4\uac1c\ubcc0\uc218\ub97c \ubd99\uc5ec\ub123\uace0 \uc800\uc7a5\ud569\ub2c8\ub2e4. (\ubb3c\ub860 \ud544\uc694\uc5d0 \ub530\ub77c \uc124\uc815\uc744 \ubcc0\uacbd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.)<\/p>\n<pre class=\"lang:default decode:true\">HTTP_PORT=8080\r\nHTTPS_PORT=8081\r\nDEBUG=node,http,poi:*\r\nCLUSTER='couchbase:\/\/localhost:8091'\r\nCLUSTER_USER=Administrator\r\nCLUSTER_PASSWORD=password<\/pre>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc774\uc81c \uc11c\ubc84\ub97c \uc0ac\uc6a9\ud560 \uc900\ube44\uac00 \ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc11c\ubc84 \ub8e8\ud2b8 \ub514\ub809\ud1a0\ub9ac\uc5d0\uc11c <code>\ub178\ub4dc app.js<\/code>. \ud074\ub77c\uc774\uc5b8\ud2b8 \ucf54\ub4dc\ub97c \uba3c\uc800 \ube4c\ub4dc\ud558\ub294 \uac83\uc744 \uc78a\uc9c0 \ub9c8\uc138\uc694.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"sect1\">\n<h2 id=\"_the_couchbase_server_eventing_service_code\">\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uc11c\ubc84 \uc774\ubca4\ud2b8 \uc11c\ube44\uc2a4 \ucf54\ub4dc<\/h2>\n<div class=\"sectionbody\">\n<div class=\"paragraph\">\n<p>\uc774 \uc571\uc744 \uc791\ub3d9\uc2dc\ud0a4\ub294 \ub9c8\uc9c0\ub9c9 \ud2b9\ubcc4\ud55c \uc18c\uc2a4\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. 5.5.0 \ubc84\uc804\uc5d0\uc11c Couchbase\ub294 <a title=\"https:\/\/www.couchbase.com\/blog\/eventing\/\" href=\"https:\/\/www.couchbase.com\/blog\/ko\/eventing\/\">\uc774\ubca4\ud2b8 \uc11c\ube44\uc2a4<\/a>. 5.5 \ub9b4\ub9ac\uc2a4 \uc2dc\ub9ac\uc988\uc5d0\uc11c \uc81c\uac00 \uac00\uc7a5 \uc88b\uc544\ud558\ub294 \uc0c8\ub85c\uc6b4 \uae30\ub2a5\uc785\ub2c8\ub2e4. \uc774 \uc11c\ube44\uc2a4\uc758 \uc77c\ubd80\ub85c \uc81c\uacf5\ub418\ub294 \uccab \ubc88\uc9f8 \uad6c\uc131 \uc694\uc18c\ub294 Couchbase \ud568\uc218\uc785\ub2c8\ub2e4. \uac04\ub2e8\ud788 \ub9d0\ud574, \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uba74 \ucf54\ub4dc\ub97c \uc2e4\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <strong>\ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc11c\ubc84\uc5d0\uc11c<\/strong> \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc758 \ubcc0\uacbd \uc0ac\ud56d\uc5d0 \ub300\ud55c \uc751\ub2f5\uc73c\ub85c<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\ud568\uc218\ub294 \ud45c\uc900 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \uc791\uc131\ub418\uba70, \uc77c\ubd80 \ud568\uc218\ub294 <a title=\"https:\/\/developer.couchbase.com\/documentation\/server\/current\/eventing\/eventing-language-constructs.html\" href=\"https:\/\/developer.couchbase.com\/documentation\/server\/current\/eventing\/eventing-language-constructs.html\">\ucd94\uac00 \ubc0f \uc81c\ud55c \uc0ac\ud56d<\/a>. \ud544\uc694\ud55c \ud568\uc218\ub97c \ub9cc\ub4e4\ub824\uba74 \ub2e4\uc74c \ub2e8\uacc4\ub97c \ub530\ub974\uc138\uc694.<\/p>\n<\/div>\n<div class=\"sect2\">\n<h3 id=\"_eventing_meta_data_bucket\">\uba54\ud0c0\ub370\uc774\ud130 \ubc84\ud0b7 \uc774\ubca4\ud2b8<\/h3>\n<div class=\"paragraph\">\n<p>\uba3c\uc800 \uc774\ubca4\ud2b8 \uba54\ud0c0\ub370\uc774\ud130\ub97c \uc704\ud55c \ubc84\ud0b7\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"ulist\">\n<ul>\n<li>\ud544\uc694\ud55c \uacbd\uc6b0 Couchbase Server \ucf58\uc194\uc744 \uc5f4\uace0 \ub85c\uadf8\uc778\ud569\ub2c8\ub2e4.<\/li>\n<li>\uc67c\ucabd \uba54\ub274\uc5d0\uc11c '\ubc84\ud0b7'\uc744 \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n<li>\uc624\ub978\ucabd \uc0c1\ub2e8 \ubaa8\uc11c\ub9ac\uc5d0 \uc788\ub294 '\ubc84\ud0b7 \ucd94\uac00'\ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n<li>\uc785\ub825 <code>\uc774\ubca4\ud2b8<\/code> \uc744 \uc785\ub825\ud558\uba74 \ub098\ud0c0\ub098\ub294 \ub300\ud654 \uc0c1\uc790\uc5d0\uc11c \ubc84\ud0b7 \uc774\ub984\uc744 \uc785\ub825\ud569\ub2c8\ub2e4.<\/li>\n<li>\uc644\ub8cc\ud558\ub824\uba74 \"\ubc84\ud0b7 \ucd94\uac00\"\ub97c \ud074\ub9ad\ud558\uc138\uc694.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"sect2\">\n<h3 id=\"_adding_a_function\">\ud568\uc218 \ucd94\uac00\ud558\uae30<\/h3>\n<div class=\"paragraph\">\n<p>\uc774\uc81c \ud568\uc218\ub97c \uad6c\uc131\ud558\uace0 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"ulist\">\n<ul>\n<li>\uc67c\ucabd \uba54\ub274\uc5d0\uc11c '\uc774\ubca4\ud2b8'\ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n<li>\uc624\ub978\ucabd \uc0c1\ub2e8 \ubaa8\uc11c\ub9ac\uc5d0 \uc788\ub294 '\uae30\ub2a5 \ucd94\uac00'\ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n<\/div>\n<div class=\"paragraph\">\n<p>\uadf8\ub7ec\uba74 \ub300\ud654 \uc0c1\uc790\uac00 \ub098\ud0c0\ub0a9\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"ulist\">\n<ul>\n<li>\uc120\ud0dd <code>\uc5ec\ud589 \uc0d8\ud50c<\/code> \uc18c\uc2a4 \ubc84\ud0b7\uc73c\ub85c<\/li>\n<li>\uc120\ud0dd <code>\uc774\ubca4\ud2b8<\/code> \uba54\ud0c0\ub370\uc774\ud130 \ubc84\ud0b7\uc73c\ub85c<\/li>\n<li>\uc785\ub825 <code>\ubaa8\ub2c8\ud130<\/code> (\ub610\ub294 \uc6d0\ud558\ub294 \ub300\ub85c)\ub97c \ud568\uc218 \uc774\ub984\uc73c\ub85c \uc785\ub825\ud569\ub2c8\ub2e4.<\/li>\n<li>\"\ubc14\uc778\ub529\"\uc5d0\uc11c \ub2e4\uc74c\uc744 \uc124\uc815\ud569\ub2c8\ub2e4. <code>\uc720\ud615<\/code> \ub97c \"\ubcc4\uce6d\"\uc73c\ub85c \ubcc0\uacbd\ud569\ub2c8\ub2e4, <code>\uc774\ub984<\/code> \ub97c \"\uc5ec\ud589 \uc0d8\ud50c\"\ub85c \uc124\uc815\ud558\uace0 <code>\uac12<\/code> \"DB\"<\/li>\n<li>\"\ub2e4\uc74c\"\uc744 \ud074\ub9ad\ud569\ub2c8\ub2e4: \ucf54\ub4dc \ucd94\uac00\"<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/raw.githubusercontent.com\/couchbaselabs\/blog-source-code\/master\/Greeley\/0048POI\/images\/POI_function.png\" alt=\"Adding a Function\" \/><\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uadf8\ub7ec\uba74 \ucf54\ub4dc \ud3b8\uc9d1\uae30\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4. \ud568\uc218 \uc11c\uba85\uc774 \ubbf8\ub9ac \ucc44\uc6cc\uc838 \uc788\uc2b5\ub2c8\ub2e4. \ub300\uc2e0 \uc774 \ucf54\ub4dc\ub97c \ubcf5\uc0ac\ud558\uc138\uc694.<\/p>\n<\/div>\n<\/div>\n<p>https:\/\/gist.github.com\/HodGreeley\/9e25f9072247e180ec5cd764d9048c3b#file-poi-js<\/p>\n<div class=\"sect2\">\n<h3 id=\"_deploying_a_function\">\ud568\uc218 \ubc30\ud3ec<\/h3>\n<div class=\"paragraph\">\n<p>\uc774 \ucf54\ub4dc\ub97c \ubc30\ud3ec\ud558\ub824\uba74 \uba3c\uc800 '\uc800\uc7a5'\uc744 \ud074\ub9ad\ud55c \ub2e4\uc74c \uc67c\ucabd \uba54\ub274\uc5d0\uc11c '\uc774\ubca4\ud2b8'\ub97c \ub2e4\uc2dc \ud074\ub9ad\ud569\ub2c8\ub2e4. \ud568\uc218\uc5d0 \ub300\ud55c \ud56d\ubaa9\uc774 \ud45c\uc2dc\ub429\ub2c8\ub2e4. \ud574\ub2f9 \ub9c9\ub300\uc758 \uc544\ubb34 \uacf3\uc774\ub098 \ud074\ub9ad\ud569\ub2c8\ub2e4. \ud574\ub2f9 \ud56d\ubaa9\uc774 \ud655\uc7a5\ub418\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"imageblock\">\n<div class=\"content\"><img decoding=\"async\" src=\"https:\/\/raw.githubusercontent.com\/couchbaselabs\/blog-source-code\/master\/Greeley\/0048POI\/images\/DeployFunction.png\" alt=\"Deploying a Function\" \/><\/div>\n<\/div>\n<div class=\"paragraph\">\n<p>\"\ubc30\ud3ec\"\ub97c \ud074\ub9ad\ud55c \ub2e4\uc74c \"\uae30\ub2a5 \ubc30\ud3ec\"\ub97c \ud074\ub9ad\ud558\uae30\ub9cc \ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n<\/div>\n<\/div>\n<div class=\"sect2\">\n<h3 id=\"_understanding_the_function_code\">\ud568\uc218 \ucf54\ub4dc \uc774\ud574\ud558\uae30<\/h3>\n<div class=\"paragraph\">\n<p><code>\uc628\uc5c5\ub370\uc774\ud2b8<\/code> \ub294 \ubb38\uc11c\uac00 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \ud638\ucd9c\ub429\ub2c8\ub2e4. \uc774 \ud568\uc218\ub294 \ubb38\uc11c\uc640 \ubb38\uc11c \uba54\ud0c0\ub370\uc774\ud130\ub97c \ub9e4\uac1c\ubcc0\uc218\ub85c \ubc1b\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc800\ud76c\ub294 <code>\ud2b8\ub9ac\uac70<\/code> \ubb38\uc11c\ub97c \ubcc0\uacbd\ud558\uc5ec \uc0c8 \ud638\ud154\uc744 \uc120\ud0dd\ud588\uc74c\uc744 \ub098\ud0c0\ub0c5\ub2c8\ub2e4. \uccab \ubc88\uc9f8 \uc904\uc740 \ubb38\uc11c ID(\ubb38\uc11c \ud0a4\ub77c\uace0\ub3c4 \ud568)\ub97c \uae30\uc900\uc73c\ub85c \ub2e4\ub978 \ubaa8\ub4e0 \ubb38\uc11c\ub97c \ud544\ud130\ub9c1\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\ub2e4\uc74c \uc904\uc740 \uba87 \uac00\uc9c0 \ud765\ubbf8\ub85c\uc6b4 \uc810\uc744 \ubcf4\uc5ec\uc90d\ub2c8\ub2e4. Recall <code>db<\/code> \ub294 \uc5ec\ud589 \uc0d8\ud50c \ubc84\ud0b7\uc758 \ubcc4\uce6d\uc785\ub2c8\ub2e4. <code>db['here']<\/code> ID\uac00 \uc788\ub294 \ubb38\uc11c\ub97c \uc9c1\uc811 \uac80\uc0c9\ud569\ub2c8\ub2e4. <code>\uc5ec\uae30<\/code>. \uc5ec\uae30\uc5d0 \ud544\uc694\ud55c \uc790\uaca9 \uc99d\uba85\uc744 \uc800\uc7a5\ud569\ub2c8\ub2e4. <a title=\"https:\/\/www.here.com\/\" href=\"https:\/\/www.here.com\/\">\uc5ec\uae30<\/a> \ub9e4\ud551 \uc11c\ube44\uc2a4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uad00\uc2ec \ud3ec\uc778\ud2b8 \uc694\uccad\uc744 \uc704\ud55c URL\uacfc \ub370\uc774\ud130\ub97c \uc900\ube44\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc5d0\ub294 API\uc5d0 \ud765\ubbf8\ub85c\uc6b4 \uae30\ub2a5\uc774 \ub9ce\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uc800\ud76c\ub294 \uae30\ubcf8\uc801\uc778 \uc694\uccad\ub9cc \ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc774 \uc815\ubcf4\uac00 \uc900\ube44\ub418\uc5c8\uc73c\ubbc0\ub85c cURL \ud638\ucd9c\uc744 \ud560 \uc900\ube44\uac00 \ub418\uc5c8\uc2b5\ub2c8\ub2e4. N1QL \ucffc\ub9ac\ub97c \uc791\uc131\ud558\uba74 \ud45c\uc900 JavaScript\uc758 \uc218\uc815 \uc0ac\ud56d \uc911 \ud558\ub098\ub97c \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4: \ucffc\ub9ac \uc6cc\ud06c\ubca4\uce58\uc5d0\uc11c \ucffc\ub9ac\ub97c \uad6c\uc131\ud560 \ub54c\uc640 \ub9c8\ucc2c\uac00\uc9c0\ub85c \uc778\ub77c\uc778\uc73c\ub85c \ucffc\ub9ac\ub97c \uc791\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>cURL \ucffc\ub9ac\uc5d0\uc11c \ub610 \ub2e4\ub978 \uba4b\uc9c4 \uc138\ubd80 \uc0ac\ud56d\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. N1QL\uc740 \uacb0\uacfc\ub97c \ud544\ud130\ub9c1\ud558\uae30 \uc704\ud55c \ud3b8\ub9ac\ud55c \uad6c\ubb38\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uacbd\ub85c\ub97c \ucd94\uac00\ud558\uba74 <code>.results.item<\/code> \ub05d\uae4c\uc9c0 \uc6d0\ud558\ub294 \ub370\uc774\ud130\ub9cc \ud655\ubcf4\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uadf8\ub7f0 \ub2e4\uc74c \ucffc\ub9ac\ub97c \uc2e4\ud589\ud558\uace0 \ub3d9\uc77c\ud55c \ucffc\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec <code>db[]<\/code> \uc18d\uae30, \uc5c5\ub370\uc774\ud2b8 <code>poi<\/code> \ubb38\uc11c\uc5d0 \ucd94\uac00\ud569\ub2c8\ub2e4. \uc774\uac83\uc740 \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \ubcf4\uac15\ud558\ub294 \uc608\uc2dc\uc785\ub2c8\ub2e4. \ub2e4\ub978 \uc2dc\ub098\ub9ac\uc624\uc5d0\uc11c\ub294 \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc758 \ub808\ucf54\ub4dc\uc5d0\uc11c \uc5c5\ub370\uc774\ud2b8\ub97c \uc804\uc801\uc73c\ub85c \ub3c4\ucd9c\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 \uace0\uac1d\uc774 \uc0c1\ud488\uc744 \uc120\ud0dd\ud558\uba74 \uc7a5\ubc14\uad6c\ub2c8\uc758 \ubaa8\ub4e0 \uc138\ubd80 \uc815\ubcf4\ub97c \uc785\ub825\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\ub9c8\uc9c0\ub9c9\uc73c\ub85c, \uad00\uc2ec \uc9c0\uc810\uc744 \uc190\uc5d0 \ub4e4\uace0 \ub2e4\uc2dc cURL\uc744 \uc0ac\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc6f9 \uc11c\ubc84 \uc5d4\ub4dc\ud3ec\uc778\ud2b8\ub85c \ud478\uc2dc\ud569\ub2c8\ub2e4. \"\ud3ec\uc2a4\ud2b8\" \ubc84\uc804\uc758 <code>poi<\/code> API\ub294 \ub4e4\uc5b4\uc624\ub294 \ub370\uc774\ud130\ub97c \uc218\uc9d1\ud558\uc5ec \ub4f1\ub85d\ub41c \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0 \ub2e4\uc2dc \ud478\uc2dc\ud569\ub2c8\ub2e4. \ub530\ub77c\uc11c \ud3f4\ub9c1\ud560 \ud544\uc694 \uc5c6\uc774 \ud074\ub77c\uc774\uc5b8\ud2b8 UI\uac00 \ub370\uc774\ud130\ubca0\uc774\uc2a4 \ubcc0\uacbd\uc5d0 \ubc18\uc751\ud558\ub3c4\ub85d \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"sect1\">\n<h2 id=\"_final_steps\">\ucd5c\uc885 \ub2e8\uacc4<\/h2>\n<div class=\"sectionbody\">\n<div class=\"paragraph\">\n<p>\uc774\uc81c \uc774 \ubaa8\ub4e0 \uac83\uc744 \ud1b5\ud569\ud560 \uc900\ube44\uac00 \ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc571\uc744 \uadf8\ub300\ub85c \uc0ac\uc6a9\ud574 \ubcfc \uc218 \uc788\uc9c0\ub9cc \uc9c0\ub3c4 \ubd80\ubd84\uc740 \uc544\uc9c1 \uc791\ub3d9\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574\uc11c\ub294 Google \uc9c0\ub3c4 API \ud0a4\uc640 HERE\uc758 \uc790\uaca9 \uc99d\uba85 \uc138\ud2b8\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc9c0\ub3c4 \ud0a4\ub294 <code>config.js<\/code> \ud30c\uc77c\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4. HERE \ud0a4\ub97c \ubb38\uc11c\uc5d0 \uc800\uc7a5\ud55c \ud6c4 <code>\uc774\ubca4\ud2b8<\/code> \ubc84\ud0b7\uc5d0 \ucd94\uac00\ud569\ub2c8\ub2e4. \uad00\ub9ac\uc790 \ucf58\uc194\uc5d0\uc11c \uc67c\ucabd \uba54\ub274\uc758 '\ubb38\uc11c'\ub97c \ud074\ub9ad\ud55c \ub2e4\uc74c \uc624\ub978\ucabd \uc0c1\ub2e8\uc758 '\ubb38\uc11c \ucd94\uac00'\ub97c \ud074\ub9ad\ud558\uba74 \ubc14\ub85c \uc774 \uc791\uc5c5\uc744 \uc218\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uac83\uc744 \ud15c\ud50c\ub9bf\uc73c\ub85c \uc0ac\uc6a9\ud558\uc138\uc694.<\/p>\n<\/div>\n<div class=\"listingblock\">\n<div class=\"title\">\n<p><strong><strong>\uc5ec\uae30<\/strong><\/strong><\/p>\n<pre class=\"lang:js decode:true\">{\r\n  \"id\": \"TPxxxxxxxxxxxxxxxxxx\",\r\n  \"code\": \"whsxxxxxxxxxxxxxxxxxxx\"\r\n}<\/pre>\n<\/div>\n<\/div>\n<div class=\"paragraph\">\n<p>\ub9c8\uc9c0\ub9c9\uc73c\ub85c, \ubcf4\uc548\uc744 \uc704\ud574 cURL\uc740 \uae30\ubcf8\uc801\uc73c\ub85c \ube44\ud65c\uc131\ud654\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uad00\ub9ac\uc790 \ucf58\uc194\uc5d0\uc11c \ub2e4\uc74c\uc744 \uc218\ud589\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"ulist\">\n<ul>\n<li>\uc67c\ucabd \uba54\ub274\uc5d0\uc11c '\uc124\uc815'\uc744 \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n<li>\ud074\ub9ad\ud558\uc5ec \"\uace0\uae09 \ucffc\ub9ac \uc124\uc815\"\uc744 \ud655\uc7a5\ud569\ub2c8\ub2e4.<\/li>\n<li>\"CURL() \ud568\uc218 \uc561\uc138\uc2a4\"\uc5d0\uc11c \"\uc81c\ud55c \uc5c6\uc74c\"\uc744 \uc120\ud0dd\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n<\/div>\n<div class=\"paragraph\">\n<p>\uc774\uac83\uc740 <strong>not<\/strong> \ud504\ub85c\ub355\uc158\uc5d0 \uc0ac\uc6a9\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4. \ub300\uc2e0 \uc120\ud0dd\ud55c URL \uc9d1\ud569\uc758 \ud654\uc774\ud2b8\ub9ac\uc2a4\ud2b8\uac00 \ud544\uc694\ud560 \uac83\uc785\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc6b0\ub9ac \ud504\ub85c\uc81d\ud2b8\uc5d0\ub294 \uc774 \ubc29\ubc95\uc774 \uc801\ud569\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<div class=\"paragraph\">\n<p>\uadf8\ub7f0 \ub2e4\uc74c \uc6f9 \uc11c\ubc84 \ub514\ub809\ud1a0\ub9ac\uc5d0\uc11c \ub2e4\uc74c\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4. <code>\ub178\ub4dc app.js<\/code>. Open <code>localhost:8080<\/code> (\ub610\ub294 \ube0c\ub77c\uc6b0\uc800\uc758 <code>.env<\/code>)\ub97c \ud074\ub9ad\ud558\uace0 \uc0ac\uc6a9\ud574 \ubcf4\uc138\uc694.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"sect1\">\n<h2 id=\"_source\">\ucd9c\ucc98<\/h2>\n<div class=\"sectionbody\">\n<div class=\"paragraph\">\n<p>\uc804\uccb4 \uc571\uc758 \uc18c\uc2a4\ub294 GitHub\uc5d0\uc11c \ucc3e\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <a title=\"https:\/\/github.com\/couchbaselabs\/points-of-interest\" href=\"https:\/\/github.com\/couchbaselabs\/points-of-interest\">\uc5ec\uae30<\/a>. \uc2a4\ud06c\ub9bd\ud2b8\ub97c \ud3ec\ud568\ud588\uc2b5\ub2c8\ub2e4. <code>\uc124\uc815<\/code> \ub97c \uc2e4\ud589\ud558\uc5ec \ubaa8\ub4e0 \uc900\ube44\ub97c \uac04\uc18c\ud654\ud558\uc138\uc694. \uadf8\ub0e5 \uc2e4\ud589 <code>.\/setup<\/code> \ub97c \ud074\ub9ad\ud558\uace0 \ud0a4\ub97c \uc785\ub825\ud569\ub2c8\ub2e4. (\uba3c\uc800 \uc2e4\ud589 \uac00\ub2a5\ud55c \uc0c1\ud0dc\ub85c \ub9cc\ub4e4\uc5b4\uc57c \ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.) \uadf8\ub798\ub3c4 \ub2e4\uc74c\uc744 \uc2e4\ud589\ud574\uc57c \ud569\ub2c8\ub2e4. <code>npm \uc124\uce58<\/code>\ub97c \ud074\ub9ad\ud558\uace0 \ud074\ub77c\uc774\uc5b8\ud2b8 \ucf54\ub4dc\ub97c \ube4c\ub4dc\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"sect1\">\n<h2 id=\"_webinar\">\uc6f9 \uc138\ubbf8\ub098<\/h2>\n<div class=\"sectionbody\">\n<div class=\"paragraph\">\n<p>\uc774 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 Couchbase \uc6e8\ube44\ub098\uc5d0\uc11c \ub370\ubaa8\uc758 \uc77c\ubd80\ub85c \uc0ac\uc6a9\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ub179\ud654\ubcf8\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. <a title=\"https:\/\/event.on24.com\/wcc\/r\/1774871\/5A84BC9DF67C6113F8DD95AD7DF71BBA\" href=\"https:\/\/event.on24.com\/wcc\/r\/1774871\/5A84BC9DF67C6113F8DD95AD7DF71BBA\">\uc5ec\uae30<\/a>. \ub2e4\ub978 \ubb34\ub8cc <a title=\"https:\/\/www.couchbase.com\/resources\/webinars\" href=\"https:\/\/www.couchbase.com\/blog\/ko\/resources\/webinars\/\">\uc6e8\ube44\ub098<\/a> \ub9ac\uc18c\uc2a4 \uc601\uc5ed\uc5d0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"sect1\">\n<h2 id=\"_postscript\">\ud3ec\uc2a4\ud2b8 \uc2a4\ud06c\ub9bd\ud2b8<\/h2>\n<div class=\"sectionbody\">\n<div class=\"paragraph\">\n<p>Couchbase\ub294 \uc624\ud508 \uc18c\uc2a4\uc774\uba70 <a title=\"https:\/\/www.couchbase.com\/downloads\" href=\"https:\/\/www.couchbase.com\/blog\/ko\/downloads\/\">\ubb34\ub8cc \uccb4\ud5d8<\/a>.<br \/>\n<strong>\uc2dc\uc791\ud558\uae30<\/strong> \uc640 \ud568\uaed8 <a title=\"https:\/\/www.couchbase.com\/get-started\" href=\"https:\/\/developer.couchbase.com\/tutorials\">\uc0d8\ud50c \ucf54\ub4dc, \uc608\uc81c \ucffc\ub9ac, \ud29c\ud1a0\ub9ac\uc5bc \ub4f1<\/a>.<br \/>\n\ub354 \ub9ce\uc740 \ub9ac\uc18c\uc2a4 \ucc3e\uae30 <a title=\"https:\/\/developer.couchbase.com\/community\" href=\"https:\/\/developer.couchbase.com\/community\">\uac1c\ubc1c\uc790 \ud3ec\ud138<\/a>.<br \/>\n\ud2b8\uc704\ud130\uc5d0\uc11c \ud314\ub85c\uc6b0\ud558\uae30 <a title=\"https:\/\/twitter.com\/CouchbaseDev\" href=\"https:\/\/twitter.com\/CouchbaseDev\">\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uac1c\ubc1c<\/a>.<br \/>\n\uc9c8\ubb38\uc5d0 \ub300\ud55c \ub2f5\ubcc0\uc744 \uac8c\uc2dc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <a title=\"https:\/\/www.couchbase.com\/forums\/\" href=\"https:\/\/www.couchbase.com\/blog\/ko\/forums\/\">\ud3ec\ub7fc<\/a>.<br \/>\n\ub2f9\uc0ac\ub294 \ub2e4\uc74c \uc0ac\ud56d\uc5d0 \uc801\uadf9\uc801\uc73c\ub85c \ucc38\uc5ec\ud569\ub2c8\ub2e4. <a title=\"https:\/\/stackoverflow.com\/questions\/tagged\/couchbase\" href=\"https:\/\/stackoverflow.com\/questions\/tagged\/couchbase\">\uc2a4\ud0dd \uc624\ubc84\ud50c\ub85c<\/a>.<br \/>\n\uc9c8\ubb38, \uc758\uacac, \ubcf4\uace0 \uc2f6\uc740 \uc8fc\uc81c \ub4f1\uc774 \uc788\uc73c\uba74 \ud2b8\uc704\ud130\uc5d0\uc11c \uc800\uc5d0\uac8c \uc5f0\ub77d\ud574 \uc8fc\uc138\uc694. <a title=\"https:\/\/twitter.com\/HodGreeley\" href=\"https:\/\/twitter.com\/HodGreeley\">\ud638\ub4dc\uadf8\ub9b4\ub9ac<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Introduction In this tutorial, we\u2019ll build a full stack application using Vue.js, Node.js, Express, and Couchbase Server. In addition to those frameworks, we\u2019ll use the Google Maps and Here Places REST APIs. Tl;dr clone the repo here. Contents What We\u2019ll [&hellip;]<\/p>","protected":false},"author":73,"featured_media":5541,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1815,1816,1822,1812],"tags":[1254,1588,1500,2083],"ppma_author":[9042],"class_list":["post-5538","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-best-practices-and-tutorials","category-couchbase-server","category-node-js","category-n1ql-query","tag-express","tag-full-stack","tag-tutorial","tag-vue-js"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.8 (Yoast SEO v25.8) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Build an App with Vue.js, Node.js, Express &amp; Couchbase<\/title>\n<meta name=\"description\" content=\"Map points of interest with this full stack tutorial using Vue.js, Node.js, Express, and Couchbase.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.couchbase.com\/blog\/ko\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial: Build a Points of Interest App with Vue.js, Node.js, Express, and Couchbase Server\" \/>\n<meta property=\"og:description\" content=\"Map points of interest with this full stack tutorial using Vue.js, Node.js, Express, and Couchbase.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/ko\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/\" \/>\n<meta property=\"og:site_name\" content=\"The Couchbase Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-26T22:42:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-14T04:23:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2018\/07\/F_of_CB.eq_.POI_.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Hod Greeley, Developer Advocate, Couchbase\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@HodGreeley\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hod Greeley, Developer Advocate, Couchbase\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/\"},\"author\":{\"name\":\"Hod Greeley, Developer Advocate, Couchbase\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/9b62593c8a13531e53d52fcd5aabbca4\"},\"headline\":\"Tutorial: Build a Points of Interest App with Vue.js, Node.js, Express, and Couchbase Server\",\"datePublished\":\"2018-07-26T22:42:30+00:00\",\"dateModified\":\"2025-06-14T04:23:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/\"},\"wordCount\":3329,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2018\/07\/F_of_CB.eq_.POI_.gif\",\"keywords\":[\"express\",\"full stack\",\"tutorial\",\"vue.js\"],\"articleSection\":[\"Best Practices and Tutorials\",\"Couchbase Server\",\"Node.js\",\"SQL++ \/ N1QL Query\"],\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/\",\"name\":\"Build an App with Vue.js, Node.js, Express & Couchbase\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2018\/07\/F_of_CB.eq_.POI_.gif\",\"datePublished\":\"2018-07-26T22:42:30+00:00\",\"dateModified\":\"2025-06-14T04:23:10+00:00\",\"description\":\"Map points of interest with this full stack tutorial using Vue.js, Node.js, Express, and Couchbase.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/#primaryimage\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2018\/07\/F_of_CB.eq_.POI_.gif\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2018\/07\/F_of_CB.eq_.POI_.gif\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.couchbase.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial: Build a Points of Interest App with Vue.js, Node.js, Express, and Couchbase Server\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"name\":\"The Couchbase Blog\",\"description\":\"Couchbase, the NoSQL Database\",\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\",\"name\":\"The Couchbase Blog\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png\",\"width\":218,\"height\":34,\"caption\":\"The Couchbase Blog\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/9b62593c8a13531e53d52fcd5aabbca4\",\"name\":\"Hod Greeley, Developer Advocate, Couchbase\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/21eb69cb5d4a401fb23b149e4f4e9e87\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/52d0018695c0ced0d1c68cf64a6195c81dbac03dce5983f98eb209e7c84350df?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/52d0018695c0ced0d1c68cf64a6195c81dbac03dce5983f98eb209e7c84350df?s=96&d=mm&r=g\",\"caption\":\"Hod Greeley, Developer Advocate, Couchbase\"},\"description\":\"Hod Greeley is a Developer Advocate for Couchbase, living in Silicon Valley. He has over two decades of experience as a software engineer and engineering manager. He has worked in a variety of software fields, including computational physics and chemistry, computer and network security, finance, and mobile. Prior to joining Couchbase in 2016, Hod led developer relations for mobile at Samsung. Hod holds a Ph.D. in chemical physics from Columbia University.\",\"sameAs\":[\"https:\/\/hod.greeley.org\/blog\",\"https:\/\/x.com\/HodGreeley\"],\"url\":\"https:\/\/www.couchbase.com\/blog\/ko\/author\/hod-greeley\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build an App with Vue.js, Node.js, Express & Couchbase","description":"\uc774 \uc804\uccb4 \uc2a4\ud0dd \ud29c\ud1a0\ub9ac\uc5bc\uc744 \ud1b5\ud574 Vue.js, Node.js, Express \ubc0f Couchbase\ub97c \uc0ac\uc6a9\ud558\uc5ec \uad00\uc2ec \uc9c0\uc810\uc744 \ub9e4\ud551\ud558\uc138\uc694.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.couchbase.com\/blog\/ko\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/","og_locale":"ko_KR","og_type":"article","og_title":"Tutorial: Build a Points of Interest App with Vue.js, Node.js, Express, and Couchbase Server","og_description":"Map points of interest with this full stack tutorial using Vue.js, Node.js, Express, and Couchbase.","og_url":"https:\/\/www.couchbase.com\/blog\/ko\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/","og_site_name":"The Couchbase Blog","article_published_time":"2018-07-26T22:42:30+00:00","article_modified_time":"2025-06-14T04:23:10+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2018\/07\/F_of_CB.eq_.POI_.gif","type":"image\/gif"}],"author":"Hod Greeley, Developer Advocate, Couchbase","twitter_card":"summary_large_image","twitter_creator":"@HodGreeley","twitter_misc":{"Written by":"Hod Greeley, Developer Advocate, Couchbase","Est. reading time":"16\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/"},"author":{"name":"Hod Greeley, Developer Advocate, Couchbase","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/9b62593c8a13531e53d52fcd5aabbca4"},"headline":"Tutorial: Build a Points of Interest App with Vue.js, Node.js, Express, and Couchbase Server","datePublished":"2018-07-26T22:42:30+00:00","dateModified":"2025-06-14T04:23:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/"},"wordCount":3329,"commentCount":1,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2018\/07\/F_of_CB.eq_.POI_.gif","keywords":["express","full stack","tutorial","vue.js"],"articleSection":["Best Practices and Tutorials","Couchbase Server","Node.js","SQL++ \/ N1QL Query"],"inLanguage":"ko-KR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/","url":"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/","name":"Build an App with Vue.js, Node.js, Express & Couchbase","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2018\/07\/F_of_CB.eq_.POI_.gif","datePublished":"2018-07-26T22:42:30+00:00","dateModified":"2025-06-14T04:23:10+00:00","description":"\uc774 \uc804\uccb4 \uc2a4\ud0dd \ud29c\ud1a0\ub9ac\uc5bc\uc744 \ud1b5\ud574 Vue.js, Node.js, Express \ubc0f Couchbase\ub97c \uc0ac\uc6a9\ud558\uc5ec \uad00\uc2ec \uc9c0\uc810\uc744 \ub9e4\ud551\ud558\uc138\uc694.","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/"]}]},{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/#primaryimage","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2018\/07\/F_of_CB.eq_.POI_.gif","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2018\/07\/F_of_CB.eq_.POI_.gif","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/www.couchbase.com\/blog\/tutorial-points-interest-app-vuejs-nodejs-express-couchbase-server\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tutorial: Build a Points of Interest App with Vue.js, Node.js, Express, and Couchbase Server"}]},{"@type":"WebSite","@id":"https:\/\/www.couchbase.com\/blog\/#website","url":"https:\/\/www.couchbase.com\/blog\/","name":"\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \ube14\ub85c\uadf8","description":"NoSQL \ub370\uc774\ud130\ubca0\uc774\uc2a4, Couchbase","publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/www.couchbase.com\/blog\/#organization","name":"\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \ube14\ub85c\uadf8","url":"https:\/\/www.couchbase.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","width":218,"height":34,"caption":"The Couchbase Blog"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/9b62593c8a13531e53d52fcd5aabbca4","name":"\ud638\ub4dc \uadf8\ub9b4\ub9ac, \uac1c\ubc1c\uc790 \uc639\ud638\uc790, \uce74\uc6b0\uce58\ubca0\uc774\uc2a4","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/21eb69cb5d4a401fb23b149e4f4e9e87","url":"https:\/\/secure.gravatar.com\/avatar\/52d0018695c0ced0d1c68cf64a6195c81dbac03dce5983f98eb209e7c84350df?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/52d0018695c0ced0d1c68cf64a6195c81dbac03dce5983f98eb209e7c84350df?s=96&d=mm&r=g","caption":"Hod Greeley, Developer Advocate, Couchbase"},"description":"\ud638\ub4dc \uadf8\ub808\uc774\ub9ac\ub294 \uc2e4\ub9ac\ucf58\ubc38\ub9ac\uc5d0 \uac70\uc8fc\ud558\ub294 \uce74\uc6b0\uce58\ubca0\uc774\uc2a4\uc758 \uac1c\ubc1c\uc790 \uc639\ud638\uc790\uc785\ub2c8\ub2e4. \uadf8\ub294 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uc5d4\uc9c0\ub2c8\uc5b4 \ubc0f \uc5d4\uc9c0\ub2c8\uc5b4\ub9c1 \uad00\ub9ac\uc790\ub85c\uc11c 20\ub144 \uc774\uc0c1\uc758 \uacbd\ub825\uc744 \ubcf4\uc720\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub294 \uc804\uc0b0 \ubb3c\ub9ac\ud559 \ubc0f \ud654\ud559, \ucef4\ud4e8\ud130 \ubc0f \ub124\ud2b8\uc6cc\ud06c \ubcf4\uc548, \uae08\uc735, \ubaa8\ubc14\uc77c \ub4f1 \ub2e4\uc591\ud55c \uc18c\ud504\ud2b8\uc6e8\uc5b4 \ubd84\uc57c\uc5d0\uc11c \uc77c\ud574 \uc654\uc2b5\ub2c8\ub2e4. 2016\ub144 \uce74\uc6b0\uce58\ubca0\uc774\uc2a4\uc5d0 \ud569\ub958\ud558\uae30 \uc804\uc5d0\ub294 \uc0bc\uc131\uc5d0\uc11c \ubaa8\ubc14\uc77c \uac1c\ubc1c\uc790 \uad00\uacc4\ub97c \uc774\ub04c\uc5c8\uc2b5\ub2c8\ub2e4. \uceec\ub7fc\ube44\uc544 \ub300\ud559\uad50\uc5d0\uc11c \ud654\ud559 \ubb3c\ub9ac\ud559 \ubc15\uc0ac \ud559\uc704\ub97c \ubc1b\uc558\uc2b5\ub2c8\ub2e4.","sameAs":["https:\/\/hod.greeley.org\/blog","https:\/\/x.com\/HodGreeley"],"url":"https:\/\/www.couchbase.com\/blog\/ko\/author\/hod-greeley\/"}]}},"authors":[{"term_id":9042,"user_id":73,"is_guest":0,"slug":"hod-greeley","display_name":"Hod Greeley, Developer Advocate, Couchbase","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/52d0018695c0ced0d1c68cf64a6195c81dbac03dce5983f98eb209e7c84350df?s=96&d=mm&r=g","author_category":"","last_name":"Greeley","first_name":"Hod","job_title":"","user_url":"https:\/\/hod.greeley.org\/blog","description":"\ud638\ub4dc \uadf8\ub808\uc774\ub9ac\ub294 \uc2e4\ub9ac\ucf58\ubc38\ub9ac\uc5d0 \uac70\uc8fc\ud558\ub294 \uce74\uc6b0\uce58\ubca0\uc774\uc2a4\uc758 \uac1c\ubc1c\uc790 \uc639\ud638\uc790\uc785\ub2c8\ub2e4. \uadf8\ub294 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uc5d4\uc9c0\ub2c8\uc5b4 \ubc0f \uc5d4\uc9c0\ub2c8\uc5b4\ub9c1 \uad00\ub9ac\uc790\ub85c\uc11c 20\ub144 \uc774\uc0c1\uc758 \uacbd\ub825\uc744 \ubcf4\uc720\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub294 \uc804\uc0b0 \ubb3c\ub9ac\ud559 \ubc0f \ud654\ud559, \ucef4\ud4e8\ud130 \ubc0f \ub124\ud2b8\uc6cc\ud06c \ubcf4\uc548, \uae08\uc735, \ubaa8\ubc14\uc77c \ub4f1 \ub2e4\uc591\ud55c \uc18c\ud504\ud2b8\uc6e8\uc5b4 \ubd84\uc57c\uc5d0\uc11c \uc77c\ud574 \uc654\uc2b5\ub2c8\ub2e4. 2016\ub144 \uce74\uc6b0\uce58\ubca0\uc774\uc2a4\uc5d0 \ud569\ub958\ud558\uae30 \uc804\uc5d0\ub294 \uc0bc\uc131\uc5d0\uc11c \ubaa8\ubc14\uc77c \uac1c\ubc1c\uc790 \uad00\uacc4\ub97c \uc774\ub04c\uc5c8\uc2b5\ub2c8\ub2e4. \uceec\ub7fc\ube44\uc544 \ub300\ud559\uad50\uc5d0\uc11c \ud654\ud559 \ubb3c\ub9ac\ud559 \ubc15\uc0ac \ud559\uc704\ub97c \ubc1b\uc558\uc2b5\ub2c8\ub2e4."}],"_links":{"self":[{"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/posts\/5538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/users\/73"}],"replies":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/comments?post=5538"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/posts\/5538\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/media\/5541"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/media?parent=5538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/categories?post=5538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/tags?post=5538"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/ppma_author?post=5538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}