프로젝트

일반

사용자정보

GraphQL 이란 » 이력 » 버전 10

이름없음, 2021/06/02 00:57

1 10 이름없음
h1(ic id fr ba ie if ig hm ih ii ij hp ik il im in io ip iq ir is it iu iv iw ix ea#GraphQL개요-GraphQL이란?). *GraphQL 이란 ?*
2 1 이름없음
3 8 이름없음
* 페이스북에서 개발하여 발표한 “API를 위한 쿼리 언어”
4 1 이름없음
5 10 이름없음
p(hi hj fr hk b hl kb hm hn ho kc hp hq hr kd hs ht hu ke hv hw hx kf hy hz ib dh ea). → GraphQL은 API에 있는 데이터에 대해서 이해하기 쉬운 설명을 제공하고 클라이언트에게 필요한 것을 정확하게 요청할 수 있는 기능을 제공합니다.
6 8 이름없음
7 10 이름없음
p(hi hj fr hk b hl kb hm hn ho kc hp hq hr kd hs ht hu ke hv hw hx kf hy hz ib dh ea). *핵심 : 클라이언트가 직접 어떤데이터가 필요한지 명시할 수 있도록 합니다*
8 8 이름없음
9
h1(ic id fr ba ie if ig hm ih ii ij hp ik il im in io ip iq ir is it iu iv iw ix ea#GraphQL개요-탄생배경(RESTAPI와비교)). *탄생 배경 (REST API 와 비교)*
10
11
* *OverFetching*
12
13 10 이름없음
p(hi hj fr hk b hl kb hm hn ho kc hp hq hr kd hs ht hu ke hv hw hx kf hy hz ib dh ea). 기존의 REST API를 사용할 경우 클라이언트는 불필요한 정보를 전달받는 문제점이 있었습니다.
14 8 이름없음
15 10 이름없음
p(hi hj fr hk b hl kb hm hn ho kc hp hq hr kd hs ht hu ke hv hw hx kf hy hz ib dh ea). 가령 MemberList 중 id 만을 필요로 한다면 API를 새로 생성하거나 List를 받은 후 2차 가공을 해야하는 불필요한 작업 시간이 낭비되었습니다.
16 8 이름없음
17 10 이름없음
p(hi hj fr hk b hl kb hm hn ho kc hp hq hr kd hs ht hu ke hv hw hx kf hy hz ib dh ea). graphQL은 클라이언트 측에서 받고싶은 데이터만을 정의하므로 이러한 OverFetching 문제를 해결할 수 있습니다.
18 8 이름없음
19
* *UnderFetching*
20
21 10 이름없음
p(hi hj fr hk b hl kb hm hn ho kc hp hq hr kd hs ht hu ke hv hw hx kf hy hz ib dh ea). 다른 두개의 정보가 필요한 경우 → REST API의 경우에는 필요한 데이터를 만들기 위해 여러번의 API 호출 + 추가적인 가공 작업이 발생합니다.
22 8 이름없음
23 10 이름없음
p(hi hj fr hk b hl kb hm hn ho kc hp hq hr kd hs ht hu ke hv hw hx kf hy hz ib dh ea). 하지만 graphQL을 사용하게 된다면 쿼리문을 통해 한번의 호출로 원하는 데이터를 얻을 수 있게됩니다.
24 8 이름없음
25
* *EndPoint*
26
27 10 이름없음
p(hi hj fr hk b hl kb hm hn ho kc hp hq hr kd hs ht hu ke hv hw hx kf hy hz ib dh ea). REST API는 각 API마다 다른 엔드포인트가 존재했습니다. 만약 엔드포인트가 수십 수백개가 된다면 이를 관리하는 것은 매우 어려울 것 입니다.
28 8 이름없음
29 10 이름없음
p(hi hj fr hk b hl kb hm hn ho kc hp hq hr kd hs ht hu ke hv hw hx kf hy hz ib dh ea). graphQL은 /graphql이라는 하나의 엔드포인트로 모든 쿼리문 요청 받기 때문에 관리가 용이하며 주소가 심플해집니다.
30 8 이름없음
31 10 이름없음
p(hi hj fr hk b hl kb hm hn ho kc hp hq hr kd hs ht hu ke hv hw hx kf hy hz ib dh ea). → default endpoint : /graphql (설정파일을 사용하여 커스터마이징 가능)
32 8 이름없음
33 10 이름없음
h1(ic id fr ba ie if ig hm ih ii ij hp ik il im in io ip iq ir is it iu iv iw ix ea#GraphQL개요-GraphQl의작업종류—2가지). *GraphQl의 작업 종류 — 2가지*
34 8 이름없음
35 10 이름없음
p(hi hj fr hk b hl ju hm hn ho jv hp hq hr jw hs ht hu jx hv hw hx jy hy hz ib dh ea). *1. Query*
36 8 이름없음
37
* 데이터베이스로부터 데이터를 얻어오기 위해 사용하는 것으로
38
39 10 이름없음
p(hi hj fr hk b hl kb hm hn ho kc hp hq hr kd hs ht hu ke hv hw hx kf hy hz ib dh ea). type Query {
40 8 이름없음
41 10 이름없음
p(hi hj fr hk b hl kb hm hn ho kc hp hq hr kd hs ht hu ke hv hw hx kf hy hz ib dh ea). 쿼리명 : 반환 타입 (!)
42 8 이름없음
43 10 이름없음
p(hi hj fr hk b hl kb hm hn ho kc hp hq hr kd hs ht hu ke hv hw hx kf hy hz ib dh ea). }
44 8 이름없음
45 10 이름없음
p(hi hj fr hk b hl kb hm hn ho kc hp hq hr kd hs ht hu ke hv hw hx kf hy hz ib dh ea). 의 형태로 선언합니다. REST API에서의 POST 기능(조회)을 수행하는 쿼리라고 보면 됩니다.
46 8 이름없음
47
<pre><code class="java">
48
# 스키마 정의 - 루트 쿼리 (Root Query)
49
type Query {
50
recentPosts(count: Int, offset: Int): [Post]!
51
}
52
# FE에서의 쿼리문 요청
53
Query {
54
recentPosts(count : 1, offset : 3) {
55
title
56
text
57
    }
58
}
59
</code></pre>
60
61 10 이름없음
p(hi hj fr hk b hl kb hm hn ho kc hp hq hr kd hs ht hu ke hv hw hx kf hy hz ib dh ea). *2. Mutation*
62 8 이름없음
63
* 서버, 데이터베이스 혹은 메모리에서 데이터를 변경할 때 사용하며
64
65 10 이름없음
p(hi hj fr hk b hl kb hm hn ho kc hp hq hr kd hs ht hu ke hv hw hx kf hy hz ib dh ea). type Mutation {
66 8 이름없음
67 10 이름없음
p(hi hj fr hk b hl kb hm hn ho kc hp hq hr kd hs ht hu ke hv hw hx kf hy hz ib dh ea). 쿼리명(인자명 : 인자타입) : 반환 타입 (!)
68 1 이름없음
69 10 이름없음
p(hi hj fr hk b hl kb hm hn ho kc hp hq hr kd hs ht hu ke hv hw hx kf hy hz ib dh ea). }
70 8 이름없음
71 10 이름없음
p(hi hj fr hk b hl kb hm hn ho kc hp hq hr kd hs ht hu ke hv hw hx kf hy hz ib dh ea). 의 형태로 선언한다. CRUD 중 CRD 요청을 담당한다고 보면 됩니다.
72 8 이름없음
73
<pre><code class="java">
74
# 스키마 정의 - 루트 뮤테이션 (Root Mutation)
75
type Mutation {
76
writePost(title: String!, text: String!, category: String) : Post!
77
}
78
# FE에서의 쿼리문 요청
79
Mutation {
80
writePost(title : "title", text: "text", category  : "A") {
81
id
82
title
83
text
84
category
85
author
86
    }
87
}
88
</code></pre>
89
90 10 이름없음
@추가 자료@
91
92
"GraphQL : 시작하기. GraphQL 이란 ? | by SNPLab Inc. | Medium":https://myd-app.medium.com/graphql-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-2214f5186859
클립보드 이미지 추가 (최대 크기: 97.7 MB)