{"id":8222,"date":"2020-02-28T16:03:45","date_gmt":"2020-02-29T00:03:45","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=8222"},"modified":"2025-06-13T21:03:55","modified_gmt":"2025-06-14T04:03:55","slug":"fullstack-react-apollo-3","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/ko\/fullstack-react-apollo-3\/","title":{"rendered":"\ud480\uc2a4\ud0dd React \ubc0f GraphQL : Apollo \ud074\ub77c\uc774\uc5b8\ud2b8"},"content":{"rendered":"<p>\uc138 \uac1c\uc758 \uae00 \uc911 \uc138 \ubc88\uc9f8 \uae00\uc740 Apollo GraphQL \ud074\ub77c\uc774\uc5b8\ud2b8\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><a href=\"https:\/\/www.couchbase.com\/blog\/ko\/fullstack-react-express-2\/\">Express-GraphQL API \uad6c\ucd95\ud558\uae30(2\ubd80)<\/a><\/li>\n<li>React\uc5d0\uc11c Apollo GraphQL \ud074\ub77c\uc774\uc5b8\ud2b8 \ub9cc\ub4e4\uae30 (3\ubd80)<\/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=\"creating-the-react-app\">Apollo GraphQL \ud074\ub77c\uc774\uc5b8\ud2b8\ub85c React \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub9cc\ub4e4\uae30<\/h2>\n<p>\uc774 \ud29c\ud1a0\ub9ac\uc5bc\uc758 \uc774 \ubd80\ubd84\uc5d0\uc11c\ub294 Apollo GraphQL \uc0ac\uc6a9\uacfc \uad00\ub828\ub41c \ubd80\ubd84\uc744 \uc5f0\uacb0\ud558\ub3c4\ub85d \ub3c4\uc640\ub4dc\ub9ac\uaca0\uc2b5\ub2c8\ub2e4. \uc5ec\ub7ec\ubd84\uc774 \ud544\uc694\ub85c \ud558\ub294 \ub300\ubd80\ubd84\uc758 React \uc571\uc744 GitHub \uc800\uc7a5\uc18c\uc5d0 \ud3ec\ud568\uc2dc\ucf30\uc2b5\ub2c8\ub2e4. \ud504\ub85c\uc81d\ud2b8\uc5d0 \ubcf5\uc81c\ud558\ub294 \uc774 \ubbf8\ub9ac \ub9cc\ub4e4\uc5b4\uc9c4 \ucf54\ub4dc\ub294 Create Rect \uc571\uc73c\ub85c \ube4c\ub4dc\ub41c React \ud504\ub85c\uc81d\ud2b8\uc774\uba70 \ub77c\uc6b0\ud305, \ud0d0\uc0c9, \uba54\ub274, \ubc18\uc751\ud615 \ub3d9\uc791, \uc0c1\ud0dc \ubc0f \ucee8\ud14d\uc2a4\ud2b8\ub97c \uad00\ub9ac\ud558\uace0 \uae30\ubcf8 \uc571 \uc544\ud0a4\ud14d\ucc98\ub97c \uc9c0\uc6d0\ud558\ub294 \uc77c\ubd80 \uc720\ud2f8\ub9ac\ud2f0 \ubc0f \uae30\ud0c0 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud3ec\ud568\ud569\ub2c8\ub2e4. Apollo GraphQL \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c \uc124\uc815\ud558\ub294 \uac83\ub9cc \uc2e0\uacbd\uc4f0\uace0 \uc2f6\uc5c8\uc9c0\ub9cc, \uc791\ub3d9 \uc911\uc778 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ucee8\ud14d\uc2a4\ud2b8\uc5d0\uc11c \uc774\ub97c \uc218\ud589\ud558\uace0 \uc2f6\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n<h3 id=\"clone-existing-react-app\">\uae30\uc874 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ubcf5\uc81c<\/h3>\n<p>\ub514\ucee4\ud50c\ub9c1\ub41c React \ud504\ub860\ud2b8\uc5d4\ub4dc\ub294 <code>\uce74\uc6b0\uce58\ubca0\uc774\uc2a4-gql-server<\/code> \ub514\ub809\ud1a0\ub9ac \uad6c\uc870\uc5d0 \ub300\ud55c \uae30\ubcf8\uc801\uc778 \uc544\uc774\ub514\uc5b4\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false striped:false nums:false lang:sh decode:true\" title=\"\ub514\ub809\ud1a0\ub9ac \uad6c\uc870\">  \r\n  \ubd84\ub178\uc758 \uce74\uc6b0\uce58\ubca0\uc774\uc2a4\r\n  \u2502\r\n  \u2514\u2500\u2500\u2500couchbase-gql-server\r\n  \u2502\r\n  \u2514\u2500\u2500\u2500-react-apollo-client\r\n<\/pre>\n<p>\ub8e8\ud2b8\uc5d0\uc11c \ub2e4\uc74c git \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uc5ec React \ud504\ub85c\uc81d\ud2b8\uc758 \uc2dc\uc791 \uc9c0\uc810\uc744 \ubcf5\uc81c\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4(<code>\ubd84\ub178-\uc704\ub4dc-\uce74\uc6b0\uce58\ubca0\uc774\uc2a4<\/code> \ub514\ub809\ud130\ub9ac)\uc758 \ud130\ubbf8\ub110\uc5d0 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false nums:false lang:sh decode:true\" title=\"\ub9ac\ud3ec\uc9c0\ud1a0\ub9ac \ubcf5\uc81c \ubc0f Git \uc138\ubd80 \uc815\ubcf4 \uc81c\uac70\">git clone https:\/\/github.com\/httpJunkie\/react-apollo-client.git &amp;&amp; cd react-apollo-client &amp;&amp; rm -rf .git<\/pre>\n<p>In the command above, we removed the `.git` directory as we do not want to take on the existing git history from the project we cloned into our project. You will need to initialize git on your own and periodically commit if you want to. It&#8217;s encouraged so that you don&#8217;t lose your work.<\/p>\n<p>\uc774\uc81c \uae30\ubcf8 \ub77c\uc6b0\ud305\uc744 \ud1b5\ud574 \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc791\ub3d9\ud558\ub294 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4. React \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc874\uc7ac\ud558\uc9c0\ub9cc \uc544\uc9c1 \uc5f0\uacb0\ub418\uc9c0 \uc54a\uc740 \ucef4\ud3ec\ub10c\ud2b8\uc640 \uc720\ud2f8\ub9ac\ud2f0\uac00 \uba87 \uac00\uc9c0 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\uac83\ub4e4\uc744 \ub2e4\ub8e8\uae30 \uc804\uc5d0 \ubaa8\ub4e0 \uac83\uc774 \uc624\ub958 \uc5c6\uc774 \uc791\ub3d9\ud558\ub294\uc9c0 \ud655\uc778\ud558\uae30 \uc704\ud574 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc790\uccb4\uc801\uc73c\ub85c \uc2e4\ud589\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4:<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false nums:false lang:sh decode:true\" title=\"NPM \uc124\uce58 \ubc0f \uc2dc\uc791\">npm \uc124\uce58 &amp;&amp; npm \uc2dc\uc791<\/pre>\n<p><a href=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/02\/react-starting-point-layout.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8230\" src=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/02\/react-starting-point-layout.jpg\" alt=\"preview of our React starting point\" width=\"1020\" height=\"713\" srcset=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/react-starting-point-layout.jpg 1020w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/react-starting-point-layout-300x210.jpg 300w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/react-starting-point-layout-768x537.jpg 768w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/react-starting-point-layout-20x14.jpg 20w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/><\/a><\/p>\n<p>\ucf58\uc194\uc744 \uc5fd\ub2c8\ub2e4(<strong>\u2318 Cmd + \u2325 \uc635\uc158 + I<\/strong> Mac\uc758 \uacbd\uc6b0) (<strong>Ctrl + \u2191 Shift + J<\/strong> PC\uc5d0\uc11c)<\/p>\n<p>\ud648\uc5d0\uc11c \ud56d\uacf5\uc0ac\ub85c \uc774\ub3d9\ud560 \ub54c \uc624\ub958\uac00 \ubc1c\uc0dd\ud558\uc9c0 \uc54a\ub294\uc9c0, \uc624\ub958\ub098 \uc8fc\uc694 \uacbd\uace0\uac00 \ud45c\uc2dc\ub418\uc9c0 \uc54a\ub294\uc9c0 \ud655\uc778\ud558\uc138\uc694. \uc774 \ubbf8\ub9ac \ubcf4\uae30\uc5d0 \ud45c\uc2dc\ub41c \uac83\uc740 \ud56d\uacf5\uc0ac \uacbd\ub85c\uc774\uba70, \uc774 \uacbd\ub85c\uac00 \ub9c8\uc2a4\ud130 \uc0c1\uc138 \uae30\ub2a5\uc744 \ucd94\uac00\ud560 \uacbd\ub85c\uc785\ub2c8\ub2e4. \ub2e4\ub978 \uc0ac\ub78c\uc774 \uc774\ubbf8 \ubaa8\ub4e0 \uc2a4\ud0c0\uc77c\ub9c1\uacfc \uae30\ubcf8 \ub808\uc774\uc544\uc6c3\uc744 \ucc98\ub9ac\ud55c \uac83\ucc98\ub7fc, \uc6b0\ub9ac\uac00 \ud560 \uc77c\uc740 <code>\ud56d\uacf5\uc0ac \ubaa9\ub85d.jsx<\/code> \uadf8\ub9ac\uace0 <code>airline-details.jsx<\/code> \ud30c\uc77c\uc744 \ud398\uc774\uc9c0 \uc591\ucabd\uc758 \ud604\uc7ac \ud50c\ub808\uc774\uc2a4\ud640\ub354 \ud14d\uc2a4\ud2b8 \ub300\uc2e0 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\ud589\ud788\ub3c4 \ub514\uc790\uc778 \ud300\uc774 \ubaa8\ub4e0 \ub808\uc774\uc544\uc6c3\uacfc CSS \uc791\uc5c5\uc744 \uc644\ub8cc\ud588\uc2b5\ub2c8\ub2e4!<\/p>\n<p>React \uc571\uc744 \ubcc0\uacbd\ud558\uae30 \uc804\uc5d0 \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc788\ub294 \ud30c\uc77c \uc911 \uc544\uc9c1 \ud56d\uacf5\uc0ac \ub178\uc120\uacfc \ud568\uaed8 \uc0ac\uc6a9\ub418\uc9c0 \uc54a\ub294 \uba87 \uac00\uc9c0 \ud30c\uc77c\uc744 \uc774\ud574\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<h3 id=\"overview-of-assets\">\uc790\uc0b0 \uac1c\uc694<\/h3>\n<p>\uc6b0\ub9ac\uac00 \uc775\uc219\ud574\uc9c0\uae38 \ubc14\ub77c\ub294 6\uac1c\uc758 \ud30c\uc77c\uc774 \ub300\uae30 \uc911\uc774\uba70 \uc0ac\uc6a9\uc744 \uae30\ub2e4\ub9ac\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/httpJunkie\/react-apollo-client\/blob\/master\/src\/components\/hoc\/withApolloProvider.js\">hoc\/withApolloProvider.js<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/httpJunkie\/react-apollo-client\/blob\/master\/src\/components\/partial\/airline-list.jsx\">partial\/airline-list.jsx<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/httpJunkie\/react-apollo-client\/blob\/master\/src\/components\/partial\/airline-details.jsx\">partial\/airline-details.jsx<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/httpJunkie\/react-apollo-client\/blob\/master\/src\/components\/utility\/pagination.jsx\">utility\/pagination.jsx<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/httpJunkie\/react-apollo-client\/blob\/master\/src\/components\/utility\/pagination.scss\">\uc720\ud2f8\ub9ac\ud2f0\/\ud398\uc774\uc9c0\ub124\uc774\uc158.scss<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/httpJunkie\/react-apollo-client\/blob\/master\/src\/components\/routes\/airline-gql.js\">routes\/airline-gql.js<\/a><\/li>\n<\/ul>\n<p>\ub514\ub809\ud1a0\ub9ac \uad6c\uc870\uc640 \uad00\ub828\ud558\uc5ec \uc6b0\ub9ac\uac00 \uc0ac\uc6a9\ud558\uace0 \uc788\ub294 \uaddc\uce59\uc740 \"<code>\uacbd\ub85c<\/code>\" \ub514\ub809\ud1a0\ub9ac\ub294 \ud2b9\uc815 \uacbd\ub85c\ub97c \ud615\uc131\ud558\ub3c4\ub85d \ud574\uacb0\ub41c React \ucef4\ud3ec\ub10c\ud2b8\uc774\uba70, \"<code>\ubd80\ubd84<\/code>\" \ub514\ub809\ud1a0\ub9ac\uc5d0 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uacbd\ub85c\uc5d0 \uc758\ud574 \ub85c\ub4dc\ub41c \ubdf0\uac00 \uc544\ub2c8\ub77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc7a0\uc7ac\uc801\uc73c\ub85c \uc7ac\uc0ac\uc6a9\ub420 \uc218 \uc788\ub294 \ubd80\ubd84 \ubdf0 \ub610\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \uc774\uac83\uc740 \uc81c\uac00 \uc0ac\uc6a9\ud558\ub294 \uad00\uc2b5\uc774\uc9c0 React\uac00 \uac15\uc81c\ud558\ub294 \uac83\uc774 \uc544\ub2d9\ub2c8\ub2e4.<\/p>\n<p><strong>\uc704\ub4dc\uc544\ud3f4\ub85c\ud504\ub85c\ubc14\uc774\ub354<\/strong> - \uac00\ub3c5\uc131\uc744 \uc704\ud574 \uc0c1\uc704 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uac83\uc740 ApolloProvider\ub97c \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\ub85c \uac00\uc838\uc624\ub294 \uac83\uacfc \ube44\uc2b7\ud558\ub2e4\ub294 \uac83\uc744 \uc774\ud574\ud558\uc138\uc694. \uc774\uac83\uc774 \ubaa8\ubc94 \uc0ac\ub840\ub294 \uc544\ub2d0 \uc218\ub3c4 \uc788\uc9c0\ub9cc \ucf54\ub4dc\ub97c \uae54\ub054\ud558\uac8c \uc720\uc9c0\ud55c\ub2e4\ub294 \uc810\uc774 \ub9c8\uc74c\uc5d0 \ub4ed\ub2c8\ub2e4.<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false lang:default decode:true\" title=\"\uc704\ub4dc\uc544\ud3f4\ub85c\ud504\ub85c\ubc14\uc774\ub354 \uc0c1\uc704 \uc8fc\ubb38 \ucef4\ud3ec\ub10c\ud2b8\">'react'\uc5d0\uc11c React\ub97c import\ud569\ub2c8\ub2e4.\r\n'@apollo\/client'\uc5d0\uc11c { ApolloProvider, InMemoryCache, ApolloClient }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n\r\nconst withApolloProvider = (WrappedComponent, graphqlEndpoint) =&gt; { {\r\n  const apolloClient = new ApolloClient({\r\n    uri: graphqlEndpoint,\r\n    \uce90\uc2dc: \uc0c8\ub85c\uc6b4 InMemoryCache()\r\n  })\r\n\r\n  \ubc18\ud658 (props) =&gt; (\r\n    \r\n      \r\n    \r\n  )\r\n}\r\n\r\n\uae30\ubcf8\uac12 \ub0b4\ubcf4\ub0b4\uae30 withApolloProvider<\/pre>\n<p>\uc6b0\ub9ac\ub294 <a href=\"https:\/\/github.com\/httpJunkie\/react-apollo-client\/blob\/master\/src\/components\/partial\/airline-list.jsx\"><code>\ud56d\uacf5\uc0ac \ubaa9\ub85d.jsx<\/code><\/a> \ubc0f <a href=\"https:\/\/github.com\/httpJunkie\/react-apollo-client\/blob\/master\/src\/components\/partial\/airline-details.jsx\"><code>airline-details.jsx<\/code><\/a>\uc5d0\uc11c \uc774 \ub450 \uad6c\uc131 \uc694\uc18c\uac00 \ub098\ub780\ud788 \ub85c\ub4dc\ub429\ub2c8\ub2e4. <code>airlines.jsx<\/code> \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \ubaa9\ub85d\uc5d0\ub294 \uac01 \ud56d\uacf5\uc0ac\uc640 \uc6a9\ub3c4\ub9cc \ud45c\uc2dc\ub429\ub2c8\ub2e4. <a href=\"https:\/\/github.com\/httpJunkie\/react-apollo-client\/blob\/master\/src\/components\/utility\/pagination.jsx\"><code>pagination.jsx<\/code><\/a> \ub97c \ud074\ub9ad\ud558\uba74 \ud398\uc774\uc9c0 \uc67c\ucabd\uc5d0 \uae34 \ubaa9\ub85d\uc774 \ud45c\uc2dc\ub418\uc9c0 \uc54a\ub3c4\ub85d \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ub9c8\uc9c0\ub9c9\uc73c\ub85c <code>airline-gql.js<\/code> \ud30c\uc77c\uc740 \ub2e8\uc21c\ud788 \uc6b0\ub9ac\uc758 <a href=\"https:\/\/www.couchbase.com\/blog\/ko\/processing-graphql-queries-with-java-spring-boot-and-nosql\/\">\uadf8\ub798\ud504QL \ucffc\ub9ac<\/a> \uc5d0 \ub300\ud55c \ubaa8\ub4e0 \uc601\uad6d \ud56d\uacf5\uc0ac\uc758 \ucffc\ub9ac\ub97c \uc800\uc7a5\ud569\ub2c8\ub2e4. \uc815\ub9ac \ubaa9\uc801\uc73c\ub85c \ucffc\ub9ac\ub97c \ub2e4\ub978 \ud30c\uc77c\ub85c \ubd84\ub9ac\ud558\ub294 \uac83\uc744 \uc88b\uc544\ud558\ub294\ub370 \ud544\uc218\ub294 \uc544\ub2c8\uc9c0\ub9cc <code>airlines.jsx<\/code> \ud30c\uc77c\uc744 \ub9cc\ub4ed\ub2c8\ub2e4.<\/p>\n<h3 id=\"how-our-master-detail-page-works\">\ub9c8\uc2a4\ud130-\uc138\ubd80 \ud398\uc774\uc9c0 \uc791\ub3d9 \ubc29\uc2dd<\/h3>\n<p>\uc6b0\ub9ac \ud504\ub85c\uc81d\ud2b8\uc5d0\ub294 \ub9c8\uc2a4\ud130-\ub514\ud14c\uc77c \ucef4\ud3ec\ub10c\ud2b8 \uad00\uacc4(<code>\ud56d\uacf5\uc0ac \ubaa9\ub85d.jsx<\/code> &amp;&amp; <code>airline-details.jsx<\/code>)\uc5d0\uc11c <code>\/\ud56d\uacf5<\/code> \uacbd\ub85c\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4. \uc774 \uacbd\ub85c\ub294 \uc774\ub984\uc774 \uc9c0\uc815\ub41c \ubdf0 \uad6c\uc131 \uc694\uc18c\ub85c \ud655\uc778\ub429\ub2c8\ub2e4: <code>airlines.jsx<\/code>\ub97c \uc0ac\uc6a9\ud558\uc5ec \uacbd\ub85c\ubfd0\ub9cc \uc544\ub2c8\ub77c \ucd94\uac00 URI \ub9e4\uac1c\ubcc0\uc218(<code>airlineId<\/code>)\ub97c \uacbd\ub85c \ub05d\uc5d0 \ucd94\uac00\ud558\uc5ec \uad6c\uccb4\uc801\uc73c\ub85c \uc9c0\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud2b9\uc815 <code>airlineId<\/code> URI \ub9e4\uac1c\ubcc0\uc218\uac00 URL\uc5d0 \uc874\uc7ac\ud569\ub2c8\ub2e4:<\/p>\n<p><code>https:\/\/localhost:3000\/airlines<\/code><\/p>\n<p>\uc67c\ucabd\uc5d0\ub294 \ud56d\uacf5\uc0ac \ubaa9\ub85d\ub9cc \ud45c\uc2dc\ub429\ub2c8\ub2e4. \ub610\ud55c \ud398\uc774\uc9c0 \uc624\ub978\ucabd\uc5d0 \ub2e4\uc74c\uacfc \uac19\uc740 \ub9c1\ud06c\uac00 \ud45c\uc2dc\ub429\ub2c8\ub2e4: <strong>\"\ud56d\uacf5\uc0ac \uc120\ud0dd\"<\/strong>.<\/p>\n<p>\uba54\ub274\uc5d0\uc11c \ud56d\uacf5\uc0ac\ub97c \uc120\ud0dd\ud558\uba74 \ud398\uc774\uc9c0 \uc624\ub978\ucabd\uc5d0 \uc138\ubd80 \uc815\ubcf4\uac00 \ub85c\ub4dc\ub429\ub2c8\ub2e4. \ud074\ub9ad\ud558\uba74 \ub9ac\uc561\ud2b8 \ub77c\uc6b0\ud130\uc5d0\uc11c \uc81c\uacf5\ud558\ub294  \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc801\uc808\ud55c ID\ub85c URL\uc744 \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4:<\/p>\n<p><code>https:\/\/localhost:3000\/airlines\/1355<\/code><\/p>\n<p>\uc5ec\uae30\uc11c ID\ub97c \uc77c\uce58\uc2dc\ud0ac \uac83\uc785\ub2c8\ub2e4. <code>1355<\/code> \ub97c React \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub370\uc774\ud130\uc5d0 \uc774\ubbf8 \uba54\ubaa8\ub9ac\uc5d0 \uc788\ub294 \uc62c\ubc14\ub978 \ud56d\uacf5\uc0ac\ub85c \uc124\uc815\ud558\uace0 \uc801\uc808\ud55c \ud56d\uacf5\uc0ac \uc815\ubcf4 \"British Airways\"\ub97c \ud45c\uc2dc\ud569\ub2c8\ub2e4.<\/p>\n<h3 id=\"adding-dependencies-for-our-apollo-graphql-client\">Apollo GraphQL \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0 \ub300\ud55c \uc885\uc18d\uc131 \ucd94\uac00\ud558\uae30<\/h3>\n<p>\uc138 \uac00\uc9c0 \ud328\ud0a4\uc9c0\uac00 \ud544\uc694\ud569\ub2c8\ub2e4: <a href=\"https:\/\/www.npmjs.com\/package\/@apollo\/react-hooks\"><code>@apollo\/react-hooks<\/code><\/a>, <a href=\"https:\/\/www.npmjs.com\/package\/apollo-boost\"><code>\uc544\ud3f4\ub85c-\ubd80\uc2a4\ud2b8<\/code><\/a>\ubc0f <a href=\"https:\/\/www.npmjs.com\/package\/graphql\"><code>\uadf8\ub798\ud504 \ucffc\ub9ac<\/code><\/a>\ub97c \ud504\ub85c\uc81d\ud2b8\uc5d0 \uac00\uc838\uc640\uc11c <code>cd<\/code> \ub97c <code>\ubc18\uc751-\uc544\ud3f4\ub85c-\ud074\ub77c\uc774\uc5b8\ud2b8<\/code> \ub514\ub809\ud1a0\ub9ac\ub97c \uc2e4\ud589\ud558\uace0 <code> npm \uc124\uce58 <\/code> \ub97c \uc0ac\uc6a9\ud558\uc5ec GraphQL \ubc0f Apollo\uc5d0 \ud544\uc694\ud55c \ud328\ud0a4\uc9c0\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false nums:false lang:sh decode:true\" title=\"Apollo \ud074\ub77c\uc774\uc5b8\ud2b8 3 \ubc0f GraphQL \uc124\uce58\">npm \uc124\uce58 @apollo\/client graphql<\/pre>\n<p>Apollo \ubc0f GraphQL\uc5d0 \uc775\uc219\ud574\uc9c0\uace0 \uc2f6\ub2e4\uba74 <a href=\"https:\/\/www.apollographql.com\/docs\/react\/data\/queries\/\">\ucffc\ub9ac\uc6a9 GraphQL \ubb38\uc11c<\/a>\ub97c \ucc38\uc870\ud558\uc138\uc694: <a href=\"https:\/\/www.apollographql.com\/docs\/react\/data\/queries\/#executing-a-query\">\ucffc\ub9ac \uc791\uc131\uc5d0 \ub300\ud55c GraphQL \ubb38\uc11c<\/a> \ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h3 id=\"building-the-master-detail-page\">\ub9c8\uc2a4\ud130-\uc138\ubd80 \ud398\uc774\uc9c0 \uad6c\ucd95<\/h3>\n<p>The `airlines.jsx` file is where we will be doing most of our work. Let&#8217;s start by adding some imports:<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false nums:false lang:javascript decode:true\" title=\"\ud56d\uacf5\uc0ac \uad6c\uc131 \uc694\uc18c \uac00\uc838\uc624\uae30\">'@apollo\/client'\uc5d0\uc11c { useQuery }\ub97c \uac00\uc838\uc635\ub2c8\ub2e4.\r\n'.\/airline-gql'\uc5d0\uc11c { airlineGql } \uc784\ud3ec\ud2b8<\/pre>\n<p>Underneath the `import { airlineGql }` line, we need to import <code>\uc704\ub4dc\uc544\ud3f4\ub85c\ud504\ub85c\ubc14\uc774\ub354<\/code>\ub97c \uc0c1\uc704 \uad6c\uc131 \uc694\uc18c\ub85c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false nums:false lang:javascript decode:true\" title=\"\uc544\ud3f4\ub85c \uacf5\uae09\uc790 HOC \uac00\uc838\uc624\uae30\">'..\/hoc\/withApolloProvider'\uc5d0\uc11c withApolloProvider\ub97c \uac00\uc838\uc635\ub2c8\ub2e4.<\/pre>\n<p>\uc774\ub807\uac8c \ud558\uba74 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc544\ud3f4\ub85c \ud504\ub85c\ubc14\uc774\ub354\ub85c \ub798\ud551\ud569\ub2c8\ub2e4. \uc800\ub294 \uc804\uccb4 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 ApollloProvider\ub85c \ub798\ud551\ud558\ub294 \ub300\uc2e0 \uc774 \ubc29\ubc95\uc744 \uc0ac\uc6a9\ud588\uc2b5\ub2c8\ub2e4. \uc81c\uac00 \uacf5\uc720\ud558\ub294 \ucf54\ub4dc\ub97c \uc870\uae08 \ub35c \ubcf5\uc7a1\ud558\uac8c \ub9cc\ub4e4\uae30 \uc704\ud55c \uc2dc\ub3c4\uc785\ub2c8\ub2e4. \uc6b0\ub9ac\ub294 <code>airlines.jsx<\/code> \ud30c\uc77c\uc744 \ub0b4\ubcf4\ub0c5\ub2c8\ub2e4.<\/p>\n<p>\ub2e4\uc74c\uacfc \uac19\uc740 \uc904\uc774 \ud45c\uc2dc\ub429\ub2c8\ub2e4:<\/p>\n<p><strong><code>\uae30\ubcf8 \ud56d\uacf5\uc0ac \ub0b4\ubcf4\ub0b4\uae30<\/code><\/strong><\/p>\n<p>\ub85c \ubcc0\uacbd\ud574\uc57c \ud569\ub2c8\ub2e4:<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false nums:false lang:javascript decode:true\" title=\"\ub798\ud551\ub41c \ucef4\ud3ec\ub10c\ud2b8\ub85c \ud56d\uacf5\uc0ac \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub0b4\ubcf4\ub0b4\uae30 \uc5c5\ub370\uc774\ud2b8\">const WrappedComponent = withApolloProvider(Airlines, 'https:\/\/localhost:4000\/graphql')\r\n\uae30\ubcf8 WrappedComponent \ub0b4\ubcf4\ub0b4\uae30<\/pre>\n<p>Our first argument to the HOC is a React Component `Airlines` (this component). Therefore, when our app is rendered, the <code>&lt;Airlines \/&gt;<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub85c \ub798\ud551\ub429\ub2c8\ub2e4. <a href=\"https:\/\/www.apollographql.com\/docs\/react\/get-started\/#connect-your-client-to-react\">\uc544\ud3f4\ub85c \uacf5\uae09\uc790<\/a>. React\uc758 \ud504\ub85c\ubc14\uc774\ub354\ub294 \ucee8\ud14d\uc2a4\ud2b8 API\uc758 \ud568\uc218\uc785\ub2c8\ub2e4. \ucee8\ud14d\uc2a4\ud2b8\ub294 \ud504\ub86d\uc744 \ud1b5\ud574 \uc218\ub3d9\uc73c\ub85c \ub370\uc774\ud130\ub97c \uc804\ub2ec\ud560 \ud544\uc694 \uc5c6\uc774 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ucef4\ud3ec\ub10c\ud2b8 \ud2b8\ub9ac \uc804\uccb4\uc5d0 \ub370\uc774\ud130\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc6b0\ub9ac\uc758 \uacbd\uc6b0 <code>&lt;Airlines \/&gt;<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub294 \uacf5\uae09\uc790\ub85c \ub798\ud551\ub418\uc5b4 \ud574\ub2f9 \uacf5\uae09\uc790\uc5d0 \uc815\uc758\ub41c Apollo \ud074\ub77c\uc774\uc5b8\ud2b8 \ucf54\ub4dc\uac00 \uc81c\uacf5\ud558\ub294 \ub370\uc774\ud130\uc5d0 \uc561\uc138\uc2a4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <code>\uc704\ub4dc\uc544\ud3f4\ub85c\ud504\ub85c\ubc14\uc774\ub354<\/code> \uc0c1\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.<\/p>\n<p>\ucd5c\uc885\uc801\uc73c\ub85c \uac00\uc838\uc628 \uac83\uc740 \uc81c\uac00 \uc774\ubbf8 \uad6c\ucd95\ud55c \ub450 \uac00\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4(<a href=\"https:\/\/github.com\/httpJunkie\/react-apollo-client\/blob\/master\/src\/components\/partial\/airline-list.jsx\">\ud56d\uacf5\uc0ac \ubaa9\ub85d.jsx<\/a> \uadf8\ub9ac\uace0 <a href=\"https:\/\/github.com\/httpJunkie\/react-apollo-client\/blob\/master\/src\/components\/partial\/airline-details.jsx\">airline-details.jsx<\/a>):<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false lang:javascript decode:true\" title=\"Import AirlineList &amp; AirlineDetails Components\">'..\/partial\/airline-list'\uc5d0\uc11c AirlineList \uac00\uc838\uc624\uae30\r\n'...\/partial\/airline-details'\uc5d0\uc11c AirlineDetails \uac00\uc838\uc624\uae30<\/pre>\n<p>\uc774 \ub450 \ud30c\uc77c\uc744 \uac00\uc838\uc624\uba74 \ud574\ub2f9 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ubb38\uc744 \ud50c\ub809\uc2a4\ubc15\uc2a4 \uadf8\ub9ac\ub4dc\uc5d0 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4(<a href=\"https:\/\/www.npmjs.com\/package\/simple-flexbox\">\uac04\ub2e8\ud55c \ud50c\ub809\uc2a4\ubc15\uc2a4<\/a> \ub97c \uc0ac\uc6a9\ud558\uc5ec \ud398\uc774\uc9c0\ub97c \ubc31\ubd84\uc728\ub85c \uc27d\uac8c \ubd84\ud560\ud560 \uc218 \uc788\ub3c4\ub85d \ub9cc\ub4e4\uc5c8\uc2b5\ub2c8\ub2e4:<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false lang:jsx decode:true\" title=\"Flexbox \ubd84\ud560 \ud654\uba74\">&gt;<\/pre>\n<p>\uc774 \ubaa8\ub4e0 \uac83\uc774 \uc900\ube44\ub418\uc5c8\uc73c\ub2c8 \uc774\uc81c \ub370\uc774\ud130\ub97c \ub2e4\ub8e8\uae30\ub9cc \ud558\uba74 \ub429\ub2c8\ub2e4. <code>\uc0ac\uc6a9 \ucffc\ub9ac<\/code> \ub294 Apollo GraphQL \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c \ub2e4\uc74c\uacfc \uac19\uc740 \uac1d\uccb4\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4. <code>\ub85c\ub529 \uc911<\/code>, <code>\uc624\ub958<\/code>\ubc0f <code>\ub370\uc774\ud130<\/code> \uc18d\uc131\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c \uacbd\ub85c\uc758 \uacbd\ub85c(URL\uc5d0\uc11c)\ub97c \uc77c\uce58\uc2dc\ucf1c\uc57c \ud569\ub2c8\ub2e4. \uc774\uc5d0 \ub300\ud55c \uc811\uadfc\uc740 React \ub77c\uc6b0\ud130\ub97c \uc0ac\uc6a9\ud558\uba74 \uc27d\uc2b5\ub2c8\ub2e4: (<code>match.params<\/code>).<\/p>\n<p>Let&#8217;s bring React Router&#8217;s `match` in by destructuring the props to the `Airlines` Component::<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false lang:javascript decode:true\" title=\"React \ub77c\uc6b0\ud130 \uacf5\uae09\uc790 \ub370\uc774\ud130\uc5d0\uc11c \uc77c\uce58\ud558\ub294 \ud56d\ubaa9 \ud30c\uad34\ud558\uae30\">const Airlines = ({ match }) =&gt; {<\/pre>\n<p>\ub2e4\uc74c\uc73c\ub85c, \ucd5c\uc0c1\uc704 \ub808\ubca8\uc5d0 \ub2e4\uc74c\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4. <code>\ud56d\uacf5\uc0ac<\/code> \ucef4\ud3ec\ub10c\ud2b8:<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false lang:javascript decode:true\" title=\"\ud56d\uacf5\uc0ac \ub370\uc774\ud130 \ub85c\ub4dc \ubc0f \uc120\ud0dd\ud55c \ud56d\uacf5\uc0ac \ub9e4\uce6d\">const airlineId = \uc22b\uc790(match.params.id)\r\n  const { loading, error, data } = useQuery(airlineGql)\r\n\r\n  if (loading) return &lt;p&gt;\ub85c\ub4dc \uc911...&lt;\/p&gt;\r\n  if (\uc624\ub958) \ubc18\ud658 &lt;p&gt;\uc624\ub958 :( &lt;span style=&quot;{{color:&quot; &#039;red&#039;}}&gt;{error.message}&lt;\/span&gt; )&lt;\/p&gt;\r\n\r\n  const airlines = data.airlinesUK\r\n  const airline = match.params.id ? airlines.find(a =&amp;gt; a.id === airlineId) : null<\/pre>\n<p><strong>\uc6b0\ub9ac\uac00 \ubc29\uae08 \ubb34\uc2a8 \uc9d3\uc744 \ud55c \uac70\uc8e0?<\/strong><\/p>\n<ol>\n<li>\uc124\uc815 <code>airlineId<\/code> \uac00 <code>match.params.id<\/code> \ub294 \uc22b\uc790\ub97c \ubc18\ud658\ud558\uace0 <code>\uc815\uc758\ub418\uc9c0 \uc54a\uc74c<\/code> (\uacbd\ub85c \uacbd\ub85c\uc5d0 ID\uac00 \uc788\uc2b5\ub2c8\uae4c?) <code>\/airlines\/1355<\/code> \uc5ec\ubd80 <code>\/\ud56d\uacf5\/<\/code>?).<\/li>\n<li>\uc5d0\uc11c \ub0b4\ubcf4\ub0b8 GraphQL \ucffc\ub9ac \ubb38\uc790\uc5f4\uc744 \uc0ac\uc6a9\ud558\uc5ec <code>\ud56d\uacf5\uc0acGql<\/code> \ud30c\uc77c\uc744 \uc0ad\uc81c\ud569\ub2c8\ub2e4. \ud30c\uc77c\uc744 \ubc18\ud658\ud558\ubbc0\ub85c \uc5ec\uae30\uc5d0\uc11c\ub3c4 \ud30c\uc77c\uc744 \uc0ad\uc81c\ud55c\ub2e4\ub294 \uc810\uc744 \uae30\uc5b5\ud558\uc138\uc694.<\/li>\n<li>\ub370\uc774\ud130 \ub85c\ub4dc\uac00 \uc644\ub8cc\ub420 \ub54c\uae4c\uc9c0 '\ub85c\ub4dc \uc911'\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.<\/li>\n<li>GraphQL \uc11c\ubc84\uac00 \uc2e4\ud589 \uc911\uc774 \uc544\ub2c8\uac70\ub098 \uc624\ub958 \ub4f1\uc774 \uc788\ub294 \uacbd\uc6b0 \"\uc624\ub958\"\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4...<\/li>\n<li>\ucffc\ub9ac\uc5d0\uc11c \ubc18\ud658\ub41c \ubaa8\ub4e0 \ud56d\uacf5\uc0ac\uc758 \ub370\uc774\ud130\ub97c \ub2e4\uc74c\uacfc \uac19\uc740 \ub85c\uceec \ubcc0\uc218\ub85c \ucea1\ucc98\ud569\ub2c8\ub2e4. <code>\ud56d\uacf5\uc0ac<\/code><\/li>\n<li>\ub9cc\uc57d <code>match.params.id<\/code> \uc5d0 \uc22b\uc790\uac00 \ud3ec\ud568\ub418\uc5b4 \uc788\uc73c\uba74 \uacbd\ub85c\uc5d0 ID\uac00 \ud3ec\ud568\ub418\uc5b4 \uc788\uc74c\uc744 \uc758\ubbf8\ud558\uba70, \uc774 \uacbd\uc6b0 \ud2b9\uc815 \ud56d\uacf5\uc0ac\uc758 \ub370\uc774\ud130\ub97c \ub85c\uceec \ubcc0\uc218 <code>\ud56d\uacf5\uc0ac<\/code> \uadf8\ub807\uc9c0 \uc54a\uc73c\uba74 \ud574\ub2f9 \ubcc0\uc218\uc5d0 null \uac12\uc744 \uc800\uc7a5\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n<p>\uadf8\ub9ac\uace0 <code>\uc77c\uce58<\/code> \uc5d0\uc11c \uacbd\ub85c\ub97c \uc124\uc815\ud558\ub294 \ubc29\uc2dd \ub54c\ubb38\uc5d0 \uc791\ub3d9\ud569\ub2c8\ub2e4. <code>App.js<\/code> \ud398\uc774\uc9c0\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4:<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false lang:jsx decode:true\" title=\"React \ub77c\uc6b0\ud130 \uc815\uc758 \uc5c5\ub370\uc774\ud2b8\">}\r\n\/&gt;<\/pre>\n<p>\uc774 \uacbd\ub85c\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \ud45c\uc2dc\ub429\ub2c8\ub2e4: \ub2e4\uc74c\uacfc \uac19\uc740 \uc774\ub984\uc758 \uacbd\ub85c\ub97c \ucc3e\uc2b5\ub2c8\ub2e4. <code>\/\ud56d\uacf5\/<\/code> \ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0ac\uc6a9\ud560 \uc218 \uc788\uc73c\uba70 \uadf8 \uc774\ud6c4\uc758 \ubaa8\ub4e0 \ud56d\ubaa9\uc740 <code>match.params.id<\/code> \uad6c\ubb38.<\/p>\n<p>\uc9c0\uae08 \ud504\ub85c\uc81d\ud2b8\ub97c \uc2e4\ud589\ud558\ub294\ub370 GraphQL \uc11c\ubc84\uac00 \uc2e4\ud589\ub418\uace0 \uc788\uc9c0 \uc54a\uc73c\uba74 \uc624\ub958\uac00 \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<br \/>\n\"\uc624\ub958 :( \ub124\ud2b8\uc6cc\ud06c \uc624\ub958: \uac00\uc838\uc624\uc9c0 \ubabb\ud568 )\"<\/p>\n<p>\ub530\ub77c\uc11c \ub9c8\uc2a4\ud130-\ub514\ud14c\uc77c \ud398\uc774\uc9c0\ub97c \ud14c\uc2a4\ud2b8\ud558\uae30 \uc704\ud574 React \uc571\uc744 \uc2e4\ud589\ud558\uae30 \uc804\uc5d0 \ud574\ub2f9 \uc11c\ubc84\ub97c \uc2dc\uc791\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<h3 id=\"running-our-app\">\uc804\uccb4 \uc2a4\ud0dd \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc2e4\ud589<\/h3>\n<p>\ud480\uc2a4\ud0dd React \ubc0f GraphQL \ud504\ub85c\uc81d\ud2b8\ub97c \uc2e4\ud589\ud558\ub824\uba74 \uba3c\uc800 \ud328\ud0a4\uc9c0\ub97c \ud558\ub098 \ub354 \ucd94\uac00\ud574\uc57c \ud569\ub2c8\ub2e4:<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false nums:false lang:sh decode:true\" title=\"CORS \ud328\ud0a4\uc9c0 \uc124\uce58\">npm \uc124\uce58 cors<\/pre>\n<p>\uc571\uc740 \ud55c \ub3c4\uba54\uc778(localhost:3000)\uc5d0\uc11c \ud638\uc2a4\ud305\ub429\ub2c8\ub2e4. \uc571\uc740 \ub2e4\ub978 \ub3c4\uba54\uc778(localhost:4000)\uc758 API\uc5d0 \uc694\uccad\ud569\ub2c8\ub2e4. CORS\uac00 \uc5c6\uc73c\uba74 \ube0c\ub77c\uc6b0\uc800\uc758 \ub3d9\uc77c \ucd9c\ucc98 \uc815\ucc45\uc774 \uc694\uccad\uc744 \ucc28\ub2e8\ud569\ub2c8\ub2e4.<\/p>\n<p>CORS\ub97c \uc0ac\uc6a9\ud558\uba74 API\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0 \uc6f9 \uc571\uc774 \uc694\uccad\uc744 \ud574\ub3c4 \uad1c\ucc2e\ub2e4\uace0 \uc54c\ub9b4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. HTTP \ud5e4\ub354\ub97c \uc804\uc1a1\ud558\uc5ec \uc774\ub97c \uc218\ud589\ud569\ub2c8\ub2e4. Express-GraphQL \uc11c\ubc84\uc5d0\uc11c CORS\ub97c \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4. \ub2e4\uc74c \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \uae30\uc874\uc758 \ucc98\uc74c 7\uc904\uc744 \ub300\uccb4\ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false lang:javascript decode:true\" title=\"Express \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 CORS \uc9c0\uc6d0 \ucd94\uac00\">const express = require('express')\r\nconst cors = require('cors')\r\nconst graphqlHTTP = require('express-graphql')\r\nconst { buildSchema } = require('graphql')\r\n  \r\nconst couchbase = require('couchbase')\r\n  \r\nconst app = express()\r\napp.use(cors())<\/pre>\n<p>CORS\uc5d0 \ub300\ud574 \ucc98\uc74c\ubd80\ud130 \ub05d\uae4c\uc9c0 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\ub824\uba74 \ub2e4\uc74c \ubb38\uc11c\ub97c \ucc38\uc870\ud558\uc138\uc694.<a href=\"https:\/\/www.prisma.io\/blog\/enabling-cors-for-express-graphql-apollo-server-1ef999bfb38d\">Express-GraphQL \ubc0f Apollo \uc11c\ubc84\uc5d0 CORS\ub97c \ud65c\uc131\ud654\ud558\ub294 \ubc29\ubc95<\/a>&#8221;<\/p>\n<p>\uc774 \uc2dc\uc810\uc5d0\uc11c\ub294 Couchbase Server \uc778\uc2a4\ud134\uc2a4\uac00 \uc2e4\ud589 \uc911\uc778\uc9c0 \ud655\uc778\ud558\uae30\ub9cc \ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n<p>\uc11c\ubc84 \ub514\ub809\ud130\ub9ac\uc5d0\uc11c node \uba85\ub839\uc744 \uc2e4\ud589\ud558\uc5ec Express-GraphQL \uc11c\ubc84\ub97c \uc2dc\uc791\ud569\ub2c8\ub2e4:<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false lang:jsx decode:true\" title=\"\uc11c\ubc84 \uc2e4\ud589\">\ub178\ub4dc \uc11c\ubc84<\/pre>\n<p>\ub2e4\uc74c\uc73c\ub85c \ud074\ub77c\uc774\uc5b8\ud2b8 \ub514\ub809\ud1a0\ub9ac\uc5d0\uc11c \uba85\ub839\uc744 \uc2e4\ud589\ud558\uc5ec React \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c \uc2dc\uc791\ud558\uaca0\uc2b5\ub2c8\ub2e4:<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false nums:false lang:sh decode:true\" title=\"Express \uc11c\ubc84 \uc2dc\uc791\">npm \uc2dc\uc791<\/pre>\n<p>React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 Express-GraphQL API\uc5d0 \uc5f0\uacb0\ud558\uace0, \ub2e4\uc2dc Couchbase \ub370\uc774\ud130\ubca0\uc774\uc2a4\ub97c \ucffc\ub9ac\ud558\uc5ec \ud56d\uacf5\uc0ac \ub370\uc774\ud130\ub97c \uac80\uc0c9\ud558\uba70, \uc774\uc81c \ubc29\ubb38\ud558\uba74 \uc791\ub3d9\ud558\ub294 \uc571\uc774 \uc788\uc5b4\uc57c \ud569\ub2c8\ub2e4: <a href=\"https:\/\/localhost:3000\/\">localhost:3000<\/a><\/p>\n<p><a href=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/02\/final-project.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8232\" src=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/02\/final-project.gif\" alt=\"Final preview of React fullstack application\" width=\"1022\" height=\"840\" \/><\/a><\/p>\n<h2 id=\"using-postinstall-and-concurrently\">\uc0ac\ud6c4 \uc124\uce58 \ubc0f \ub3d9\uc2dc \uc0ac\uc6a9<\/h2>\n<p>\uc774\uc81c \ubaa8\ub4e0 \uac83\uc774 \uc791\ub3d9\ud558\ubbc0\ub85c \ud558\ub098\uc758 npm \uba85\ub839\uc73c\ub85c \ub450 \ud504\ub85c\uc81d\ud2b8\ub97c \ubaa8\ub450 \uc2e4\ud589\ud558\ub3c4\ub85d \ud504\ub85c\uc81d\ud2b8\ub97c \uc5c5\ub370\uc774\ud2b8\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<p>We need to initialize an npm project in our root directory. The server and client both have their own project directories. We give the root directory its own `package.json` file with only one dependency.<\/p>\n<p>\ub514\ub809\ud130\ub9ac\ub97c \ub8e8\ud2b8\ub85c \ubcc0\uacbd\ud558\uace0 \uc2e4\ud589\ud569\ub2c8\ub2e4:<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false nums:false lang:sh decode:true\" title=\"\ub8e8\ud2b8\ub97c NPM \ud504\ub85c\uc81d\ud2b8\ub85c \ucd08\uae30\ud654\ud558\uace0 \ub3d9\uc2dc\uc5d0 \uc124\uce58\ud558\uae30\">npm init -y &amp;&amp; npm install concurrently --save-dev<\/pre>\n<p>\uc774\ub807\uac8c \ud558\uba74 npm\uc774 \ucd08\uae30\ud654\ub418\uace0 \ubaa8\ub4e0 \uae30\ubcf8\uac12\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4(\uadf8\ub807\uc9c0 \uc54a\uc73c\uba74 <code>-y<\/code> \ud50c\ub798\uadf8)\ub97c \uc124\uc815\ud558\uace0 \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud558\uba74 \ud558\ub098\uc758 \uba85\ub839\uc73c\ub85c \ub450 \ud504\ub85c\uc81d\ud2b8\ub97c \ub3d9\uc2dc\uc5d0 \uc2e4\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ub77c\ub294 \ub450 \uac1c\uc758 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc124\uc815\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. <code>\ud074\ub77c\uc774\uc5b8\ud2b8<\/code> \uadf8\ub9ac\uace0 <code>\uc11c\ubc84<\/code> \ub97c \uc0ac\uc6a9\ud558\uc5ec \uac01 \ud504\ub85c\uc81d\ud2b8\ub97c \uac1c\ubcc4\uc801\uc73c\ub85c \uc2e4\ud589\ud55c \ub2e4\uc74c <code>\uc2dc\uc791<\/code> \uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud074\ub77c\uc774\uc5b8\ud2b8\uc640 \uc11c\ubc84\ub97c \ub3d9\uc2dc\uc5d0 \uc2e4\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ub610\ud55c \ub2e4\uc74c\uc744 \uc0ac\uc6a9\ud560 \uac83\uc785\ub2c8\ub2e4. <code>\uc124\uce58 \ud6c4<\/code> \ub97c \uc2e4\ud589\ud558\uc5ec \uac01 \ud504\ub85c\uc81d\ud2b8\uc758 <code>npm \uc124\uce58<\/code> \uc2a4\ud06c\ub9bd\ud2b8\ub97c \ub3c5\ub9bd\uc801\uc73c\ub85c \uc2e4\ud589\ud560 \ub54c \ub8e8\ud2b8\uc758 <code>npm \uc124\uce58<\/code> \uac00 \uc644\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4. <code>\uc124\uce58 \ud6c4<\/code> \uc758 \uc77c\ubd80\uc785\ub2c8\ub2e4. <a href=\"https:\/\/docs.npmjs.com\/misc\/scripts\">npm \uc2a4\ud06c\ub9bd\ud2b8<\/a> by default. All of these changes that we make below will enable someone to clone your repo, run `npm install &amp;&amp; npm start` to which will kick off all three installs, and then concurrently run each project.<\/p>\n<p>\uad50\uccb4 <code>package.json<\/code> \ub2e4\uc74c \uc2a4\ud06c\ub9bd\ud2b8\ub85c \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4:<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false lang:sh decode:true\" title=\"Package.json \uc2a4\ud06c\ub9bd\ud2b8\">\"\uc2a4\ud06c\ub9bd\ud2b8\": {\r\n    \"client\": \"cd react-apollo-client &amp;&amp; npm start\",\r\n    \"\uc11c\ubc84\": \"cd couchbase-gql-server &amp;&amp; node server\",\r\n    \"start\": \"\ub3d9\uc2dc\uc5d0 --kill-others \\\"npm run server\\\" \\\"npm run client\\\"\",\r\n    \"postinstall\": \"(cd couchbase-gql-server &amp;&amp; npm install); (cd react-apollo-client &amp;&amp; npm install);\"\r\n  },<\/pre>\n<p>\ud504\ub85c\uc81d\ud2b8\uc758 \ub8e8\ud2b8\uc5d0\uc11c npm\uc744 \ucd08\uae30\ud654\ud558\uace0 \ub2e4\uc74c \ub450 \uac00\uc9c0 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc124\uc815\ud588\uc2b5\ub2c8\ub2e4. <code>\ud074\ub77c\uc774\uc5b8\ud2b8<\/code> \uadf8\ub9ac\uace0 <code>\uc11c\ubc84<\/code> \uc640 \ub3d9\uc2dc\uc5d0 \uc2e4\ud589\ud560 \uc218 \uc788\ub294 <code>npm \uc2dc\uc791<\/code>. \ub610\ud55c \ub204\uad70\uac00 \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac\ub97c \ubcf5\uc81c\ud558\uba74 \uc774\uc81c \uc2e4\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4: <code>npm \uc124\uce58 &amp;&amp; npm \uc2dc\uc791<\/code> \ub97c \uc2e4\ud589\ud558\uba74 \uc138 \ud504\ub85c\uc81d\ud2b8\uc758 \ubaa8\ub4e0 \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud55c \ud6c4 \uc2a4\ud540\uc5c5\ud558\ubbc0\ub85c Couchbase Server\uac00 \uc2e4\ud589 \uc911\uc774\uae30\ub9cc \ud558\uba74 \ubaa8\ub450 \uc791\ub3d9\ud569\ub2c8\ub2e4.<\/p>\n<h2 id=\"remove-user-and-pass-from-server-file\">\uc11c\ubc84 \ud30c\uc77c\uc5d0\uc11c \uc0ac\uc6a9\uc790 \ubc0f \ud328\uc2a4 \uc81c\uac70<\/h2>\n<p>\ub9c8\uc9c0\ub9c9 \ub2e8\uacc4\ub294 Couchbase \uc5f0\uacb0 \uc790\uaca9 \uc99d\uba85\uc758 \uc0ac\uc6a9\uc790 \uc774\ub984\uacfc \ube44\ubc00\ubc88\ud638\ub97c <code>.env<\/code> \ud30c\uc77c\uc5d0 \uc800\uc7a5\ud569\ub2c8\ub2e4. \uc774\ub807\uac8c \ud558\uba74 \uc804 \uc138\uacc4\uac00 \ubcfc \uc218 \uc788\ub3c4\ub85d \ubbfc\uac10\ud55c \uc790\uaca9 \uc99d\uba85\uc744 GitHub\ub85c \uc804\uc1a1\ud558\uc9c0 \uc54a\uac8c \ub429\ub2c8\ub2e4.<\/p>\n<p>\ub514\ub809\ud130\ub9ac\ub97c \ub2e4\uc74c\uacfc \uac19\uc774 \ubcc0\uacbd\ud569\ub2c8\ub2e4. <code>couchbase-gql-server\/<\/code> \ub97c \ud074\ub9ad\ud558\uace0 \uc124\uce58 <code>dotenv<\/code>:<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false nums:false lang:sh decode:true\" title=\"CORS \ud328\ud0a4\uc9c0 \uc124\uce58\">npm \uc124\uce58 dotenv --save-dev<\/pre>\n<p>\ub2e4\uc74c\uc73c\ub85c \uac00\uc838\uc624\uae30 <code>dotenv<\/code> \uc5d0\uc11c \uc124\uc815\ud55c \ubcc0\uc218\uc5d0 \uc561\uc138\uc2a4\ud558\uae30 \uc704\ud574 \uac1d\uccb4 \ud30c\uad34\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. <code>.env<\/code> file:<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false nums:false lang:javascript decode:true\" title=\".env \uc0ac\uc6a9\uc790 \ubc0f \ud328\uc2a4 \ud544\uc694\">require('dotenv').config()\r\nconst { cbUser, cbPass } = process.env<\/pre>\n<p>\uc0ac\uc6a9\uc790 \uc544\uc774\ub514\uc640 \ube44\ubc00\ubc88\ud638\ub97c \uc0ac\uc6a9\ud558\ub294 \ucf54\ub4dc\ub97c \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4:<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false nums:false lang:javascript decode:true\" title=\"Couchbase \uc5f0\uacb0\uc5d0\uc11c \uc790\uaca9 \uc99d\uba85 \uc5c5\ub370\uc774\ud2b8\">const cluster = new couchbase.Cluster('couchbase:\/\/localhost', {\r\n  \uc0ac\uc6a9\uc790\uba85: cbUser, \ube44\ubc00\ubc88\ud638: cbPass\r\n})<\/pre>\n<p>\ud30c\uc77c \ub9cc\ub4e4\uae30 <code>\uce74\uc6b0\uce58\ubca0\uc774\uc2a4-gql-server<\/code> \ub514\ub809\ud1a0\ub9ac\uc5d0 <code>.env<\/code>\u00a0 Couchbase \uc11c\ubc84 \uc790\uaca9 \uc99d\uba85\uc73c\ub85c \ub85c\uadf8\uc778\ud569\ub2c8\ub2e4:<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false nums:false lang:sh decode:true\" title=\"\uc11c\ubc84 \uc790\uaca9 \uc99d\uba85 \uc800\uc7a5\">cbUser=\uad00\ub9ac\uc790\r\ncbPass=\ube44\ubc00\ubc88\ud638<\/pre>\n<p>We also need to update the server directories `.gitignore` file. There is a block of ignores labeled `#misc`, let&#8217;s modify that block of ignores and add `.env` to it. Remember this file does not get uploaded to git as part of our course control.<\/p>\n<pre class=\"theme:vs2012 font:ubuntu-mono font-size:14 line-height:24 top-margin:0 h-align:1 toolbar:1 toolbar-overlay:false nums:false lang:sh decode:true\" title=\"Git \ubb34\uc2dc\"># \uae30\ud0c0\r\n.DS_Store\r\n.env\r\n.env.local\r\n.env.development.local\r\n.env.test.local\r\n.env.production.local<\/pre>\n<p>Let&#8217;s run our project from the root using `npm start` to ensure that everything still works!<\/p>\n<h2 id=\"project-recap\">\ud504\ub85c\uc81d\ud2b8 \uc694\uc57d<\/h2>\n<p>\ud480\uc2a4\ud0dd React \ubc0f GraphQL \ud504\ub85c\uc81d\ud2b8\ub97c \uc124\uc815\ud588\uc2b5\ub2c8\ub2e4. \ud65c\uc6a9\ud558\uae30 <a href=\"https:\/\/docs.couchbase.com\/nodejs-sdk\/current\/hello-world\/start-using-sdk.html\">\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \ub178\ub4dc SDK<\/a> \ub97c \ud1b5\ud574 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0 \ub300\ud55c \uc9c0\uc2dd\uc744 \ud65c\uc6a9\ud558\uc5ec \ud480\uc2a4\ud0dd \uc571\uc744 \uad6c\ucd95\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \ud29c\ud1a0\ub9ac\uc5bc\uc774 \ud480\uc2a4\ud0dd \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc9c0\ubc30\ud558\ub294 \ub370 \ub3c4\uc6c0\uc774 \ub418\uae38 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n<p>\ud2b8\uc704\ud130\uc5d0\uc11c \uc0ac\uc6a9 \uac00\ub2a5 <a href=\"https:\/\/www.twitter.com\/httpJunkie\">@httpJunkie<\/a>\uc81c DM\uc740 \ud56d\uc0c1 \uc5f4\ub824 \uc788\uc73c\ub2c8 \uc5b8\uc81c\ub4e0\uc9c0 \uc5f0\ub77d\uc8fc\uc138\uc694! \uc544\ub798 \ub9c1\ud06c\ub97c \ud1b5\ud574 Apollo \ubc0f React\ub97c \uc0ac\uc6a9\ud55c \ube4c\ub4dc\uc5d0 \ub300\ud55c \uc790\uc138\ud55c \uc815\ubcf4\ub97c \ud655\uc778\ud558\uc138\uc694.<\/p>\n<p>\uc774 \ud504\ub85c\uc81d\ud2b8\uc758 \ucd5c\uc885 \ucf54\ub4dc\ub294 GitHub\uc5d0\uc11c \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<br \/>\n<a href=\"https:\/\/github.com\/httpJunkie\/rage-with-couchbase-final\">github.com\/httpJunkie\/rage-with-couchbase-final<\/a><\/p>\n<h2>Apollo \ubc0f React \ub9ac\uc18c\uc2a4<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.apollographql.com\/\">Apollo GraphQL<\/a><\/li>\n<li><a href=\"https:\/\/www.apollographql.com\/docs\/\">Apollo GraphQL \ubb38\uc11c<\/a><\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=Ct2-5dUfMMw\">Apollo GraphQL\uc758 \uc774\uc810<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/apollographql\/react-apollo\">\uae43\ud5c8\ube0c\uc758 React Apollo<\/a><\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=RCKkWjBuyfw\">\ub808\ubca8\uc5c5 \ud29c\ud1a0\ub9ac\uc5bc\uc5d0\uc11c React\ub97c \uc0ac\uc6a9\ud558\ub294 Apollo \ud074\ub77c\uc774\uc5b8\ud2b8<\/a><\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=9Qw8HKatjy8\">Apollo + GraphQL + React - \uc81c\uc784\uc2a4 \ubc31\uc2ac\ub9ac\uc640 \ud568\uaed8 \ucffc\ub9ac\uc5d0\uc11c \uc0dd\uac01\ud558\uae30<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>The third of three articles focused on building Fullstack React and GraphQL with the Apollo GraphQL Client. 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":10876,"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":[2210,2454],"ppma_author":[8922],"class_list":["post-8222","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-couchbase-server","category-node-js","category-n1ql-query","category-tools-sdks","tag-graphql","tag-react"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.2 (Yoast SEO v26.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Fullstack React and GraphQL : Apollo Client - The Couchbase Blog<\/title>\n<meta name=\"description\" content=\"Create an Apollo GraphQL client for fetching data in our three part series on fullstack applications using React, Apollo, GraphQL and Express.\" \/>\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-apollo-3\/\" \/>\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 : Apollo Client\" \/>\n<meta property=\"og:description\" content=\"Create an Apollo GraphQL client for fetching data in our three part series on fullstack applications using React, Apollo, GraphQL and Express.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/ko\/fullstack-react-apollo-3\/\" \/>\n<meta property=\"og:site_name\" content=\"The Couchbase Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-29T00:03:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-14T04:03:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/apollo-graphql-1.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=\"12\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-apollo-3\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/\"},\"author\":{\"name\":\"Eric Bishard\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/67d3a4b597e42370ccd34b715a6b1f4c\"},\"headline\":\"Fullstack React and GraphQL : Apollo Client\",\"datePublished\":\"2020-02-29T00:03:45+00:00\",\"dateModified\":\"2025-06-14T04:03:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/\"},\"wordCount\":2159,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/apollo-graphql-1.jpg\",\"keywords\":[\"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-apollo-3\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/\",\"name\":\"Fullstack React and GraphQL : Apollo Client - The Couchbase Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/apollo-graphql-1.jpg\",\"datePublished\":\"2020-02-29T00:03:45+00:00\",\"dateModified\":\"2025-06-14T04:03:55+00:00\",\"description\":\"Create an Apollo GraphQL client for fetching data in our three part series on fullstack applications using React, Apollo, GraphQL and Express.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/#primaryimage\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/apollo-graphql-1.jpg\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/apollo-graphql-1.jpg\",\"width\":1200,\"height\":628,\"caption\":\"RAGE With Couchbase Apollo-GraphQL Featured Image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.couchbase.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fullstack React and GraphQL : Apollo Client\"}]},{\"@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 : Apollo Client - The Couchbase Blog","description":"React, Apollo, GraphQL \ubc0f Express\ub97c \uc0ac\uc6a9\ud558\ub294 \ud480\uc2a4\ud0dd \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \ub300\ud55c 3\ubd80 \uc2dc\ub9ac\uc988\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\uae30 \uc704\ud55c Apollo GraphQL \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c \ub9cc\ub4dc\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-apollo-3\/","og_locale":"ko_KR","og_type":"article","og_title":"Fullstack React and GraphQL : Apollo Client","og_description":"Create an Apollo GraphQL client for fetching data in our three part series on fullstack applications using React, Apollo, GraphQL and Express.","og_url":"https:\/\/www.couchbase.com\/blog\/ko\/fullstack-react-apollo-3\/","og_site_name":"The Couchbase Blog","article_published_time":"2020-02-29T00:03:45+00:00","article_modified_time":"2025-06-14T04:03:55+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/apollo-graphql-1.jpg","type":"image\/jpeg"}],"author":"Eric Bishard","twitter_card":"summary_large_image","twitter_creator":"@httpJunkie","twitter_misc":{"Written by":"Eric Bishard","Est. reading time":"12\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/"},"author":{"name":"Eric Bishard","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/67d3a4b597e42370ccd34b715a6b1f4c"},"headline":"Fullstack React and GraphQL : Apollo Client","datePublished":"2020-02-29T00:03:45+00:00","dateModified":"2025-06-14T04:03:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/"},"wordCount":2159,"commentCount":0,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/apollo-graphql-1.jpg","keywords":["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-apollo-3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/","url":"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/","name":"Fullstack React and GraphQL : Apollo Client - The Couchbase Blog","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/apollo-graphql-1.jpg","datePublished":"2020-02-29T00:03:45+00:00","dateModified":"2025-06-14T04:03:55+00:00","description":"React, Apollo, GraphQL \ubc0f Express\ub97c \uc0ac\uc6a9\ud558\ub294 \ud480\uc2a4\ud0dd \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \ub300\ud55c 3\ubd80 \uc2dc\ub9ac\uc988\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\uae30 \uc704\ud55c Apollo GraphQL \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c \ub9cc\ub4dc\uc138\uc694.","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/"]}]},{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/#primaryimage","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/apollo-graphql-1.jpg","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/apollo-graphql-1.jpg","width":1200,"height":628,"caption":"RAGE With Couchbase Apollo-GraphQL Featured Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-apollo-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Fullstack React and GraphQL : Apollo Client"}]},{"@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\/8222","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=8222"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/posts\/8222\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/media\/10876"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/media?parent=8222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/categories?post=8222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/tags?post=8222"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/ppma_author?post=8222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}