REST API 과 GraphQL API 어떤 차이가 있을까?

📚 공부하게 된 계기

이번에 프로젝트를 하다가 GraphQL을 처음 접했는데 처음엔 이게 뭔가 싶어서 공식문서와 강의들을 찾아보며 익히다가 내가 지금까지 써왔던 REST API와 비교해 보게 되었다.

먼저, 두 개를 비교하기 전에 API의 정확한 의미를 짚고 넘어가자!

🎮 API (Application Programming Interface)

API는 약자인데 이 세단어가 무슨 조합이지? 싶었다..

한국어로 풀이된 말을 보니 두 소프트웨어 구성 요소가 서로 통신할 수 있게 만드는 메커니즘이다. 라고 되어있다.

🖥️ REST API

REST API에 대해 간단하게 알아보자!

 

REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처이다. 따라서 REST API는 REST를 기반으로 서비스 API를 구현한 것이다.

REST API는 자원, 행위, 표현으로 구성되어 있는데 각각의 역할은 ⬇️

 

구성요소	내용	표현 방법
자원	자원	URI (엔드포인트)
행위	자원에 대한 행위	HTTP 요청 메서드
표현	자원에 대한 구체적 내용	페이로드

 

1. URI

URI는 리소스를 표현하는 곳이며 동사보다는 명사를 사용한다.

 

# bad
GET /getTodos/1
GET / todos/show/1

# good
GET /todos/1

 

2. HTTP 요청 메서드

HTTP 요청 메서드는 클라이언트가 서버에게 요청의 종류와 목적을 알리는 방법이다.

주로 5가지 요청 메서드를 사용하여 CRUD를 구현한다.

 

HTTP 요청 메서드	종류	목적	페이로드
GET	index / retrieve	모든/특정 리소스 취득	X
POST	create	리소스 생성	O
PUT	replace	리소스의 전체 교체	O
PATCH	modify	리소스의 일부 수정	O
DELETE	delete	모든/특정 리소스 삭제	X

 

주의할 점은 리소스에 대한 행위는 HTTP 메서드를 통해 표현하며 URI에 표현하지 않는 것이다.

검색이나 필터를 처리할 때는 query parameter를 이용하는 것이 좋다.

 

# bad
/getTopRatedMovies
/findMoviesFromThisYear

# good
/movies?min_rating=9
/movies?release_date=2022

 

이렇게 내가 자주 썼던 REST API에 대해 간단하게 정리해 봤다. 

🧞‍♀️ GraphQL API

앞서 REST API에 대해 알아보았고 잘 쓰고 있는데 왜 많은 기업들은 GraphQL을 선택했을까? 생각이 들었다.

먼저 GraphQL은 API를 위한 쿼리 언어이다.

REST API의 어떤 점을 개선하고자 페이스북은 GraphQL로 만들었을까란 생각이 들어 공식 홈페이지를 탐구해 보았다.

이게 홈페이지를 딱 들어가자마자 나오는 페이지이다.

 

 

GraphQL이 개선하고자 하는 것들이 명확하게 보인다.

1. 단 하나의 endpoint

REST API는 URI, HTTP 요청 메서드를 통해 데이터를 주고받기에 endponit가 여러 개 존재하는데,

GraphQL은 단 하나의 endpoint가 존재한다. 하나의 endpoint이지만 사용자가 다양한 쿼리 조합을 통해 원하는 데이터만 추출할 수 있다. 아래 그림처럼 여러 번의 네트워크 호출을 할 필요 없이 한 번의 네트워크 호출로 처리할 수 있다.

 

 

출처 : https://www.apollographql.com/blog/graphql/basics/graphql-vs-rest/

2. Overfetching

 

예를 들어 사용자의 데이터를 조회하는 user API가 있다고 가정해 보자.

이때 사용자 번호 1에 해당하는 데이터를 조회하면 아래와 같은 형태로 응답 데이터를 확인할 수 있다.

 

REST API
GET /user/1/

response body 
{
 "user_no": 1,
 "user_name": "test",
 "usere_grade": "VVIP",
 "zip": "11053",
 "last_login_timestamp": "2019-08-08 12:11:44",
 ...
}

 

여기서 클라이언트는 유저의 이름만 필요한 상황임에도 유저 이름만 반환하는 API가 없다면 /user/1/ API를 호출한 다음 user_name을 가져와 사용해야 한다. 이때 사용하지 않는 데이터도 함께 받게 되는데 이를 Overfetching이라 한다.

하지만 GraphQL을 사용하면 API에 쿼리를 보내고 필요한 것만 얻을 수 있다.

 

GraphQL API

query {
 user(user_no: 1) {
 user_name
 }
}

3. Underfetching

 

쇼핑몰 서비스의 경우 로그인한 사용자의 장바구니의 정보를 보여준다고 가정하면 REST API는 여러 URL에서 데이터를 받아와야 하는 번거로움이 있다. 이렇게 필요한 데이터보다 적은 데이터를 fetch 하는 것을 Underfetching이라 하는데 GraphQL API는 앱에 필요한 모든 데이터를 단일 request로 가져오기 때문에 느린 모바일 네트워크 연결에서도 빠르게 수행할 수 있다.

 

REST API

/user/1/
/cart/

 

필요한 정보를 얻기 위해서 2번의 API 호출을 해야 하지만(2번 이상을 요청할 수도 있다) GraphQL을 사용하여 해결할 수 있다.

 

GraphQL API

query{
	cart{
		product_name
		price
		}
	user(user_id:1){
		user_name
		}
}

마치며

GraphQL을 많이 써보진 않았지만 REST API의 불편했던 점을 긁어주는 것 같았다.

하지만 GraphQL 이 무조건 옳다는 것은 아니며 서비스별로 장단점을 판단하여 맞는 방식을 선택하는 것이 중요할 것 같다.

---

참고

 

모던 자바스크립트 Deep Dive

https://graphql-kr.github.io/

https://nomadcoders.co/react-graphql-for-beginners

https://tech.kakao.com/2019/08/01/graphql-basic/

https://brownbears.tistory.com/450