{"id":62,"date":"2020-10-18T21:24:31","date_gmt":"2020-10-18T12:24:31","guid":{"rendered":"http:\/\/practical.kr\/?p=62"},"modified":"2020-10-18T21:26:03","modified_gmt":"2020-10-18T12:26:03","slug":"graphql-mysql-%eb%8d%b0%ec%9d%b4%ed%84%b0-%ea%b0%80%ec%a0%b8%ec%98%a4%ea%b8%b0-%ec%8a%a4%ed%84%b0%eb%94%94","status":"publish","type":"post","link":"http:\/\/practical.kr\/?p=62","title":{"rendered":"GraphQL + MySQL \ub370\uc774\ud130 \uac00\uc838\uc624\uae30 \uc2a4\ud130\ub514"},"content":{"rendered":"\n<p>\ub124\uc774\ubc84\uc5d0 \uac1c\ubc1c\uc790 \ubaa8\uc9d1 \uacf5\uace0\ub97c \ubcf4\ub2e4\uac00 React Native \uac1c\ubc1c\uc790\ub97c \uad6c\ud558\ub294\ub370 GraphQL \uae30\ubc18\uc758 \ubc31\uc5d4\ub4dc \ud504\ub85c\uadf8\ub798\ubc0d \uc5ed\ud560\ub3c4 \ud544\uc694\ud558\ub2e4\ub294 \uac83\uc744 \ubcf4\uace0 \ub180\ub790\ub2e4. \uc138\uc0c1\uc774 \uc9c4\uc9dc \ubcc0\ud558\uae34 \ud588\ub2e4.<\/p>\n\n\n\n<p>\ubb3c\ub860 \ud504\ub860\ud2b8 \uac1c\ubc1c\uc790\uac00 \ubc31\uc5d4\ub4dc\ub97c \ub3d9\uc2dc\uc5d0 \uc791\uc5c5\ud560 \uc218 \uc788\uc73c\uba74 \ub9e4\uc6b0 \uc0dd\uc0b0\uc131\uc774 \ub192\uace0 \ubb38\uc11c\uc791\uc5c5 &amp; \ud611\uc758 \uacfc\uc815 \uc5c6\uc774 \ube60\ub974\uac8c \uc11c\ube44\uc2a4\ub97c \ub9cc\ub4e4\uc218 \uc788\ub2e4. \ub098\ub294 Node.js \uc640 Vue.js\ub97c \uc774\uc6a9\ud574\uc11c \uadf8\ub7f0\ubc29\uc2dd\uc73c\ub85c \uc791\uc5c5\uc744 \ud558\uace0 \uc788\ub294\ub370 \ub9e4\ubc88 \ud504\ub860\ud2b8\uc5d0\uc11c \uc5d4\ub4dc\ud3ec\uc778\ud2b8\uac00 \ud544\uc694\ud560\ub54c\ub9c8\ub2e4 Node\uc5d0\uc11c api\ub97c \ub9cc\ub4e4\uace0 \uadf8\uac78 \ubc1b\uc544\uc11c \uc4f0\uace0 \uc788\uc9c0\ub9cc \ud504\ub860\ud2b8\uc5d0\uc11c \uc774\uac78 \ub05d\ub0b4\ub294 \ubc29\ubc95\uc774 \uc5c6\ub098 \ud558\ub294 \uc0dd\uac01\uc740 \ub298 \ud558\uace0 \uc788\ub358 \ucc28\uc600\ub2e4.<\/p>\n\n\n\n<p>GraphQL\uc774 \uc774\uac78 \ud574\uc904 \uc218 \uc788\ub2e4\uace0 \ud574\uc11c \uacf5\ubd80\ub97c \ud574\ubd10\uc57c\uc9c0 \ud55c\uac8c \ubc8c\uc368 \ub450\ud574\ub97c \ub118\uae30\uace0 \uc788\uae30\ub3c4 \ud558\uace0 \uc5ec\ub7ec\uac00\uc9c0 \ubb38\uc11c\ub97c \uc77d\uc5b4 \ubd24\uc9c0\ub9cc \uc5ed\uc2dc \ub9cc\ub4e4\uc5b4 \ubcf4\ub294\uac8c \ucd5c\uace0\ub77c\u2026 \uadf8\uac8c \ubb54\uc9c0\ub294 \ub300\ucda9 \uc544\ub798 \ub9c1\ud06c\ub85c \ud241\uce58\uace0 Hello World \uc640 \uc880 \ub354 \uc2e4\uc81c\uc801\uc778 Mysql DB\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uc77d\uc5b4\uc640\uc11c \ubfcc\ub824\uc8fc\ub294\ub370\uae4c\uc9c0 \ud55c\ubc88 \ud574\ubcf4\uae30\ub85c \ud588\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-velopert-log\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"KgnV8wZjO7\"><a href=\"https:\/\/velopert.com\/2318\">GraphQL \uac15\uc88c 1\ud3b8: GraphQL\uc774 \ubb34\uc5c7\uc778\uac00?<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;GraphQL \uac15\uc88c 1\ud3b8: GraphQL\uc774 \ubb34\uc5c7\uc778\uac00?&#8221; &#8212; VELOPERT.LOG\" src=\"https:\/\/velopert.com\/2318\/embed#?secret=KgnV8wZjO7\" data-secret=\"KgnV8wZjO7\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Node.js &amp; Express.js \ub85c \uc11c\ubc84\ub97c \uad6c\uc131\ud558\uba74 \ube60\ub978\ubc29\ubc95\uc73c\ub85c Hello World\ub97c \ucc0d\uc5b4 \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&gt; express --view=pug\n&gt; npm install express-graphql graphql<\/pre>\n\n\n\n<p>Express Generator\ub97c \uc774\uc6a9\ud574 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\uace0 npm\uc73c\ub85c express-graphql, graphql\uc744 \uc124\uce58\ud588\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>var <\/strong><em>express <\/em>= require(<strong>'express'<\/strong>);\n<strong>var <em>graphqlHTTP <\/em><\/strong>= require(<strong>'express-graphql'<\/strong>);\n<strong>var <\/strong>{ <em>buildSchema <\/em>} = require(<strong>'graphql'<\/strong>);\n\n<strong>var <em>app <\/em><\/strong>= <em>express<\/em>();\n\n<strong>var <\/strong>schema = <em>buildSchema<\/em>(<strong>`\n  type Query {\n    hello: String\n  }  \n`<\/strong>);\n\n<strong>var <\/strong>root = {\n  hello: ()=&gt;{\n    <strong>return 'Hello World'\n  <\/strong>},\n};\n\n<strong><em>app<\/em><\/strong>.use(<strong>'\/graphql'<\/strong>, <strong><em>graphqlHTTP<\/em><\/strong>({\n  <strong>schema<\/strong>: schema,\n  <strong>rootValue<\/strong>: root,\n  <strong>graphiql<\/strong>: <strong>true\n<\/strong>}));\n<\/pre>\n\n\n\n<p>\ucf54\ub4dc\ub97c \uc2e4\ud589\ud558\uace0&nbsp;<a href=\"http:\/\/localhost:3000\/graphql\">http:\/\/localhost:3000\/graphql<\/a>&nbsp;\uc5d0 \uc811\uc18d\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \ud654\uba74\uc744 \ubcfc \uc218 \uc788\ub2e4. \uc774\uac83\uc740 app.use() \uc5d0\uc11c&nbsp;<strong>graphiql<\/strong>&nbsp;\uc635\uc158\uc744 true\ub85c \uc14b\ud305\ud558\uba74 \ub098\ud0c0\ub098\ub294 \ud654\uba74\uc73c\ub85c GraphQL\uc758 \ud14c\uc2a4\ud2b8 \uc778\ud130\ud398\uc774\uc2a4\uc774\ub2e4. \uc5ec\uae30\uc11c api\ub97c \ubbf8\ub9ac \ud14c\uc2a4\ud2b8 \ud574\ubcfc \uc218 \uc788\ub2e4. \uc790\ub3d9\uc644\uc131 \uae30\ub2a5\ub3c4 \uc9c0\uc6d0\ud55c\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/practical.kr\/wp-content\/uploads\/2019\/12\/GraphiQL-2019-12-10-15-56-01.jpg\" alt=\"\" class=\"wp-image-64\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/practical.kr\/wp-content\/uploads\/2019\/12\/GraphiQL-2019-12-10-16-02-53.jpg\" alt=\"\" class=\"wp-image-66\"\/><\/figure>\n\n\n\n<p>Hello World\ub294 \ucc0d\uc5c8\ub2e4. \ub300\ucda9 \uc774\uc81c \ub2e4 \uc54c\uc558\ub2e4\u2026\ub294 \uc544\ub2c8\uace0 \ud604\uc7ac \uac00\uc7a5 \ub9ce\uc774 \uc4f0\uace0 \uc788\ub294 DB\uc778 MySQL\uc5d0 \uc5f0\uacb0\ud574\uc11c \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294\ub370 \uae4c\uc9c0 \ud574\uc57c\ud55c\ub2e4. Node\uc5d0\uc11c MySQL \uc5f0\uacb0\uacfc \uae30\ud0c0 \uacfc\uc815\uc740 \uc0dd\ub7b5\ud558\uace0 \uc544\ub798\uc640 \uac19\uc740 \ucf54\ub4dc\ub97c \uc791\uc131 \ud588\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var app = express();\nvar schema = buildSchema(`\n  type Query {\n    user: [User]\n  }\n  \n  type User {\n    name: String\n    age: Int\n    sex: String\n  }  \n`);\n\nvar root = {\n  user: ()=&gt;{\n    return new Promise(function (resolve) {\n      pool.query('select * from users', function (err, res) {\n        resolve(res);\n      });\n    });\n  },\n};\n\napp.use('\/graphql', graphqlHTTP({\n  schema: schema,\n  rootValue: root,\n  graphiql: true\n}));\n<\/pre>\n\n\n\n<p>\uc758\uc758 \ucf54\ub4dc\ub97c \uc2e4\ud589\ud55c \uacb0\uacfc\ub85c \uc544\ub798\uc640 \uac19\uc740 \ud654\uba74\uc744 \uc5bb\uc5c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/practical.kr\/wp-content\/uploads\/2019\/12\/GraphiQL-2019-12-10-16-49-00.jpg\" alt=\"\" class=\"wp-image-68\"\/><\/figure>\n\n\n\n<p>\ubd84\uba85 \ub370\uc774\ud130\ub294 \ub098\uc654\ub294\ub370 \ubb54\uac00 \uc798\ubabb\ud55c\uac8c \uc544\ub2cc\uac00 \uc2f6\uc740 \uc0dd\uac01\uc774 \ub4e4\uc5c8\ub2e4. \ud0c0\uc785\ub3c4 \uc11c\ubc84\uc5d0\uc11c \uc120\uc5b8\ud574 \uc918\uc57c \ud558\uace0 \ucffc\ub9ac\ub3c4 \uc11c\ubc84\uc5d0\uc11c \uc2e4\ud589\uc2dc\ud0a8\ub2e4\uba74 \uc774\uac8c \uae30\uc874\uc758 REST API\uc640 \ubb34\uc5c8\uc774 \ub2e4\ub978\uac00? \uadf8\uc800 \ud55c\uac1c\uc758 \uc5d4\ub4dc \ud3ec\uc778\ud2b8\ub97c \uc4f4\uac70 \ub9d0\uace0 \ub2e4\ub978\uac8c \uc788\ub098 \uc2f6\uc740 \uc0dd\uac01\uc774 \ub4e4\uc5c8\ub2e4.<\/p>\n\n\n\n<p>\uadf8\ub798\uc11c \uc880 \ub354 \uac80\uc0c9\uc744 \ud574\ubd24\ub2e4. \uc544\ub798 \ub9c1\ud06c\uc5d0\uc11c \ud558\ub098\uc758 \uc5d4\ub4dc\ud3ec\uc778\ud2b8\uac00 \uc911\uc694\ud55c \ucc28\uc774\uc810\uc774\uba70 Query\uc758 \uc694\uccad\uacfc\uc815\uc5d0\uc11c \ud30c\ub77c\uba54\ud0c0\uc758 \ucc28\uc774\ub85c \uacb0\uacfc\ub97c \ub2e4\ub974\uac8c \uac00\uc838\uc62c \uc218 \uc788\ub2e4\ub294 \uc810\uc774 \uc911\uc694\ud558\ub2e4\uace0 \uc54c\ub824\uc92c\ub2e4.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.holaxprogramming.com\/2018\/01\/20\/graphql-vs-restful-api\/\">https:\/\/www.holaxprogramming.com\/2018\/01\/20\/graphql-vs-restful-api\/<\/a><\/p>\n\n\n\n<p><strong>\uacb0\ub860<\/strong><\/p>\n\n\n\n<p>\ub098\ub294 \uc774\uac78 \uc5b4\ub5bb\uac8c \uc368\uc57c \ud558\ub098 \ud558\ub294 \ubb38\uc81c\uac00 \uace0\ubbfc\uc774\uc5c8\ub294\ub370 \uc5b4\ucc28\ud53c \ud604\uc7ac Node.js \ub97c \uc11c\ubc84\ub85c \uc4f0\uace0 \uc788\uae30 \ub54c\ubb38\uc5d0 \uae30\uc874\uc758 REST API\uc5d0 GraphQL\uc744 \ub354 \ubd99\uc5ec \uc368\ub3c4 \uad1c\ucc2e\uc9c0 \uc54a\uc744\uae4c \ud558\ub294 \uc0dd\uac01\uc744 \ud588\ub2e4.<\/p>\n\n\n\n<p>\uac1c\ubc1c\uc790\ub4e4\uc774 \ubb54\uac00 \ubc14\uafb8\uace0 \uc2f6\uc73c\uba74 \uc544\uc8fc \uac08\uc544\uc5ce\ub294(?) \ub098\uc05c \uc2b5\uc131\uc774 \uc788\uc9c0\ub9cc \uadf8\ub7ec\uc9c0 \uc54a\uc544\ub3c4 \ub41c\ub2e4\uba74 \uc5d4\ub4dc \ud3ec\uc778\ud2b8 \ud55c\ub450\uac1c\uc529 GraphQL\ub85c \ubc14\uafd4\ub3c4 \ubb34\ubc29\ud560\uc9c0 \uc54a\uc744\uae4c \uc2f6\ub2e4.<\/p>\n\n\n\n<p>\uc18c\uc2a4\ucf54\ub4dc\ub294 \uc544\ub798 \ub9c1\ud06c\uc5d0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/bipark\/graphql_study\">https:\/\/github.com\/bipark\/graphql_study<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ub124\uc774\ubc84\uc5d0 \uac1c\ubc1c\uc790 \ubaa8\uc9d1 \uacf5\uace0\ub97c \ubcf4\ub2e4\uac00 React Native \uac1c\ubc1c\uc790\ub97c \uad6c\ud558\ub294\ub370 GraphQL \uae30\ubc18\uc758 \ubc31\uc5d4\ub4dc \ud504\ub85c\uadf8\ub798\ubc0d \uc5ed\ud560\ub3c4 \ud544\uc694\ud558\ub2e4\ub294 \uac83\uc744 \ubcf4\uace0 \ub180\ub790\ub2e4. \uc138\uc0c1\uc774 \uc9c4\uc9dc \ubcc0\ud558\uae34 \ud588\ub2e4. \ubb3c\ub860 \ud504\ub860\ud2b8 \uac1c\ubc1c\uc790\uac00 \ubc31\uc5d4\ub4dc\ub97c \ub3d9\uc2dc\uc5d0 \uc791\uc5c5\ud560 \uc218 \uc788\uc73c\uba74 \ub9e4\uc6b0 \uc0dd\uc0b0\uc131\uc774 \ub192\uace0 \ubb38\uc11c\uc791\uc5c5 &amp; \ud611\uc758 \uacfc\uc815 \uc5c6\uc774 \ube60\ub974\uac8c \uc11c\ube44\uc2a4\ub97c \ub9cc\ub4e4\uc218 \uc788\ub2e4. \ub098\ub294 Node.js \uc640 Vue.js\ub97c \uc774\uc6a9\ud574\uc11c \uadf8\ub7f0\ubc29\uc2dd\uc73c\ub85c \uc791\uc5c5\uc744 \ud558\uace0 \uc788\ub294\ub370 \ub9e4\ubc88 \ud504\ub860\ud2b8\uc5d0\uc11c \uc5d4\ub4dc\ud3ec\uc778\ud2b8\uac00 \ud544\uc694\ud560\ub54c\ub9c8\ub2e4<\/p>\n<div class=\"more-link\">\n\t\t\t\t <a href=\"http:\/\/practical.kr\/?p=62\" class=\"link-btn theme-btn\"><span>Read More <\/span> <i class=\"fa fa-caret-right\"><\/i><\/a>\n\t\t\t<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[17,18,19,20],"tags":[],"class_list":["post-62","post","type-post","status-publish","format-standard","hentry","category-graphql","category-mysql","category-opensource","category-web"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/practical.kr\/index.php?rest_route=\/wp\/v2\/posts\/62","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/practical.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/practical.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/practical.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/practical.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=62"}],"version-history":[{"count":1,"href":"http:\/\/practical.kr\/index.php?rest_route=\/wp\/v2\/posts\/62\/revisions"}],"predecessor-version":[{"id":63,"href":"http:\/\/practical.kr\/index.php?rest_route=\/wp\/v2\/posts\/62\/revisions\/63"}],"wp:attachment":[{"href":"http:\/\/practical.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=62"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/practical.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=62"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/practical.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}