일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- NPM
- 프론트엔드
- 자바스크립트 연결리스트
- 리액트
- leetcode
- Baekjoon
- JavaScript
- til
- Next
- next13
- 알고리즘문제풀이
- CSS
- 자바스크립트 알고리즘
- 자바스크립트
- 타입스크립트
- 자바스크립트 문제
- leetcode문제풀이
- HTML
- react
- Next.js13
- stack문제
- JS
- 자바스크립트 문제풀이
- 자바스크립트 문제 풀이
- 제로베이스
- 리액트쿼리
- 자바스크립트 알고리즘 문제
- 자바스크립트코딩테스트
- lodash
- 프로그래머스
- Today
- Total
코드노트
GraphQL 정리, RESTful API와 차이 정리 본문
GraphQL란?
GraphQL은 페이스북에서 개발한 데이터 쿼리 및 조작 언어이다.
클라이언트가 필요한 정확한 데이터를 서버에 요청할 수 있다.
RESTful API는 GET 메서드 등을 사용하여 서버에 요청하여 정해진 데이터를 받게 되지만
GraphQL을 사용하게 되면 클라이언트가 서버에서 받아야할 데이터의 구조를 명시할 수 있어 필요한 데이터만 받아 사용할 수 있게 해준다.
GraphQL은 REST의 부족한점을 보완하기 위해 나왔다.
주요 특징과 차이점을 살펴보고 상황에 맞게 사용할 수 있으니 알아보자!
GraphQL의 주요 특징 및 GraphQL과 차이점
데이터 오버페칭과 언더페칭 문제 해결
- RESTful API
REST는 각 리소스를 고유한 URL로 표현하며, HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 해당 리소스를 조작한다.
이 때문에 클라이언트가 원하는 데이터를 얻기 위해 여러 엔드포인트에 걸쳐 여러 번의 요청을 보내야 할 수 있다.
- GraphQL
GraphQL은 단일 엔드포인트에서 클라이언트가 필요한 데이터만 정확하게 요청할 수 있도록 해준다.
즉, 클라이언트는 한 번의 요청으로 필요한 모든 정보를 가져올 수 있으며, 이는 오버페칭과 언더페칭 문제를 해결해준다.
강력한 타입 시스템
- RESTful API
REST API는 타입 시스템을 명시적으로 지원하지 않는다. 따라서 개발자들은 일관된 데이터 구조를 유지하기 위해 추가적인 노력을 기울여야 한다.
- GraphQL
반면에 GraphQL은 강력한 타입 시스템을 가지고 있어 API 스키마 내에서 일관된 데이터 구조를 보장한다.
실시간 업데이트 지원
- RESTful API
REST에서 실시간 업데이트를 제공하기 위해서는 별도의 솔루션(예: WebSockets)을 도입해야 한다.
- GraphQL
반면에 GraphQL은 Subscriptions 기능을 통해 실시간 업데이트 기능을 제공한다.
- API 버전 관리 불필요
- RESTful API
REST에서 새로운 기능 추가나 변경사항이 생긴 경우, 종종 새로운 버전의 API(v2, v3 등)가 필요하게 된다.
- GraphQL
하지만 GraphQL에서는 필드 추가나 변경사항이 생겨도 기존 쿼리가 계속 동작하므로 별도의 버전 관리가 필요 없다.
- 가볍게 알아보자면 받아올 데이터를 명시하고, 클라이언트에서 필요한 데이터를 요청한다, 그리고 서버에서 예측한 데이터를 받아와서 사용할 수 있다.
GraphQL의 장점
- 프론트엔드 개발자는 백엔드 개발자가 REST API 개발을 마칠때까지 기다리지 않아도 된다.
- REST를 이용할 때 필요한 데이터를 만들기 위해서 여러 요청을 보내게 될 때 GraphQL은 한 번의 요청으로 데이터를 가져올 수 있다.
- Sechema를 작성하기 때문에 데이터가 어떻게 이루어져 있는지 알 수 있다.
- Type을 작성하기 때문에 요청과 응답에 Valid 한 데이터가 오고 갈 수 있다.
GraphQL의 단점
- 러닝커브가 생긴다.
- 백엔드에 Schema 및 Type을 정의해줘야 한다.
- REST API보다 데이터 캐싱하는게 까다롭다.
GraphQL 사용해보기
GraphQL을 사용해볼 수 있는 곳이다. 여기서 간단한 테스트 작업을 해보자.
다른 api를 사용해도 무관하지만 이 api를 사용해봤다.
기존 API 응답 값
{
"name": "Death Star",
"model": "DS-1 Orbital Battle Station",
"manufacturer": "Imperial Department of Military Research, Sienar Fleet Systems",
"cost_in_credits": "1000000000000",
"length": "120000",
"max_atmosphering_speed": "n/a",
"crew": "342,953",
"passengers": "843,342",
"cargo_capacity": "1000000000000",
"consumables": "3 years",
"hyperdrive_rating": "4.0",
"MGLT": "10",
"starship_class": "Deep Space Mobile Battlestation",
"pilots": [],
"films": [
"https://swapi.dev/api/films/1/"
],
"created": "2014-12-10T16:36:50.509000Z",
"edited": "2014-12-20T21:26:24.783000Z",
"url": "https://swapi.dev/api/starships/9/"
}
특정 값만 가져오기
- name, model만 사용하고 싶다면? 이렇게 원하는 데이터만 받아올 수 있다.
- 처음에 이야기한대로 GraphQL은 처음에 데이터가 어떻게 되어있는지 알고 있어야한다.
그에 대한 명시도 Docs -> query: Root를 보게 되면 Schema가 작성되어있는걸 볼 수 있다.
다른 API 값 한번에 들고오기
- Rest API를 사용했다면 starship, species 값을 각각 요청해서 들고와야하지만 GraphQL을 통해서 한번에 받아올 수 있다.
여러개의 특정 값 한번에 들고오기
이번 사이드 프로젝트에서도 사용해보고 싶었지만 개인 플젝에서 express를 사용해서 연습을 더 해봐야겠다.
그리고 이후에는 Apollo Server에 대해서도 블로그를 정리해봐야 겠다!
'Code note > codenote' 카테고리의 다른 글
axios interceptors 인터셉터 요청/응답 전 (0) | 2023.11.28 |
---|---|
쉬어가며.. 클린코드란? feat.멘탈모델 / 설레발 주도 개발 (1) | 2023.11.12 |
REST API vs WebSocket 차이점 정리 feat.Polling, LongPolling, Streaming, SSE (0) | 2023.08.22 |
AWS Amplify CI/CD 자동 배포 정리 (0) | 2023.08.17 |
SWR에서 Optimistic UI 사용방법 기록 (0) | 2023.08.04 |