KitWorks Team Study

1. graphQL
kitworks
Team study
노별마루

2. 목차
1. graphQL 이란?
2. graphQL은 왜 탄생했는가?
3. graphQL은 왜 사용하는거야?
4. rest api 시대는 끝인건가?
5. graphQL을 알아보자
2

3. GRAPHQL 이란?
description
GraphQL은 API를 위한 query language이며
data를 정의한 Type을 이용하여 query를
수행하기 위한 SSR 이다.
또한, client에게 필요한 것을 정확하게
request할 수 있는 기능을 제공한다.
3

4. graphql는 왜 탄생했는가?
why?
점점 다양한 디바이스(핸드폰, 테블릿, tv 등등)가 나오면서 이에 따른
필요한 정보에 형태가 달랐으므로 별도로 구현.
그래서 이를 보완하고자 정보를 요청하는 쪽(client)에서 원하는 데이터
형태를 요청하고 받을 수 있게 하기 위해 query language가 만들어짐.
(facebook에서 만듬)
4

5. 그래서 graphql는 왜 사용하는거야?
why?
우리가 사용하고 있는 server api인 rest api와 비교를 해야 한다.
5
VS

6. 그래서 graphql는 왜 사용하는거야?
6
쉬운 사용성
REST API
서버와 클라이언트간
역할 분리
리소스별
엔드포인트
고정된 응답
형태
graphQL
1개의
엔드포인트
쿼리에 따른
유동적인 응답
형태
적은 http
요청 횟수
overfetching
underfetching

7. 그래서 graphql는 왜 사용하는거야?
7
REST API
/users /posts /place
/graphql
client
server
client
server
users
place
posts

8. 그래서 graphql는 왜 사용하는거야?
8
출처: https://tech.kakao.com/2019/08/01/graphql-basic/

9. 그래서 graphql는 왜 사용하는거야?
9
why?
엔드포인트가 1개이다
⇒ 잦은 http 요청이 이루어지지 않는 이점.
api 명세서가 필요없다.
⇒ 문서화가 필요없고, 스키마만 제대로 정의하면 바로 사용
⇒ front-end, back-end 개발자간의 불필요한 커뮤니케이션이 없어짐.

10. 그러면 이제 rest api시대는 끝인건가?
10
why?
graphQL의 장점만 보면 정말 대체할 법하지만, 단점도 존재한다.
서버가 부담이 적어진 만큼, 클라이언트에서 짜야할 코드량이 많다.
query(text)로만으로 처리가 힘든, 파일 작업등 복잡한 작업 처리가 힘듦
불안전한 보안성

11. GRAPHQL을 알아보자 !
11
Query & Mutation

12. GRAPHQL을 알아보자 !
12
Query & Mutation

13. GRAPHQL을 알아보자 !
13
Query & Mutation
필드
인자
별칭
프래그먼트
작업 이름
변수
지시어

14. GRAPHQL을 알아보자 !
14
Subscription
상태변화를 즉각적으로 감지하기 위해서 사용
Query, Mutation의 http방식 -> 적합 x
Subscription의 webSocket 방식 -> 적합 o

15. GRAPHQL을 알아보자 !
15
Schema & type
객체 타입과 필드
scalar
인자 Enum
list 및 non-null
interface

16. GRAPHQL을 알아보자 !
16
구현해보기 - api server
C#
GO
JAVA
Node
…
graphQL server
MySQL
postgreSQL
MongoDB
…
Sequelize ORM
prisma
SQL

17. GRAPHQL을 알아보자 !
17
구현해보기 - api client
React
Vue
Svelte
…
Apollo Client
Relay

18. Thank you
18