{"id":1994,"date":"2024-10-03T12:44:05","date_gmt":"2024-10-03T03:44:05","guid":{"rendered":"https:\/\/hyunsu.com\/wordpress\/?p=1994"},"modified":"2024-10-03T14:55:55","modified_gmt":"2024-10-03T05:55:55","slug":"%ed%81%b4%eb%9d%bc%ec%9d%b4%ec%96%b8%ed%8a%b8%ea%b0%80-graphql-%ec%84%9c%eb%b2%84%ec%97%90-%ec%a0%91%ea%b7%bc%ed%95%98%ea%b3%a0-%eb%8d%b0%ec%9d%b4%ed%84%b0%eb%a5%bc-%ec%9a%94%ec%b2%ad%ed%95%98","status":"publish","type":"post","link":"https:\/\/hyunsu.com\/wordpress\/?p=1994","title":{"rendered":"GraphQL \uc11c\ubc84\uc5d0 \uc811\uadfc\ud558\uace0 \ub370\uc774\ud130\ub97c \uc694\uccad\ud558\uae30"},"content":{"rendered":"\n

\ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc11c\ubc84\uc5d0 \uc811\uadfc\ud558\ub294 \ubc29\ubc95<\/strong><\/h3>\n\n\n\n

\ud074\ub77c\uc774\uc5b8\ud2b8\uac00 GraphQL \uc11c\ubc84\uc5d0 \uc811\uadfc\ud558\ub294 \ubc29\uc2dd\uc740 \ud06c\uac8c \ub450 \uac00\uc9c0\ub85c \ub098\ub20c \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n

    \n
  1. GraphiQL\uc744 \uc0ac\uc6a9\ud55c \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\uc758 \uc811\uadfc<\/strong><\/li>\n\n\n\n
  2. HTTP \uc694\uccad\uc744 \ud1b5\ud574 \uc9c1\uc811 \uc811\uadfc\ud558\ub294 \ubc29\uc2dd (\uc608: Fetch API, Axios, Apollo Client \ub4f1)<\/strong><\/li>\n<\/ol>\n\n\n\n

    1. GraphiQL\uc744 \uc0ac\uc6a9\ud55c \uc811\uadfc<\/strong><\/h4>\n\n\n\n

    GraphiQL\uc740 GraphQL\uc744 \ud14c\uc2a4\ud2b8\ud560 \uc218 \uc788\ub294 \uc6f9 \uae30\ubc18 \uc778\ud130\ud398\uc774\uc2a4\uc785\ub2c8\ub2e4. \uc11c\ubc84\uc5d0 \uc124\uc815\ub41c graphiql: true<\/code> \uc635\uc158 \ub355\ubd84\uc5d0, \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c GraphQL \ucffc\ub9ac\uc640 \ubba4\ud14c\uc774\uc158\uc744 \uc9c1\uc811 \uc791\uc131\ud558\uace0 \uc2e4\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

    \uc811\uadfc \ubc29\ubc95<\/strong>:<\/p>\n\n\n\n

      \n
    • \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c http:\/\/localhost:4000\/graphql<\/code>\uc5d0 \uc811\uc18d\ud558\uba74, GraphiQL \uc778\ud130\ud398\uc774\uc2a4\uac00 \ub098\ud0c0\ub0a9\ub2c8\ub2e4.<\/li>\n\n\n\n
    • \uc5ec\uae30\uc11c \ucffc\ub9ac\ub098 \ubba4\ud14c\uc774\uc158\uc744 \uc9c1\uc811 \uc791\uc131\ud574 \uc2e4\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n

      \uc608\ub97c \ub4e4\uc5b4, \ud2b9\uc815 \uc0ac\uc6a9\uc790\uc758 \uc774\ub984\uacfc \uc774\uba54\uc77c\uc744 \uac00\uc838\uc624\ub294 \ucffc\ub9ac\ub97c GraphiQL\uc5d0\uc11c \uc2e4\ud589\ud558\uba74:<\/p>\n\n\n\n

      query {
        user(id: 1) {
          name
          email
        }
      }
      <\/code><\/pre>\n\n\n\n
      \uc11c\ubc84\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 JSON \ud615\uc2dd\uc758 \ub370\uc774\ud130\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4:<\/p>\n\n\n\n
      {
        \"data\": {
          \"user\": {
            \"name\": \"John\",
            \"email\": \"john@example.com\"
          }
        }
      }
      <\/code><\/pre>\n\n\n\n
      2. HTTP \uc694\uccad\uc744 \uc0ac\uc6a9\ud55c \uc811\uadfc<\/strong><\/h4>\n\n\n\n
      \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 Fetch API, Axios, \ub610\ub294 Apollo Client \uac19\uc740 HTTP \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec GraphQL \uc11c\ubc84\uc5d0 \uc694\uccad\uc744 \ubcf4\ub0bc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \ubc29\uc2dd\uc740 \ube0c\ub77c\uc6b0\uc800\ub098 \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c GraphQL \uc11c\ubc84\uc640 \ud1b5\uc2e0\ud560 \ub54c \uc77c\ubc18\uc801\uc73c\ub85c \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n
      Fetch API\ub97c \uc0ac\uc6a9\ud55c \uc811\uadfc \uc608\uc2dc:<\/strong><\/h4>\n\n\n\n
      fetch('http:\/\/localhost:4000\/graphql', {
        method: 'POST',
        headers: {
          'Content-Type': 'application\/json',
        },
        body: JSON.stringify({
          query: `
            query {
              user(id: 1) {
                name
                email
              }
            }
          `
        })
      })
      .then(response => response.json())
      .then(data => console.log(data));
      <\/code><\/pre>\n\n\n\n
      \uc704\uc758 \ucf54\ub4dc\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c fetch<\/code>\ub97c \ud1b5\ud574 GraphQL \ucffc\ub9ac\ub97c \uc11c\ubc84\uc5d0 \ubcf4\ub0b4\uace0, \uc11c\ubc84\ub85c\ubd80\ud130 \ubc1b\uc740 \ub370\uc774\ud130\ub97c \ucd9c\ub825\ud558\ub294 \uc608\uc81c\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
      Axios\ub97c \uc0ac\uc6a9\ud55c \uc811\uadfc \uc608\uc2dc:<\/strong><\/h4>\n\n\n\n
      import axios from 'axios';

      axios.post('http:\/\/localhost:4000\/graphql', {
        query: `
          query {
            user(id: 1) {
              name
              email
            }
          }
        `
      })
      .then(response => {
        console.log(response.data);
      });
      <\/code><\/pre>\n\n\n\n
      Axios\ub294 Fetch API\uc640 \uc720\uc0ac\ud55c \ubc29\uc2dd\uc73c\ub85c \ub3d9\uc791\ud558\uba70, \ub354 \ub2e4\uc591\ud55c \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
      <\/p>\n\n\n\n
      Apollo Client\ub97c \uc0ac\uc6a9\ud55c \uc811\uadfc \uc608\uc2dc:<\/strong><\/h4>\n\n\n\n
      Apollo Client<\/strong>\ub294 GraphQL \uc11c\ubc84\uc640 \ud1b5\uc2e0\ud558\uae30 \uc704\ud55c \ub354 \uace0\uae09\ud654\ub41c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \uc8fc\ub85c \ub9ac\uc561\ud2b8 \uac19\uc740 \ud504\ub860\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\uc5d0\uc11c \ub9ce\uc774 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n
        \n
      1. \uc124\uce58<\/strong>:bash\ucf54\ub4dc \ubcf5\uc0ac
        npm install @apollo\/client graphql<\/code>
        <\/li>\n\n\n\n
      2. Apollo Client \uc124\uc815<\/strong>:<\/li>\n<\/ol>\n\n\n\n
        import { ApolloClient, InMemoryCache, gql } from '@apollo\/client';\n\nconst client = new ApolloClient({\n  uri: 'http:\/\/localhost:4000\/graphql',\n  cache: new InMemoryCache()\n});\n\nclient\n  .query({\n    query: gql`\n      query {\n        user(id: 1) {\n          name\n          email\n        }\n      }\n    `\n  })\n  .then(result => console.log(result));\n<\/code><\/pre>\n\n\n\n
        Apollo Client<\/strong>\ub294 \ucffc\ub9ac\uc640 \ubba4\ud14c\uc774\uc158\uc744 \uac04\ub2e8\ud558\uac8c \uad00\ub9ac\ud560 \uc218 \uc788\uac8c \ub3c4\uc640\uc8fc\uba70, \ub354 \ubcf5\uc7a1\ud55c \ud074\ub77c\uc774\uc5b8\ud2b8 \uce21 \ub370\uc774\ud130 \uad00\ub9ac \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
        3. \ucffc\ub9ac\uc640 \ubba4\ud14c\uc774\uc158 \uc694\uccad\uc758 \uad6c\uc870<\/strong><\/h3>\n\n\n\n
        \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc11c\ubc84\uc5d0 \ubcf4\ub0bc \ub54c \uc694\uccad\uc758 \uad6c\uc870<\/strong>\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n
          \n
        • URL<\/strong>: GraphQL \uc11c\ubc84\uc758 \uc5d4\ub4dc\ud3ec\uc778\ud2b8 (\uc608: http:\/\/localhost:4000\/graphql<\/code>)<\/li>\n\n\n\n
        • HTTP \uba54\uc11c\ub4dc<\/strong>: POST<\/code> (GraphQL \uc694\uccad\uc740 \uc8fc\ub85c POST \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9)<\/li>\n\n\n\n
        • \uc694\uccad \ubcf8\ubb38<\/strong>: GraphQL \ucffc\ub9ac \ub610\ub294 \ubba4\ud14c\uc774\uc158\uc744 JSON \ud615\uc2dd\uc73c\ub85c \ud3ec\ud568<\/li>\n<\/ul>\n\n\n\n
          {
            \"query\": \"query { user(id: 1) { name email } }\"
          }
          <\/code><\/pre>\n\n\n\n
          \uc11c\ubc84\ub294 \uc774 \uc694\uccad\uc744 \ubc1b\uc544\uc11c \ud544\uc694\ud55c \ub370\uc774\ud130\ub97c \ucc98\ub9ac\ud55c \ud6c4, JSON \ud615\uc2dd\uc73c\ub85c \uc751\ub2f5\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
          4. \uc751\ub2f5 \uad6c\uc870<\/strong><\/h3>\n\n\n\n
          \uc11c\ubc84\ub85c\ubd80\ud130 \ubc18\ud658\ub418\ub294 \uc751\ub2f5\uc740 JSON \ud615\uc2dd\uc73c\ub85c \uc81c\uacf5\ub429\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc778 \uc751\ub2f5 \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n
            \n
          • data<\/strong>: \uc694\uccad\ud55c \ub370\uc774\ud130\uac00 \ub2f4\uae34 \ud544\ub4dc<\/li>\n\n\n\n
          • errors<\/strong>: \ub9cc\uc57d \ucffc\ub9ac\ub098 \ubba4\ud14c\uc774\uc158\uc5d0 \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc744 \ub54c \uc624\ub958 \uba54\uc2dc\uc9c0\uac00 \ub2f4\uae30\ub294 \ud544\ub4dc<\/li>\n<\/ul>\n\n\n\n
            \uc751\ub2f5 \uc608\uc2dc:<\/p>\n\n\n\n
            {
              \"data\": {
                \"user\": {
                  \"name\": \"John\",
                  \"email\": \"john@example.com\"
                }
              }
            }
            <\/code><\/pre>\n\n\n\n
            \uc624\ub958\uac00 \uc788\uc744 \uacbd\uc6b0:<\/p>\n\n\n\n
            {
              \"errors\": [
                {
                  \"message\": \"User not found\",
                  \"locations\": [{ \"line\": 2, \"column\": 3 }],
                  \"path\": [\"user\"]
                }
              ]
            }
            <\/code><\/pre>\n\n\n\n
            \uacb0\ub860<\/strong><\/h3>\n\n\n\n
            \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 GraphQL \uc11c\ubc84\uc5d0 \uc811\uadfc\ud558\ub294 \ubc29\uc2dd\uc740 \ud06c\uac8c \ub450 \uac00\uc9c0\ub85c \ub098\ub269\ub2c8\ub2e4:<\/p>\n\n\n\n
              \n
            1. GraphiQL<\/strong> \uac19\uc740 \uc6f9 \uae30\ubc18 \ud234\uc744 \uc0ac\uc6a9\ud574 \uc9c1\uc811 \ucffc\ub9ac\ub97c \uc791\uc131\ud558\uace0 \ud14c\uc2a4\ud2b8\ud558\ub294 \ubc29\ubc95.<\/li>\n\n\n\n
            2. Fetch API<\/strong>, Axios<\/strong>, Apollo Client<\/strong> \ub4f1\uc744 \uc0ac\uc6a9\ud574 HTTP \uc694\uccad\uc744 \ud1b5\ud574 \uc11c\ubc84\uc5d0 \ucffc\ub9ac\ub098 \ubba4\ud14c\uc774\uc158\uc744 \ubcf4\ub0b4\ub294 \ubc29\uc2dd.<\/li>\n<\/ol>\n\n\n\n
              \uc2e4\uc81c \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 \ubcf4\ud1b5 \ub450 \ubc88\uc9f8 \ubc29\ubc95\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud074\ub77c\uc774\uc5b8\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uacfc GraphQL \uc11c\ubc84 \uac04\uc5d0 \ub370\uc774\ud130\ub97c \uc8fc\uace0\ubc1b\uc2b5\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
              \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc11c\ubc84\uc5d0 \uc811\uadfc\ud558\ub294 \ubc29\ubc95 \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 GraphQL \uc11c\ubc84\uc5d0 \uc811\uadfc\ud558\ub294 \ubc29\uc2dd\uc740 \ud06c\uac8c \ub450 \uac00\uc9c0\ub85c \ub098\ub20c \uc218 \uc788\uc2b5\ub2c8\ub2e4: 1. GraphiQL\uc744 \uc0ac\uc6a9\ud55c \uc811\uadfc GraphiQL\uc740 GraphQL\uc744 \ud14c\uc2a4\ud2b8\ud560 \uc218 \uc788\ub294 \uc6f9 \uae30\ubc18 \uc778\ud130\ud398\uc774\uc2a4\uc785\ub2c8\ub2e4. \uc11c\ubc84\uc5d0 \uc124\uc815\ub41c graphiql: true \uc635\uc158 \ub355\ubd84\uc5d0, \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c GraphQL \ucffc\ub9ac\uc640 \ubba4\ud14c\uc774\uc158\uc744 \uc9c1\uc811 \uc791\uc131\ud558\uace0 \uc2e4\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc811\uadfc \ubc29\ubc95: \uc608\ub97c \ub4e4\uc5b4, \ud2b9\uc815 \uc0ac\uc6a9\uc790\uc758 \uc774\ub984\uacfc \uc774\uba54\uc77c\uc744 \uac00\uc838\uc624\ub294 \ucffc\ub9ac\ub97c GraphiQL\uc5d0\uc11c […]<\/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-1994","post","type-post","status-publish","format-standard","hentry","category-coding"],"_links":{"self":[{"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1994","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=1994"}],"version-history":[{"count":2,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1994\/revisions"}],"predecessor-version":[{"id":2014,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1994\/revisions\/2014"}],"wp:attachment":[{"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1994"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1994"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1994"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}