graphql-kr.github.io/index.html at master · hhaze/graphql-kr.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="google-site-verification" content="wt4jHZa0ru-stSJJrlY5sSJzj9MB0ZA6BzkprNilZdM"/><title>GraphQL | API를 위한 쿼리 언어</title><meta name="viewport" content="width=640"/><meta property="og:title" content="GraphQL: API를 위한 쿼리 언어"/><meta property="og:description" content="GraphQL은 API에 있는 데이터에 대한 완벽하고 이해하기 쉬운 설명을 제공하고 클라이언트에게 필요한 것을 정확하게 요청할 수 있는 기능을 제공하며 시간이 지남에 따라 API를 쉽게 진화시키고 강력한 개발자 도구를 지원합니다."/><meta property="og:type" content="website"/><meta property="og:url" content="http://graphql-kr.github.io"/><meta property="og:image" content="/img/og_image.png"/><meta property="og:image:type" content="image/png"/><meta name="twitter:card" content="summary"/><meta name="twitter:site" content="@graphql"/><meta name="twitter:title" content="GraphQL: API를 위한 쿼리 언어"/><meta name="twitter:description" content="GraphQL gives clients the power to ask for exactly what they need and nothing more, making it easier to evolve APIs over time."/><meta name="twitter:image" content="/img/twitter_image.png"/><link rel="shortcut icon" href="/img/favicon.png"/><link rel="home" type="application/rss+xml" href="/blog/rss.xml" title="GraphQL Team Blog"/><link rel="stylesheet" href="/style.css"/><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:300|Roboto:300"/><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,600"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link href="https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css" rel="stylesheet" type="text/css"/></head><body class="index"><header><section><a class="nav-home" href="/"><img class="nav-logo" src="/img/logo.svg" width="30" height="30"/>GraphQL</a><nav><a href="/learn/">배우기</a><a href="/code/">코드</a><a href="/community/">커뮤니티</a><a href="/blog/">블로그</a><a href="http://facebook.github.io/graphql/" target="_blank" rel="noopener noreferrer">명세</a></nav></section></header><section class="fixedSearch"><div class="algolia-search-wrapper"><input type="text" id="algolia-search-input" placeholder="문서 검색"/></div></section><div class="hero"><div class="abs"><header aria-hidden="true"><section><nav><a href="/learn/">배우기</a><a href="/code/">코드</a><a href="/community/">커뮤니티</a><a href="/blog/">블로그</a><a href="http://facebook.github.io/graphql/" target="_blank" rel="noopener noreferrer">명세</a></nav></section></header><section class="intro"><div class="named-logo"><img src="/img/logo.svg"/><h1>GraphQL</h1></div><div class="marketing-col"><h3>데이터를 표현하세요</h3><pre class="prism language-graphql"><span class="type-def"><span class="keyword">type</span> Project <span class="fields"><span class="punctuation">{</span>
  <span class="attr-name">name</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">tagline</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">contributors</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="type-name">User</span><span class="punctuation">]</span>
