{"id":3943,"date":"2017-09-01T07:00:21","date_gmt":"2017-09-01T14:00:21","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=3943"},"modified":"2025-06-13T20:15:10","modified_gmt":"2025-06-14T03:15:10","slug":"midwest-js-project-source-full-stack-node-development-available","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/ko\/midwest-js-project-source-full-stack-node-development-available\/","title":{"rendered":"\ud480\uc2a4\ud0dd \ub178\ub4dc \uac1c\ubc1c\uc5d0 \uad00\ud55c \ubbf8\ub4dc\uc6e8\uc2a4\ud2b8 JS \ud504\ub85c\uc81d\ud2b8 \uc18c\uc2a4, \uc0ac\uc6a9 \uac00\ub2a5"},"content":{"rendered":"<p>\uc9c0\ub09c 8\uc6d4\uc5d0 \uc800\ub294 <a href=\"https:\/\/midwestjs.com\/\" target=\"_blank\" rel=\"noopener\">\ubbf8\ub4dc\uc6e8\uc2a4\ud2b8 JS<\/a> \ubbf8\ub124\uc18c\ud0c0\uc8fc \ubbf8\ub2c8\uc560\ud3f4\ub9ac\uc2a4\uc5d0 \uc704\uce58\ud55c \ud68c\uc0ac\uc5d0\uc11c \uc77c\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc544\uc2dc\ub2e4\uc2dc\ud53c \uc800\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc2a4\ud0dd\uc73c\ub85c \ud480 \uc2a4\ud0dd \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\ub294 \uac83\uc744 \ub9e4\uc6b0 \uc88b\uc544\ud569\ub2c8\ub2e4. \uc774\ubc88 \ucee8\ud37c\ub7f0\uc2a4\uc5d0\uc11c \uc81c\uac00 \ubc1c\ud45c\ud588\ub358 \ub0b4\uc6a9\ub3c4 \ubc14\ub85c \uc774\uac83\uc785\ub2c8\ub2e4.<\/p>\n<p>\uc81c \uc138\uc158\uc5d0\ub294 \ub9ce\uc740 \uac1c\ubc1c\uc790\uac00 \ucc38\uc11d\ud588\uace0 \ub9ce\uc740 \uac1c\ubc1c\uc790\uac00 Couchbase\uc640 \ud568\uaed8 Node.js\ub97c \uc0ac\uc6a9\ud558\uc5ec RESTful API\ub97c \uac1c\ubc1c\ud558\ub294 \ubc29\ubc95\uacfc \ud074\ub77c\uc774\uc5b8\ud2b8 \ub300\uba74 \uacc4\uce35\uc73c\ub85c Angular\ub97c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc744 \ubc30\uc6e0\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3953 size-full\" src=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2017\/08\/midwestjs-couchbase.jpg\" alt=\"Couchbase at Midwest JS\" width=\"768\" height=\"558\" srcset=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2017\/08\/midwestjs-couchbase.jpg 768w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2017\/08\/midwestjs-couchbase-300x218.jpg 300w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2017\/08\/midwestjs-couchbase-20x15.jpg 20w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/p>\n<p>\uc57d\uc18d\ub4dc\ub9b0 \ub300\ub85c \ud504\ub808\uc820\ud14c\uc774\uc158\uc5d0\uc11c \uc0b4\ud3b4\ubcf8 \ub0b4\uc6a9\uc744 \ub2e4\uc2dc \ud55c \ubc88 \uc0b4\ud3b4\ubcf4\uace0 \uac1c\ub150\uacfc \ucf54\ub4dc\ub97c \uc7ac\ud604\ud558\uace0 \ud655\uc7a5\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<p><!--more--><\/p>\n<p>\uc55e\uc73c\ub85c\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uac00\uc815\uc774 \uc804\uc81c\ub429\ub2c8\ub2e4. <a href=\"https:\/\/www.couchbase.com\/blog\/ko\/\" target=\"_blank\" rel=\"noopener\">\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uc11c\ubc84<\/a>, <a href=\"https:\/\/nodejs.org\" target=\"_blank\" rel=\"noopener\">Node.js<\/a>\ubc0f <a href=\"https:\/\/ionicframework.com\/\" target=\"_blank\" rel=\"noopener\">\uc544\uc774\uc624\ub2c9 \ud504\ub808\uc784\uc6cc\ud06c<\/a> CLI \uc124\uce58 \ubc0f \uad6c\uc131. Couchbase\ub294 NoSQL \ub370\uc774\ud130\ubca0\uc774\uc2a4\uac00 \ub418\uace0, Node.js\ub294 \ubc31\uc5d4\ub4dc\ub97c \uad6c\ub3d9\ud558\uba70, Ionic Framework\ub294 Angular\ub85c \uad6c\ub3d9\ub418\ub294 \uc6f9 \ud504\ub860\ud2b8\uc5d4\ub4dc\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n<p>Midwest JS\uc5d0\uc11c \ub9cc\ub4e0 \ud504\ub85c\uc81d\ud2b8\ub97c \ud1b5\ud574 \ube44\ub514\uc624 \uac8c\uc784 \ucf58\uc194\uacfc \ub2e4\uc591\ud55c \ucf58\uc194\uc6a9 \ube44\ub514\uc624 \uac8c\uc784\uc5d0 \ub300\ud55c \uc815\ubcf4\ub97c \uc800\uc7a5\ud560 \uc218 \uc788\uc5c8\uc2b5\ub2c8\ub2e4. \uc774 \ud504\ub85c\uc81d\ud2b8\ub294 CRUD\uc758 \uc0ac\uc6a9\uacfc NoSQL \ubb38\uc11c \uac04\uc758 \uad00\uacc4, \uadf8\ub9ac\uace0 Couchbase\uac00 \uc774\ub97c \uc27d\uac8c \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc744 \ubcf4\uc5ec\uc8fc\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n<h2>Couchbase NoSQL \ubc31\uc5d4\ub4dc\ub85c Node.js \ub9cc\ub4e4\uae30<\/h2>\n<p>\uac1c\ubc1c\uc744 \uc2dc\uc791\ud558\uae30 \uc804\uc5d0 \uc0c8 Node.js \ud504\ub85c\uc81d\ud2b8\ub97c \ub9cc\ub4e4\uc5b4\uc57c \ud569\ub2c8\ub2e4. \uba85\ub839\uc904\uc5d0\uc11c \ub2e4\uc74c\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4:<\/p>\n<pre class=\"lang:default decode:true\">npm init -y\r\n\uc5d4\ud53c\uc5e0 \uc124\uce58 \uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uc775\uc2a4\ud504\ub808\uc2a4 \ubc14\ub514-\ud30c\uc11c uuid \ucf54\uc5b4 --save<\/pre>\n<p>\uc704\uc758 \uba85\ub839\uc740 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.\u00a0<strong>package.json<\/strong> \ud30c\uc77c\uc744 \uc5f4\uace0 \ud504\ub85c\uc81d\ud2b8 \uc885\uc18d\uc131\uc744 \uc124\uce58\ud569\ub2c8\ub2e4. \ud504\ub85c\uc81d\ud2b8\uc758 <code>cors<\/code> \ud328\ud0a4\uc9c0\ub97c \uc0ac\uc6a9\ud558\uba74 \uad50\ucc28 \uc624\ub9ac\uc9c4 \ub9ac\uc18c\uc2a4 \uacf5\uc720 \uc624\ub958 \uc5c6\uc774 \ub450 \uac1c\uc758 \ub2e4\ub978 \ud3ec\ud2b8\uc5d0\uc11c \ub85c\uceec\ub85c Node\uc640 Angular\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 <code>uuid<\/code> \ud328\ud0a4\uc9c0\ub97c \uc0ac\uc6a9\ud558\uba74 \ubb38\uc11c \ud0a4\ub85c \uc0ac\uc6a9\ud560 \uace0\uc720 \ubb38\uc790\uc5f4\uc744 \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubb38\uc11c \ud0a4\uc5d0 <code>\ubcf8\ubb38 \ud30c\uc11c<\/code> \ud328\ud0a4\uc9c0\ub97c \uc0ac\uc6a9\ud558\uba74 HTTP \uc694\uccad\uc73c\ub85c JSON \ub370\uc774\ud130\ub97c \uc804\uc1a1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc5ec\uae30\uc11c\ub294 \ub2e4\ub978 \ub450 \ud328\ud0a4\uc9c0\ub97c \uc124\uba85\ud558\ub294 Express\uc640 Couchbase\ub97c \uc0ac\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ub9cc\ub4e4\uae30\u00a0<strong>app.js<\/strong> \ud30c\uc77c\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4. \uc774 \ud30c\uc77c\uc5d0\ub294 Node.js \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ubaa8\ub4e0 \uc18c\uc2a4 \ucf54\ub4dc\uac00 \ud3ec\ud568\ub429\ub2c8\ub2e4. \uc0c1\uc6a9\uad6c\ub294 \ub2e4\uc74c\uacfc \uac19\uc544\uc57c \ud569\ub2c8\ub2e4:<\/p>\n<pre class=\"lang:default decode:true\">var Couchbase = require(\"couchbase\");\r\nvar Express = require(\"express\");\r\nvar BodyParser = require(\"body-parser\");\r\nvar UUID = require(\"uuid\");\r\nvar Cors = require(\"cors\");\r\n\r\nvar app = Express();\r\nvar N1qlQuery = Couchbase.N1qlQuery;\r\n\r\napp.use(BodyParser.json());\r\napp.use(BodyParser.urlencoded({ extended: true }));\r\napp.use(Cors());\r\n\r\nvar cluster = new Couchbase.Cluster(\"couchbase:\/\/localhost\");\r\nvar bucket = cluster.openBucket(\"default\", \"\");\r\n\r\napp.get(\"\/\ucf58\uc194\", (\uc694\uccad, \uc751\ub2f5) =&gt; {});\r\napp.post(\"\/console\", (\uc694\uccad, \uc751\ub2f5) =&gt; {});\r\napp.post(\"\/game\", (\uc694\uccad, \uc751\ub2f5) =&gt; {});\r\napp.get(\"\/games\", (\uc694\uccad, \uc751\ub2f5) =&gt; {});\r\napp.get(\"\/game\/:id\", (\uc694\uccad, \uc751\ub2f5) =&gt; {});\r\n\r\nvar server = app.listen(3000, () =&gt; {})\r\n    console.log(\"\ud3ec\ud2b8\uc5d0\uc11c \uc218\uc2e0 \ub300\uae30 \uc911 \" + server.address().port + \"...\");\r\n});<\/pre>\n<p>\ub2e4\uc6b4\ub85c\ub4dc\ud55c \uac01 \uc885\uc18d \uc694\uc18c\ub97c \uac00\uc838\uc624\uace0, Express\ub97c \ucd08\uae30\ud654 \ubc0f \uad6c\uc131\ud558\uace0, Couchbase \ud074\ub7ec\uc2a4\ud130\uc758 \ubc84\ud0b7\uc5d0 \uc5f0\uacb0\ud588\uc74c\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc774 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\ub294 5\uac1c\uc758 \uc11c\ub85c \ub2e4\ub978 RESTful API \uc5d4\ub4dc\ud3ec\uc778\ud2b8\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uac00\uc7a5 \uba3c\uc800 \ub17c\ub9ac\uc801\uc73c\ub85c \ud574\uc57c \ud560 \uc77c\uc740 \ube44\ub514\uc624 \uac8c\uc784 \ucf58\uc194\uc744 \ub9cc\ub4e4\uc5b4 \uac8c\uc784\uc744 \ucd94\uac00\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \ub2e4\uc74c \uc5d4\ub4dc\ud3ec\uc778\ud2b8 \ucf54\ub4dc\ub97c \uc0b4\ud3b4\ubcf4\uc138\uc694:<\/p>\n<pre class=\"lang:default decode:true\">app.post(\"\/console\", (\uc694\uccad, \uc751\ub2f5) =&gt; {\r\n    if(!request.body.title) {\r\n        return response.status(401).send({ \"message\": \"`title`\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.\" });\r\n    }\r\n    var id = UUID.v4();\r\n    request.body.type = \"console\";\r\n    bucket.insert(id, request.body, (error, result) =&gt; {\r\n        if(error) {\r\n            return response.status(500).send(error);\r\n        }\r\n        response.send(result);\r\n    });\r\n});<\/pre>\n<p>\uc704\uc758 \ub85c\uc9c1\uc5d0\uc11c, \uc6b0\ub9ac\ub294 \ub2e4\uc74c\uc744 \uac80\uc99d\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. <code>title<\/code> \uac00 \uc694\uccad\uc5d0 \uc874\uc7ac\ud558\ub294\uc9c0 \ud655\uc778\ud569\ub2c8\ub2e4. \uc874\uc7ac\ud558\ub294 \uacbd\uc6b0 \uc0c8 ID\ub97c \uc0dd\uc131\ud558\uace0, \uc0c8 ID\ub97c \ud560\ub2f9\ud569\ub2c8\ub2e4. <code>\uc720\ud615<\/code> \ub97c \uc694\uccad\uc758 \ub370\uc774\ud130\uc5d0 \ucd94\uac00\ud558\uace0 Couchbase\uc5d0 \uc0bd\uc785\ud569\ub2c8\ub2e4. \uc0bd\uc785\uc758 \uc131\uacf5 \ub610\ub294 \uc2e4\ud328 \uc751\ub2f5\uc740 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0 \ubc18\ud658\ub418\uba70, \uc774\ub294 \uacb0\uad6d Angular \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \ub429\ub2c8\ub2e4.<\/p>\n<p>\ube44\ub514\uc624 \uac8c\uc784 \ucf58\uc194\uc744 \ucffc\ub9ac\ud558\ub824\uba74 \ub2e4\uc74c\uc744 \uae30\ubc18\uc73c\ub85c \ucffc\ub9ac\ud574\uc57c \ud569\ub2c8\ub2e4. <code>\uc720\ud615<\/code> \uc18d\uc131\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c ID\ub85c \uc870\ud68c\ud558\ub294 \ub300\uc2e0 N1QL \ucffc\ub9ac\ub97c \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:default decode:true\">app.get(\"\/consoles\", (\uc694\uccad, \uc751\ub2f5) =&gt; {\r\n    var statement = \"SELECT `\" + bucket._name + \"`.*, META().id FROM `\" + bucket._name + \"` WHERE type = 'console'\";\r\n    var query = N1qlQuery.fromString(statement);\r\n    query.\uc77c\uad00\uc131(N1qlQuery.Consistency.REQUEST_PLUS);\r\n    bucket.query(query, (error, result) =&gt; { {\r\n        if(error) {\r\n            return response.status(500).send(error);\r\n        }\r\n        response.send(result);\r\n    });\r\n});<\/pre>\n<p>N1QL \ucffc\ub9ac\ub294 \ub2e8\uc9c0 \uac04\ub2e8\ud55c <code>\uc120\ud0dd<\/code> \ubb38\uc73c\ub85c \ucffc\ub9ac\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4. \ucffc\ub9ac\ub97c \uc2e4\ud589\ud55c \ud6c4 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0 \uc751\ub2f5\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.<\/p>\n<p>\uc774\uc81c \uc2e4\uc81c \ube44\ub514\uc624 \uac8c\uc784\uc73c\ub85c \ub118\uc5b4\uac11\ub2c8\ub2e4. \uc0c1\ud669\uc774 \uc870\uae08 \ub354 \ubcf5\uc7a1\ud574\uc9c0\uc9c0\ub9cc \ub354 \uc5b4\ub835\uc9c0\ub294 \uc54a\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:default decode:true\">app.post(\"\/game\", (\uc694\uccad, \uc751\ub2f5) =&gt; {\r\n    if(!request.body.title) {\r\n        return response.status(401).send({ \"message\": \"`title`\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.\" });\r\n    } else if(!request.body.cid) {\r\n        return response.status(401).send({ \"message\": \"`cid`\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.\" });\r\n    }\r\n    var id = UUID.v4();\r\n    request.body.type = \"game\";\r\n    bucket.insert(id, request.body, (error, result) =&gt; {\r\n        if(error) {\r\n            return response.status(500).send(error);\r\n        }\r\n        response.send(result);\r\n    });\r\n});<\/pre>\n<p>\uc704\uc758 \uc5d4\ub4dc\ud3ec\uc778\ud2b8 \ub85c\uc9c1\uc5d0\uc11c\ub294 \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \uc0c8 \ube44\ub514\uc624 \uac8c\uc784\uc744 \uc0bd\uc785\ud560 \uacc4\ud68d\uc785\ub2c8\ub2e4. \uc774\ub294 \uc0c8 \ube44\ub514\uc624 \uac8c\uc784 \ucf58\uc194\uc744 \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \uc0bd\uc785\ud560 \ub54c\uc640 \ub2e4\ub974\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc6b0\ub9ac\ub294 <code>\uc720\ud615<\/code> \uc18d\uc131\ub3c4 \uc788\uc9c0\ub9cc <code>cid<\/code> \uac00 \uc874\uc7ac\ud569\ub2c8\ub2e4. The <code>cid<\/code> \ub294 \ub370\uc774\ud130\uc640\uc758 \uad00\uacc4\ub97c \uc124\uc815\ud560 \uc218 \uc788\ub294 \ucf58\uc194 ID\uac00 \ub429\ub2c8\ub2e4.<\/p>\n<p>\uad00\uacc4\ub97c \ub9fa\uc73c\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \uc774\uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4. <code>JOIN<\/code> \uc791\uc5c5\uc744 \uc218\ud589\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:default decode:true\">app.get(\"\/games\", (request, response) =&gt; {\r\n    var statement = \"SELECT game.title AS game_title, console.title AS console_title FROM `\" + bucket._name + \"` AS game JOIN `\" + bucket._name + \"` AS console ON KEYS game.cid WHERE game.type = 'game'\";\r\n    var query = N1qlQuery.fromString(statement);\r\n    query.\uc77c\uad00\uc131(N1qlQuery.Consistency.REQUEST_PLUS);\r\n    bucket.query(query, (error, result) =&gt; {\r\n        if(error) {\r\n            return response.status(500).send(error);\r\n        }\r\n        response.send(result);\r\n    });\r\n});<\/pre>\n<p>\uc704\uc758 \uc5d4\ub4dc\ud3ec\uc778\ud2b8\uc5d0\uc11c\ub294 \ub610 \ub2e4\ub978 N1QL \ucffc\ub9ac\ub97c \uc218\ud589\ud558\uace0 \uc788\uc9c0\ub9cc \uc774\ubc88\uc5d0\ub294 <code>JOIN<\/code> \uc5f0\uc0b0\uc774 \ud544\uc694\ud569\ub2c8\ub2e4. \ubc18\ud658\ud558\ub294 \uac83\uc740 \uc720\uc6a9\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. <code>cid<\/code> \ube44\ub514\uc624 \uac8c\uc784\uc744 \ucffc\ub9ac\ud560 \ub54c, \uc800\ud76c\ub294 <code>JOIN<\/code> \ub97c \ud074\ub9ad\ud558\uace0 \ud574\ub2f9 \uc815\ubcf4\ub97c \ub2e4\ub978 \ubb38\uc11c\uc758 \ucf58\uc194 \uc81c\ubaa9\uc73c\ub85c \ubc14\uafc9\ub2c8\ub2e4.<\/p>\n<p>\ud2b9\uc815 \ube44\ub514\uc624 \uac8c\uc784\uc744 \ucc3e\uc73c\ub824\uace0 \ud560 \ub54c\ub3c4 \ube44\uc2b7\ud55c \ucffc\ub9ac\uac00 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n<pre class=\"lang:default decode:true\">app.get(\"\/game\/:id\", (\uc694\uccad, \uc751\ub2f5) =&gt; {{\r\n    if(!request.params.id) {\r\n        return response.status(401).send({ \"message\": \"`id`\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.\" });\r\n    }\r\n    var statement = \"SELECT game.title AS game_title, console.title AS console_title FROM `\" + bucket._name + \"` AS game JOIN `\" + bucket._name + \"` AS console ON KEYS game.cid WHERE game.type = 'game' AND META(game).id = $id\";\r\n    var query = N1qlQuery.fromString(statement);\r\n    bucket.query(query, { \"id\": request.params.id }, (error, result) =&gt; {\r\n        if(error) {\r\n            return response.status(500).send(error);\r\n        }\r\n        response.send(result);\r\n    });\r\n});<\/pre>\n<p>N1QL \uc0ac\uc6a9\uc758 \ub300\uc548 \ubc0f <code>JOIN<\/code> \uc5f0\uc0b0\uc740 ID\ub97c \uae30\uc900\uc73c\ub85c \ub450 \ubc88\uc758 \uc870\ud68c\ub97c \uc218\ud589\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \uc774 \uad00\ud589\uc774 \uc798\ubabb\ub41c \uac83\uc740 \uc544\ub2c8\uc9c0\ub9cc \uc81c \uc0dd\uac01\uc5d0\ub294 \ub370\uc774\ud130\ubca0\uc774\uc2a4\uac00 \uadf8\ub0e5 <code>JOIN<\/code> \ub300\uc2e0 <code>JOIN<\/code> \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uacc4\uce35\uc744 \ud1b5\ud574<\/p>\n<p>\uc774\uc81c \ud074\ub77c\uc774\uc5b8\ud2b8 \ud504\ub860\ud2b8\uc5d4\ub4dc\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.<\/p>\n<h2>\uc575\uade4\ub7ec \ud504\ub860\ud2b8\uc5d4\ub4dc\ub85c Ionic \ud504\ub808\uc784\uc6cc\ud06c \ub9cc\ub4e4\uae30<\/h2>\n<p>\uc55e\uc11c \uc5b8\uae09\ud588\ub4ef\uc774 \uc774\ubc88\uc5d0\ub294 \uc575\uade4\ub7ec\ub97c \uc0ac\uc6a9\ud558\ub294 Ionic \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ubd80\ud2b8\uc2a4\ud2b8\ub7a9\uc774\ub098 \ud30c\uc6b4\ub370\uc774\uc158\uc73c\ub85c \ub9e4\ub825\uc801\uc778 \ud504\ub860\ud2b8\uc5d4\ub4dc\ub97c \ub9cc\ub4e4\uae30\uc5d0\ub294 \ub108\ubb34 \uac8c\uc73c\ub974\ub2e4\ub294 \uc0dd\uac01\uc774 \ub4e4\uc5b4\uc11c \uc774 \ubc29\ubc95\uc744 \uc120\ud0dd\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n<p>Ionic \ud504\ub808\uc784\uc6cc\ud06c CLI\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uc0c1\ud0dc\uc5d0\uc11c \ub2e4\uc74c\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4:<\/p>\n<pre class=\"lang:default decode:true\">\uc544\uc774\uc624\ub2c9 \uc2a4\ud0c0\ud2b8 \uc0ac\uc774\ub4dc \uba54\ub274<\/pre>\n<p>\uc704\uc758 \uba85\ub839\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. <strong>pwa<\/strong> Ionic \ud504\ub808\uc784\uc6cc\ud06c \uc0ac\uc6a9 <code>\uc0ac\uc774\ub4dc \uba54\ub274<\/code> \ud15c\ud50c\ub9bf\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<p>\uae30\ubcf8 \ud15c\ud50c\ub9bf\uc740 \uc720\uc6a9\ud558\uc9c0\ub9cc \ud544\uc694\ud55c \ubaa8\ub4e0 \uac83\uc774 \ud3ec\ud568\ub418\uc5b4 \uc788\uc9c0\ub294 \uc54a\uc2b5\ub2c8\ub2e4. \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \uba87 \ud398\uc774\uc9c0\ub97c \ucd94\uac00\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<p>Ionic \ud504\ub808\uc784\uc6cc\ud06c \uc0dd\uc131\uae30\ub97c \uc0ac\uc6a9\ud558\uac70\ub098 \uc218\ub3d9\uc73c\ub85c \ub2e4\uc74c\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4. <strong>\ucf58\uc194<\/strong>, <strong>\uac8c\uc784<\/strong>\ubc0f <strong>\uac8c\uc784<\/strong> \ud398\uc774\uc9c0\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uac01 \ud398\uc774\uc9c0\uc5d0\ub294 HTML, SCSS \ubc0f TypeScript \ud30c\uc77c\uc774 \uc788\uc5b4\uc57c \ud558\uba70 \uac01 \ud398\uc774\uc9c0 \ub514\ub809\ud1a0\ub9ac\ub294 <strong>\ud398\uc774\uc9c0<\/strong> \ub514\ub809\ud130\ub9ac\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.<\/p>\n<p>\ud504\ub85c\uc81d\ud2b8\uc758\u00a0<strong>app\/app.component.ts<\/strong> \ud30c\uc77c\uc744 \uc5f4\uace0 \ub2e4\uc74c\uacfc \uac19\uc774 \ub9cc\ub4ed\ub2c8\ub2e4:<\/p>\n<pre class=\"lang:default decode:true\">'@angular\/core'\uc5d0\uc11c { Component, ViewChild }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'ionic-angular'\uc5d0\uc11c { Nav, Platform }\uc744 \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'@ionic-native\/status-bar'\uc5d0\uc11c { StatusBar }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'@ionic-native\/splash-screen'\uc5d0\uc11c { SplashScreen }\uc744 \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n\r\n'..\/pages\/games\/games'\uc5d0\uc11c { GamesPage }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'..\/pages\/consoles\/consoles'\uc5d0\uc11c { ConsolesPage }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n\r\n\ucef4\ud3ec\ub10c\ud2b8({\r\n  templateUrl: 'app.html'\r\n})\r\n\ub0b4\ubcf4\ub0b4\uae30 \ud074\ub798\uc2a4 MyApp {\r\n  \ubdf0\ucc28\uc77c\ub4dc(Nav) nav: Nav;\r\n\r\n  rootPage: any = GamesPage;\r\n\r\n  pages: \ubc30\uc5f4;\r\n\r\n  \uc0dd\uc131\uc790(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {\r\n    this.initializeApp();\r\n\r\n    \/\/ ngFor \ubc0f \ud0d0\uc0c9 \uc608\uc81c\uc5d0 \uc0ac\uc6a9\ub428\r\n    this.pages = [\r\n      { title: 'Games', component: GamesPage },\r\n      { title: '\ucf58\uc194', component: ConsolesPage }\r\n    ];\r\n\r\n  }\r\n\r\n  initializeApp() {\r\n    this.platform.ready().then(() =&gt; {\r\n      \/\/ \uc774\uc81c \ud50c\ub7ab\ud3fc\uc774 \uc900\ube44\ub418\uc5c8\uace0 \ud50c\ub7ec\uadf8\uc778\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\r\n      \/\/ \uc5ec\uae30\uc11c \ud544\uc694\ud55c \uc0c1\uc704 \uc218\uc900\uc758 \ub124\uc774\ud2f0\ube0c \uc791\uc5c5\uc744 \uc218\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\r\n      this.statusBar.styleDefault();\r\n      this.splashScreen.hide();\r\n    });\r\n  }\r\n\r\n  openPage(page) {\r\n    \/\/ \uc774 \ud398\uc774\uc9c0\ub9cc \ud45c\uc2dc\ub418\ub3c4\ub85d \ucf58\ud150\uce20 \ud0d0\uc0c9\uc744 \uc7ac\uc124\uc815\ud569\ub2c8\ub2e4.\r\n    \/\/ \uc774 \uc2dc\ub098\ub9ac\uc624\uc5d0\uc11c\ub294 \ub4a4\ub85c \ubc84\ud2bc\uc774 \ud45c\uc2dc\ub418\uc9c0 \uc54a\uae30\ub97c \uc6d0\ud569\ub2c8\ub2e4.\r\n    this.nav.setRoot(page.component);\r\n  }\r\n}<\/pre>\n<p>\ub2e4\uc74c\uc744 \uac00\uc838\uc628 \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\u00a0<code>\uac8c\uc784 \ud398\uc774\uc9c0<\/code> \uadf8\ub9ac\uace0 <code>\ucf58\uc194 \ud398\uc774\uc9c0<\/code>\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\uc5ec <code>\ud398\uc774\uc9c0<\/code> \ubc30\uc5f4\uc744 \ucd94\uac00\ud558\uace0 \uae30\ubcf8 \ub8e8\ud2b8 \ud398\uc774\uc9c0\ub97c <code>\uac8c\uc784 \ud398\uc774\uc9c0<\/code>. \uc774\ub807\uac8c \ud558\uba74 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \uc2dc\uc791\ub420 \ub54c \ud0d0\uc0c9 \ubc0f \uae30\ubcf8 \ud398\uc774\uc9c0\uac00 \uc124\uc815\ub429\ub2c8\ub2e4.<\/p>\n<p>\uc124\uc815\uc744 \uc644\ub8cc\ud558\ub824\uba74 \ud504\ub85c\uc81d\ud2b8\uc758\u00a0<strong>\uc571\/\uc571.\ubaa8\ub4c8.ts<\/strong> \ud30c\uc77c\uc744 \ub9cc\ub4ed\ub2c8\ub2e4. \ub2e4\uc74c\uacfc \uac19\uc774 \ub9cc\ub4ed\ub2c8\ub2e4:<\/p>\n<pre class=\"lang:default decode:true\">'@angular\/platform-browser'\uc5d0\uc11c { BrowserModule }\uc744 \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'@angular\/core'\uc5d0\uc11c { ErrorHandler, NgModule }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'ionic-angular'\uc5d0\uc11c { IonicApp, IonicErrorHandler, IonicModule }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'@angular\/http'\uc5d0\uc11c { HttpModule }\uc744 \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n\r\n'.\/app.component'\uc5d0\uc11c { MyApp }\uc744 \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'..\/pages\/games\/games'\uc5d0\uc11c { GamesPage }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'..\/pages\/game\/game'\uc5d0\uc11c { GamePage }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'..\/pages\/consoles\/consoles'\uc5d0\uc11c { ConsolesPage }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n\r\n'@ionic-native\/status-bar'\uc5d0\uc11c { StatusBar }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'@ionic-native\/splash-screen'\uc5d0\uc11c { SplashScreen }\uc744 \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n\r\n@NgModule({\r\n  \uc120\uc5b8 [\r\n    MyApp,\r\n    GamesPage,\r\n    GamePage,\r\n    \ucf58\uc194 \ud398\uc774\uc9c0\r\n  ],\r\n  import: [\r\n    BrowserModule,\r\n    HttpModule,\r\n    IonicModule.forRoot(MyApp),\r\n  ],\r\n  \ubd80\ud2b8\uc2a4\ud2b8\ub7a9: [IonicApp],\r\n  \ud56d\ubaa9 \ucef4\ud3ec\ub10c\ud2b8: [\r\n    MyApp,\r\n    GamesPage,\r\n    GamePage,\r\n    \ucf58\uc194 \ud398\uc774\uc9c0\r\n  ],\r\n  \uc81c\uacf5\uc790 [\r\n    StatusBar,\r\n    \uc2a4\ud50c\ub798\uc2dc\uc2a4\ud06c\ub9b0,\r\n    {provide: ErrorHandler, useClass: IonicErrorHandler}\r\n  ]\r\n})\r\nexport class AppModule {}<\/pre>\n<p>\uc0c8 \ud398\uc774\uc9c0\ub97c \uac01\uac01 \uac00\uc838\uc640\uc11c \uc0c8 \ud398\uc774\uc9c0\ub97c <code>\uc120\uc5b8<\/code> \uadf8\ub9ac\uace0 <code>\ud56d\ubaa9 \uad6c\uc131 \uc694\uc18c<\/code> \ubc30\uc5f4\uc758 <code>@NgModule<\/code> \ube14\ub85d.<\/p>\n<p>\uc774\uc81c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uacfc API \uc5f0\uacb0\uc5d0 \uc9d1\uc911\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ud504\ub85c\uc81d\ud2b8\uc758\u00a0<strong>src\/pages\/games\/games.ts<\/strong> \ud30c\uc77c\uc744 \uc5f4\uace0 \ub2e4\uc74c\uacfc \uac19\uc774 \ub9cc\ub4ed\ub2c8\ub2e4. \ub2e4\uc74c\uc5d0 \uc5b4\ub5a4 \uc77c\uc774 \uc77c\uc5b4\ub098\ub294\uc9c0 \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:default decode:true\">'@angular\/core'\uc5d0\uc11c { Component }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'ionic-angular'\uc5d0\uc11c { NavController, ModalController }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'@angular\/http'\uc5d0\uc11c { Http, Headers, RequestOptions }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\nimport \"rxjs\/Rx\";\r\n\"..\/game\/game\"\uc5d0\uc11c { GamePage }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n\r\n\ucef4\ud3ec\ub10c\ud2b8({\r\n    selector: 'page-games',\r\n    templateUrl: 'games.html'\r\n})\r\n\ub0b4\ubcf4\ub0b4\uae30 \ud074\ub798\uc2a4 GamesPage {\r\n\r\n    public games: Array;\r\n\r\n    \uacf5\uac1c \uc0dd\uc131\uc790(public navCtrl: NavController, private http: Http, private modalCtrl: ModalController) {\r\n        this.games = [];\r\n    }\r\n\r\n    public ionViewDidEnter() {\r\n        this.http.get(\"https:\/\/localhost:3000\/games\")\r\n            .map(result =&gt; result.json())\r\n            .subscribe(result =&gt; {\r\n                this.games = result;\r\n            });\r\n    }\r\n\r\n    public create() {\r\n        let gameModal = this.modalCtrl.create(GamePage);\r\n        gameModal.onDidDismiss(data =&gt; {\r\n            let headers = new Headers({ \"Content-Type\": \"application\/json\" });\r\n            let options = new RequestOptions({ headers: headers });\r\n            this.http.post(\"https:\/\/localhost:3000\/game\", JSON.stringify(data), options)\r\n                .subscribe(result =&gt; {\r\n                    this.games.push({ \"game_title\": data.title, \"console_title\": \"\"});\r\n                });\r\n        });\r\n        gameModal.present();\r\n    }\r\n\r\n}<\/pre>\n<p>\ub0b4 <code>\uac8c\uc784 \ud398\uc774\uc9c0<\/code> \ud074\ub798\uc2a4\uc5d0\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uacf5\uc6a9 \ubcc0\uc218\uac00 \uc788\uc2b5\ub2c8\ub2e4. <code>\uac8c\uc784<\/code>. \uc774 \ud30c\uc77c\uc740 \uacf5\uac1c\ub418\uc5b4 \uc788\uc73c\ubbc0\ub85c HTML\uc744 \ud1b5\ud574 \uc561\uc138\uc2a4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc5ec\uae30\uc5d0\ub294 Node.js \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ubc18\ud658\ub41c \ubaa8\ub4e0 \uac8c\uc784\uc774 \ud3ec\ud568\ub429\ub2c8\ub2e4.<\/p>\n<p>\ud398\uc774\uc9c0\uac00 \ub85c\ub4dc\ub418\uba74 \uc5d4\ub4dc\ud3ec\uc778\ud2b8\ub97c \ucffc\ub9ac\ud558\ub824\uace0 \ud569\ub2c8\ub2e4. \uc774 \uc791\uc5c5\uc740 \uc808\ub300\ub85c <code>\uc0dd\uc131\uc790<\/code> \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc5c6\uc73c\ubbc0\ub85c \ub300\uc2e0 <code>ionViewDidEnter<\/code> \uba54\uc11c\ub4dc\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4. \uc694\uccad\uc744 \uc2e4\ud589\ud558\uba74 \uacb0\uacfc\uac00 JSON\uc73c\ub85c \ubcc0\ud658\ub41c \ub2e4\uc74c \uacf5\uc6a9 \ubcc0\uc218\uc5d0 \ub85c\ub4dc\ub429\ub2c8\ub2e4.<\/p>\n<p>\ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \uc0c8 \uac8c\uc784\uc744 \ub9cc\ub4e4\ub824\uba74 \uc0c1\ud669\uc774 \uc870\uae08 \ub2ec\ub77c\uc9d1\ub2c8\ub2e4. \ubaa8\ub2ec \ub300\ud654 \uc0c1\uc790\ub97c \ud45c\uc2dc\ud558\uace0 \uc785\ub825\uc744 \uc218\uc9d1\ud560 \uac83\uc785\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:default decode:true\">public create() {\r\n    let gameModal = this.modalCtrl.create(GamePage);\r\n    gameModal.onDidDismiss(data =&gt; {\r\n        let headers = new Headers({ \"Content-Type\": \"application\/json\" });\r\n        let options = new RequestOptions({ headers: headers });\r\n        this.http.post(\"https:\/\/localhost:3000\/game\", JSON.stringify(data), options)\r\n            .subscribe(result =&gt; {\r\n                this.games.push({ \"game_title\": data.title, \"console_title\": \"\"});\r\n            });\r\n    });\r\n    gameModal.present();\r\n}<\/pre>\n<p>\uadf8\ub9ac\uace0 <code>create<\/code> \uba54\uc11c\ub4dc\ub294 <code>\uac8c\uc784 \ud398\uc774\uc9c0<\/code> \ub97c \uc785\ub825\ud558\uba74 \ubaa8\ub2ec \ud615\uc2dd\uc774 \ub429\ub2c8\ub2e4. \ubaa8\ub2ec\uc758 \uc591\uc2dd\uc5d0 \uc785\ub825\ub41c \ubaa8\ub4e0 \ub370\uc774\ud130\ub294 \ub2e4\uc2dc <code>\uac8c\uc784 \ud398\uc774\uc9c0<\/code> \ub97c \ud638\ucd9c\ud558\uace0 HTTP \uc694\uccad\uc744 \ud1b5\ud574 API\ub85c \uc804\uc1a1\ud569\ub2c8\ub2e4.<\/p>\n<p>\uba3c\uc800 \ub2e4\uc74c\uc744 \uc0b4\ud3b4\ubcf4\uae30 \uc804\uc5d0\u00a0<code>\uac8c\uc784 \ud398\uc774\uc9c0<\/code>\ub97c \uad6c\ub3d9\ud558\ub294 HTML\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. <code>\uac8c\uc784 \ud398\uc774\uc9c0<\/code>.<\/p>\n<pre class=\"lang:default decode:true\"><\/button>\r\n        \uac8c\uc784\r\n        \r\n            \r\n                \r\n            <\/button>\r\n        \r\n    \r\n\r\n\r\n\r\n    \r\n        \r\n            {{game.game_title}}\r\n<span class=\"item-note\">{{game.console_title}}<\/span>\r\n<\/\ubc84\ud2bc> <\/\uc774\uc628> <\/\uc774\uc628><\/pre>\n<p>\uc704\uc758 HTML\uc5d0\uc11c, \uc6b0\ub9ac\ub294 \uacf5\uac1c\uc801\uc778 <code>\uac8c\uc784<\/code> \ubc30\uc5f4\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \ubc30\uc5f4\uc758 \uac01 \uac1d\uccb4\ub294 \ubaa9\ub85d \ub0b4\uc5d0\uc11c \ud654\uba74\uc5d0 \ub80c\ub354\ub9c1\ub429\ub2c8\ub2e4. Angular\uac00 \ubaa8\ub4e0 \ubb34\uac70\uc6b4 \uc791\uc5c5\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n<p>\ud504\ub85c\uc81d\ud2b8\uc758\u00a0<strong>src\/pages\/game\/game.ts<\/strong> \ud30c\uc77c\uc744 \uc5f4\uace0 \ub2e4\uc74c\uc744 \ud3ec\ud568\ud558\uc138\uc694:<\/p>\n<pre class=\"lang:default decode:true\">'@angular\/core'\uc5d0\uc11c { Component }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'ionic-angular'\uc5d0\uc11c { IonicPage, NavController, NavParams, ViewController }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'@angular\/http'\uc5d0\uc11c { Http, Headers, RequestOptions }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n\"rxjs\/Rx\" \uc784\ud3ec\ud2b8;\r\n\r\n@IonicPage()\r\n\ucef4\ud3ec\ub10c\ud2b8({\r\n    selector: 'page-game',\r\n    templateUrl: 'game.html',\r\n})\r\nexport class GamePage {\r\n\r\n    \uacf5\uc6a9 \ucf58\uc194: Array;\r\n    \uacf5\uc6a9 \uc785\ub825: any;\r\n\r\n    \uc0dd\uc131\uc790(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController, private http: Http) {\r\n        this.consoles = [];\r\n        this.input = {\r\n            \"cid\": \"\",\r\n            \"title\": \"\"\r\n        }\r\n    }\r\n\r\n    ionViewDidEnter() {\r\n        this.http.get(\"https:\/\/localhost:3000\/consoles\")\r\n            .map(result =&gt; result.json())\r\n            .subscribe(result =&gt; {\r\n                for(let i = 0; i &lt; result.length; i++) { {\r\n                    this.consoles.push(result[i]);\r\n                }\r\n            });\r\n    }\r\n\r\n    public save() {\r\n        this.viewCtrl.dismiss(this.input);\r\n    }\r\n\r\n}<\/pre>\n<p>\uc774 \ubaa8\ub2ec \ub85c\uc9c1\uc740 \uc774\ubbf8 \uc0b4\ud3b4\ubcf8 \uac83\uacfc \uc720\uc0ac\ud569\ub2c8\ub2e4. HTML\uacfc \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\uc5d0 \ubc14\uc778\ub529\ub41c \ud3fc\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uc591\uc2dd\uc5d0\uc11c <code>ionViewDidEnter<\/code> \ud2b8\ub9ac\uac70\uac00 \ubc1c\uc0dd\ud558\uba74 \ucf58\uc194 \uc815\ubcf4\ub97c \ucffc\ub9ac\ud569\ub2c8\ub2e4. \uc774 \ucf58\uc194 \uc815\ubcf4\ub294 \uacb0\uad6d \uc0ac\uc6a9\uc790\uac00 \uc120\ud0dd\ud560 \uc218 \uc788\ub294 \ub77c\ub514\uc624 \ubaa9\ub85d\uc5d0 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n<p>\uc0ac\uc6a9\uc790\uac00 <code>\uc800\uc7a5<\/code> \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uba74 \uacf5\uac1c \uc591\uc2dd\uc5d0 \ubc14\uc778\ub529\ub41c \ub370\uc774\ud130\uac00 \uc774\uc804 <code>\uac8c\uc784 \ud398\uc774\uc9c0<\/code> \ud398\uc774\uc9c0\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.<\/p>\n<p>\uc774 \ubaa8\ub2ec\uc744 \uad6c\ub3d9\ud558\ub294 HTML\uc740 \ub2e4\uc74c\uc5d0\uc11c \ucc3e\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\u00a0<strong>src\/pages\/game\/game.html<\/strong> \ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \ubcf4\uc785\ub2c8\ub2e4:<\/p>\n<pre class=\"lang:default decode:true\">\uc0c8 \uac8c\uc784\r\n    \r\n\r\n\r\n\r\n    \r\n        \r\n            \uc81c\ubaa9<\/\uc774\uc628-\ub77c\ubca8>\r\n            \r\n        \r\n        \r\n            \ucf58\uc194\r\n            \r\n                {{ \ucf58\uc194.\uc81c\ubaa9 }}\r\n            \r\n        \r\n        \r\n            \uc800\uc7a5<\/\ubc84\ud2bc><\/pre>\n<p>\uc591\uc2dd\uc744 \uad6c\uc131\ud558\ub294 \uac04\ub2e8\ud55c \ubaa9\ub85d\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uc591\uc2dd \uc694\uc18c\ub294 TypeScript \ubcc0\uc218\uc5d0 \ubc14\uc778\ub529\ub418\uace0 \ucf58\uc194 \uc815\ubcf4\uac00 \ub8e8\ud504\ub418\uc5b4 HTML\uc744 \ucc44\uc6c1\ub2c8\ub2e4. <code>\uc120\ud0dd<\/code> \uc694\uc18c\uc785\ub2c8\ub2e4.<\/p>\n<p>\uc774\uc81c Angular \ud504\ub860\ud2b8\uc5d4\ub4dc\uc758 \ub9c8\uc9c0\ub9c9 \ud398\uc774\uc9c0\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.<\/p>\n<p>\ud504\ub85c\uc81d\ud2b8\uc758\u00a0<strong>src\/pages\/consoles\/consoles.ts<\/strong> \ud30c\uc77c\uc744 \uc5f4\uace0 \ub2e4\uc74c\uc744 \ud3ec\ud568\ud558\uc138\uc694:<\/p>\n<pre class=\"lang:default decode:true\">'@angular\/core'\uc5d0\uc11c { Component }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'ionic-angular'\uc5d0\uc11c { NavController, NavParams, AlertController }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'@angular\/http'\uc5d0\uc11c { Http, Headers, RequestOptions }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n\"rxjs\/Rx\" \uc784\ud3ec\ud2b8;\r\n\r\n\ucef4\ud3ec\ub10c\ud2b8({\r\n  selector: 'page-consoles',\r\n  templateUrl: 'consoles.html'\r\n})\r\n\ucf58\uc194 \ud398\uc774\uc9c0 \ud074\ub798\uc2a4 \uc218\ucd9c {\r\n\r\n    \uacf5\uc6a9 \ucf58\uc194: Array;\r\n\r\n    \uacf5\uac1c \uc0dd\uc131\uc790(public navCtrl: NavController, private http: Http, private alertCtrl: AlertController) {\r\n        this.consoles = [];\r\n    }\r\n\r\n    public ionViewDidEnter() {\r\n        this.http.get(\"https:\/\/localhost:3000\/consoles\")\r\n            .map(result =&gt; result.json())\r\n            .subscribe(result =&gt; {\r\n                this.consoles = result;\r\n            });\r\n    }\r\n\r\n    public create() {\r\n        let alert = this.alertCtrl.create({\r\n            title: '\ucf58\uc194 \ucd94\uac00',\r\n            inputs: [\r\n                {\r\n                    \uc774\ub984: '\uc81c\ubaa9',\r\n                    \uc790\ub9ac \ud45c\uc2dc\uc790: '\uc81c\ubaa9'\r\n                },\r\n                {\r\n                    name: 'year',\r\n                    \uc790\ub9ac \ud45c\uc2dc\uc790: '\uc5f0\ub3c4'\r\n                }\r\n            ],\r\n            \ubc84\ud2bc: [\r\n                {\r\n                    text: '\ucde8\uc18c',\r\n                    role: '\ucde8\uc18c',\r\n                    \ud578\ub4e4\ub7ec: \ub370\uc774\ud130 =&gt; {\r\n                        console.log('\ucde8\uc18c \ud074\ub9ad');\r\n                    }\r\n                },\r\n                {\r\n                    text: '\uc800\uc7a5',\r\n                    \ud578\ub4e4\ub7ec: \ub370\uc774\ud130 =&gt; {\r\n                        let headers = new Headers({ \"Content-Type\": \"application\/json\" });\r\n                        let options = new RequestOptions({ headers: headers });\r\n                        this.http.post(\"https:\/\/localhost:3000\/console\", JSON.stringify(data), options)\r\n                            .subscribe(result =&gt; {\r\n                                this.consoles.push(data);\r\n                            }, error =&gt; {});\r\n                    }\r\n                }\r\n            ]\r\n        });\r\n        alert.present();\r\n    }\r\n\r\n}<\/pre>\n<p>\uae30\uc874\uc5d0 \ubcf4\uc168\ub358 \uac83\uacfc \ud06c\uac8c \ub2e4\ub974\uc9c0\ub294 \uc54a\uc9c0\ub9cc \uc0c8\ub85c\uc6b4 \uae30\ub2a5\uc774 \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc0c8\ub85c\uc6b4 \ube44\ub514\uc624 \uac8c\uc784 \ucf58\uc194 \uc815\ubcf4\uc5d0 \ub300\ud55c \uc785\ub825\uc744 \uc218\uc9d1\ud558\uae30 \uc704\ud574 \ud31d\uc5c5 \ub300\ud654 \uc0c1\uc790\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ud31d\uc5c5\uc774 \ub2eb\ud788\uba74 \ub2e4\uc74c\uc774 \uc2e4\ud589\ub429\ub2c8\ub2e4:<\/p>\n<pre class=\"lang:default decode:true\">\ud578\ub4e4\ub7ec: \ub370\uc774\ud130 =&gt; {\r\n    let headers = new Headers({ \"Content-Type\": \"application\/json\" });\r\n    let options = new RequestOptions({ headers: headers });\r\n    this.http.post(\"https:\/\/localhost:3000\/console\", JSON.stringify(data), options)\r\n        .subscribe(result =&gt; {\r\n            this.consoles.push(data);\r\n        }, error =&gt; {});\r\n}<\/pre>\n<p>\uadf8\ub7ec\uba74 \uc591\uc2dd\uc5d0\uc11c \ucc3e\uc740 \uc815\ubcf4\ub97c \uac00\uc838\uc640 HTTP\ub97c \ud1b5\ud574 API\ub85c \uc804\uc1a1\ud558\uace0, API\ub294 \ucf58\uc194 \uc815\ubcf4\ub97c \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \uc800\uc7a5\ud569\ub2c8\ub2e4.<\/p>\n<p>\uba4b\uc9c0\uc9c0 \uc54a\ub098\uc694?<\/p>\n<p>\ud504\ub85c\uc81d\ud2b8\uc758\u00a0<strong>src\/pages\/consoles\/consoles.html<\/strong> \ud30c\uc77c\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n<pre class=\"lang:default decode:true\">&lt;ion-header&gt;\r\n    &lt;ion-navbar&gt;\r\n        &lt;button ion-button menutoggle&gt;\r\n            &lt;ion-icon name=&quot;menu&quot;&gt;&lt;\/ion-icon&gt;\r\n        &lt;\/button&gt;\r\n        &lt;ion-title&gt;\ucf58\uc194&lt;\/ion-title&gt;\r\n        &lt;ion-buttons end&gt;\r\n            &lt;button ion-button icon-only (click)=&quot;create()&quot;&gt;\r\n                &lt;ion-icon name=&quot;add&quot;&gt;&lt;\/ion-icon&gt;\r\n            &lt;\/button&gt;\r\n        &lt;\/ion-buttons&gt;\r\n    &lt;\/ion-navbar&gt;\r\n&lt;\/ion-header&gt;\r\n\r\n&lt;ion-content&gt;\r\n    &lt;ion-list&gt;\r\n        &lt;button ion-item *ngfor=&quot;let console of consoles&quot;&gt;\r\n            {{ \ucf58\uc194.\uc81c\ubaa9 }}\r\n            &lt;span class=&quot;item-note&quot; item-right&gt;\r\n                {{ console.year }}\r\n            &lt;\/span&gt;\r\n        &lt;\/button&gt;\r\n    &lt;\/ion-list&gt;\r\n&lt;\/ion-content&gt;<\/pre>\n<p>\ub2e4\uc2dc \ub9d0\ud558\uc9c0\ub9cc, \uc55e\uc11c \uc0b4\ud3b4\ubcf8 \ub2e4\ub978 HTML \ud30c\uc77c\uacfc \uac70\uc758 \ub3d9\uc77c\ud569\ub2c8\ub2e4.<\/p>\n<h2>\uacb0\ub860<\/h2>\n<p>\ubc29\uae08 Midwest JS 2017\uc5d0\uc11c \uc81c\uac00 \ub2e4\ub8ec \ubaa8\ub4e0 \ub0b4\uc6a9\uc744 \uc694\uc57d\ud574 \ub4dc\ub838\uc2b5\ub2c8\ub2e4. NoSQL \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc778 Couchbase\uc640 \ud1b5\uc2e0\ud558\ub294 Node.js API\ub97c \ub9cc\ub4dc\ub294 \ubc29\ubc95\uacfc Angular \ubc0f Ionic Framework\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud504\ub7f0\ud2b8\uc5d4\ub4dc\ub97c \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubd24\uc2b5\ub2c8\ub2e4. \uc774\ub294 \uc804\uccb4 \uc2a4\ud0dd \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uba87 \uac00\uc9c0 \uad6c\uc131 \uc694\uc18c\uc5d0 \ubd88\uacfc\ud569\ub2c8\ub2e4.<\/p>\n<p>\ub2e4\uc74c\uc5d0 \ub300\ud55c \uc790\uc138\ud55c \uc815\ubcf4 <a href=\"https:\/\/www.couchbase.com\/blog\/ko\/build-a-rest-api-with-node-js-express-and-couchbase\/\">Node.js \uc0ac\uc6a9<\/a> \uce74\uc6b0\uce58\ubca0\uc774\uc2a4\uc758 <a href=\"https:\/\/www.couchbase.com\/blog\/ko\/developers\/\" target=\"_blank\" rel=\"noopener\">\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uac1c\ubc1c\uc790 \ud3ec\ud138<\/a>. \uc81c\uac00 \ub2e4\uc2dc \ubbf8\ub4dc\uc6e8\uc2a4\ud2b8 JS\ub85c \ub3cc\uc544\uc624\uae38 \uc6d0\ud558\uc2dc\uba74 \ub313\uae00\ub85c \uc54c\ub824\uc8fc\uc138\uc694.<\/p>","protected":false},"excerpt":{"rendered":"<p>Back in August I had participated in Midwest JS located in\u00a0Minneapolis,\u00a0Minnesota. As you may know, I&#8217;m a huge fan of developing full stack applications with the JavaScript stack. This is exactly what I had presented on at the conference. My [&hellip;]<\/p>","protected":false},"author":63,"featured_media":13873,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1814,1815,1816,9327,1822,1812],"tags":[1704,1588,1534,1543],"ppma_author":[9032],"class_list":["post-3943","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-application-design","category-best-practices-and-tutorials","category-couchbase-server","category-javascript","category-node-js","category-n1ql-query","tag-angular","tag-full-stack","tag-ionic-framework","tag-javascript"],"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>Midwest JS Project Source on Full Stack Node Development, Available<\/title>\n<meta name=\"description\" content=\"The full stack Node.js, Angular, and Couchbase NoSQL project source from Midwest JS is now available, with full write-up guide to success.\" \/>\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\/midwest-js-project-source-full-stack-node-development-available\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Midwest JS Project Source on Full Stack Node Development, Available\" \/>\n<meta property=\"og:description\" content=\"The full stack Node.js, Angular, and Couchbase NoSQL project source from Midwest JS is now available, with full write-up guide to success.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/ko\/midwest-js-project-source-full-stack-node-development-available\/\" \/>\n<meta property=\"og:site_name\" content=\"The Couchbase Blog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/thepolyglotdeveloper\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-01T14:00:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-14T03:15:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2017\/08\/midwestjs-couchbase.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"768\" \/>\n\t<meta property=\"og:image:height\" content=\"558\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nic Raboy, Developer Advocate, Couchbase\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@nraboy\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nic Raboy, Developer Advocate, Couchbase\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/\"},\"author\":{\"name\":\"Nic Raboy, Developer Advocate, Couchbase\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1\"},\"headline\":\"Midwest JS Project Source on Full Stack Node Development, Available\",\"datePublished\":\"2017-09-01T14:00:21+00:00\",\"dateModified\":\"2025-06-14T03:15:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/\"},\"wordCount\":1489,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"keywords\":[\"Angular\",\"full stack\",\"ionic framework\",\"javascript\"],\"articleSection\":[\"Application Design\",\"Best Practices and Tutorials\",\"Couchbase Server\",\"JavaScript\",\"Node.js\",\"SQL++ \/ N1QL Query\"],\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/\",\"name\":\"Midwest JS Project Source on Full Stack Node Development, Available\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"datePublished\":\"2017-09-01T14:00:21+00:00\",\"dateModified\":\"2025-06-14T03:15:10+00:00\",\"description\":\"The full stack Node.js, Angular, and Couchbase NoSQL project source from Midwest JS is now available, with full write-up guide to success.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#primaryimage\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"width\":1800,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.couchbase.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Midwest JS Project Source on Full Stack Node Development, Available\"}]},{\"@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\/bb545ebe83bb2d12f91095811d0a72e1\",\"name\":\"Nic Raboy, Developer Advocate, Couchbase\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/8863514d8bed0cf6080f23db40e00354\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g\",\"caption\":\"Nic Raboy, Developer Advocate, Couchbase\"},\"description\":\"Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.\",\"sameAs\":[\"https:\/\/www.thepolyglotdeveloper.com\",\"https:\/\/www.facebook.com\/thepolyglotdeveloper\",\"https:\/\/x.com\/nraboy\"],\"url\":\"https:\/\/www.couchbase.com\/blog\/ko\/author\/nic-raboy-2\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\ud480\uc2a4\ud0dd \ub178\ub4dc \uac1c\ubc1c\uc5d0 \uad00\ud55c \ubbf8\ub4dc\uc6e8\uc2a4\ud2b8 JS \ud504\ub85c\uc81d\ud2b8 \uc18c\uc2a4, \uc0ac\uc6a9 \uac00\ub2a5","description":"The full stack Node.js, Angular, and Couchbase NoSQL project source from Midwest JS is now available, with full write-up guide to success.","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\/midwest-js-project-source-full-stack-node-development-available\/","og_locale":"ko_KR","og_type":"article","og_title":"Midwest JS Project Source on Full Stack Node Development, Available","og_description":"The full stack Node.js, Angular, and Couchbase NoSQL project source from Midwest JS is now available, with full write-up guide to success.","og_url":"https:\/\/www.couchbase.com\/blog\/ko\/midwest-js-project-source-full-stack-node-development-available\/","og_site_name":"The Couchbase Blog","article_author":"https:\/\/www.facebook.com\/thepolyglotdeveloper","article_published_time":"2017-09-01T14:00:21+00:00","article_modified_time":"2025-06-14T03:15:10+00:00","og_image":[{"width":768,"height":558,"url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2017\/08\/midwestjs-couchbase.jpg","type":"image\/jpeg"}],"author":"Nic Raboy, Developer Advocate, Couchbase","twitter_card":"summary_large_image","twitter_creator":"@nraboy","twitter_misc":{"Written by":"Nic Raboy, Developer Advocate, Couchbase","Est. reading time":"7\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/"},"author":{"name":"Nic Raboy, Developer Advocate, Couchbase","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1"},"headline":"Midwest JS Project Source on Full Stack Node Development, Available","datePublished":"2017-09-01T14:00:21+00:00","dateModified":"2025-06-14T03:15:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/"},"wordCount":1489,"commentCount":0,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","keywords":["Angular","full stack","ionic framework","javascript"],"articleSection":["Application Design","Best Practices and Tutorials","Couchbase Server","JavaScript","Node.js","SQL++ \/ N1QL Query"],"inLanguage":"ko-KR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/","url":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/","name":"\ud480\uc2a4\ud0dd \ub178\ub4dc \uac1c\ubc1c\uc5d0 \uad00\ud55c \ubbf8\ub4dc\uc6e8\uc2a4\ud2b8 JS \ud504\ub85c\uc81d\ud2b8 \uc18c\uc2a4, \uc0ac\uc6a9 \uac00\ub2a5","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","datePublished":"2017-09-01T14:00:21+00:00","dateModified":"2025-06-14T03:15:10+00:00","description":"The full stack Node.js, Angular, and Couchbase NoSQL project source from Midwest JS is now available, with full write-up guide to success.","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/"]}]},{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#primaryimage","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","width":1800,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Midwest JS Project Source on Full Stack Node Development, Available"}]},{"@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\/bb545ebe83bb2d12f91095811d0a72e1","name":"Nic Raboy, \uac1c\ubc1c\uc790 \uc639\ud638\uc790, Couchbase","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/8863514d8bed0cf6080f23db40e00354","url":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g","caption":"Nic Raboy, Developer Advocate, Couchbase"},"description":"\ub2c9 \ub77c\ubcf4\uc774\ub294 \ucd5c\uc2e0 \uc6f9 \ubc0f \ubaa8\ubc14\uc77c \uac1c\ubc1c \uae30\uc220\uc744 \uc639\ud638\ud558\ub294 \uc0ac\ub78c\uc785\ub2c8\ub2e4. \uadf8\ub294 Java, JavaScript, Golang \ubc0f Angular, NativeScript, Apache Cordova\uc640 \uac19\uc740 \ub2e4\uc591\ud55c \ud504\ub808\uc784\uc6cc\ud06c\uc5d0 \ub300\ud55c \uacbd\ud5d8\uc774 \uc788\uc2b5\ub2c8\ub2e4. Nic\uc740 \uc6f9 \ubc0f \ubaa8\ubc14\uc77c \uac1c\ubc1c\uc744 \ubcf4\ub2e4 \uc27d\uac8c \uc774\ud574\ud560 \uc218 \uc788\ub3c4\ub85d \uc790\uc2e0\uc758 \uac1c\ubc1c \uacbd\ud5d8\uc5d0 \ub300\ud574 \uae00\uc744 \uc4f0\uace0 \uc788\uc2b5\ub2c8\ub2e4.","sameAs":["https:\/\/www.thepolyglotdeveloper.com","https:\/\/www.facebook.com\/thepolyglotdeveloper","https:\/\/x.com\/nraboy"],"url":"https:\/\/www.couchbase.com\/blog\/ko\/author\/nic-raboy-2\/"}]}},"authors":[{"term_id":9032,"user_id":63,"is_guest":0,"slug":"nic-raboy-2","display_name":"Nic Raboy, Developer Advocate, Couchbase","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g","author_category":"","last_name":"Raboy","first_name":"Nic","job_title":"","user_url":"https:\/\/www.thepolyglotdeveloper.com","description":"\ub2c9 \ub77c\ubcf4\uc774\ub294 \ucd5c\uc2e0 \uc6f9 \ubc0f \ubaa8\ubc14\uc77c \uac1c\ubc1c \uae30\uc220\uc744 \uc639\ud638\ud558\ub294 \uc0ac\ub78c\uc785\ub2c8\ub2e4. \uadf8\ub294 Java, JavaScript, Golang \ubc0f Angular, NativeScript, Apache Cordova\uc640 \uac19\uc740 \ub2e4\uc591\ud55c \ud504\ub808\uc784\uc6cc\ud06c\uc5d0 \ub300\ud55c \uacbd\ud5d8\uc774 \uc788\uc2b5\ub2c8\ub2e4. Nic\uc740 \uc6f9 \ubc0f \ubaa8\ubc14\uc77c \uac1c\ubc1c\uc744 \ubcf4\ub2e4 \uc27d\uac8c \uc774\ud574\ud560 \uc218 \uc788\ub3c4\ub85d \uc790\uc2e0\uc758 \uac1c\ubc1c \uacbd\ud5d8\uc5d0 \ub300\ud574 \uae00\uc744 \uc4f0\uace0 \uc788\uc2b5\ub2c8\ub2e4."}],"_links":{"self":[{"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/posts\/3943","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\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/comments?post=3943"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/posts\/3943\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/media\/13873"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/media?parent=3943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/categories?post=3943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/tags?post=3943"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/ppma_author?post=3943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}