GraphQL+React로 게시판 만들기 1편 - 소개
GraphQL이란 무엇인가?
GraphQL은 데이터 요구 사항과 상호 작용을 설명하기 위해 직관적이고 유연한 구문과 시스템을 제공하여 클라이언트 응용 프로그램을 작성하도록 설계된 쿼리 언어다.
2012 년, Facebook은 안드로이드와 iOS 앱을 리팩토링하며 기존 REST API의 Query Hell을 해결하고 overfetch/underfetch 없이 효율적으로 데이터를 받아오기 위해 GraphQL을 개발했습니다.
이러한 배경 설명만으로는 감이 잘 안잡히실 것 같아서, REST API와의 비교를 통해 GraphQL의 특징이 무엇이고 어떠한 장점이 있는지 알아보도록 하겠습니다.
-
REST API Request
GET /UESR/? id,email,nickname,is_admin,activities_count,(fields[activities]=id,type,private,who,action,target,created_at,notification),(fields[avatar]=name,url)
-
GraphQL Request
query($id: Int!) {user(id: $id) { id nickname is_admin activities_count activities { rows { id type private who { id nickname } action target { __typename } created_at notification { id confirmed count } } } } avatar { name url } }} -
Response
{
"data": {
"user": {
"id": 1,
"nickname": "흰소",
"isAdmin": true,
"activities_count": 3,
"activities": {
"rows": [
{
"id": 7,
"type": "ATTACH_USER_ROLE",
"private": true,
"who": {
"id": 1,
"nickname": "흰소"
},
"action": "ATTACH",
"target": {
"__typename": "Role"
},
"created_at": "Fri Feb 02 2018 04:37:56 GMT+0000",
"notification": {
"id": 1,
"confirmed": true,
"count": 1
}
},
{
"id": 2,
"type": "ATTACH_USER_FILE",
"private": false,
"who": null,
"action": "ATTACH",
"target": {
"__typename": "File"
},
"created_at": "Fri Feb 02 2018 04:31:52 GMT+0000",
"notification": null
},
{
"id": 1,
"type": "CREATE_USER",
"private": false,
"who": null,
"action": "CREATE",
"target": {
"__typename": "User"
},
"created_at": "Fri Feb 02 2018 04:31:52 GMT+0000",
"notification": null
}
]
},
"avatar": {
"name": "elliot",
"url": "http://static.codeflow.study/AdfOuL7C0Gar8ba58wZo28CxQ7GR0wESYssxrpqx.jpeg"
}
}
}
}
위에서 보듯이 단순히 유저의 정보를 가져오는 request임에도 REST API의 경우 알아보기 매우 힘든 긴 구문을 사용할 수밖에 없습니다. 만약 서비스의 규모가 커져 페이스북의 뉴스피드처럼 한 번에 수많은 데이터를 가져와야 한다면… end point가 폭발적으로 늘어나 사실상 모든 end point를 추적하는 것이 불가능해질 것입니다.
반면, GraphQL의 경우에는 하나의 end point만 존재하기 때문에 한 눈에 보기에도 깔끔하게 클라이언트에서 원하는 데이터를 제어할 수 있으며, 정확히 어떤 데이터를 가져올 지 쉽게 예측할 수 있습니다.
다시 말해, REST API는 resource를 기준으로 end point를 나누기 때문에 수많은 end point를 호출하는 방식으로 데이터를 가져온다면, GraphQL은 위에서 본 SDL(Schema Definition Language)로 정의된 관계에 따라 하나의 end point를 활용해 복잡한 데이터라도 효율적으로 가져올 수 있습니다.
GraphQL의 장점
GraphQL은 under-fetch 문제가 없다.
-
유지 보수성: 서비스 규모가 커지며 모델이 수십개가 되어도
GraphQL을 이용하면 수백 개의 end point를 만들지 않고, 간결하게 데이터를 가져올 수 있어 유지 보수가 용이합니다. -
단일 왕복 요청: 복잡한 관계를 가진 데이터를 가져올 때 발생하는
n + 1 문제를GraphQL은 단일 왕복 요청을 통해 간단히 해결합니다. -
Non over-fetching : SQL로 날쿼리를 날리는 것처럼 SDL(Schema Definition Language)을 통해 정확하게 필요한 데이터만을 요청하기 때문에 over-fetch 문제가 발생하지 않습니다.
GraphQL 시작하기
더이상 무슨 말이 필요한가?
Facebook이 사내에서만 사용하던 GraphQL의 스펙을 2015년에 공개한 이후 위와 같이 많은 회사들에서 도입하며 생태계가 계속해서 발전 중입니다.
GraphQL은 API 설계에 관한 명세이기 때문에 Apollo나 Relay 등의 구현체를 사용해 GraphQL 스펙에 맞는 코드를 작성해야 합니다. 앞으로 GraphQL+React로 게시판 만들기 시리즈에서는 Meteor Development Group이 오픈 소스로 관리 중인 Apollo 구현체를 활용해 게시판을 만들어보는 과정을 보여드리겠습니다.
그럼 다음 글에서 뵙겠습니다~ 😄