<span class="punctuation">}</span></span></span></pre></div><div class="marketing-col"><h3>원하는 것을 요청하세요</h3><pre class="prism language-graphql"><span class="punctuation">{</span>
  project<span class="punctuation">(</span><span class="attr-name">name</span><span class="punctuation">:</span> <span class="string">&quot;GraphQL&quot;</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    tagline
  <span class="punctuation">}</span>
<span class="punctuation">}</span></pre></div><div class="marketing-col"><h3>예측가능한 결과를 얻으세요</h3><pre class="prism language-json"><span class="punctuation">{</span>
  <span class="attr-name">&quot;project&quot;</span><span class="punctuation">:</span> <span class="punctuation">{</span>
    <span class="attr-name">&quot;tagline&quot;</span><span class="punctuation">:</span> <span class="string">&quot;A query language for APIs&quot;</span>
  <span class="punctuation">}</span>
<span class="punctuation">}</span></pre></div></section><div class="buttons-unit"><a class="button" href="/code/">시작하기</a><a class="button" href="/learn/">자세히보기</a></div></div></div><section class="lead"><h1>API를 위한 쿼리 언어</h1><p>GraphQL은 API를 위한 쿼리 언어이며 이미 존재하는 데이터로 쿼리를 수행하기 위한 런타임 입니다. GraphQL은 API에 있는 데이터에 대한 완벽하고 이해하기 쉬운 설명을 제공하고 클라이언트에게 필요한 것을 정확하게 요청할 수 있는 기능을 제공하며 시간이 지남에 따라 API를 쉽게 진화시키고 강력한 개발자 도구를 지원합니다.</p></section><section class="point1" id="predictable-results"><div class="prose"><h2>필요한 것을 구체적으로 요청하세요</h2><p>API에 GraphQL 쿼리를 보내고 필요한 것만 정확히 얻으세요. GraphQL 쿼리는 항상 예측 가능한 결과를 반환합니다. GraphQL을 사용하는 앱은 서버가 아닌 데이터를 제어하기 때문에 빠르며 안정적입니다.</p></div><div class="window faux-graphiql" aria-hidden="true"><div class="query"><pre class="prism">{
  hero {
    name<span id="ch0" class="ch"><br/></span><span id="ch1" class="ch"> </span><span id="ch2" class="ch"> </span><span id="ch3" class="ch"> </span><span id="ch4" class="ch"> </span><span id="ch5" class="ch">h</span><span id="ch6" class="ch">e</span><span id="ch7" class="ch">i</span><span id="ch8" class="ch">g</span><span id="ch9" class="ch">h</span><span id="ch10" class="ch">t</span><span id="ch11" class="ch"><br/></span><span id="ch12" class="ch"> </span><span id="ch13" class="ch"> </span><span id="ch14" class="ch"> </span><span id="ch15" class="ch"> </span><span id="ch16" class="ch">m</span><span id="ch17" class="ch">a</span><span id="ch18" class="ch">s</span><span id="ch19" class="ch">s</span><span class="cursor"></span>
  }
}</pre></div><div class="response"><div id="r1"><pre class="prism language-json"><span class="punctuation">{</span>
  <span class="attr-name">&quot;hero&quot;</span><span class="punctuation">:</span> <span class="punctuation">{</span>
    <span class="attr-name">&quot;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Luke Skywalker&quot;</span>
  <span class="punctuation">}</span>
<span class="punctuation">}</span></pre></div><div id="r2"><pre class="prism language-json"><span class="punctuation">{</span>
  <span class="attr-name">&quot;hero&quot;</span><span class="punctuation">:</span> <span class="punctuation">{</span>
    <span class="attr-name">&quot;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Luke Skywalker&quot;</span><span class="punctuation">,</span>
    <span class="attr-name">&quot;height&quot;</span><span class="punctuation">:</span> <span class="number">1.72</span>
  <span class="punctuation">}</span>
<span class="punctuation">}</span></pre></div><div id="r3"><pre class="prism language-json"><span class="punctuation">{</span>
  <span class="attr-name">&quot;hero&quot;</span><span class="punctuation">:</span> <span class="punctuation">{</span>
    <span class="attr-name">&quot;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Luke Skywalker&quot;</span><span class="punctuation">,</span>
    <span class="attr-name">&quot;height&quot;</span><span class="punctuation">:</span> <span class="number">1.72</span><span class="punctuation">,</span>
    <span class="attr-name">&quot;mass&quot;</span><span class="punctuation">:</span> <span class="number">77</span>
  <span class="punctuation">}</span>
<span class="punctuation">}</span></pre></div></div><script>(function(){
          var i = 0;
          var forward = true;
          setTimeout(type, 2000);
          showResponse(1);
          function type() {
            if (forward) {
              document.getElementById('ch' + i).style.display = 'inline';
              i++;
              if (i === 20) {
                forward = false;
                showResponse(3);
                setTimeout(type, 1500);
              } else if (i === 11) {
                showResponse(2);
                setTimeout(type, 1500);
              } else {
                setTimeout(type, Math.random() * 180 + 70);
              }
            } else {
              i--;
              document.getElementById('ch' + i).style.display = 'none';
              if (i === 0) {
                forward = true;
                showResponse(1);
                setTimeout(type, 2000);
              } else {
                setTimeout(type, 80);
              }
            }
          }
          function showResponse(num) {
            document.getElementById('r1').style.display = num === 1 ? 'block' : 'none';
            document.getElementById('r2').style.display = num === 2 ? 'block' : 'none';
            document.getElementById('r3').style.display = num === 3 ? 'block' : 'none';
          }
        })()</script></div></section><div class="grayWash"><section class="point2" id="single-request"><div class="prose"><h2>단일 요청으로 많은<br/>데이터를 얻으세요</h2><p>GraphQL 쿼리는 하나의 리소스 속성에 액세스할 뿐만 아니라 이 리소스 간의 참조를 자연스럽게 이해합니다. 일반적인 REST API는 여러 URL에서 데이터를 받아와야 하지만 GraphQL API는 한번의 요청으로 앱에 필요한 모든 데이터를 가져옵니다. GraphQL을 사용하는 앱은 느린 모바일 네트워크 연결에서도 빠르게 수행할 수 있습니다.</p></div><div class="app-to-server" aria-hidden="true"><img src="/img/phone.svg" width="496" height="440" class="phone"/><div class="query"><pre class="prism language-graphql"><span class="punctuation">{</span>
  hero <span class="punctuation">{</span>
    name
    friends <span class="punctuation">{</span>
      name
    <span class="punctuation">}</span>
  <span class="punctuation">}</span>
<span class="punctuation">}</span></pre></div><div class="response"><pre class="prism language-json"><span class="punctuation">{</span>
  <span class="attr-name">&quot;hero&quot;</span><span class="punctuation">:</span> <span class="punctuation">{</span>
    <span class="attr-name">&quot;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Luke Skywalker&quot;</span><span class="punctuation">,</span>
    <span class="attr-name">&quot;friends&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span>
      <span class="punctuation">{</span> <span class="attr-name">&quot;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Obi-Wan Kenobi&quot;</span> <span class="punctuation">}</span><span class="punctuation">,</span>
      <span class="punctuation">{</span> <span class="attr-name">&quot;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;R2-D2&quot;</span> <span class="punctuation">}</span><span class="punctuation">,</span>
      <span class="punctuation">{</span> <span class="attr-name">&quot;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Han Solo&quot;</span> <span class="punctuation">}</span><span class="punctuation">,</span>
      <span class="punctuation">{</span> <span class="attr-name">&quot;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Leia Organa&quot;</span> <span class="punctuation">}</span>
    <span class="punctuation">]</span>
  <span class="punctuation">}</span>
