{"id":1998,"date":"2024-10-03T12:56:36","date_gmt":"2024-10-03T03:56:36","guid":{"rendered":"https:\/\/hyunsu.com\/wordpress\/?p=1998"},"modified":"2024-10-03T12:56:36","modified_gmt":"2024-10-03T03:56:36","slug":"graphql-%ec%8a%a4%ed%82%a4%eb%a7%88-%ed%99%95%ec%9d%b8%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/hyunsu.com\/wordpress\/?p=1998","title":{"rendered":"GraphQL \uc2a4\ud0a4\ub9c8 \ud655\uc778\ud558\uae30"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><strong>1. GraphQL \uc2a4\ud0a4\ub9c8\ub294 \uba85\uc2dc\uc801\uc73c\ub85c \uc81c\uacf5<\/strong><\/h3>\n\n\n\n<p>GraphQL \uc11c\ubc84\ub294 <strong>\uc2a4\ud0a4\ub9c8<\/strong>\ub97c \uba85\uc2dc\uc801\uc73c\ub85c \uc815\uc758\ud569\ub2c8\ub2e4. \uc774 \uc2a4\ud0a4\ub9c8\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc5b4\ub5a4 \ub370\uc774\ud130 \ud0c0\uc785\uacfc \ud544\ub4dc\ub97c \uc694\uccad\ud560 \uc218 \uc788\ub294\uc9c0\ub97c \uc11c\ubc84\uc5d0\uc11c \uc815\uc758\ud558\ub294 <strong>\uc124\uacc4\ub3c4<\/strong>\uc785\ub2c8\ub2e4. \uadf8\ub807\uae30 \ub54c\ubb38\uc5d0 \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc694\uccad\ud560 \uc218 \uc788\ub294 \ub370\uc774\ud130 \uad6c\uc870\ub97c \ubbf8\ub9ac \uc54c\uae30 \uc704\ud574\uc11c\ub294 \uc11c\ubc84\uc5d0\uc11c \uc2a4\ud0a4\ub9c8\ub97c \ud655\uc778\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. \uc2a4\ud0a4\ub9c8\ub97c \ud655\uc778\ud558\ub294 \ubc29\ubc95<\/strong><\/h3>\n\n\n\n<p>\ud074\ub77c\uc774\uc5b8\ud2b8\ub294 \uc5ec\ub7ec \uac00\uc9c0 \ubc29\ubc95\uc744 \ud1b5\ud574 \uc11c\ubc84\uc758 \uc2a4\ud0a4\ub9c8 \uc815\ubcf4\ub97c \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>1) GraphiQL \uc778\ud130\ud398\uc774\uc2a4\ub97c \ud1b5\ud574 \uc2a4\ud0a4\ub9c8 \ud0d0\uc0c9<\/strong><\/h4>\n\n\n\n<p>GraphiQL \uac19\uc740 \uac1c\ubc1c \ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud558\uba74, \uc11c\ubc84\uc758 \uc2a4\ud0a4\ub9c8\ub97c \uc2dc\uac01\uc801\uc73c\ub85c \ud0d0\uc0c9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>GraphiQL<\/strong>\uc740 \ubcf4\ud1b5 <code>http:\/\/localhost:4000\/graphql<\/code>\uacfc \uac19\uc740 \uc8fc\uc18c\ub85c \uc81c\uacf5\ub418\uba70, \uc11c\ubc84\uc5d0\uc11c <code>graphiql: true<\/code>\ub85c \ud65c\uc131\ud654\ub418\uc5c8\uc744 \ub54c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li>\uc774 \uc778\ud130\ud398\uc774\uc2a4\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 &#8220;Docs&#8221; \ud0ed\uc744 \uc5f4\uba74, \uc11c\ubc84\uac00 \uc81c\uacf5\ud558\ub294 \uc2a4\ud0a4\ub9c8 \uc815\ubcf4(\ucffc\ub9ac\uc640 \ubba4\ud14c\uc774\uc158\uc758 \uad6c\uc870, \ud544\ub4dc \ud0c0\uc785 \ub4f1)\ub97c \ud0d0\uc0c9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p>\uc774 \ud234\uc744 \ud1b5\ud574 \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 \uc11c\ubc84\uac00 \uc81c\uacf5\ud558\ub294 \ubaa8\ub4e0 \ucffc\ub9ac\uc640 \ubba4\ud14c\uc774\uc158, \uadf8\ub9ac\uace0 \uac01 \ud544\ub4dc\uc758 \ud0c0\uc785, \uc778\uc790 \ub4f1\uc744 \uc27d\uac8c \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2) Introspection \ucffc\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc2a4\ud0a4\ub9c8 \uac00\uc838\uc624\uae30<\/strong><\/h4>\n\n\n\n<p>GraphQL\uc740 <strong>Introspection<\/strong>\uc774\ub77c\ub294 \uba54\ucee4\ub2c8\uc998\uc744 \ud1b5\ud574 \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc11c\ubc84\uc758 \uc2a4\ud0a4\ub9c8\ub97c \ucffc\ub9ac\ub85c \uc694\uccad\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4. Introspection \ucffc\ub9ac\ub97c \uc0ac\uc6a9\ud558\uba74 \uc11c\ubc84\uac00 \uc81c\uacf5\ud558\ub294 \uc804\uccb4 \uc2a4\ud0a4\ub9c8 \uc815\ubcf4\ub97c JSON \ud615\uc2dd\uc73c\ub85c \ubc1b\uc544\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\ub2e4\uc74c\uc740 Introspection \ucffc\ub9ac \uc608\uc2dc\uc785\ub2c8\ub2e4:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>{<br>  __schema {<br>    types {<br>      name<br>      fields {<br>        name<br>      }<br>    }<br>  }<br>}<\/code><\/pre>\n\n\n\n<p>\uc774 \ucffc\ub9ac\ub294 \uc11c\ubc84\uac00 \uc81c\uacf5\ud558\ub294 \ubaa8\ub4e0 \ud0c0\uc785\uacfc \uac01 \ud0c0\uc785\uc758 \ud544\ub4dc\ub97c \ubc18\ud658\ud574\uc90d\ub2c8\ub2e4. \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 \uc774 \ucffc\ub9ac\ub97c \ud1b5\ud574 \uc11c\ubc84\uc5d0\uc11c \uc5b4\ub5a4 \ub370\uc774\ud130 \uad6c\uc870\ub97c \uc81c\uacf5\ud558\ub294\uc9c0 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uc11c\ubc84\ub294 \uc77c\ubc18\uc801\uc73c\ub85c Introspection \uae30\ub2a5\uc744 \uae30\ubcf8\uc801\uc73c\ub85c \ud65c\uc131\ud654\ud574 \ub450\uc9c0\ub9cc, \ubcf4\uc548\uc774\ub098 \uc131\ub2a5\uc0c1\uc758 \uc774\uc720\ub85c \uc77c\ubd80 \uc11c\ubc84\uc5d0\uc11c\ub294 \ube44\ud65c\uc131\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 \uc5b4\ub5a4 \ucffc\ub9ac\ub098 \ubba4\ud14c\uc774\uc158\uc744 \ubcf4\ub0bc \uc218 \uc788\ub294\uc9c0 \ud30c\uc545\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>3) GraphQL SDL \ubb38\uc11c \uc81c\uacf5<\/strong><\/h4>\n\n\n\n<p>\uc11c\ubc84\ub294 **GraphQL SDL (Schema Definition Language)**\ub85c \uc2a4\ud0a4\ub9c8\ub97c \uc815\uc758\ud569\ub2c8\ub2e4. \uc774 SDL\uc740 \uc8fc\ub85c \uac1c\ubc1c\uc790\uac00 \uc11c\ubc84\uc5d0\uc11c \uc791\uc131\ud558\uba70, \uc11c\ubc84\uac00 \uc81c\uacf5\ud558\ub294 API \ubb38\uc11c\uc5d0 \ud3ec\ud568\ub418\uc5b4 \uc788\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc11c\ubc84 \uce21\uc5d0\uc11c API \ubb38\uc11c\ub97c \ud1b5\ud574 \uc2a4\ud0a4\ub9c8\ub97c \uba85\uc2dc\uc801\uc73c\ub85c \uc81c\uacf5\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uc608\ub97c \ub4e4\uc5b4, \ubb38\uc11c\ub85c \uc81c\uacf5\ub41c \uc2a4\ud0a4\ub9c8\uac00 \ub2e4\uc74c\uacfc \uac19\uc774 \uc0dd\uacbc\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">graphql\ucf54\ub4dc \ubcf5\uc0ac<code>type Query {<br>  user(id: ID!): User<br>  users: [User]<br>}<br><br>type User {<br>  id: ID!<br>  name: String!<br>  email: String!<br>}<br><br>type Mutation {<br>  addUser(name: String!, email: String!): User<br>}<\/code><\/pre>\n\n\n\n<p>\uc774 \ubb38\uc11c\ub97c \ubcf4\uba74 \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 \uc5b4\ub5a4 \ucffc\ub9ac\uc640 \ubba4\ud14c\uc774\uc158\uc774 \uac00\ub2a5\ud55c\uc9c0, \uc5b4\ub5a4 \ud544\ub4dc\uac00 \uc788\ub294\uc9c0 \uc27d\uac8c \ud30c\uc545\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c Apollo Client\ub85c \uc2a4\ud0a4\ub9c8 \uc77d\uc5b4\uc624\uae30<\/strong><\/h3>\n\n\n\n<p><strong>Apollo Client<\/strong>\uc640 \uac19\uc740 \uace0\uae09 \ud074\ub77c\uc774\uc5b8\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub294 <strong>Introspection<\/strong>\uc744 \uc790\ub3d9\uc73c\ub85c \uc2e4\ud589\ud574 \uc2a4\ud0a4\ub9c8\ub97c \ubbf8\ub9ac \uac00\uc838\uc640 \uc0ac\uc6a9\ud558\uae30\ub3c4 \ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uac1c\ubc1c\uc790\uac00 \uc5b4\ub5a4 \ucffc\ub9ac\ub97c \ubcf4\ub0bc \uc218 \uc788\ub294\uc9c0 \uc27d\uac8c \ud30c\uc545\ud560 \uc218 \uc788\uace0, \ud074\ub77c\uc774\uc5b8\ud2b8 \uce21\uc5d0\uc11c \uc2a4\ud0a4\ub9c8\uc5d0 \ub300\ud55c \uc790\ub3d9 \uc644\uc131 \uae30\ub2a5\uae4c\uc9c0 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>import { ApolloClient, InMemoryCache, gql } from '@apollo\/client';<br><br>const client = new ApolloClient({<br>  uri: 'http:\/\/localhost:4000\/graphql',<br>  cache: new InMemoryCache(),<br>  introspection: true, \/\/ Introspection \ucffc\ub9ac\ub97c \uc790\ub3d9\uc73c\ub85c \uc2e4\ud589<br>});<br><br>client<br>  .query({<br>    query: gql`<br>      query {<br>        __schema {<br>          types {<br>            name<br>            fields {<br>              name<br>            }<br>          }<br>        }<br>      }<br>    `,<br>  })<br>  .then(result => console.log(result));<\/code><\/pre>\n\n\n\n<p>\uc774\ucc98\ub7fc \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 Introspection\uc744 \ud1b5\ud574 \uc11c\ubc84\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \uc2a4\ud0a4\ub9c8\ub97c \ubc1b\uc544\uc62c \uc218 \uc788\uace0, \uc774\ub97c \ud1b5\ud574 \uc11c\ubc84\uc758 \ubaa8\ub4e0 \ucffc\ub9ac\uc640 \ubba4\ud14c\uc774\uc158, \ub370\uc774\ud130 \uad6c\uc870\ub97c \ud30c\uc545\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\uacb0\ub860<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\uba85\uc2dc\uc801 \uc2a4\ud0a4\ub9c8 \uc81c\uacf5<\/strong>: \uc11c\ubc84\ub294 \ubc18\ub4dc\uc2dc \uc2a4\ud0a4\ub9c8\ub97c \uba85\uc2dc\uc801\uc73c\ub85c \uc815\uc758\ud558\uace0 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0 \uc81c\uacf5\ud574\uc57c \ud569\ub2c8\ub2e4. \uadf8\ub798\uc57c \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc5b4\ub5a4 \ub370\uc774\ud130\ub97c \uc694\uccad\ud560 \uc218 \uc788\ub294\uc9c0 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>Introspection \ucffc\ub9ac<\/strong>: \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 Introspection \ucffc\ub9ac\ub97c \ud1b5\ud574 \uc11c\ubc84\uc758 \uc2a4\ud0a4\ub9c8\ub97c \uc694\uccad\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>GraphiQL<\/strong>: GraphiQL \uac19\uc740 \uac1c\ubc1c \ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud558\uba74 \uc2a4\ud0a4\ub9c8\ub97c \uc27d\uac8c \ud0d0\uc0c9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p>\uc11c\ubc84 \uce21\uc5d0\uc11c Introspection\uc744 \uc81c\uacf5\ud558\ub294\uc9c0 \uc5ec\ubd80\uc5d0 \ub530\ub77c \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 \ud574\ub2f9 \uba54\ucee4\ub2c8\uc998\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc2a4\ud0a4\ub9c8\ub97c \ub3d9\uc801\uc73c\ub85c \ud30c\uc545\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc2a4\ud0a4\ub9c8\ub97c \ubbf8\ub9ac \ubb38\uc11c\ud654\ud574 \uc81c\uacf5\ud558\uac70\ub098, GraphiQL \uac19\uc740 \ub3c4\uad6c\ub97c \ud1b5\ud574 \ud0d0\uc0c9\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. GraphQL \uc2a4\ud0a4\ub9c8\ub294 \uba85\uc2dc\uc801\uc73c\ub85c \uc81c\uacf5 GraphQL \uc11c\ubc84\ub294 \uc2a4\ud0a4\ub9c8\ub97c \uba85\uc2dc\uc801\uc73c\ub85c \uc815\uc758\ud569\ub2c8\ub2e4. \uc774 \uc2a4\ud0a4\ub9c8\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc5b4\ub5a4 \ub370\uc774\ud130 \ud0c0\uc785\uacfc \ud544\ub4dc\ub97c \uc694\uccad\ud560 \uc218 \uc788\ub294\uc9c0\ub97c \uc11c\ubc84\uc5d0\uc11c \uc815\uc758\ud558\ub294 \uc124\uacc4\ub3c4\uc785\ub2c8\ub2e4. \uadf8\ub807\uae30 \ub54c\ubb38\uc5d0 \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc694\uccad\ud560 \uc218 \uc788\ub294 \ub370\uc774\ud130 \uad6c\uc870\ub97c \ubbf8\ub9ac \uc54c\uae30 \uc704\ud574\uc11c\ub294 \uc11c\ubc84\uc5d0\uc11c \uc2a4\ud0a4\ub9c8\ub97c \ud655\uc778\ud574\uc57c \ud569\ub2c8\ub2e4. 2. \uc2a4\ud0a4\ub9c8\ub97c \ud655\uc778\ud558\ub294 \ubc29\ubc95 \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 \uc5ec\ub7ec \uac00\uc9c0 \ubc29\ubc95\uc744 \ud1b5\ud574 \uc11c\ubc84\uc758 \uc2a4\ud0a4\ub9c8 \uc815\ubcf4\ub97c \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. 1) GraphiQL [&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-1998","post","type-post","status-publish","format-standard","hentry","category-coding"],"_links":{"self":[{"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1998","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=1998"}],"version-history":[{"count":1,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1998\/revisions"}],"predecessor-version":[{"id":1999,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1998\/revisions\/1999"}],"wp:attachment":[{"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}