{"id":8219,"date":"2020-02-28T16:03:38","date_gmt":"2020-02-29T00:03:38","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=8219"},"modified":"2025-06-13T21:10:25","modified_gmt":"2025-06-14T04:10:25","slug":"fullstack-react-express-2","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/ko\/fullstack-react-express-2\/","title":{"rendered":"\ud480\uc2a4\ud0dd React \ubc0f GraphQL : Express \uc11c\ubc84"},"content":{"rendered":"<p>\uc138 \uac1c\uc758 \uae00 \uc911 \ub450 \ubc88\uc9f8 \uae00\uc740 Express\uc640 Couchbase Server\ub85c \ud480\uc2a4\ud0dd React\uc640 GraphQL\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \ucd08\uc810\uc744 \ub9de\ucdc4\uc2b5\ub2c8\ub2e4.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.couchbase.com\/blog\/ko\/fullstack-react-couchbase-1\/\">NoSQL \uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uc11c\ubc84 \uc124\uc815\ud558\uae30(1\ubd80)<\/a><\/li>\n<li>Express-GraphQL API \uad6c\ucd95\ud558\uae30(2\ubd80)<\/li>\n<li><a href=\"https:\/\/www.couchbase.com\/blog\/ko\/fullstack-react-apollo-3\/\">React\uc5d0\uc11c Apollo GraphQL \ud074\ub77c\uc774\uc5b8\ud2b8 \ub9cc\ub4e4\uae30 (3\ubd80)<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/httpJunkie\/rage-with-couchbase-final\">\ucd5c\uc885 \uc18c\uc2a4 \ucf54\ub4dc<\/a><\/li>\n<\/ul>\n<h2 id=\"graphql-with-express\">Express\ub97c \uc0ac\uc6a9\ud55c GraphQL<\/h2>\n<p>GraphQL\uc5d0 \uc775\uc219\ud558\uc9c0 \uc54a\ub2e4\uba74 \uba87 \ubd84 \uc815\ub3c4 \uc2dc\uac04\uc744 \ub0b4\uc5b4 GraphQL \uc124\uba85\uc11c\ub97c \uc77d\uc5b4\ubcf4\uc138\uc694. \ub2e4\uc74c \ud398\uc774\uc9c0\uac00 \uc88b\uc740 \uc2dc\uc791\uc810\uc774 \ub420 \uac83\uc785\ub2c8\ub2e4:<\/p>\n<ul>\n<li><a href=\"https:\/\/graphql.org\/learn\/\">\uc18c\uac1c<\/a><\/li>\n<li><a href=\"https:\/\/graphql.org\/learn\/queries\/\">\ucffc\ub9ac \ubc0f \ub3cc\uc5f0\ubcc0\uc774<\/a><\/li>\n<li><a href=\"https:\/\/graphql.org\/learn\/schema\/\">\uc2a4\ud0a4\ub9c8 \ubc0f \uc720\ud615<\/a><\/li>\n<\/ul>\n<h3 id=\"create-project-structure\">\uc804\uc81c \uc870\uac74<\/h3>\n<ul class=\"p-rich_text_list p-rich_text_list__bullet\" data-stringify-type=\"unordered-list\" data-indent=\"0\">\n<li data-stringify-indent=\"0\"><a class=\"c-link\" href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\" data-stringify-link=\"https:\/\/nodejs.org\/\" data-sk=\"tooltip_parent\">\ub178\ub4dc<\/a>\u00a0v10.x \uc774\uc0c1<\/li>\n<li data-stringify-indent=\"0\"><a class=\"c-link\" href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" data-stringify-link=\"https:\/\/www.npmjs.com\/\" data-sk=\"tooltip_parent\">npm<\/a>\u00a0v5.x \uc774\uc0c1<\/li>\n<li data-stringify-indent=\"0\"><a class=\"c-link\" href=\"https:\/\/git-scm.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" data-stringify-link=\"https:\/\/git-scm.com\/\" data-sk=\"tooltip_parent\">git<\/a>\u00a0v2.14.1 \uc774\uc0c1<\/li>\n<\/ul>\n<h3 id=\"create-project-structure\">\ud504\ub85c\uc81d\ud2b8 \uad6c\uc870 \ub9cc\ub4e4\uae30<\/h3>\n<p>\ud504\ub85c\uc81d\ud2b8\ub97c \uc704\ud574 \ucef4\ud4e8\ud130\uc5d0\uc11c \ub514\ub809\ud130\ub9ac\ub97c \ub9cc\ub4e4\uc5b4\uc57c \ud569\ub2c8\ub2e4. <code>\ubd84\ub178-\uc704\ub4dc-\uce74\uc6b0\uce58\ubca0\uc774\uc2a4<\/code>:<\/p>\n<pre class=\"highlight decode:true\"><code class=\"language-bash\">mkdir \ub808\uc774\uc9c0-\uc704\ub4dc-\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 &amp;&amp; cd $_<\/code><\/pre>\n<p><code>mkdir<\/code> \ubb38\uc790\uc5f4\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc0c8 \ub514\ub809\ud130\ub9ac\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. <code>\ubd84\ub178-\uc704\ub4dc-\uce74\uc6b0\uce58\ubca0\uc774\uc2a4<\/code> \ud3f4\ub354\uc758 \uc774\ub984\uc5d0 \ub300\ud574 bash\ub294 \ud574\ub2f9 \ubb38\uc790\uc5f4\uc744 \uc989\uc2dc \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ubcc0\uc218\uc5d0 \uc800\uc7a5\ud569\ub2c8\ub2e4. <code>$_<\/code>.<\/p>\n<p>\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub514\ub809\ud1a0\ub9ac\ub97c \ubcc0\uacbd\ud569\ub2c8\ub2e4. <code>$_<\/code> \ub97c \uc0ac\uc6a9\ud558\uc5ec \uc5f0\uacb0\ub41c \uba85\ub839\uc758 \ub514\ub809\ud130\ub9ac \ucca0\uc790\ub97c \uc798\ubabb \uc785\ub825\ud558\uc9c0 \uc54a\ub3c4\ub85d \ud569\ub2c8\ub2e4(bash \ub9c8\ubc95\uc785\ub2c8\ub2e4).<\/p>\n<p>\uc774\uc81c <code>.gitignore<\/code> \ud30c\uc77c\uc744 \ud504\ub85c\uc81d\ud2b8 \ub8e8\ud2b8\uc5d0 \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"highlight decode:true\"><code>.gitignore &amp;&amp; echo \"\/node_modules\/*\" &gt;&gt; .gitignore<\/code><\/pre>\n<p><code>\ud130\uce58<\/code> \ub294 <code>.gitignore<\/code> \ud30c\uc77c\uc744 \ubaa8\ub450 \ubb34\uc2dc\ud558\uace0 <code>node_modules<\/code> \ub514\ub809\ud130\ub9ac\uc640 \ud558\uc704 \ub514\ub809\ud130\ub9ac\uc5d0 \uc800\uc7a5\ud569\ub2c8\ub2e4. \uc774\ub294 \ud480\uc2a4\ud0dd React \ubc0f GraphQL \ub370\ubaa8 \ud504\ub85c\uc81d\ud2b8\uc758 \uc77c\ubd80\ub85c \ub8e8\ud2b8\uc5d0\uc11c git \ubcc0\uacbd \uc0ac\ud56d\uc744 \ucd94\uc801\ud560 \uac83\uc774\ubbc0\ub85c \uc911\uc694\ud569\ub2c8\ub2e4. <code>\ubd84\ub178-\uc704\ub4dc-\uce74\uc6b0\uce58\ubca0\uc774\uc2a4<\/code> \ub514\ub809\ud1a0\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc9c0\ub9cc, \uc11c\ubc84\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8 \ub514\ub809\ud1a0\ub9ac\ub294 \uac01\uac01 \uace0\uc720\ud55c <code>package.json<\/code> \uadf8\ub9ac\uace0 <code>node_modules<\/code> \ub514\ub809\ud130\ub9ac\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.<\/p>\n<p><code>echo<\/code> \ub97c \ucd94\uac00\ud558\uba74 <code>node_modules\/<\/code> \ud14d\uc2a4\ud2b8 \ub0b4\ubd80\uc758 <code>.gitignore<\/code> \ud30c\uc77c\uc744 \ubaa8\ub450 \ubb34\uc2dc\ud558\ub294 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. <strong>node_modules<\/strong> \ub514\ub809\ud130\ub9ac\uc640 \ubaa8\ub4e0 \ud558\uc704 \ub514\ub809\ud130\ub9ac\ub97c \uc0ad\uc81c\ud569\ub2c8\ub2e4.<\/p>\n<h3 id=\"creating-our-express-server\">Express \uc11c\ubc84 \ub9cc\ub4e4\uae30<\/h3>\n<p>\uc774\uc81c Express \uc11c\ubc84\ub97c \uc800\uc7a5\ud560 \ub514\ub809\ud1a0\ub9ac\ub97c \uc0dd\uc131\ud558\uace0 npm\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud328\ud0a4\uc9c0\ub97c \uad00\ub9ac\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"highlight decode:true\"><code class=\"language-bash\">mkdir couchbase-gql-server &amp;&amp; cd $_ &amp;&amp; npm init -y<\/code><\/pre>\n<p><code>mkdir<\/code> \ubb38\uc790\uc5f4\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud504\ub85c\uc81d\ud2b8 \ub8e8\ud2b8 \ub0b4\uc5d0 \uc11c\ubc84 \uc804\uc6a9\uc73c\ub85c \uc0c8 \ud3f4\ub354\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. <code>\uce74\uc6b0\uce58\ubca0\uc774\uc2a4-gql-server<\/code> \uc774\ub984\uc740 \uc11c\ubc84 \ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud130\ub9ac\uc785\ub2c8\ub2e4.<\/p>\n<p>\ub514\ub809\ud1a0\ub9ac\ub97c \ubcc0\uacbd\ud558\uace0 <code>$_<\/code> (\ub354 \ub9ce\uc740 \ub9c8\ubc95)\uc744 \ucd08\uae30\ud654\ud55c \ub2e4\uc74c <strong>npm<\/strong> \ud504\ub85c\uc81d\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec <code>npm init -y<\/code> \ub97c \uc0ac\uc6a9\ud558\uc5ec \uae30\ubcf8\uac12\uc744 \uc218\ub77d\ud558\uba74 <code>-y<\/code> \ud50c\ub798\uadf8.<\/p>\n<h3 id=\"install-express-server-dependencies\">Express \uc11c\ubc84 \uc885\uc18d\uc131 \uc124\uce58<\/h3>\n<pre class=\"highlight decode:true\"><code class=\"language-bash\">npm install graphql express express-graphql couchbase &amp;&amp; npm install nodemon -D &amp;&amp; code .<\/code><\/pre>\n<p>\uc124\uce58\uac00 \uc644\ub8cc\ub418\uba74 \uc120\ud0dd\ud55c \ud3b8\uc9d1\uae30\ub85c \ud504\ub85c\uc81d\ud2b8\ub97c \uc5f4\uc5b4\uc57c \ud569\ub2c8\ub2e4. \uc800\ub294 VS Code\ub97c \uc120\ud638\ud569\ub2c8\ub2e4.<\/p>\n<h3 id=\"create-our-graphql-server\">GraphQL \uc11c\ubc84 \ub9cc\ub4e4\uae30<\/h3>\n<pre class=\"highlight decode:true\"><code class=\"language-bash\">server.js .gitignore &amp;&amp; echo \"\/node_modules\/*\" &gt;&gt; .gitignore<\/code><\/pre>\n<p>\uc694\uad6c \uc0ac\ud56d <code>express\/express-graphql\/graphql<\/code> \uc5d0\uc11c <code>server.js<\/code> file:<\/p>\n<pre><code class=\"language-JavaScript\">const express = require('express')\r\nconst { graphqlHTTP } = require('express-graphql')\r\nconst { buildSchema } = require('graphql')\r\n    \r\nconst couchbase = require('couchbase')<\/code><\/pre>\n<p>\ucc98\uc74c \uc138 \ubc88\uc758 \uac00\uc838\uc624\uae30\ub294 GraphQL \uc11c\ubc84\uc5d0 \ud544\uc694\ud558\uace0 \ub9c8\uc9c0\ub9c9 \uac00\uc838\uc624\uae30\ub294 Couchbase \uc11c\ubc84\uc5d0 \uc5f0\uacb0\ud558\uace0 \ucffc\ub9ac\ud558\ub294 \ub370 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n<h3 id=\"initialize-express-and-connect-to-our-bucket\">Express \ucd08\uae30\ud654 \ubc0f \ubc84\ud0b7\uc5d0 \uc5f0\uacb0\ud558\uae30<\/h3>\n<p>\ub2e4\uc74c \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4:<\/p>\n<pre class=\"highlight decode:true\"><code class=\"language-JavaScript\">const app = express()\r\nconst cluster = new couchbase.Cluster('couchbase:\/\/localhost', {\r\n  \uc0ac\uc6a9\uc790\uba85: '\uad00\ub9ac\uc790', \ube44\ubc00\ubc88\ud638: '\ube44\ubc00\ubc88\ud638'\r\n})\r\nconst bucket = cluster.bucket('travel-sample')\r\nvar collection = bucket.defaultCollection();<\/code><\/pre>\n<p>\uc704\uc5d0\uc11c\ub294 Couchbase Server \ud074\ub7ec\uc2a4\ud130\uc5d0 \uc5f0\uacb0\ud558\uace0, \uc124\uc815\ud55c \uc0ac\uc6a9\uc790\ub85c \uc778\uc99d\ud55c \ub2e4\uc74c, \uc6b0\ub9ac\uc758 <code>\uc5ec\ud589 \uc0d8\ud50c<\/code> \ubc84\ud0b7\uc744 \uc0ac\uc6a9\ud558\uc138\uc694. \ud504\ub85c\ub355\uc158 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \uae30\ubcf8 \uc0ac\uc6a9\uc790 \uc774\ub984\uacfc \ube44\ubc00\ubc88\ud638\ub97c \uc0ac\uc6a9\ud558\uc9c0 \ub9c8\uc138\uc694.<\/p>\n<h3 id=\"create-our-graphql-schema\">GraphQL \uc2a4\ud0a4\ub9c8 \ub9cc\ub4e4\uae30<\/h3>\n<p>\uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uba74 GraphQL \uc11c\ubc84\uac00 Couchbase Server \ubc84\ud0b7 \ub0b4\ubd80\uc758 \ubb38\uc11c\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uc561\uc138\uc2a4\ud558\uace0 \uac80\uc0c9\ud560 \uc218 \uc788\ub294 \ub450 \uac1c\uc758 \uc5d4\ub4dc\ud3ec\uc778\ud2b8\ub97c \uc815\uc758\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre><code class=\"language-JavaScript\">const schema = buildSchema(`)\r\n  \uc720\ud615 \ud56d\uacf5\uc0ac {\r\n    id: Int,\r\n    \ucf5c\uc0ac\uc778 String,\r\n    country: String,\r\n    iata: \ubb38\uc790\uc5f4,\r\n    icao: String,\r\n    \uc774\ub984: \ubb38\uc790\uc5f4,\r\n    type: String\r\n  }\r\n  \uc785\ub825 \ud56d\uacf5\uc0ac \uc785\ub825 {\r\n    \ucf5c\uc0ac\uc778 \ubb38\uc790\uc5f4\r\n    \uad6d\uac00: String,\r\n    iata: \ubb38\uc790\uc5f4,\r\n    icao: String,\r\n    \uc774\ub984: \ubb38\uc790\uc5f4,\r\n    type: String\r\n  }\r\n  \ucffc\ub9ac \uc720\ud615 {\r\n    airlinesUK: [\ud56d\uacf5\uc0ac],\r\n    airlineByKey(id: Int!): \ud56d\uacf5\uc0ac\r\n    airlinesByRegion(region: String!): [\ud56d\uacf5\uc0ac]: [\ud56d\uacf5\uc0ac\r\n  }\r\n  Mutation \uc720\ud615 {\r\n    updateAirline(id: Int!, input: AirlineInput): Airline\r\n  }<\/code><\/pre>\n<p>\uadf8\ub9ac\uace0 <code>\ucffc\ub9ac<\/code> \uc720\ud615\uc740 \uc5b4\ub5a4 <a href=\"https:\/\/www.couchbase.com\/blog\/ko\/processing-graphql-queries-with-java-spring-boot-and-nosql\/\">GraphQL \ucffc\ub9ac<\/a> \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 \uc790\uccb4 \ub370\uc774\ud130 \uadf8\ub798\ud504\uc5d0 \ub300\ud574 \uc2e4\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc774\ub97c \ud1b5\ud574 \uc815\uc758\ub41c \ub450 \uac00\uc9c0 \uc5d4\ub4dc\ud3ec\uc778\ud2b8\uac00 \uc788\uc2b5\ub2c8\ub2e4. <code>\ucffc\ub9ac<\/code>. \ud558\ub098\ub294 \"airlinesUK\"\uc774\uace0 \ub2e4\ub978 \ud558\ub098\ub294 \"airlineByKey\"\uc785\ub2c8\ub2e4. React \uc571\uc5d0\uc11c\ub294 \"airlinesUK\" \uc5d4\ub4dc\ud3ec\uc778\ud2b8\ub9cc \uc0ac\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc800\ub294 \ub2e8\uc21c\ud788 \ud0a4\ub85c \ub2e8\uc77c Couchbase \ubb38\uc11c\ub97c \uac80\uc0c9\ud558\ub294 \uc608\uc81c\ub97c \ubcf4\uc5ec\uc8fc\uae30 \uc704\ud574 \"airlineByKey\" \uc5d4\ub4dc\ud3ec\uc778\ud2b8\ub97c \ub9cc\ub4e4\uc5c8\uc2b5\ub2c8\ub2e4. \uc774 \uc791\uc5c5\uc740 N1QL \ucffc\ub9ac \uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc73c\ubbc0\ub85c \ucd94\uac00 \uc624\ubc84\ud5e4\ub4dc\uac00 \uc5c6\uc2b5\ub2c8\ub2e4. API\ub97c \uad6c\ucd95\ud558\ub294 \uad00\uc810\uc5d0\uc11c \uac01\uac01\uc758 \uc0ac\uc6a9 \uc2dc\uae30\uc640 \uc704\uce58\ub97c \uc774\ud574\ud558\ub294 \uac83\uc774 \uc911\uc694\ud558\ubbc0\ub85c \ud0a4\ub85c \uac00\uc838\uc62c \uc218 \uc788\ub294 \ub2e8\uc77c \ubb38\uc11c\ub97c \ubc18\ud658\ud558\uae30 \uc704\ud574 N1QL \ucffc\ub9ac\ub97c \uc0ac\uc6a9\ud558\uace0 \uc2f6\uc9c0 \uc54a\uc744 \uac83\uc785\ub2c8\ub2e4.<\/p>\n<p>GraphQL \ucf54\ub4dc\uc5d0\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uc720\ud615\uc758 \uac1d\uccb4\uac00 \uc788\uc2b5\ub2c8\ub2e4. <code>\ud56d\uacf5\uc0ac<\/code>. This object model the document structure found in our Couchbase `travel-sample` bucket where the type is &#8220;airline&#8221;.<\/p>\n<p>\ub2e4\uc74c\uc73c\ub85c \"<code>airlinesUK<\/code>\". \uc774 \uc5d4\ub4dc\ud3ec\uc778\ud2b8\uc758 \ubc18\ud658 \uac12\uc740 Airline\uc758 \ubc30\uc5f4\uc785\ub2c8\ub2e4: <code>[\ud56d\uacf5\uc0ac]<\/code>. \uc989, \ud56d\uacf5\uc0ac \ubaa9\ub85d\uc744 \ub2e4\uc2dc \uac00\uc838\uc62c \uac83\uc785\ub2c8\ub2e4.<\/p>\n<p>\ub610\ud55c \"<code>\ud56d\uacf5\uc0ac\ubcc4 \ud0a4<\/code>\" \uc5d4\ub4dc\ud3ec\uc778\ud2b8\ub97c \uac00\uc838\uc62c \ub2e8\uc77c <code>\ud56d\uacf5\uc0ac<\/code>.<\/p>\n<p>\uc704\uc758 \ubc84\ud0b7 \uc774\ubbf8\uc9c0\ub97c \uae30\uc5b5\ud558\uc2e0\ub2e4\uba74, \uac01 \ubb38\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \ud615\uc2dd\uc758 \ud0a4\ub85c \uc815\uc758\ub429\ub2c8\ub2e4. <code>airline_1234<\/code> \uc5b4\ub514 <code>1234<\/code> \ub294 <code>id<\/code> \ud56d\uacf5\uc0ac\uc758<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/01\/travel-sample-document.jpg\" alt=\"travel-sample document\" \/><\/p>\n<p>\uc6b0\ub9ac\ub294 \uc774\uac83\uc744 \uc9c0\ud0ac \uac83\uc785\ub2c8\ub2e4 <code>id<\/code> \ub97c \uc0ac\uc6a9\ud558\uc5ec \uac1c\ubcc4\uc801\uc778 <code>\ud56d\uacf5\uc0ac\ubcc4 \ud0a4<\/code> \uac04\ub2e8\ud55c <code>bucket.get()<\/code> \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<h3 id=\"create-our-resolver-implementation-for-each-endpoint\">\uac01 \uc5d4\ub4dc\ud3ec\uc778\ud2b8\uc5d0 \ub300\ud55c \ub9ac\uc878\ubc84 \uad6c\ud604 \ub9cc\ub4e4\uae30<\/h3>\n<p>\uc774\uc81c GraphQL-Express API\uc5d0\uc11c \ub450 \uac1c\uc758 \ucffc\ub9ac\ub97c \uc815\uc758\ud588\uc73c\ubbc0\ub85c <code>\uc2a4\ud0a4\ub9c8<\/code> \uac1d\uccb4\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uac80\uc0c9\ud558\ub824\uba74 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \uad6c\ud604\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<p>\uc6b0\ub9ac\uac00 \ub9cc\ub4e4 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\ub294 <strong>N1QL<\/strong> \ucffc\ub9ac \uc774\ub984 <code>airlinesUK<\/code>.<\/p>\n<p>\ud558\uc9c0\ub9cc \ub2e4\uc74c\uacfc \uac19\uc740 \ubc29\ubc95\uc73c\ub85c \ucffc\ub9ac\ud558\ub294 \ubc29\ubc95\uc744 \ubcf4\uc5ec\ub4dc\ub9ac\uace0 \uc2f6\uc5c8\uc2b5\ub2c8\ub2e4. <strong>N1QL<\/strong> \ud0a4\ub9cc \uc0ac\uc6a9\ud558\uc5ec NodeJS SDK\uc758 API\ub97c \uc0ac\uc6a9\ud558\uac70\ub098 \uc9c0\uc5ed(\ubbf8\uad6d\/\uc601\uad6d \ub4f1)\uc744 \uc0ac\uc6a9\ud558\ub3c4\ub85d \ud655\uc7a5\ud558\ub294 \uac83, \uc989 <code>\ud56d\uacf5\uc0ac\ubcc4 \ud0a4<\/code> \uadf8\ub9ac\uace0 <code>\ud56d\uacf5\uc0ac\ubcc4 \uc9c0\uc5ed<\/code> \uad6c\ud604.<\/p>\n<p>\ub2e4\uc74c \ucf54\ub4dc\ub97c <code>server.js<\/code> \ud30c\uc77c\uc5d0 \ub300\ud55c N1QL \ucffc\ub9ac\uc785\ub2c8\ub2e4:<br \/>\n(JS \ucf54\ub4dc\uc5d0\uc11c \ubc31\uc2ac\ub798\uc2dc\ub85c \ubc31\ud2f1\uc744 \uc774\uc2a4\ucf00\uc774\ud504 \ucc98\ub9ac\ud574\uc57c \ud569\ub2c8\ub2e4.)<\/p>\n<pre class=\"highlight decode:true\"><code class=\"language-JavaScript\">\/\/ Define N1QL Queries\r\nconst airlinesUkQuery = `\r\n  SELECT airline.* \r\n  FROM \\`travel-sample\\` AS airline \r\n  WHERE airline.type = 'airline'\r\n  AND airline.country = 'United Kingdom'\r\n`\r\nconst airlinesByRegionQuery = `\r\n  SELECT airline.* \r\n  FROM \\`travel-sample\\` AS airline \r\n  WHERE airline.type = 'airline'\r\n    AND airline.country = $REGION\r\n`<\/code><\/pre>\n<p>\ub2e4\uc74c \ucf54\ub4dc\ub97c <code>server.js<\/code> \ud30c\uc77c\uc5d0 \uc800\uc7a5\ud569\ub2c8\ub2e4:<\/p>\n<pre class=\"highlight decode:true\"><code class=\"language-JavaScript\">const root = {\r\n  airlinesUK: async () =&gt; {\r\n    const result = await cluster.query(airlinesUkQuery)\r\n    \ubc18\ud658 \uacb0\uacfc \ud589\r\n  },\r\n  \/*\r\n    \ucffc\ub9ac getAirlinesUK {\r\n      airlinesUK {\r\n        id\r\n        name\r\n        callsign\r\n        country\r\n        iata\r\n        icao\r\n      }\r\n    }\r\n  *\/\r\n  airlinesByRegion: async ({region}) =&gt; {\r\n    const options = { \ub9e4\uac1c\ubcc0\uc218 { REGION: \uc9c0\uc5ed } }\r\n    const result = await cluster.query(airlinesByRegionQuery, options)\r\n    \ubc18\ud658 \uacb0\uacfc.rows\r\n  },\r\n  \/*\r\n    \ucffc\ub9ac getAirlinesByRegion($region: \ubb38\uc790\uc5f4!) {\r\n      airlinesByRegion(region:$region) {\r\n        id\r\n        name\r\n        callsign\r\n        country\r\n        iata\r\n        icao\r\n      }\r\n    }\r\n    {\r\n      \"region\": \"{{\uad6d\uac00}}\"\r\n    }\r\n  *\/\r\n  airlineByKey: async ({id}) =&gt; {\r\n    const result = await collection.get(`airline_${id}`)\r\n    \ubc18\ud658 \uacb0\uacfc.\uac12\r\n  },\r\n  \/*\r\n    \ucffc\ub9ac getAirlineByKey($id: Int!) { {\r\n      airlineByKey(id:$id) {\r\n        id\r\n        name\r\n        callsign\r\n        country\r\n        iata\r\n        icao\r\n      }\r\n    }\r\n    {\r\n      \"id\": {{id}}\r\n    }\r\n  *\/\r\n  updateAirline: async ({id, input}) =&gt; {\r\n    const result = await collection.get(`airline_${id}`)\r\n\r\n    const newDocument = {\r\n      ...result.content,\r\n      \ucf5c\uc0ac\uc778: \uc785\ub825.\ucf5c\uc0ac\uc778 ? \uc785\ub825.\ucf5c\uc0ac\uc778 : \uacb0\uacfc.\uac12.\ucf5c\uc0ac\uc778,\r\n      \uad6d\uac00: \uc785\ub825.\uad6d\uac00 ? \uc785\ub825.\uad6d\uac00 : \uacb0\uacfc.\uac12.\uad6d\uac00,\r\n      IATA: \uc785\ub825.IATA ? \uc785\ub825.IATA : \uacb0\uacfc.\uac12.IATA,\r\n      IICAO: \uc785\ub825.IICAO ? \uc785\ub825.IICAO : \uacb0\uacfc.\uac12.IICAO,\r\n      \uc774\ub984: \uc785\ub825.\uc774\ub984 ? \uc785\ub825.\uc774\ub984 : \uacb0\uacfc.\uac12.\uc774\ub984,\r\n    };\r\n\r\n    console.log(newDocument)\r\n\r\n    await collection.upsert(`airline_${id}`, newDocument)\r\n    return newDocument\r\n  }\r\n  \/*\r\n    mutation updateExistingAirline($id:Int!, $input:AirlineInput) {\r\n      updateAirline(id:$id, input:$input){{\r\n        callsign\r\n        country\r\n        iata\r\n      }\r\n    }\r\n    {\r\n      \"id\": 112,\r\n      \"\uc785\ub825\": {\r\n        \"\ucf5c\uc0ac\uc778\": \"FLYSTAR\",\r\n        \"\uad6d\uac00\": \"\uc601\uad6d\"\r\n      }\r\n    }\r\n  *\/\r\n}<\/code><\/pre>\n<p>\ucc38\uace0: \uc704\uc758 N1QL \ubb38\uc5d0\uc11c FROM \uc904\uc758 \ubc31\ud2f1\uc744 \uc774\uc2a4\ucf00\uc774\ud504 \ucc98\ub9ac\ud574\uc57c \ud569\ub2c8\ub2e4. <code>`\uc5ec\ud589-\uc0d8\ud50c`<\/code> \ub97c \ubc31\uc2ac\ub798\uc2dc\ub85c \ub300\uccb4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ube14\ub85c\uadf8\uc758 \ucf54\ub4dc \uc0d8\ud50c\uc5d0\ub294 \ubc31\uc2ac\ub798\uc2dc\uac00 \ud45c\uc2dc\ub418\uc5b4 \uc788\uc9c0 \uc54a\uc9c0\ub9cc, \ubc31\uc2ac\ub798\uc2dc\ub294 \uc874\uc7ac\ud558\uba70 <a href=\"https:\/\/github.com\/httpJunkie\/rage-with-couchbase-final\">\ucd5c\uc885 \uc18c\uc2a4 \ucf54\ub4dc<\/a><\/p>\n<p>\uc774\ud574\ub97c \ub3d5\uae30 \uc704\ud574 \ub450 \uac00\uc9c0 \ub2e4\ub978 \ubc29\ubc95\uc744 \uc0ac\uc6a9\ud558\uc5ec Couchbase \uc11c\ubc84\ub97c \ucffc\ub9ac\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uccab \ubc88\uc9f8 \ubc29\ubc95\uc740 <code>airlinesUK<\/code> \uc5d4\ub4dc\ud3ec\uc778\ud2b8\uac00 \uadf8 \ub9ac\uc878\ubc84\uc785\ub2c8\ub2e4. \uc6b0\ub9ac\ub294 \uc57d\uc18d\uc744 \ubc18\ud658\ud574\uc57c \ud558\uba70 \ub0b4\ubd80\uc5d0\uc11c\ub294 <code>bucket.query<\/code>\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac00\ub3c5\uc131\uc744 \uc704\ud574 \ubb38 \ubcc0\uc218\uc5d0\uc11c \ud55c \uc904\uc529 \ubd84\ub9ac\ud55c \uc0ac\uc804 \uc815\uc758\ub41c N1QL \ucffc\ub9ac\ub97c \uc2e4\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc720\ud615\uc758 SQL \ucffc\ub9ac\ub97c \uc2e4\ud589\ud560 \uc218 \uc788\ub2e4\ub294 \uac83\uc740 \ubb38\uc11c \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \ub9e4\uc6b0 \uac15\ub825\ud569\ub2c8\ub2e4. \uc6b0\ub9ac\uac00 \uc54c\uace0 \uc788\ub294 \ub9ce\uc740 SQL\uc774 \uadf8\ub300\ub85c \uc62e\uaca8\uc624\uae30 \ub54c\ubb38\uc5d0 \uc0c8\ub85c\uc6b4 API\uc640 \ucffc\ub9ac \uc5b8\uc5b4\ub97c \ubc30\uc6cc\uc57c \ud558\ub294 \ub2e4\ub978 \ubb38\uc11c \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \ube44\ud574 \ud070 \ub3c4\uc6c0\uc774 \ub429\ub2c8\ub2e4.<\/p>\n<p>\ub450 \ubc88\uc9f8 \ubc29\ubc95\uc740 <code>airlinesUK<\/code> \uc5d4\ub4dc\ud3ec\uc778\ud2b8\uac00 \uadf8 \ub9ac\uc878\ubc84\uc785\ub2c8\ub2e4. \uc6b0\ub9ac\ub294 \uc57d\uc18d\uc744 \ubc18\ud658\ud574\uc57c \ud558\uba70 \ub0b4\ubd80\uc5d0\uc11c\ub294 <code>bucket.get<\/code> \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uba70, \uc774 \uacbd\uc6b0\uc5d0\ub294 \ubb38\uc11c\uc758 \ud0a4\ub97c \uc815\uc758\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \ud0a4-\uac12 \ub370\uc774\ud130 \uc800\uc7a5\uc18c\ub97c \uc0ac\uc6a9\ud560 \ub54c\uc758 \uc88b\uc740 \uc810 \uc911 \ud558\ub098\ub294 \uc624\ubc84\ud5e4\ub4dc\uac00 \uac70\uc758 \uc5c6\uc774 \ub2e8\uc77c \ubb38\uc11c\ub97c \uc27d\uac8c \uc120\ud0dd\ud560 \uc218 \uc788\ub2e4\ub294 \uc810\uc785\ub2c8\ub2e4.<\/p>\n<p>\uc704\uc758 \uac01 \uba54\uc11c\ub4dc\ub3c4 \ucffc\ub9ac \uc624\ub958\ub97c \ud14c\uc2a4\ud2b8\ud558\uace0 <code>\uacb0\uacfc<\/code> \ub610\ub294 <code>\uc624\ub958<\/code>.<\/p>\n<h3 id=\"creating-our-express-graphql-server\">Express Server\ub85c GraphQL \uc0dd\uc131<\/h3>\n<p>\uc774\uc81c \uc5d4\ub4dc\ud3ec\uc778\ud2b8\uc640 \ucffc\ub9ac\uc5d0 \ub300\ud55c \ubaa8\ub4e0 \uac83\uc774 \uc815\ub9ac\ub418\uc5c8\uc73c\ubbc0\ub85c \uc774\uc81c \ud574\uc57c \ud560 \uc77c\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. <code>\uc0ac\uc6a9<\/code> Express \uc11c\ubc84\ub97c \uc0dd\uc131\ud558\uace0 \uc2e4\ud589\ud560 \ud3ec\ud2b8\ub97c \uc81c\uacf5\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ub05d\uc5d0 \ub2e4\uc74c \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4. <code>server.js<\/code> file:<\/p>\n<pre class=\"highlight decode:true\"><code class=\"language-JavaScript\">\/*\r\n  graphqlHTTP \ud568\uc218\ub294 \uc2a4\ud0a4\ub9c8, rootValue \ubc0f graphiql\r\n    \uadf8\ub798\ud504QL \uc11c\ubc84\ub97c \uad6c\uc131\ud558\uae30 \uc704\ud55c \uc5ec\ub7ec \uc635\uc158 \uc911 \ud558\ub098\ub97c \uc120\ud0dd\ud569\ub2c8\ub2e4.\r\n*\/\r\nconst serverPort = 4000\r\nconst serverUrl = '\/graphql'\r\napp.use(serverUrl, graphqlHTTP({\r\n  \uc2a4\ud0a4\ub9c8: \uc2a4\ud0a4\ub9c8,\r\n  rootValue: root,\r\n  graphiql: true\r\n}))\r\n\r\napp.listen(\r\n  serverPort,\r\n  () =&gt; console.log(`\uadf8\ub798\ud504QL \uc11c\ubc84 \uc2e4\ud589 \uc911: https:\/\/localhost:${serverPort}${serverUrl}`)\r\n)<\/code><\/pre>\n<p>Express \ub610\ub294 Express-GraphQL \uc11c\ubc84\ub97c \uc0dd\uc131\ud574 \ubcf8 \uc801\uc774 \uc788\ub2e4\uba74 \uc774 \ucf54\ub4dc\uac00 \uc775\uc219\ud558\uac8c \ubcf4\uc77c \uac83\uc785\ub2c8\ub2e4.<\/p>\n<p>\uba3c\uc800 \ud3ec\ud2b8\uc640 GraphQL URL\uc744 \uc124\uc815\ud569\ub2c8\ub2e4.<\/p>\n<p>\ub2e4\uc74c\uc73c\ub85c GraphQL \uc2a4\ud0a4\ub9c8\uc640 \ud574\ub2f9 \ub9ac\uc878\ubc84\ub97c \uc804\ub2ec\ud558\uace0 <code>graphiql<\/code> \uc635\uc158\uc744 true\ub85c \uc124\uc815\ud569\ub2c8\ub2e4. (\uc774\ub807\uac8c \ud558\uba74 \ub2e4\uc74c\uc5d0\uc11c GraphQL \ucffc\ub9ac\ub97c \ud14c\uc2a4\ud2b8\ud560 \uc218 \uc788\ub294 IDE\uac00 \uc81c\uacf5\ub429\ub2c8\ub2e4. <a href=\"https:\/\/localhost:4000\/graphql\">localhost:4000\/graphql<\/a>.<\/p>\n<p>\ub9c8\uc9c0\ub9c9\uc73c\ub85c \ud3ec\ud2b8 4000\uc5d0\uc11c \uc218\uc2e0 \ub300\uae30\ud558\uace0 \ucf58\uc194\uc5d0\uc11c \uc11c\ubc84\uac00 \uc2e4\ud589 \uc911\uc784\uc744 \ub098\ud0c0\ub0b4\ub294 \uba54\uc2dc\uc9c0\ub97c \uc124\uc815\ud569\ub2c8\ub2e4.<\/p>\n<p>\uc11c\ubc84\ub97c \uc2e4\ud589\ud558\uace0 Couchbase\ub97c \ud655\uc778\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4:<\/p>\n<pre class=\"highlight decode:true\"><code class=\"language-bash\">\ub178\ub4dc \uc11c\ubc84<\/code><\/pre>\n<p>GraphQL \uc11c\ubc84\uac00 \uc2e4\ud589\ub418\uba74 \ub2e4\uc74c\uc744 \ud14c\uc2a4\ud2b8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <code>AirlinesUK<\/code> \ucffc\ub9ac\ub97c \uc0dd\uc131\ud558\ub824\uba74 \ub2e4\uc74c \ucf54\ub4dc\ub97c GraphQL IDE \ucffc\ub9ac \ucc3d\uc5d0 \ubd99\uc5ec\ub123\uc73c\uc138\uc694:<\/p>\n<pre><code class=\"language-graphiQL\">\ucffc\ub9ac getAirlinesUK{\r\n  airlinesUK {\r\n    id\r\n    name\r\n    \ucf5c\uc0ac\uc778\r\n    country\r\n    iata\r\n    icao\r\n  }\r\n}<\/code><\/pre>\n<p>\ucffc\ub9ac\uc5d0\uc11c \uc54c \uc218 \uc788\ub4ef\uc774 \uc601\uad6d\uc5d0 \ubcf8\uc0ac\ub97c \ub454 \ubaa8\ub4e0 \ud56d\uacf5\uc0ac\ub97c \uac80\uc0c9\ud569\ub2c8\ub2e4:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/01\/travel-sample-graphiql-airlinesUK.jpg\" alt=\"GraphQL with Express GraphiQL demo all UK airlines\" \/><\/p>\n<p>\ub2e4\uc74c\uc73c\ub85c <code>\ud56d\uacf5\uc0ac\ubcc4 \ud0a4<\/code> \uc5d4\ub4dc\ud3ec\uc778\ud2b8\uc758 \uacbd\uc6b0, \uc774 \uc608\uc81c\uc5d0\uc11c\ub294 \ucffc\ub9ac \ubcc0\uc218\ub97c \ub9cc\ub4e4\uc5b4 \uac01 \ucc3d\uc5d0 \ubd99\uc5ec\ub123\uc5b4\uc57c \ud569\ub2c8\ub2e4:<\/p>\n<pre><code class=\"language-graphiQL\">\ucffc\ub9ac getAirlineByKey($id: Int!) {\r\n  airlineByKey(id:$id){\r\n    id\r\n    name\r\n    \ucf5c\uc0ac\uc778\r\n    country\r\n    iata\r\n    icao\r\n  }\r\n}<\/code><\/pre>\n<pre><code class=\"language-graphiQL\">{\r\n  \"id\": 112\r\n}<\/code><\/pre>\n<p>\uadf8\ub9ac\uace0 \uc774\ub97c \ud1b5\ud574 \ub2e4\uc2dc \ucffc\ub9ac\ud558\uc5ec \ud558\ub098\uc758 \ud56d\uacf5\uc0ac \ubb38\uc11c\ub97c \ud0a4\ub85c \uac80\uc0c9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/01\/travel-sample-graphiql-airlineByKey.jpg\" alt=\"GraphQL with Express GraphiQL demo UK airline by key\" \/><\/p>\n<p>\ub9e4\uc6b0 \uac04\ub2e8\ud55c GraphQL API \uc124\uc815\uc73c\ub85c \ub2e4\uc74c\uc744 \uc218\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <a href=\"https:\/\/www.couchbase.com\/blog\/ko\/fullstack-react-apollo-3\/\">\ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub9cc\ub4e4\uae30<\/a> \ubaa9\ub85d \uad6c\uc131 \uc694\uc18c\uc5d0 \uc601\uad6d \ud56d\uacf5\uc0ac\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub9c8\uc2a4\ud130 \uc0c1\uc138 \ud398\uc774\uc9c0\uc5d0 \uc774\ub7ec\ud55c \uc5d4\ub4dc\ud3ec\uc778\ud2b8\ub97c \uc0ac\uc6a9\ud558\uace0 \ud2b9\uc815 \ud56d\uacf5\uc0ac\ub97c \ud074\ub9ad\ud558\uba74 \ub2e4\ub978 \uad6c\uc131 \uc694\uc18c\uac00 \ud398\uc774\uc9c0 \uc624\ub978\ucabd\uc5d0 \ud574\ub2f9 \ud56d\uacf5\uc0ac\uc758 \uc804\uccb4 \uc138\ubd80 \uc815\ubcf4\ub97c \ud45c\uc2dc\ud569\ub2c8\ub2e4.<\/p>\n<p><a href=\"https:\/\/www.couchbase.com\/blog\/ko\/fullstack-react-apollo-3\/\">React\uc5d0\uc11c Apollo GraphQL \ud074\ub77c\uc774\uc5b8\ud2b8 \ub9cc\ub4e4\uae30 (3\ubd80)<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>The second of three articles focused on building Fullstack React and GraphQL with Express and Couchbase Server. Setting up a NoSQL Couchbase Server (Part 1) Building an Express-GraphQL API (Part 2) Create Apollo GraphQL Client in React (Part 3) Final [&hellip;]<\/p>","protected":false},"author":53002,"featured_media":10873,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1816,1822,1812,2201],"tags":[1254,1669,2210,2454],"ppma_author":[8922],"class_list":["post-8219","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-couchbase-server","category-node-js","category-n1ql-query","category-tools-sdks","tag-express","tag-express-framework","tag-graphql","tag-react"],"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>Fullstack React and GraphQL : Express Server - The Couchbase Blog<\/title>\n<meta name=\"description\" content=\"Build an API server using GraphQL with Express in this three part series on building a fullstack React and GraphQL application.\" \/>\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\/fullstack-react-express-2\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fullstack React and GraphQL : Express Server\" \/>\n<meta property=\"og:description\" content=\"Build an API server using GraphQL with Express in this three part series on building a fullstack React and GraphQL application.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/ko\/fullstack-react-express-2\/\" \/>\n<meta property=\"og:site_name\" content=\"The Couchbase Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-29T00:03:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-14T04:10:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/express-graphql.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eric Bishard\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@httpJunkie\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eric Bishard\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/\"},\"author\":{\"name\":\"Eric Bishard\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/67d3a4b597e42370ccd34b715a6b1f4c\"},\"headline\":\"Fullstack React and GraphQL : Express Server\",\"datePublished\":\"2020-02-29T00:03:38+00:00\",\"dateModified\":\"2025-06-14T04:10:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/\"},\"wordCount\":1284,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/express-graphql.jpg\",\"keywords\":[\"express\",\"express framework\",\"graphql\",\"React\"],\"articleSection\":[\"Couchbase Server\",\"Node.js\",\"SQL++ \/ N1QL Query\",\"Tools &amp; SDKs\"],\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/\",\"name\":\"Fullstack React and GraphQL : Express Server - The Couchbase Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/express-graphql.jpg\",\"datePublished\":\"2020-02-29T00:03:38+00:00\",\"dateModified\":\"2025-06-14T04:10:25+00:00\",\"description\":\"Build an API server using GraphQL with Express in this three part series on building a fullstack React and GraphQL application.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/#primaryimage\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/express-graphql.jpg\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/express-graphql.jpg\",\"width\":1200,\"height\":628,\"caption\":\"RAGE With Couchbase Express-GraphQL\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.couchbase.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fullstack React and GraphQL : Express 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\/67d3a4b597e42370ccd34b715a6b1f4c\",\"name\":\"Eric Bishard\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/b7d1d2580c41d35a21654fb1abe65d23\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a316a2658772914defd259571b8cad18878eb23c9d0cc3a97dd803deca0c09ca?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a316a2658772914defd259571b8cad18878eb23c9d0cc3a97dd803deca0c09ca?s=96&d=mm&r=g\",\"caption\":\"Eric Bishard\"},\"description\":\"International speaker, blogging and advocating for the JavaScript, React, GraphQL and NoSQL community working as a Senior Developer Advocate for Couchbase.\",\"sameAs\":[\"https:\/\/www.reactstateofmind.com\",\"https:\/\/www.linkedin.com\/in\/eric-b\/\",\"https:\/\/x.com\/httpJunkie\"],\"url\":\"https:\/\/www.couchbase.com\/blog\/ko\/author\/eric-bishard\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Fullstack React and GraphQL : Express Server - The Couchbase Blog","description":"\ud480\uc2a4\ud0dd React \ubc0f GraphQL \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uad6c\ucd95\uc5d0 \ub300\ud55c \uc774 3\ubd80 \uc2dc\ub9ac\uc988\uc5d0\uc11c Express\uc640 \ud568\uaed8 GraphQL\uc744 \uc0ac\uc6a9\ud558\uc5ec API \uc11c\ubc84\ub97c \uad6c\ucd95\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\/fullstack-react-express-2\/","og_locale":"ko_KR","og_type":"article","og_title":"Fullstack React and GraphQL : Express Server","og_description":"Build an API server using GraphQL with Express in this three part series on building a fullstack React and GraphQL application.","og_url":"https:\/\/www.couchbase.com\/blog\/ko\/fullstack-react-express-2\/","og_site_name":"The Couchbase Blog","article_published_time":"2020-02-29T00:03:38+00:00","article_modified_time":"2025-06-14T04:10:25+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/express-graphql.jpg","type":"image\/jpeg"}],"author":"Eric Bishard","twitter_card":"summary_large_image","twitter_creator":"@httpJunkie","twitter_misc":{"Written by":"Eric Bishard","Est. reading time":"9\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/"},"author":{"name":"Eric Bishard","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/67d3a4b597e42370ccd34b715a6b1f4c"},"headline":"Fullstack React and GraphQL : Express Server","datePublished":"2020-02-29T00:03:38+00:00","dateModified":"2025-06-14T04:10:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/"},"wordCount":1284,"commentCount":0,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/express-graphql.jpg","keywords":["express","express framework","graphql","React"],"articleSection":["Couchbase Server","Node.js","SQL++ \/ N1QL Query","Tools &amp; SDKs"],"inLanguage":"ko-KR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/","url":"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/","name":"Fullstack React and GraphQL : Express Server - The Couchbase Blog","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/express-graphql.jpg","datePublished":"2020-02-29T00:03:38+00:00","dateModified":"2025-06-14T04:10:25+00:00","description":"\ud480\uc2a4\ud0dd React \ubc0f GraphQL \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uad6c\ucd95\uc5d0 \ub300\ud55c \uc774 3\ubd80 \uc2dc\ub9ac\uc988\uc5d0\uc11c Express\uc640 \ud568\uaed8 GraphQL\uc744 \uc0ac\uc6a9\ud558\uc5ec API \uc11c\ubc84\ub97c \uad6c\ucd95\ud558\uc138\uc694.","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/"]}]},{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/#primaryimage","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/express-graphql.jpg","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/express-graphql.jpg","width":1200,"height":628,"caption":"RAGE With Couchbase Express-GraphQL"},{"@type":"BreadcrumbList","@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-express-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Fullstack React and GraphQL : Express 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\/67d3a4b597e42370ccd34b715a6b1f4c","name":"\uc5d0\ub9ad \ube44\uc0e4\ub4dc","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/b7d1d2580c41d35a21654fb1abe65d23","url":"https:\/\/secure.gravatar.com\/avatar\/a316a2658772914defd259571b8cad18878eb23c9d0cc3a97dd803deca0c09ca?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a316a2658772914defd259571b8cad18878eb23c9d0cc3a97dd803deca0c09ca?s=96&d=mm&r=g","caption":"Eric Bishard"},"description":"\uad6d\uc81c \uc5f0\uc0ac, \ube14\ub85c\uadf8 \uc6b4\uc601, JavaScript, React, GraphQL \ubc0f NoSQL \ucee4\ubba4\ub2c8\ud2f0\ub97c \uc704\ud55c \uc639\ud638 \ud65c\ub3d9, Couchbase\uc758 \uc120\uc784 \uac1c\ubc1c\uc790 \uc639\ud638\uc790\ub85c \ud65c\ub3d9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.","sameAs":["https:\/\/www.reactstateofmind.com","https:\/\/www.linkedin.com\/in\/eric-b\/","https:\/\/x.com\/httpJunkie"],"url":"https:\/\/www.couchbase.com\/blog\/ko\/author\/eric-bishard\/"}]}},"authors":[{"term_id":8922,"user_id":53002,"is_guest":0,"slug":"eric-bishard","display_name":"Eric Bishard","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/a316a2658772914defd259571b8cad18878eb23c9d0cc3a97dd803deca0c09ca?s=96&d=mm&r=g","author_category":"","last_name":"Bishard","first_name":"Eric","job_title":"","user_url":"https:\/\/www.reactstateofmind.com","description":"\uad6d\uc81c \uc5f0\uc0ac, \ube14\ub85c\uadf8 \uc6b4\uc601, JavaScript, React, GraphQL \ubc0f NoSQL \ucee4\ubba4\ub2c8\ud2f0\ub97c \uc704\ud55c \uc639\ud638 \ud65c\ub3d9, Couchbase\uc758 \uc120\uc784 \uac1c\ubc1c\uc790 \uc639\ud638\uc790\ub85c \ud65c\ub3d9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4."}],"_links":{"self":[{"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/posts\/8219","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\/53002"}],"replies":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/comments?post=8219"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/posts\/8219\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/media\/10873"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/media?parent=8219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/categories?post=8219"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/tags?post=8219"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/ppma_author?post=8219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}