<span class="punctuation">}</span></pre></div><img src="/img/server.svg" width="496" height="440" class="server"/></div></section></div><section class="point3" id="type-system"><div class="prose"><h2>타입 시스템으로<br/>가능한 것을 살펴보세요</h2><p>GraphQL API는 엔드포인트가 아닌 타입과 필드로 구성됩니다. 단일 엔드포인트에서 데이터의 모든 기능에 접근하세요. GraphQL은 타입 시스템을 사용하여 앱이 가능한 것을 요청하고 명확하고 유용한 오류를 제공하는 것을 보장합니다. 앱은 타입을 사용하여 수동 파싱 코드 작성을 피할 수 있습니다.</p></div><div class="window strong-typed-query" aria-hidden="true"><div class="query"><div id="query-highlight" class="highlight"></div><pre class="prism language-graphql"><span class="punctuation">{</span>
  hero <span class="punctuation">{</span>
    name
    friends <span class="punctuation">{</span>
      name
      homeWorld <span class="punctuation">{</span>
        name
        climate
      <span class="punctuation">}</span>
      species <span class="punctuation">{</span>
        name
        lifespan
        origin <span class="punctuation">{</span>
          name
        <span class="punctuation">}</span>
      <span class="punctuation">}</span>
    <span class="punctuation">}</span>
  <span class="punctuation">}</span>
<span class="punctuation">}</span></pre></div><div class="type-system"><div id="type-highlight" class="highlight"></div><pre class="prism language-graphql"><span class="type-def"><span class="keyword">type</span> Query <span class="fields"><span class="punctuation">{</span>
  <span class="attr-name">hero</span><span class="punctuation">:</span> <span class="type-name">Character</span>
<span class="punctuation">}</span></span></span>

