{"id":8102,"date":"2020-02-28T16:03:23","date_gmt":"2020-02-29T00:03:23","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=8102"},"modified":"2025-06-13T23:16:55","modified_gmt":"2025-06-14T06:16:55","slug":"fullstack-react-couchbase-1","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/ko\/fullstack-react-couchbase-1\/","title":{"rendered":"\ud480\uc2a4\ud0dd React \ubc0f GraphQL : Couchbase"},"content":{"rendered":"<p>\uc138 \uac1c\uc758 \uae00 \uc911 \uccab \ubc88\uc9f8 \uae00\uc740 React\ub97c \uc0ac\uc6a9\ud55c \ud480\uc2a4\ud0dd \uad6c\ucd95\uacfc Express \ubc0f CouchBase Server\ub97c \uc0ac\uc6a9\ud55c GraphQL \uad6c\ucd95\uc5d0 \uc911\uc810\uc744 \ub450\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n<ul>\n<li>NoSQL \uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uc11c\ubc84 \uc124\uc815\ud558\uae30(1\ubd80)<\/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><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=\"project-overview\">\ud480\uc2a4\ud0dd React \ubc0f GraphQL \uc560\ud50c\ub9ac\ucf00\uc774\uc158<\/h2>\n<p>\ud480\uc2a4\ud0dd\uc744 \uad6c\ucd95\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. <a href=\"https:\/\/reactjs.org\/\">React<\/a> \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0ac\uc6a9\ud558\uc5ec <a>GraphQL<\/a>. \uc774 \ud29c\ud1a0\ub9ac\uc5bc\uc740 \uc811\uadfc\ud558\uae30 \uc26c\uc6b4 \ud29c\ud1a0\ub9ac\uc5bc\uc774\uc9c0\ub9cc JavaScript, React, GraphQL \uac1c\ub150 \ubc0f NoSQL\uc5d0 \uc5b4\ub290 \uc815\ub3c4 \uc775\uc219\ud560 \uac83\uc73c\ub85c \uc608\uc0c1\ud569\ub2c8\ub2e4. \ub610\ud55c Docker\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub2e8\uc77c \ub178\ub4dc Couchbase Server\ub97c \ud504\ub85c\ube44\uc800\ub2dd\ud569\ub2c8\ub2e4. Express-GraphQL\uc744 \ud1b5\ud574 Couchbase\uc5d0 \uc5f0\uacb0\ud560 \uac83\uc785\ub2c8\ub2e4. <a href=\"https:\/\/nodejs.org\/en\/\">\ub178\ub4dc JS<\/a> \uadf8\ub9ac\uace0 <a href=\"https:\/\/expressjs.com\/en\/api.html\">Express JS<\/a> \uc0ac\uc6a9 <a href=\"https:\/\/github.com\/graphql\/express-graphql\">express-graphql<\/a>. \uadf8\ub7f0 \ub2e4\uc74c React\uc5d0\uc11c API\ub97c \ucffc\ub9ac\ud560 \uac83\uc785\ub2c8\ub2e4. <a href=\"https:\/\/www.apollographql.com\/docs\/react\/\">Apollo GraphQL<\/a> \ud074\ub77c\uc774\uc5b8\ud2b8.<\/p>\n<h3 id=\"graphql-high-level-overview\">GraphQL \ud558\uc774\ub808\ubca8 \uac1c\uc694<\/h3>\n<p>\uc774 \uc571 \uad6c\ucd95\uc744 \uc2dc\uc791\ud558\uae30 \uc804\uc5d0, \uc6b0\ub9ac\uac00 \uc120\ud0dd\ud55c <a href=\"https:\/\/spec.graphql.org\/June2018\/\">GraphQL API<\/a> \uc804\ud1b5\uc801\uc778 <a href=\"https:\/\/restfulapi.net\/\">REST API<\/a>\ub97c \ud074\ub9ad\ud55c \ub2e4\uc74c \ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc124\uc815\uc73c\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.<\/p>\n<p>GraphQL\uc740 \uac15\ub825\ud55c \ud0c0\uc785\uc758 API\uc6a9 \ucffc\ub9ac \uc5b8\uc5b4\uc785\ub2c8\ub2e4. \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294 \uc120\uc5b8\uc801 \ubc29\uc2dd\uc73c\ub85c, JavaScript \ucee4\ubba4\ub2c8\ud2f0\uc640 \ub2e4\ub978 \ucee4\ubba4\ub2c8\ud2f0\uc5d0\uc11c\ub3c4 \ube60\ub974\uac8c \ucc44\ud0dd\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ub370\uc774\ud130 \uac00\uc838\uc624\uae30\ub97c \uc138\ubc00\ud558\uac8c \uc81c\uc5b4\ud560 \uc218 \uc788\uace0 \ucd94\uac00 API \ud638\ucd9c \uc2dc\uac04\uc744 \uc808\uc57d\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubaa8\ub4e0 \ucffc\ub9ac\uc640 \ubcc0\uacbd\uc740 REST\uc640 \uac19\uc740 \uc5ec\ub7ec \uc5d4\ub4dc\ud3ec\uc778\ud2b8\uac00 \uc544\ub2cc \ud558\ub098\uc758 \uc5d4\ub4dc\ud3ec\uc778\ud2b8\uc5d0\uc11c \uc774\ub8e8\uc5b4\uc9d1\ub2c8\ub2e4. \uc774\ub294 React\uc5d0\uc11c URL\uc744 \uad00\ub9ac\ud558\uae30 \uc704\ud574 \uc791\uc131\ud574\uc57c \ud558\ub294 \ucf54\ub4dc\uac00 \uc904\uc5b4\ub4e0\ub2e4\ub294 \uac83\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. \ub610\ud55c \uc720\uc120\uc744 \ud1b5\ud55c \uc124\uce58 \uacf5\uac04\ub3c4 \ub354 \uc791\uc2b5\ub2c8\ub2e4. GraphQL\uacfc REST\uc5d0 \ub300\ud55c \ub354 \ub9ce\uc740 \uc815\ubcf4\ub97c \uc6d0\ud558\uc2dc\uba74 Nate Barbettini\uc758 \uac15\uc5f0\uc744 \ucc38\uc870\ud558\uc138\uc694: <a href=\"https:\/\/www.youtube.com\/watch?v=IvsANO0qZEg\">API \uc4f0\ub85c\ub2e4\uc6b4: RPC vs REST vs GraphQL<\/a>.<\/p>\n<p>JSON\uc5d0 \uc775\uc219\ud55c \uacbd\uc6b0 \ub2e4\uc74c\uc744 \ucc3e\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <a href=\"https:\/\/graphql.org\/learn\/queries\/\">GraphQL\uc758 \ucffc\ub9ac \uad6c\ubb38<\/a> \uc0ac\uc6a9\uc774 \uac04\ud3b8\ud558\uace0 \ub370\uc774\ud130\ub97c \uc27d\uac8c \ud0d0\uc0c9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <a href=\"https:\/\/www.electronjs.org\/apps\/graphiql\">GraphiQL<\/a>\ub294 \ucffc\ub9ac\ub97c \ud14c\uc2a4\ud2b8\ud558\uace0 GraphQL API\ub85c \uac00\ub2a5\ud55c \uac83\uc744 \ubc1c\uacac\ud558\ub294 \ub370 \uc0ac\uc6a9\ud558\ub294 \ube0c\ub77c\uc6b0\uc800 \ub0b4 IDE\uc785\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=\"GraphiQL demo, get all UK airlines\" \/><\/p>\n<p>\uc774 GraphiQL IDE\ub294 \ub098\uc911\uc5d0 \uc790\uccb4 GraphQL \uc5d4\ub4dc\ud3ec\uc778\ud2b8\ub97c \ud14c\uc2a4\ud2b8\ud574\uc57c \ud560 \ub54c \uc720\uc6a9\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. GraphiQL\uc740 \ubaa8\ub4e0 GraphQL \uc11c\ubc84\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, GitHub\uc5d0\ub294 \uac00\uc7a5 \uc624\ub798\ub41c \uacf5\uac1c GraphQL API \uc911 \ud558\ub098\uac00 \uc788\uc2b5\ub2c8\ub2e4(\uc5bc\ub9ac \uc5b4\ub2f5\ud130). \uc774\ub97c \ud1b5\ud574 \ub370\uc774\ud130 \uadf8\ub798\ud504\ub97c \ud0d0\uc0c9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <a href=\"https:\/\/developer.github.com\/v4\/explorer\/\">GitHub GraphQL API v4 \ud0d0\uc0c9\uae30<\/a>.<\/p>\n<p><strong>\ucc38\uace0:<\/strong> GitHub\ub294 \uac1c\ubc1c\uc790 \ucee4\ubba4\ub2c8\ud2f0\uc5d0\uc11c \uac00\uc7a5 \ub110\ub9ac \uc54c\ub824\uc9c4 \uacf5\uac1c RESTful API \uc911 \ud558\ub098\ub85c, 2016\ub144\uc5d0 GitHub API \ubc84\uc804 4\uc5d0\uc11c REST \ub300\uc2e0 GraphQL \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc73c\ub85c \uc804\ud658\ud588\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uac1c\ubc1c\uc790\uac00 GitHub API\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 \uac70\uccd0\uc57c \ud558\ub294 \ub178\ub825\uc774 \ud06c\uac8c \uc904\uc5b4\ub4e4\uace0 \uac1c\ubc1c\uc790 \ud658\uacbd\uc774 \uac1c\uc120\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc694\uccad\uc740 \ub2e8\uc21c\ud788 JSON\uacfc JS \ud568\uc218\uc758 \ud558\uc774\ube0c\ub9ac\ub4dc\ucc98\ub7fc \ubcf4\uc774\ub294 \uad6c\ubb38\uc73c\ub85c HTTP POST\ub97c \ud1b5\ud574 \uc804\uc1a1\ub418\ub294 \ud14d\uc2a4\ud2b8\uc785\ub2c8\ub2e4. \uc751\ub2f5\uc740 GraphQL API\uc758 \uacbd\ub7c9(\uc694\uccad\ud55c \ub0b4\uc6a9\ub9cc) \uc751\ub2f5\uc785\ub2c8\ub2e4. \uc774\ub294 GitHub\uc5d0\uc11c REST\uc5d0\uc11c GraphQL\ub85c \uc804\ud658\ud568\uc73c\ub85c\uc368 \uac1c\ubc1c\uc790\uac00 \uc5bb\uc744 \uc218 \uc788\ub294 \uc774\uc810 \uc911 \uc77c\ubd80\uc5d0 \ubd88\uacfc\ud569\ub2c8\ub2e4.<\/p>\n<h3 id=\"the-couchbase-datastore\">\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \ub370\uc774\ud130\uc2a4\ud1a0\uc5b4<\/h3>\n<p>\ud504\ub85c\uc81d\ud2b8\ub97c \uc2dc\uc791\ud558\ub824\uba74 \ub370\uc774\ud130\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \uc774 \ud504\ub85c\uc81d\ud2b8\ub294 \uc774\ubbf8 \ub370\uc774\ud130\ubca0\uc774\uc2a4\ub97c \ubcf4\uc720\ud558\uace0 \uc788\ub294 \uace0\uac1d, \ud2b9\ud788 \ub2e4\uc74c\uacfc \uac19\uc740 \ub370\uc774\ud130\ubca0\uc774\uc2a4\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\ub294 \uace0\uac1d\uc774 \uc788\ub294 \uac83\ucc98\ub7fc \uc811\uadfc\ud569\ub2c8\ub2e4. <a href=\"https:\/\/docs.couchbase.com\/server\/6.0\/sdk\/overview.html\">\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uc11c\ubc84<\/a> \ub97c \ubb38\uc11c \uc800\uc7a5\uc18c\ub85c \uc0ac\uc6a9\ud558\uc138\uc694.<\/p>\n<p>\uadf8\ub9ac\uace0 <a href=\"https:\/\/docs.couchbase.com\/nodejs-sdk\/current\/start-using-sdk.html\">\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uc11c\ubc84 NodeJS SDK<\/a> \ub294 Node JS\uc640 Express\ub97c \ud1b5\ud574 Couchbase \uc11c\ubc84 \ubc0f \ud574\ub2f9 \ub370\uc774\ud130\uc5d0 \uc5f0\uacb0\ud558\ub294 \ub370 \ud544\uc694\ud55c \ub3c4\uad6c\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n<p>\ucc38\uace0\ub85c, \ub2e4\uc74c \uc678\uc5d0\ub3c4 \ub2e4\uc591\ud55c SDK\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <a href=\"https:\/\/docs.couchbase.com\/nodejs-sdk\/current\/start-using-sdk.html\">\ub178\ub4dc JS<\/a> \ub97c \ud3ec\ud568\ud55c Couchbase \uc11c\ubc84\uc6a9 <a href=\"https:\/\/docs.couchbase.com\/c-sdk\/current\/hello-world\/start-using-sdk.html\">C<\/a>, <a href=\"https:\/\/docs.couchbase.com\/dotnet-sdk\/current\/hello-world\/start-using-sdk.html\">.NET<\/a>, <a href=\"https:\/\/docs.couchbase.com\/go-sdk\/current\/hello-world\/start-using-sdk.html\">\uc774\ub3d9<\/a>, <a href=\"https:\/\/docs.couchbase.com\/java-sdk\/current\/hello-world\/start-using-sdk.html\">Java<\/a>, <a href=\"https:\/\/docs.couchbase.com\/php-sdk\/current\/hello-world\/start-using-sdk.html\">PHP<\/a>, <a href=\"https:\/\/docs.couchbase.com\/python-sdk\/current\/hello-world\/start-using-sdk.html\">Python<\/a>\ubc0f <a href=\"https:\/\/docs.couchbase.com\/scala-sdk\/current\/hello-world\/start-using-sdk.html\">Scala<\/a>.<\/p>\n<h3 id=\"put-your-sql-skills-to-work-in-nosql\">SQL \uae30\uc220\uc744 NoSQL\uc5d0\uc11c \ud65c\uc6a9\ud558\uae30<\/h3>\n<p>\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uc11c\ubc84\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \ubc29\ubc95\uc73c\ub85c SQL \uae30\uc220\uc744 \ud65c\uc6a9\ud569\ub2c8\ub2e4. <a href=\"https:\/\/www.couchbase.com\/blog\/ko\/products\/n1ql\/\">N1QL(JSON\uc6a9 SQL) \ub370\uc774\ud130\ubca0\uc774\uc2a4 \ucffc\ub9ac \uc5b8\uc5b4<\/a> \ub97c \uc0ac\uc6a9\ud558\uba74 SQL\uacfc \uac70\uc758 \ub3d9\uc77c\ud55c \uad6c\ubb38\uc73c\ub85c NoSQL \ubb38\uc11c \ub370\uc774\ud130 \uc800\uc7a5\uc18c\uc778 Couchbase\ub97c \ucffc\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h3 id=\"install-and-run-couchbase-with-docker\">Docker\ub85c Couchbase \uc124\uce58 \ubc0f \uc2e4\ud589\ud558\uae30<\/h3>\n<p>Couchbase\ub97c \ub85c\uceec\uc5d0 \ub2e4\uc6b4\ub85c\ub4dc\ud558\uc5ec \uc124\uce58\ud558\uae30\ub85c \uc120\ud0dd\ud558\uace0 Docker\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc73c\ub824\ub294 \uacbd\uc6b0, \uac04\ub2e8\ud788 <a href=\"#install-couchbase-locally\">\uc218\ub3d9 \uc124\uce58 \uc9c0\uce68\uc73c\ub85c \uac74\ub108\ub6f0\uae30<\/a>. Docker \uc790\uccb4\uc5d0 \ub300\ud55c \ub3c4\uc6c0\ub9d0\uc740 \ub2e4\uc74c\uc744 \ucc38\uc870\ud558\uc138\uc694. <a href=\"https:\/\/docs.docker.com\">docs.docker.com<\/a>.<\/p>\n<p>\ubc1b\uae30 <code>\uce74\uc6b0\uce58\ubca0\uc774\uc2a4<\/code> \uc774\ubbf8\uc9c0:<\/p>\n<pre class=\"highlight decode:true\"><code class=\"language-bash\">\ub3c4\ucee4 \ud480 \uce74\uc6b0\uce58\ubca0\uc774\uc2a4<\/code><\/pre>\n<p>\uae30\uc874 \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac\ub97c \ubcf5\uc81c\ud558\uc5ec \uae30\uc874 \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac\uc758 <code>\ub3c4\ucee4\ud30c\uc77c<\/code> \uadf8\ub9ac\uace0 <code>configuration.sh<\/code> \ud30c\uc77c\uc774 \ud544\uc694\ud569\ub2c8\ub2e4:<\/p>\n<pre class=\"highlight decode:true\"><code class=\"language-bash\">git clone https:\/\/github.com\/httpJunkie\/couchbase-server &amp;&amp; cd couchbase-server &amp;&amp; chmod +x configure.sh<\/code><\/pre>\n<p>\ub2e4\uc74c\uc5d0\uc11c \uc0c8 \uc774\ubbf8\uc9c0 \ub9cc\ub4e4\uae30 <code>\ub3c4\ucee4\ud30c\uc77c<\/code> \uacf5\uc2dd <code>\uce74\uc6b0\uce58\ubca0\uc774\uc2a4<\/code> \ub3c4\ucee4 \uc774\ubbf8\uc9c0\ub97c \uae30\ubcf8\uc73c\ub85c \uc0ac\uc6a9\ud569\ub2c8\ub2e4:<\/p>\n<pre class=\"highlight decode:true\"><code class=\"language-bash\">docker build -t couchbase-server .<\/code><\/pre>\n<p>\uc0c8 \uc774\ubbf8\uc9c0\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4:<\/p>\n<pre class=\"highlight decode:true\"><code class=\"language-bash\">docker run -d -p 8091-8094:8091-8094 -p 11210:11210 -e CB_ADMIN_USER=\uad00\ub9ac\uc790 -e CB_ADMIN_PASS=\uc554\ud638 --network=\"bridge\" --name cbs1 couchbase-server<\/code><\/pre>\n<p>\ub9c8\uc9c0\ub9c9 \uba85\ub839\uc744 \uc2e4\ud589\ud558\ub294 \ub370 \ubb38\uc81c\uac00 \uc788\ub294 \uacbd\uc6b0 \"bridge\"\ub77c\ub294 \uc774\ub984\uc758 \ub124\ud2b8\uc6cc\ud06c\uac00 \uc5c6\ub294 \uac83\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uacbd\uc6b0 \ub2e4\uc74c \uba85\ub839\uc744 \uc2e4\ud589\ud558\uc138\uc694. <code>\ub3c4\ucee4 \ub124\ud2b8\uc6cc\ud06c ls<\/code> \ub97c \ud074\ub9ad\ud558\uace0 \uae30\ubcf8 \ub124\ud2b8\uc6cc\ud06c \uc774\ub984\uacfc \ub4dc\ub77c\uc774\ubc84\uc758 \uc774\ub984\uc744 \ucc3e\uc544\uc11c \ub300\uc2e0 \uc0ac\uc6a9\ud558\uc138\uc694.<\/p>\n<p>\uc774 \uc2dc\uc810\uc5d0\uc11c \ub2e4\uc74c\uc744 \ubc29\ubb38\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <a href=\"https:\/\/localhost:8091\">localhost:8091<\/a> \ub97c \ud074\ub9ad\ud558\uace0 <strong><code>\uad00\ub9ac\uc790<\/code><\/strong> &amp; <strong><code>\ube44\ubc00\ubc88\ud638<\/code><\/strong>.<\/p>\n<h3 id=\"install-couchbase-locally\">\ub85c\uceec\uc5d0 Couchbase \uc124\uce58<\/h3>\n<p>Docker\uc640 \ud568\uaed8 \uc124\uce58\ud55c \uacbd\uc6b0 \ub2e4\uc74c\uc744 \uc218\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <a href=\"#explore-our-bucket-in-the-console\">\ub2e4\uc74c \uc139\uc158\uc73c\ub85c \uac74\ub108\ub6f0\uae30<\/a>.<\/p>\n<p>\uc124\uce58 \uacfc\uc815\uc740 \uac04\ub2e8\ud558\uba70 \ub2e4\uc74c\uacfc \uac19\uc774 \uc548\ub0b4\ud574 \ub4dc\ub9bd\ub2c8\ub2e4. <a href=\"https:\/\/docs.couchbase.com\/server\/4.0\/install\/install-linux.html\">Linux<\/a>, <a href=\"https:\/\/docs.couchbase.com\/server\/4.0\/install\/macos-install.html\">Mac<\/a>\ubc0f <a href=\"https:\/\/docs.couchbase.com\/server\/4.0\/install\/install-package-windows.html\">Windows<\/a>.<\/p>\n<p>\uc124\uce58\uac00 \uc644\ub8cc\ub418\uba74 \ub2e4\uc74c\uc744 \uc0ac\uc6a9\ud558\uc5ec Couchbase Server \uc6f9 \ucf58\uc194\uc5d0 \uc561\uc138\uc2a4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <a href=\"https:\/\/localhost:8091\">localhost:8091<\/a>.<\/p>\n<p>\uc774 \ud654\uba74\uc5d0\uc11c \"<a href=\"https:\/\/docs.couchbase.com\/server\/6.5\/manage\/manage-nodes\/create-cluster.html\">\uc0c8 \ud074\ub7ec\uc2a4\ud130 \uc124\uc815<\/a>&#8220;.<\/p>\n<p>\ud074\ub7ec\uc2a4\ud130 \uc774\ub984\uc740 \uc0ac\uc6a9\uc790\uac00 \uc815\ud560 \uc218 \uc788\uc73c\uba70 \ubaa8\ub4e0 Couchbase \ubc84\ud0b7\uc744 \ub098\ud0c0\ub0c5\ub2c8\ub2e4. \uad00\ub9ac\uc790 \uc0ac\uc6a9\uc790 \ubc0f \ube44\ubc00\ubc88\ud638\ub294 \uc804\uccb4 \uc11c\ubc84\uc758 \ub300\uc2dc\ubcf4\ub4dc\uc5d0 \ub85c\uadf8\uc778\ud558\uae30 \uc704\ud55c \uc11c\ubc84 \uad00\ub9ac\uc790 \uacc4\uc815\uc774\uba70, Express \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub0b4\uc5d0\uc11c \ud2b9\uc815 \ubc84\ud0b7\uc5d0 \uc5f0\uacb0\ud558\uae30 \uc704\ud55c \uc0ac\uc6a9\uc790 \ubc0f \ube44\ubc00\ubc88\ud638\uac00 \uc544\ub2d9\ub2c8\ub2e4. \uc774\uc5d0 \ub300\ud574\uc11c\ub294 \ub098\uc911\uc5d0 \ub2e4\ub8e8\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uae30\ubcf8 \uc11c\ube44\uc2a4 \ubc0f \uba54\ubaa8\ub9ac \ud560\ub2f9\ub7c9\uc73c\ub85c \ud074\ub7ec\uc2a4\ud130\ub97c \uad6c\uc131\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n<h3 id=\"explore-our-bucket-in-the-console\">\ucf58\uc194\uc5d0\uc11c \ubc84\ud0b7 \uc0b4\ud3b4\ubcf4\uae30<\/h3>\n<p>Couchbase \uc11c\ubc84 \ub300\uc2dc\ubcf4\ub4dc\uc5d0 \uc561\uc138\uc2a4\ud558\uace0 \"\uc11c\ubc84\"\ub97c \ud074\ub9ad\ud558\uc5ec \ucc98\uc74c \uc0dd\uc131\ud55c \uc11c\ubc84\ub97c \ud655\uc778\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ub2e4\uc74c\uc73c\ub85c \"\ubc84\ud0b7\"\uc744 \ud074\ub9ad\ud569\ub2c8\ub2e4. \uce74\uc6b0\uce58\ubca0\uc774\uc2a4 <a href=\"https:\/\/docs.couchbase.com\/server\/current\/learn\/buckets-memory-and-storage\/buckets.html\">\ubc84\ud0b7<\/a> \uc740 \ubb38\uc11c \uceec\ub809\uc158\uc785\ub2c8\ub2e4. \"\ubc84\ud0b7 \ucd94\uac00\"\ub97c \ud1b5\ud574 \ub098\ub9cc\uc758 \ubb38\uc11c \uceec\ub809\uc158\uc744 \ub9cc\ub4e4\uac70\ub098 \uc0d8\ud50c \ub370\uc774\ud130\ub97c \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Docker \ud30c\uc77c \uc9c0\uce68\uc744 \ub530\ub790\ub2e4\uba74 <code>\uc5ec\ud589 \uc0d8\ud50c<\/code> \ubc84\ud0b7\uc774 \uc774\ubbf8 \ub85c\ub4dc\ub418\uc5b4 \uc774 \ud654\uba74\uc5d0 \ud45c\uc2dc\ub418\uc5b4 \uc788\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<p>\uc774 \uc0d8\ud50c \ub370\uc774\ud130\ubca0\uc774\uc2a4\ub97c \uc0ac\uc6a9\ud558\uba74 \ud480\uc2a4\ud0dd React \ubc0f GraphQL \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ubc14\ub85c \uc2e4\ud589\ud560 \uc218 \uc788\uc73c\uba70, Express\ub85c API\ub97c \uad6c\ucd95\ud558\uae30 \uc2dc\uc791\ud558\uba74 \uc774\ubbf8 \ub370\uc774\ud130\uc640 \uc778\ub371\uc2a4\uac00 \uc124\uc815\ub418\uc5b4 \uc788\uc73c\ubbc0\ub85c \uc791\uc5c5\uc774 \uc26c\uc6cc\uc9d1\ub2c8\ub2e4.<\/p>\n<p>\uc778\ub371\uc2a4\ub294 \uc774 \ubb38\uc11c\uc5d0\uc11c \uc790\ub3d9\uc73c\ub85c \uc124\uc815\ub429\ub2c8\ub2e4. <code>\uc5ec\ud589 \uc0d8\ud50c<\/code> \ubc84\ud0b7\uc744 \uc124\uce58\ud558\ub294 \ub370 \uc0ac\uc6a9\ub418\ub294 \uc2a4\ud06c\ub9bd\ud2b8\uc758 \uc77c\ubd80\ub85c \uc778\ub371\uc2a4\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc778\ub371\uc2a4\ub294 N1QL \ucffc\ub9ac \uc5b8\uc5b4(JSON\uc6a9 SQL)\ub97c \uc0ac\uc6a9\ud558\ub824\uba74 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n<p>\ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uace0 \ub098\ub9cc\uc758 \ubc84\ud0b7\uacfc \uc778\ub371\uc2a4\ub97c \ub9cc\ub4e4\uace0 \uc2f6\uc73c\uc2e0\uac00\uc694? <a href=\"https:\/\/www.couchbase.com\/blog\/ko\/create-right-index-get-right-performance\/\">\uc774 \ubb38\uc11c \ud655\uc778<\/a>!<\/p>\n<p>\ubc84\ud0b7\uc740 \uc544\ub798 \uc774\ubbf8\uc9c0\uc758 \ubc84\ud0b7\uacfc \ube44\uc2b7\ud574\uc57c \ud569\ub2c8\ub2e4:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/01\/travel-sample-bucket.jpg\" alt=\"couchbase dashboard travel-sample bucket\" \/><\/p>\n<p>'\ubb38\uc11c' \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uba74 \ubc84\ud0b7\uc5d0 \uc788\ub294 \uc77c\ubd80 \ub370\uc774\ud130\ub97c \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/01\/travel-sample-document.jpg\" alt=\"couchbase dashboard travel-sample document\" \/><\/p>\n<p>'\ubb38\uc11c\ub97c JSON\uc73c\ub85c \ud3b8\uc9d1'\uc744 \ud074\ub9ad\ud558\uba74 \ud2b9\uc815 \ud0a4 \uac12\uc5d0 \ub300\ud55c JSON\uc744 \ubcfc \uc218 \uc788\uc73c\uba70 \uc5ec\uae30\uc5d0\uc11c \ub370\uc774\ud130\ub97c \ud3b8\uc9d1\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \ud574\ubcf4\uc138\uc694!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/01\/travel-sample-edit-document.jpg\" alt=\"couchbase dashboard travel-sample edit document\" \/><\/p>\n<p>\uacc4\uc18d \uc9c4\ud589\ud558\uae30 \uc804\uc5d0 '\ubcf4\uc548' \ud0ed\uc744 \ud074\ub9ad\ud558\uace0 \uc774 \ubc84\ud0b7\uc5d0 \uc5f0\uacb0\ud560 \uc0ac\uc6a9\uc790\ub97c \uc124\uc815\ud558\ub824\uace0 \ud569\ub2c8\ub2e4.<\/p>\n<p>\"\ubcf4\uc548\" \ud398\uc774\uc9c0\uc5d0\uc11c \"\uc0ac\uc6a9\uc790 \ub9cc\ub4e4\uae30\"\ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4. Express \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ubc84\ud0b7\uc5d0 \uc5f0\uacb0\ud558\uae30 \uc704\ud55c \uc0ac\uc6a9\uc790 \uc774\ub984\uacfc \ube44\ubc00\ubc88\ud638\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4. \uc800\ub294 \uc81c \uc774\ub984\uc744 \uc0ac\uc6a9\ud588\uace0 \ud504\ub85c\uc81d\ud2b8\uc758 \uc18c\uc2a4 \ucf54\ub4dc\uc5d0 \uc788\ub294 \uc815\ubcf4\uc640 \uc77c\uce58\ud569\ub2c8\ub2e4. \ub530\ub77c\uc11c \uc790\uc2e0\uc758 \uc774\ub984\uc744 \uc0ac\uc6a9\ud558\uace0 \ud544\uc694\uc5d0 \ub530\ub77c \ucf54\ub4dc\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\ub294 \uac83\uc744 \uc78a\uc9c0 \ub9c8\uc138\uc694.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/01\/travel-sample-user.jpg\" alt=\"couchbase dashboard travel-sample add user\" \/><\/p>\n<p>'\uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc561\uc138\uc2a4' \ud655\uc778\ub780\uc744 \uc120\ud0dd\ud574\uc57c \ud569\ub2c8\ub2e4. <code>\uc5ec\ud589 \uc0d8\ud50c<\/code> \ubc84\ud0b7. \uc774\uac83\ub9cc \uc788\uc73c\uba74 \ub429\ub2c8\ub2e4. \uc5f0\uacb0\ud558\ub824\uba74 \uc0ac\uc6a9\uc790 \uc544\uc774\ub514\uc640 \ube44\ubc00\ubc88\ud638\uac00 \ud544\uc694\ud558\ubbc0\ub85c \uae30\uc5b5\ud574 \ub450\uc138\uc694.<\/p>\n<h3 id=\"bucket-indexes\">\ubc84\ud0b7 \uc778\ub371\uc2a4<\/h3>\n<p>\uc774 \ub370\ubaa8\uc5d0\uc11c\ub294 \uc778\ub371\uc2a4\uac00 \uc790\ub3d9\uc73c\ub85c \uc0dd\uc131\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc778\ub371\uc2a4\ub97c \ucd94\uac00\ud558\ub824\uba74 '\ucffc\ub9ac' \ud0ed\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc778\ub371\uc2a4\ub97c \ucd94\uac00\ud558\uace0 \uc778\ub371\uc2a4 \uc0dd\uc131\uc5d0 \ud544\uc694\ud55c SQL\uc744 \uc2e4\ud589\ud558\uba74 \ub429\ub2c8\ub2e4. SQL\uc5d0 \uc775\uc219\ud558\ub2e4\uba74 Couchbase\uc758 \uc778\ub371\uc2a4 \uc0dd\uc131\uc774 \uc9c1\uad00\uc801\uc73c\ub85c \ub290\uaef4\uc9c8 \uac83\uc785\ub2c8\ub2e4!<\/p>\n<p>Couchbase\uc758 \uc778\ub371\uc2a4\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\ub824\uba74 \ub2e4\uc74c\uc744 \ucc38\uc870\ud558\uc138\uc694. <a href=\"https:\/\/www.couchbase.com\/blog\/ko\/index-advisor-service\/\">\ucd5c\uadfc \uae30\uc0ac<\/a> \uc0ac\uc6a9 \ubc29\ubc95\uc744 \ubcf4\uc5ec\uc8fc\ub294 <a href=\"https:\/\/index-advisor.couchbase.com\/indexadvisor\/#1\">\uce74\uc6b0\uce58\ubca0\uc774\uc2a4\uc6a9 \uc778\ub371\uc2a4 \uc5b4\ub4dc\ubc14\uc774\uc800 \uc11c\ube44\uc2a4<\/a>. \uc774 \ub3c4\uad6c\ub294 \ucd5c\uc2e0 Couchbase Server 6.5 \ub9b4\ub9ac\uc2a4\uc640 \ud568\uaed8 \uc81c\uacf5\ub418\ub294 \uc0c8\ub85c\uc6b4 \ub3c4\uad6c\uc785\ub2c8\ub2e4. \ub610 \ub2e4\ub978 \uad00\uc2ec \uc0ac\ud56d\uc740 <a href=\"https:\/\/docs.couchbase.com\/server\/current\/learn\/services-and-indexes\/indexes\/global-secondary-indexes.html\">\uae00\ub85c\ubc8c \ubcf4\uc870 \uc778\ub371\uc2a4<\/a> \ubb38\uc11c.<\/p>\n<p>\uc0c9\uc778\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. <code>\uc5ec\ud589 \uc0d8\ud50c<\/code> \ubc84\ud0b7\uc744 \uc124\uce58\ud569\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/01\/travel-sample-indexes.jpg\" alt=\"couchbase dashboard travel-sample indexes\" \/><\/p>\n<h3 id=\"n1ql\">N1QL \ucffc\ub9ac\uc5d0 \ub300\ud55c \uac04\ub7b5\ud55c \uc5b8\uae09<\/h3>\n<p>Couchbase Server\uc5d0 \ub300\ud574 \uc5b8\uae09\ud574\uc57c \ud560 \ub610 \ub2e4\ub978 \uc0ac\ud56d\uc740 \ubb38\uc11c\ub97c \ucffc\ub9ac\ud558\ub294 \ub370 \uc0ac\uc6a9\ud558\ub294 \uc5b8\uc5b4\uc785\ub2c8\ub2e4. \uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uc11c\ubc84\ub294 <a href=\"https:\/\/www.couchbase.com\/blog\/ko\/products\/n1ql\/\">N1QL<\/a>. N1QL\uc740 \uad00\uacc4\ud615 \ubc30\uacbd\uc744 \uac00\uc9c4 \uc0ac\ub78c\uc774\ub77c\uba74 \ub204\uad6c\ub098 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 SQL\uacfc \uc720\uc0ac\ud55c \uad6c\ubb38\uc785\ub2c8\ub2e4. \ud2b9\ud788 \ubb38\uc11c \uceec\ub809\uc158\uc744 \ucffc\ub9ac\ud560 \ub54c \uc720\uc6a9\ud569\ub2c8\ub2e4. \ub2e4\uc74c \uae00\uc5d0\uc11c GraphQL API\ub97c \uad6c\ucd95\ud560 \ub54c \uba87 \uac00\uc9c0 \uae30\ubcf8 \uc0ac\ud56d\uc744 \ub2e4\ub8e8\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc790\uc138\ud55c \uc815\ubcf4\ub294 \ub2e4\uc74c\uc5d0\uc11c \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <a href=\"https:\/\/docs.couchbase.com\/server\/current\/n1ql\/n1ql-language-reference\/index.html\">N1QL<\/a> \ub97c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud55c \uc815\ubcf4\ubfd0\ub9cc \uc544\ub2c8\ub77c \ubb38\uc11c\uc5d0\uc11c <code>couchbase.get<\/code> \ubaa8\ub4e0 \uc815\ubcf4\ub97c \ucffc\ub9ac\ud558\ub294 \uba54\uc11c\ub4dc\uc5d0 \ub300\ud55c \uc790\uc138\ud55c \ub0b4\uc6a9\uc740 <a href=\"https:\/\/docs.couchbase.com\/nodejs-sdk\/current\/core-operations.html#crud-overview\">\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uc11c\ubc84 NodeJS SDK<\/a> \ubb38\uc11c.<\/p>\n<p>\uc774\uc81c \uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uc124\uc815\uc774 \uc644\ub8cc\ub418\uc5c8\uc73c\ubbc0\ub85c \uacc4\uc18d\ud574\uc11c \ud480\uc2a4\ud0dd \ub9ac\uc561\ud2b8 \ubc0f GraphQL \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uad6c\ucd95\uc758 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ubd80\ubd84\uc73c\ub85c \ub118\uc5b4\uac08 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uc81c <a href=\"https:\/\/www.couchbase.com\/blog\/ko\/fullstack-react-express-2\/\">Express-GraphQL \uc11c\ubc84<\/a> \ub2e4\uc74c\uc73c\ub85c <a href=\"https:\/\/www.couchbase.com\/blog\/ko\/fullstack-react-apollo-3\/\">React \ud074\ub77c\uc774\uc5b8\ud2b8 \ube4c\ub4dc<\/a> \ub9c8\uc9c0\ub9c9 \uc138\uadf8\uba3c\ud2b8\uc5d0\uc11c<\/p>\n<p><a href=\"https:\/\/www.couchbase.com\/blog\/ko\/fullstack-react-express-2\/\">Express-GraphQL API \uad6c\ucd95\ud558\uae30(2\ubd80)<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>First of three articles focused on building Fullstack with 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":10875,"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,1950],"ppma_author":[8922],"class_list":["post-8102","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","tag-rest-api"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.5 (Yoast SEO v26.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Build Fullstack React + GraphQL Application | Couchbase<\/title>\n<meta name=\"description\" content=\"Let\u2019s build a Fullstack React application using GraphQL application. We do expect some familiarity with JavaScript, React, GraphQL concepts, and NoSQL.\" \/>\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-couchbase-1\/\" \/>\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 : Couchbase\" \/>\n<meta property=\"og:description\" content=\"Let\u2019s build a Fullstack React application using GraphQL application. We do expect some familiarity with JavaScript, React, GraphQL concepts, and NoSQL.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/ko\/fullstack-react-couchbase-1\/\" \/>\n<meta property=\"og:site_name\" content=\"The Couchbase Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-29T00:03:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-14T06:16:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/couchbase-server-2.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=\"8\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-couchbase-1\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/\"},\"author\":{\"name\":\"Eric Bishard\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/67d3a4b597e42370ccd34b715a6b1f4c\"},\"headline\":\"Fullstack React and GraphQL : Couchbase\",\"datePublished\":\"2020-02-29T00:03:23+00:00\",\"dateModified\":\"2025-06-14T06:16:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/\"},\"wordCount\":1404,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/couchbase-server-2.jpg\",\"keywords\":[\"graphql\",\"React\",\"REST API\"],\"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-couchbase-1\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/\",\"name\":\"Build Fullstack React + GraphQL Application | Couchbase\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/couchbase-server-2.jpg\",\"datePublished\":\"2020-02-29T00:03:23+00:00\",\"dateModified\":\"2025-06-14T06:16:55+00:00\",\"description\":\"Let\u2019s build a Fullstack React application using GraphQL application. We do expect some familiarity with JavaScript, React, GraphQL concepts, and NoSQL.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/#primaryimage\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/couchbase-server-2.jpg\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/couchbase-server-2.jpg\",\"width\":1200,\"height\":628,\"caption\":\"RAGE With Couchbase Server Featured Image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.couchbase.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fullstack React and GraphQL : Couchbase\"}]},{\"@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":"Build Fullstack React + GraphQL Application | Couchbase","description":"GraphQL \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud480\uc2a4\ud0dd React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. JavaScript, React, GraphQL \uac1c\ub150 \ubc0f NoSQL\uc5d0 \uc5b4\ub290 \uc815\ub3c4 \uc775\uc219\ud560 \uac83\uc73c\ub85c \uc608\uc0c1\ud569\ub2c8\ub2e4.","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-couchbase-1\/","og_locale":"ko_KR","og_type":"article","og_title":"Fullstack React and GraphQL : Couchbase","og_description":"Let\u2019s build a Fullstack React application using GraphQL application. We do expect some familiarity with JavaScript, React, GraphQL concepts, and NoSQL.","og_url":"https:\/\/www.couchbase.com\/blog\/ko\/fullstack-react-couchbase-1\/","og_site_name":"The Couchbase Blog","article_published_time":"2020-02-29T00:03:23+00:00","article_modified_time":"2025-06-14T06:16:55+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/couchbase-server-2.jpg","type":"image\/jpeg"}],"author":"Eric Bishard","twitter_card":"summary_large_image","twitter_creator":"@httpJunkie","twitter_misc":{"Written by":"Eric Bishard","Est. reading time":"8\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/"},"author":{"name":"Eric Bishard","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/67d3a4b597e42370ccd34b715a6b1f4c"},"headline":"Fullstack React and GraphQL : Couchbase","datePublished":"2020-02-29T00:03:23+00:00","dateModified":"2025-06-14T06:16:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/"},"wordCount":1404,"commentCount":0,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/couchbase-server-2.jpg","keywords":["graphql","React","REST API"],"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-couchbase-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/","url":"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/","name":"Build Fullstack React + GraphQL Application | Couchbase","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/couchbase-server-2.jpg","datePublished":"2020-02-29T00:03:23+00:00","dateModified":"2025-06-14T06:16:55+00:00","description":"GraphQL \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud480\uc2a4\ud0dd React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. JavaScript, React, GraphQL \uac1c\ub150 \ubc0f NoSQL\uc5d0 \uc5b4\ub290 \uc815\ub3c4 \uc775\uc219\ud560 \uac83\uc73c\ub85c \uc608\uc0c1\ud569\ub2c8\ub2e4.","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/"]}]},{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/#primaryimage","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/couchbase-server-2.jpg","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2020\/02\/couchbase-server-2.jpg","width":1200,"height":628,"caption":"RAGE With Couchbase Server Featured Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.couchbase.com\/blog\/fullstack-react-couchbase-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Fullstack React and GraphQL : Couchbase"}]},{"@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\/8102","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=8102"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/posts\/8102\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/media\/10875"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/media?parent=8102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/categories?post=8102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/tags?post=8102"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/ppma_author?post=8102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}