문득 프론트엔드 모집공고를 보다가..
[우대사항]
- GraphQL 경험이 있으신 분
를 보았다.
GraphQL..? GraphQL이 뭘까? 하다가 작성하게 된 오늘의 포스팅! (두둥-)
오늘은 GraphQL에 대해 알아보고, 자주 비교되는 REST API 와도 차이점을 알아보겠다!!!
1. 그래서.. GraphQL이 뭔데? 🧐
GraphQL은 페이스북에서 만든 쿼리 언어입니다. React를 만든 곳에서 만들었으니 호환성도 좋겠죠?
GraphQL은 데이터 쿼리 언어이자, API용 서버에서 작동하는 프로그램입니다.
GraphQL은 SQL과 마찬가지로 "쿼리 언어" 이다!
둘의 차이점이라 하면
SQL은 데이터베이스 시스템에서 저장된 데이터를 효율적으로 가져오는 것이 목적이고,
GQL은 웹 클라이언트가 데이터를 서버로부터 효율적으로 가져오는 것이 목적입니다.
즉, SQL은 주로 백엔드 시스템에서 작성하고 호출하는 반면, GQL은 주로 클라이언트 시스템에서 작성하고 호출합니다. 둘은 목적성이 완죤 다르고 실전에서 쓰이는 방식의 차이도 매우 큽니다.
프론트도 쿼리짤 수 있다구요! (프론트 특, 발끈함;;)
GraphQL은 클라이언트가 요청한 데이터를 정확하게 제공하는 것을 최.우.선 순위로 지정합니다.
그럼 정확하게 제공하지.. 어떻게 제공하길래..?
페이스북은 복잡한 어플리케이션의 변화의 요구사항을 충족하고, REST API의 유연성 문제를 해결하기 위해서 2015년에 GraphQL을 발표했습니다!
기존 REST API의 명확한 한계점이 존재하기 때문이죠.
2. REST API의 한계점 😓
그냥 만들어진 REST API 잘 사용하면 되지.. 왜 페이스북 팀은 GraphQL을 만들었을까요? RESTful과는 어떤 차이점이 존재할까요?🤔
GraphQL이 REST API 와의 차이점은 크게 3가지가 있습니다.
- GraphQL은 보통 하나의 Endpoint를 가진다.
- 요청할 때 사용하는 쿼리에 따라 다른 응답을 받을 수 있다.
- GraphQL은 원하는 데이터만을 response 받을 수 있다.
차근차근 위의 내용에 대해 자세히 알아보자.
1. GraphQL은 보통 하나의 Endpoint를 가진다.
REST API는 보통 여러 Endpoint를 가지며 각각의 Endpoint가 동일한 응답을 반환합니다.
하지만, GraphQL은 보통 하나의 Endpoint만을 사용하며, 요청하는 쿼리에 따라 다른 응답을 반환하는 방식입니다!
SSAFY 서울 캠퍼스 내 반, 학생들의 데이터를 받아오는 예시를 들어보자면...
REST API
→ {baseURL}/class
→ {baseURL}/class/{반 index}
→ {baseURL}/class/{반 index}/students
→ {baseURL}/class/{반 index}/students/{학생 index}
GraphQL
→ {baseURL}/graphql
REST API의 경우 반에 속해 있는 데이터를 가져오는 데에 응답마다 다양한 Endpoint를 가지게 됩니다.
하지만 GraphQL은 하나의 Endpoint에 다른 쿼리로 요청함으로써 다른 응답을 받을 수 있습니다.
서비스가 커져감에 따라 관리할 포인트들이 많이 줄어드니까 클라이언트와 개발자 모두에게 부담이 줄어들겠죠?😋
2. 요청할 때 사용하는 쿼리에 따라 다른 응답을 받을 수 있다.
하나의 Endpoint에 클라이언트가 원하는 데이터 값만 쿼리문을 작성해서 호출 받을 수 있습니다!
예를 들어, 스터디장 ㅂㄷㅅ 씨의 정보만 빼오고 싶다면...
요청 쿼리
query{
user(user_no:1){
user_name
}
}반환 데이터
{
"data": {
"user": {
"user_name": "ParkDasom",
}
}
}
위와 같이 쿼리문을 짜서 원하는 반환값만 받을 수 있답니다.
3. GraphQL은 원하는 데이터만을 response 받을 수 있다.
프론트 여러분들.. 이런적 없으셨나요...
// REST API request
GET, https://swapi.dev/api/people/1
// REST API response
{
"name": "Park Dasom",
"height": 160,
"mass": 0,
"hair_color": "black",
"skin_color": "yellow",
"eye_color": "brown",
"birth_year": "1995",
"gender": "female",
"homeworld": "http://swapi.dev/api/planets/1/",
"films": ["http://swapi.dev/api/films/1/", "http://swapi.dev/api/films/2/", "http://swapi.dev/api/films/3/", "http://swapi.dev/api/films/6/"],
"species": [],
"vehicles": ["http://swapi.dev/api/vehicles/14/", "http://swapi.dev/api/vehicles/30/"],
"starships": ["http://swapi.dev/api/starships/12/", "http://swapi.dev/api/starships/22/"],
"created": "2014-12-09T13:50:51.644000Z",
"edited": "2014-12-20T21:17:56.891000Z",
"url": "http://swapi.dev/api/people/1/"
}
나는 분명... 데이터 3개만 있으면 되는데... 원치도 않은 데이터가 무더기로 들어와서 가공해서 써야했던 지난 날들....
GraphQL이 해결해드립니다! 😎
요청 쿼리
query {
person(personID: 1) {
name
height
mass
}
}반환 데이터
{
"data": {
"person": {
"name": "Park Dasom",
"height": 160,
"mass": 0
}
}
}(요정은 무게 안 나가🧚♂️)
REST API로는 3개의 데이터를 가져오기 위해 13개의 불필요한 데이터까지 함께 가져와야 했지만, GraphQL은 클라이언트에서 필요한대로 쿼리문을 작성해서 원하는 데이터 값만을 가져올 수 있습니다!
(내 지나간 세월이여..🥺)
그렇기 때문에, GraphQL을 사용하면
- HTTP 요청 횟수를 줄일 수 있고,
- HTTP 응답 사이즈를 줄일 수 있고,
- 프론트와 백 개발자의 부담도 줄일 수 있다!
즉, GraphQL을 사용하면 REST API와 다르게 over-fetching 과 under-fetching 문제를 해결할 수 있습니다
- Under-fetching : 원하는 데이터 값이 부족해 여러 번 fetching 해야하는 것
3. 그렇다면 GraphQL은 항상 옳은가?
정답은 "NO" 입니다. 🙅♀️
만약 고정된 요청과 응답만 필요할 때에는 GraphQL이 부담이 될 수 있습니다.
항상 같은 값만 request하고 같은 값만 response하는데.. 굳이.. 쿼리문을...?
그렇기 때문에, 고정된 요청과 응답이 반복될 때에는 오히려 REST API보다 커질 수 있습니다.
또한, 캐싱이 REST보다 복잡하고, 러닝커브가 (비교적) 크다는 단점이 존재합니다.
4. 결론💥
기존 불필요한 데이터의 fetching이 많아짐에 따라 (혹은 부족함에 따라) 개발된 것이 GraphQL 이었지만......
GraphQL이 완벽하게 REST API를 대체할 수는 없습니다.
그렇기 때문에, 서비스의 특성에 따라 REST 와 GraphQL 중 맞는 것을 고르는 것이 바람직하답니다! 🌸🤗🌸
감사합니다(꾸벅)
[참고 블로그]
https://tech.kakao.com/2019/08/01/graphql-basic/
https://www.redhat.com/ko/topics/api/what-is-graphql
'Front-end' 카테고리의 다른 글
| [Frontend] Javascript SDK란? (API와의 차이점) (0) | 2023.09.06 |
|---|---|
| [FE] 모노레포(Monorepo) 전략에 대해 알아보자 (0) | 2023.08.16 |