<span class="type-def"><span class="keyword">type</span> Character <span class="fields"><span class="punctuation">{</span>
  <span class="attr-name">name</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">friends</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="type-name">Character</span><span class="punctuation">]</span>
  <span class="attr-name">homeWorld</span><span class="punctuation">:</span> <span class="type-name">Planet</span>
  <span class="attr-name">species</span><span class="punctuation">:</span> <span class="type-name">Species</span>
<span class="punctuation">}</span></span></span>

<span class="type-def"><span class="keyword">type</span> Planet <span class="fields"><span class="punctuation">{</span>
  <span class="attr-name">name</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">climate</span><span class="punctuation">:</span> <span class="type-name">String</span>
<span class="punctuation">}</span></span></span>

<span class="type-def"><span class="keyword">type</span> Species <span class="fields"><span class="punctuation">{</span>
  <span class="attr-name">name</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">lifespan</span><span class="punctuation">:</span> <span class="type-name">Int</span>
  <span class="attr-name">origin</span><span class="punctuation">:</span> <span class="type-name">Planet</span>
<span class="punctuation">}</span></span></span></pre></div><script>(function(){
        var typeHighlight = document.getElementById('type-highlight');
        var queryHighlight = document.getElementById('query-highlight');
        var line = 0;
        var typeLines  = [2,6,7,6,8,13,14, 9,18,19,20,13];
        var queryLines = [2,3,4,5,6, 7, 8,10,11,12,13,14];
        highlightLine();
        function highlightLine() {
          typeHighlight.style.top = (17 * typeLines[line] - 9) + 'px';
          queryHighlight.style.top = (17 * queryLines[line] - 9) + 'px';
          line = (line + 1) % typeLines.length;
          setTimeout(highlightLine, 800 + Math.random() * 200);
        }
      })()</script></div></section><div class="darkWash"><section class="point4" id="powerful-tools"><div class="prose"><h2>강력한 개발자 도구를<br/>사용해보세요</h2><p>이제 편집기를 벗어나지 않고도 API에서 요청할 수 있는 데이터를 정확히 파악하고, 쿼리를 보내기 전에 잠재적인 문제를 표시해주며, 향상된 코드 인텔리전스를 활용할 수 있습니다. GraphQL을 사용하면 API의 타입 시스템을 활용하여 <a href="https://github.com/graphql/graphiql" target="_blank">Graph<em>i</em>QL</a>과 같은 강력한 도구를 쉽게 만들 수 있습니다.</p></div><div class="graphiqlVid">
        <video autoplay loop playsinline>
          <source src="/img/graphiql.mp4?x" type="video/mp4" />
        </video>
      </div></section></div><div class="grayWash"><section class="point5" id="without-versions"><div class="prose"><h2>버전 없이 API를<br/> 진화시키세요</h2><p>기존 쿼리에 영향을 주지 않고 GraphQL API에 새로운 필드와 타입을 추가하세요. 오래된 필드는 더이상 사용되지 않도록 도구에서 숨길 수 있습니다. 진화하는 단일 버전을 사용함으로써 GraphQL API는 새로운 기능에 대한 지속적인 엑세스를 제공하고 보다 깨끗하고 유지보수가 쉬운 서버 코드를 작성하도록 도와줍니다.</p></div><div class="window type-evolution" aria-hidden="true"><div id="typeEvolveView"><div class="v1"><pre class="prism language-graphql"><span class="type-def"><span class="keyword">type</span> Film <span class="fields"><span class="punctuation">{</span>
  <span class="attr-name">title</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">episode</span><span class="punctuation">:</span> <span class="type-name">Int</span>
  <span class="attr-name">releaseDate</span><span class="punctuation">:</span> <span class="type-name">String</span>


<span class="punctuation">}</span></span></span></pre></div><div class="v2"><div class="add"></div><pre class="prism language-graphql"><span class="type-def"><span class="keyword">type</span> Film <span class="fields"><span class="punctuation">{</span>
  <span class="attr-name">title</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">episode</span><span class="punctuation">:</span> <span class="type-name">Int</span>
  <span class="attr-name">releaseDate</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">openingCrawl</span><span class="punctuation">:</span> <span class="type-name">String</span>


<span class="punctuation">}</span></span></span></pre></div><div class="v3"><div class="add"></div><pre class="prism language-graphql"><span class="type-def"><span class="keyword">type</span> Film <span class="fields"><span class="punctuation">{</span>
  <span class="attr-name">title</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">episode</span><span class="punctuation">:</span> <span class="type-name">Int</span>
  <span class="attr-name">releaseDate</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">openingCrawl</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">director</span><span class="punctuation">:</span> <span class="type-name">String</span>

<span class="punctuation">}</span></span></span></pre></div><div class="v4"><div class="add"></div><div class="add"></div><div class="add"></div><div class="add"></div><div class="add"></div><div class="add"></div><div class="remove"></div><pre class="prism language-graphql"><span class="type-def"><span class="keyword">type</span> Film <span class="fields"><span class="punctuation">{</span>
  <span class="attr-name">title</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">episode</span><span class="punctuation">:</span> <span class="type-name">Int</span>
  <span class="attr-name">releaseDate</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">openingCrawl</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">director</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">directedBy</span><span class="punctuation">:</span> <span class="type-name">Person</span>
<span class="punctuation">}</span></span></span>

