{"id":1992,"date":"2024-10-03T12:31:34","date_gmt":"2024-10-03T03:31:34","guid":{"rendered":"https:\/\/hyunsu.com\/wordpress\/?p=1992"},"modified":"2024-10-03T12:31:34","modified_gmt":"2024-10-03T03:31:34","slug":"graphql-%ec%84%9c%eb%b2%84%ec%99%80-%ec%8a%a4%ed%82%a4","status":"publish","type":"post","link":"https:\/\/hyunsu.com\/wordpress\/?p=1992","title":{"rendered":"GraphQL \uc11c\ubc84\uc640 \uc2a4\ud0a4"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><strong>1. GraphQL \uc11c\ubc84 \uc774\ud574\ud558\uae30<\/strong><\/h3>\n\n\n\n<p>GraphQL \uc11c\ubc84\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8\ub85c\ubd80\ud130 <strong>\ucffc\ub9ac<\/strong>\ub098 <strong>\ubba4\ud14c\uc774\uc158<\/strong> \uc694\uccad\uc744 \ubc1b\uc544 \ucc98\ub9ac\ud558\ub294 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 GraphQL \uc11c\ubc84\uc5d0 \ud544\uc694\ud55c \ub370\uc774\ud130\ub97c \uc694\uccad\ud558\uace0, \uc11c\ubc84\ub294 \uadf8 \uc694\uccad\uc744 \ucc98\ub9ac\ud574\uc11c \ub370\uc774\ud130\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>GraphQL \uc11c\ubc84\uc758 \uc5ed\ud560<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud074\ub77c\uc774\uc5b8\ud2b8\uc758 \uc694\uccad\uc744 \ucc98\ub9ac\ud558\uace0, \ud544\uc694\ud55c \ub370\uc774\ud130\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li>**\uc2a4\ud0a4\ub9c8(Schema)**\ub97c \uc815\uc758\ud558\uace0, \ub370\uc774\ud130\uac00 \uc5b4\ub5a4 \ud615\ud0dc\ub85c \uc804\ub2ec\ub420\uc9c0\ub97c \uacb0\uc815\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li>\uc11c\ubc84\uc5d0\uc11c\ub294 \ub370\uc774\ud130\ub97c \ucc98\ub9ac\ud558\ub294 **\ub9ac\uc878\ubc84(Resolver)**\ub97c \ud1b5\ud574 \uc2e4\uc81c \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc640 \uc5f0\uacb0\ud558\uac70\ub098 \uc678\ubd80 API\uc5d0\uc11c \ub370\uc774\ud130\ub97c \ubc1b\uc544\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. GraphQL \uc2a4\ud0a4\ub9c8 \uc791\uc131\ud558\uae30<\/strong><\/h3>\n\n\n\n<p><strong>\uc2a4\ud0a4\ub9c8<\/strong>\ub294 GraphQL \uc11c\ubc84\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uc5b4\ub5bb\uac8c \uad6c\uc131\ud558\uace0 \uc81c\uacf5\ud560\uc9c0\ub97c \uc815\uc758\ud558\ub294 \uc124\uacc4\ub3c4\uc785\ub2c8\ub2e4. \uc2a4\ud0a4\ub9c8\ub294 \uc5b4\ub5a4 \ub370\uc774\ud130 \ud0c0\uc785\uc774 \uc788\uace0, \uc5b4\ub5a4 \uc694\uccad(\ucffc\ub9ac \ub610\ub294 \ubba4\ud14c\uc774\uc158)\uc744 \ubc1b\uc744 \uc218 \uc788\ub294\uc9c0\ub97c \uc124\uba85\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\uae30\ubcf8 \uc2a4\ud0a4\ub9c8 \uc608\uc81c<\/strong><\/h4>\n\n\n\n<p>\uc544\ub798\ub294 \uac04\ub2e8\ud55c \uc2a4\ud0a4\ub9c8 \uc608\uc81c\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uc758 \uc815\ubcf4\ub97c \ub2e4\ub8e8\ub294 API\ub97c \ub9cc\ub4e0\ub2e4\uace0 \uac00\uc815\ud574 \ubcf4\uc8e0.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>type User {<br>  id: ID!<br>  name: String!<br>  email: String!<br>}<br><br>type Query {<br>  user(id: ID!): User<br>  users: [User]<br>}<br><br>type Mutation {<br>  addUser(name: String!, email: String!): User<br>}<br><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>type User<\/code><\/strong>: \uc0ac\uc6a9\uc790 \uc815\ubcf4\ub97c \uc815\uc758\ud569\ub2c8\ub2e4. <code>id<\/code>, <code>name<\/code>, <code>email<\/code> \ud544\ub4dc\ub97c \uac00\uc9c0\uace0 \uc788\uc73c\uba70, \uac01 \ud544\ub4dc\ub294 \ud2b9\uc815 \ud0c0\uc785\uc744 \uac00\uc9d1\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, <code>id<\/code>\ub294 <code>ID!<\/code> \ud0c0\uc785\uc774\uba70, \uc774 \ub290\ub08c\ud45c\ub294 \ud544\uc218\uac00 \uc788\uc74c\uc744 \ub098\ud0c0\ub0c5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong><code>type Query<\/code><\/strong>: \ub370\uc774\ud130\ub97c \uc694\uccad\ud558\ub294 \ubc29\ubc95\uc744 \uc815\uc758\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc11c\ub294 <code>user<\/code> \ucffc\ub9ac\ub85c \ud2b9\uc815 \uc0ac\uc6a9\uc790(<code>id<\/code>\uc5d0 \ub530\ub77c)\ub97c \uc694\uccad\ud558\uac70\ub098, <code>users<\/code> \ucffc\ub9ac\ub85c \ubaa8\ub4e0 \uc0ac\uc6a9\uc790\ub97c \uc694\uccad\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong><code>type Mutation<\/code><\/strong>: \ub370\uc774\ud130\ub97c \ubcc0\uacbd\ud558\ub294 \ubc29\ubc95\uc744 \uc815\uc758\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc11c\ub294 <code>addUser<\/code> \ubba4\ud14c\uc774\uc158\uc73c\ub85c \uc0c8\ub85c\uc6b4 \uc0ac\uc6a9\uc790\ub97c \ucd94\uac00\ud558\ub294 \uc791\uc5c5\uc744 \uc815\uc758\ud588\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. \ub9ac\uc878\ubc84(Resolver) \uc791\uc131\ud558\uae30<\/strong><\/h3>\n\n\n\n<p>\ub9ac\uc878\ubc84\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc694\uccad\ud55c \ub370\uc774\ud130\ub97c \uc2e4\uc81c\ub85c \uac00\uc838\uc624\ub294 \ud568\uc218\ub97c \uc758\ubbf8\ud569\ub2c8\ub2e4. \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \ucffc\ub9ac\ub97c \ubcf4\ub0b4\uba74, \ub9ac\uc878\ubc84\uac00 \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0\uc11c \ud574\ub2f9 \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\uac70\ub098, \ub2e4\ub978 API\uc5d0\uc11c \ub370\uc774\ud130\ub97c \ubc1b\uc544\uc11c \ubc18\ud658\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\ub9ac\uc878\ubc84 \uc608\uc2dc<\/strong><\/h4>\n\n\n\n<p>\uc544\ub798\ub294 \uc704\uc758 \uc2a4\ud0a4\ub9c8\uc5d0\uc11c \uc815\uc758\ud55c <code>user<\/code>\uc640 <code>addUser<\/code>\uc5d0 \ub300\ud55c \ub9ac\uc878\ubc84 \uc608\uc2dc\uc785\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, Node.js \ud658\uacbd\uc5d0\uc11c \uc791\uc131\ud55c \ucf54\ub4dc\ub77c\uace0 \uc0dd\uac01\ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>const users = [<br>  { id: 1, name: 'John', email: 'john@example.com' },<br>  { id: 2, name: 'Alice', email: 'alice@example.com' },<br>];<br><br>const resolvers = {<br>  Query: {<br>    user: (parent, args, context, info) => {<br>      return users.find(user => user.id === Number(args.id));<br>    },<br>    users: () => users,<br>  },<br>  Mutation: {<br>    addUser: (parent, args, context, info) => {<br>      const newUser = {<br>        id: users.length + 1,<br>        name: args.name,<br>        email: args.email<br>      };<br>      users.push(newUser);<br>      return newUser;<br>    }<br>  }<br>};<br><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>Query.user<\/code><\/strong>: \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 <code>user(id: 1)<\/code> \ucffc\ub9ac\ub97c \ubcf4\ub0c8\uc744 \ub54c \ud574\ub2f9 <code>id<\/code>\ub97c \uac00\uc9c4 \uc0ac\uc6a9\uc790\ub97c \ucc3e\uc544 \ubc18\ud658\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong><code>Query.users<\/code><\/strong>: \ubaa8\ub4e0 \uc0ac\uc6a9\uc790\uc758 \ubaa9\ub85d\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong><code>Mutation.addUser<\/code><\/strong>: \uc0c8\ub85c\uc6b4 \uc0ac\uc6a9\uc790\ub97c \ucd94\uac00\ud558\uace0, \ucd94\uac00\ub41c \uc0ac\uc6a9\uc790 \ub370\uc774\ud130\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. GraphQL \uc11c\ubc84 \uc9c1\uc811 \uc2e4\ud589\ud574\ubcf4\uae30<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Node.js \ud658\uacbd\uc5d0\uc11c GraphQL \uc11c\ubc84 \uc2e4\ud589<\/strong><\/h4>\n\n\n\n<p>GraphQL \uc11c\ubc84\ub97c \uc9c1\uc811 \ub9cc\ub4e4\uae30 \uc704\ud574 Node.js \ud658\uacbd\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\ub294 \uac04\ub2e8\ud55c \uc11c\ubc84 \uc124\uc815 \uc608\uc2dc\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p><strong>\uc124\uce58: <\/strong>\uba3c\uc800, \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354\ub97c \ub9cc\ub4e4\uace0 <code>nmp init<\/code>\uc73c\ub85c \ud504\ub85c\uc81d\ud2b8\ub97c \ucd08\uae30\ud654\ud55c \ud6c4, \ud544\uc694\ud55c \ud328\ud0a4\uc9c0\ub4e4\uc744 \uc124\uce58\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install express express-graphql graphql<\/code><\/pre>\n\n\n\n<p><strong>\uc11c\ubc84 \ucf54\ub4dc \uc791\uc131<\/strong>: <code>index.js<\/code>\ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0, \ub2e4\uc74c\uacfc \uac19\uc774 \uac04\ub2e8\ud55c GraphQL \uc11c\ubc84\ub97c \uc124\uc815\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const express = require('express');\nconst { graphqlHTTP } = require('express-graphql');\nconst { buildSchema } = require('graphql');\n\n\/\/ \uc2a4\ud0a4\ub9c8 \uc815\uc758\nconst schema = buildSchema(`\n  type User {\n    id: ID!\n    name: String!\n    email: String!\n  }\n\n  type Query {\n    user(id: ID!): User\n    users: &#91;User]\n  }\n\n  type Mutation {\n    addUser(name: String!, email: String!): User\n  }\n`);\n\n\/\/ \ub9ac\uc878\ubc84 \uc815\uc758\nconst users = &#91;\n  { id: 1, name: 'John', email: 'john@example.com' },\n  { id: 2, name: 'Alice', email: 'alice@example.com' }\n];\n\nconst root = {\n  user: ({ id }) => users.find(user => user.id == id),\n  users: () => users,\n  addUser: ({ name, email }) => {\n    const newUser = { id: users.length + 1, name, email };\n    users.push(newUser);\n    return newUser;\n  }\n};\n\n\/\/ \uc11c\ubc84 \uc124\uc815\nconst app = express();\napp.use('\/graphql', graphqlHTTP({\n  schema: schema,\n  rootValue: root,\n  graphiql: true, \/\/ GraphiQL\uc744 \ud65c\uc131\ud654\ud558\uc5ec \uc6f9\uc5d0\uc11c \ucffc\ub9ac \uc791\uc131 \uac00\ub2a5\n}));\n\napp.listen(4000, () => console.log('Running a GraphQL API server at http:\/\/localhost:4000\/graphql'));\n<\/code><\/pre>\n\n\n\n<p><strong>\uc11c\ubc84 \uc2e4\ud589<\/strong>: \ub2e4\uc74c \uba85\ub839\uc5b4\ub85c \uc11c\ubc84\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>node index.js<\/code><\/pre>\n\n\n\n<p><strong>GraphiQL \uc778\ud130\ud398\uc774\uc2a4 \uc0ac\uc6a9<\/strong>: \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c <code>http:\/\/localhost:4000\/graphql<\/code>\ub85c \uc811\uc18d\ud558\uba74 GraphiQL\uc774\ub77c\ub294 \uc778\ud130\ud398\uc774\uc2a4\ub97c \ud1b5\ud574 \ucffc\ub9ac\uc640 \ubba4\ud14c\uc774\uc158\uc744 \uc9c1\uc811 \uc791\uc131\ud558\uace0 \ud14c\uc2a4\ud2b8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. \ub9c8\ubb34\ub9ac<\/strong><\/h3>\n\n\n\n<p>\uc774\uc81c GraphQL \uc11c\ubc84\uac00 \uc5b4\ub5bb\uac8c \uc791\ub3d9\ud558\ub294\uc9c0, \uc2a4\ud0a4\ub9c8\uc640 \ub9ac\uc878\ubc84\uac00 \ubb34\uc5c7\uc778\uc9c0, \uadf8\ub9ac\uace0 \uae30\ubcf8\uc801\uc778 \uc11c\ubc84\ub97c \uc124\uc815\ud558\ub294 \ubc29\ubc95\uc744 \uc54c\uac8c \ub418\uc168\uc2b5\ub2c8\ub2e4! \uc774 \uc11c\ubc84\ub97c \ud1b5\ud574 \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \ub370\uc774\ud130\ub97c \uc694\uccad\ud558\uace0 \ubcc0\uacbd\ud560 \uc218 \uc788\uc73c\uba70, \ub2e4\uc591\ud55c \uc751\uc6a9\uc744 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. GraphQL \uc11c\ubc84 \uc774\ud574\ud558\uae30 GraphQL \uc11c\ubc84\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8\ub85c\ubd80\ud130 \ucffc\ub9ac\ub098 \ubba4\ud14c\uc774\uc158 \uc694\uccad\uc744 \ubc1b\uc544 \ucc98\ub9ac\ud558\ub294 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 GraphQL \uc11c\ubc84\uc5d0 \ud544\uc694\ud55c \ub370\uc774\ud130\ub97c \uc694\uccad\ud558\uace0, \uc11c\ubc84\ub294 \uadf8 \uc694\uccad\uc744 \ucc98\ub9ac\ud574\uc11c \ub370\uc774\ud130\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4. GraphQL \uc11c\ubc84\uc758 \uc5ed\ud560 2. GraphQL \uc2a4\ud0a4\ub9c8 \uc791\uc131\ud558\uae30 \uc2a4\ud0a4\ub9c8\ub294 GraphQL \uc11c\ubc84\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uc5b4\ub5bb\uac8c \uad6c\uc131\ud558\uace0 \uc81c\uacf5\ud560\uc9c0\ub97c \uc815\uc758\ud558\ub294 \uc124\uacc4\ub3c4\uc785\ub2c8\ub2e4. \uc2a4\ud0a4\ub9c8\ub294 \uc5b4\ub5a4 \ub370\uc774\ud130 \ud0c0\uc785\uc774 \uc788\uace0, \uc5b4\ub5a4 \uc694\uccad(\ucffc\ub9ac \ub610\ub294 \ubba4\ud14c\uc774\uc158)\uc744 \ubc1b\uc744 \uc218 \uc788\ub294\uc9c0\ub97c \uc124\uba85\ud569\ub2c8\ub2e4. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55],"tags":[],"class_list":["post-1992","post","type-post","status-publish","format-standard","hentry","category-coding"],"_links":{"self":[{"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1992"}],"version-history":[{"count":1,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1992\/revisions"}],"predecessor-version":[{"id":1993,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1992\/revisions\/1993"}],"wp:attachment":[{"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}