<span class="type-def"><span class="keyword">type</span> Person <span class="fields"><span class="punctuation">{</span>
  <span class="attr-name">name</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">directed</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="type-name">Film</span><span class="punctuation">]</span>
  <span class="attr-name">actedIn</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="type-name">Film</span><span class="punctuation">]</span>
<span class="punctuation">}</span></span></span></pre></div><div class="v5"><div class="add"></div><pre class="prism language-graphql"><span class="type-def"><span class="keyword">type</span> Film <span class="fields"><span class="punctuation">{</span>
  <span class="attr-name">title</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">episode</span><span class="punctuation">:</span> <span class="type-name">Int</span>
  <span class="attr-name">releaseDate</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">openingCrawl</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">director</span><span class="punctuation">:</span> <span class="type-name">String</span> <span class="directive"><span class="function">@deprecated</span></span>
  <span class="attr-name">directedBy</span><span class="punctuation">:</span> <span class="type-name">Person</span>
<span class="punctuation">}</span></span></span>

<span class="type-def"><span class="keyword">type</span> Person <span class="fields"><span class="punctuation">{</span>
  <span class="attr-name">name</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">directed</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="type-name">Film</span><span class="punctuation">]</span>
  <span class="attr-name">actedIn</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="type-name">Film</span><span class="punctuation">]</span>
<span class="punctuation">}</span></span></span></pre></div></div><script>(function(){
          var i = 0;
          var inView = document.getElementById('typeEvolveView');
          inView.className = 'step' + i;
          setInterval(function () {
            i = (i + 1) % 7;
            inView.className = 'step' + i;
          }, 2200);
        })()</script></div></section></div><section class="point6" id="bring-your-own-code"><div class="prose"><h2>기존 데이터와<br/>코드를 사용하세요</h2><p>GraphQL은 특정 데이터베이스에 제한받지 않고 전체 애플리케이션에 걸쳐 균일한 API를 생성합니다. 다양한 언어로 제공되는 GraphQL 엔진으로 기존 데이터 및 코드를 활용하는 GraphQL API를 작성해보세요. 타입 시스템의 각 필드에 대한 함수를 제공하고 GraphQL은 이를 최적, 동시적으로 호출합니다.</p></div><div class="window leverage-code" aria-hidden="true"><div id="leverageCodeView"><pre class="prism language-graphql"><span class="type-def"><span class="keyword">type</span> Character <span class="fields"><span class="punctuation">{</span>
  <span class="attr-name">name</span><span class="punctuation">:</span> <span class="type-name">String</span>
  <span class="attr-name">homeWorld</span><span class="punctuation">:</span> <span class="type-name">Planet</span>
  <span class="attr-name">friends</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="type-name">Character</span><span class="punctuation">]</span>
<span class="punctuation">}</span></span></span></pre><pre class="prism language-undefined"><span spellcheck="true" class="comment">// type Character {</span>
<span class="keyword">class</span> <span class="class-name">Character</span> <span class="punctuation">{</span>
  <span spellcheck="true" class="comment">// name: String</span>
  <span class="function">getName</span><span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_name
  <span class="punctuation">}</span>

  <span spellcheck="true" class="comment">// homeWorld: Planet</span>
  <span class="function">getHomeWorld</span><span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> <span class="function">fetchHomeworld</span><span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">.</span>_homeworldID<span class="punctuation">)</span>
  <span class="punctuation">}</span>

  <span spellcheck="true" class="comment">// friends: [Character]</span>
  <span class="function">getFriends</span><span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_friendIDs<span class="punctuation">.</span><span class="function">map</span><span class="punctuation">(</span>fetchCharacter<span class="punctuation">)</span>
  <span class="punctuation">}</span>
<span class="punctuation">}</span></pre><pre class="prism language-python"># type Character <span class="punctuation">{</span>
<span class="keyword">class</span> <span class="class-name">Character</span><span class="punctuation">:</span>
  # name<span class="punctuation">:</span> String
  def <span class="function">name</span><span class="punctuation">(</span>self<span class="punctuation">)</span><span class="punctuation">:</span>
    <span class="keyword">return</span> self<span class="punctuation">.</span>_name

  # homeWorld<span class="punctuation">:</span> Planet
  def <span class="function">homeWorld</span><span class="punctuation">(</span>self<span class="punctuation">)</span><span class="punctuation">:</span>
    <span class="keyword">return</span> <span class="function">fetchHomeworld</span><span class="punctuation">(</span>self<span class="punctuation">.</span>_homeworldID<span class="punctuation">)</span>

  # friends<span class="punctuation">:</span> <span class="punctuation">[</span>Character<span class="punctuation">]</span>
  def <span class="function">friends</span><span class="punctuation">(</span>self<span class="punctuation">)</span><span class="punctuation">:</span>
    <span class="keyword">return</span> <span class="function">map</span><span class="punctuation">(</span>fetchCharacter<span class="punctuation">,</span> self<span class="punctuation">.</span>_friendIDs<span class="punctuation">)</span>
</pre><pre class="prism language-undefined"><span spellcheck="true" class="comment">// type Character {</span>
<span class="keyword">public</span> <span class="keyword">class</span> <span class="class-name">Character</span> <span class="punctuation">{</span>
  <span spellcheck="true" class="comment">// name: String</span>
  <span class="keyword">public</span> String Name <span class="punctuation">{</span> <span class="keyword">get</span><span class="punctuation">;</span> <span class="punctuation">}</span>

  <span spellcheck="true" class="comment">// homeWorld: Planet</span>
  <span class="keyword">public</span> <span class="keyword">async</span> Task<span class="operator">&lt;</span>Planet<span class="operator">&gt;</span> <span class="function">GetHomeWorldAsync</span><span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> <span class="keyword">await</span> <span class="function">FetchHomeworldAsync</span><span class="punctuation">(</span>_HomeworldID<span class="punctuation">)</span><span class="punctuation">;</span>
  <span class="punctuation">}</span>

  <span spellcheck="true" class="comment">// friends: [Character]</span>
  <span class="keyword">public</span> <span class="keyword">async</span> IEnumerable<span class="operator">&lt;</span>Task<span class="operator">&lt;</span>Character<span class="operator">&gt;</span><span class="operator">&gt;</span> <span class="function">GetFriendsAsync</span><span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> _FriendIDs<span class="punctuation">.</span><span class="function">Select</span><span class="punctuation">(</span>FetchCharacterAsync<span class="punctuation">)</span><span class="punctuation">;</span>
  <span class="punctuation">}</span>
<span class="punctuation">}</span></pre></div><script>(function(){
          var i = 0;
          var inView = document.getElementById('leverageCodeView');
          var delayBefore = [ 800, 1800, 1200, 3000, 3000, 3000 ];
          function step() {
            inView.className = 'step' + i;
            i = (i + 1) % 6;
            setTimeout(step, delayBefore[i]);
          }
          step();
        })()</script></div></section><section class="powered-by" id="whos-using"><div class="prose"><h2>GraphQL을 사용하는 회사</h2><p>Facebook의 모바일 앱은 2012년부터 GraphQL로 제공되었습니다. GraphQL 명세는 2015년부터 제공되었고, 현재 다양한 환경에서 사용할 수 있으며 모든 규모의 팀에서 사용됩니다.</p></div><div class="logos"><a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer"><img src="/users/logos/facebook.png" title="Facebook"/></a><a href="https://developer.github.com/v4/" target="_blank" rel="noopener noreferrer"><img src="/users/logos/github.png" title="GitHub" class="round"/></a><a href="https://www.pinterest.com/" target="_blank" rel="noopener noreferrer"><img src="/users/logos/pinterest.png" title="Pinterest" class="round"/></a><a href="https://www.intuit.com/" target="_blank" rel="noopener noreferrer"><img src="/users/logos/intuit.png" title="Intuit"/></a><a href="https://www.coursera.org/" target="_blank" rel="noopener noreferrer"><img src="/users/logos/coursera.png" title="Coursera"/></a><a href="https://www.shopify.com/" target="_blank" rel="noopener noreferrer"><img src="/users/logos/shopify.png" title="Shopify" class="round"/></a></div><a class="button" href="/users/">GraphQL을 사용하는 회사들</a></section><footer><section class="sitemap"><a href="/" class="nav-home"></a><div><h5><a href="/learn/">배우기</a></h5><a href="/learn/">소개</a><a href="/learn/queries/">쿼리 언어</a><a href="/learn/schema/">타입 시스템</a><a href="/learn/execution/">실행</a><a href="/learn/best-practices/">모범 사례</a></div><div><h5><a href="/code">코드</a></h5><a href="/code/#server-libraries">서버</a><a href="/code/#graphql-clients">클라이언트</a><a href="/code/#tools">도구</a></div><div><h5><a href="/community">커뮤니티</a></h5><a href="/community/upcoming-events/">이벤트</a><a href="http://stackoverflow.com/questions/tagged/graphql" target="_blank" rel="noopener noreferrer">스택 오버플로우</a><a href="https://www.facebook.com/groups/graphql.community/" target="_blank" rel="noopener noreferrer">페이스북 그룹</a><a href="https://twitter.com/GraphQL" target="_blank" rel="noopener noreferrer">트위터</a></div><div><h5>기타</h5><a href="/blog">GraphQL 팀 블로그</a><a href="http://facebook.github.io/graphql/" target="_blank" rel="noopener noreferrer">명세</a><a href="https://github.com/graphql" target="_blank" rel="noopener noreferrer">깃허브</a><a href="https://github.com/graphql/graphql.github.io/edit/source/site/index.html.js" target="_blank" rel="noopener noreferrer">이 페이지 수정 ✎</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noopener noreferrer" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright ©<span><script>document.write(new Date().getFullYear())</script> </span><noscript>2017 </noscript>Facebook Inc. The contents of this page are licensed BSD-3-Clause.</section></footer><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
        docsearch({
          apiKey: 'd103541f3e6041148aade2e746ed4d61',
          indexName: 'graphql',
          inputSelector: '#algolia-search-input'
        });
      </script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-99001722-7', 'auto');
ga('send', 'pageview');
      </script></body></html>