-
[React] REST API와 GraphQLReactJS 2023. 11. 22. 23:12
JSON
JSON(JavaScript Object Notation)은 키-값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용한다(서버에서 클라이언트로 데이터를 전송하여 표현하려거나 반대의 경우). 백엔드에서 보통 REST API 또는 GraphQL을 활용하여 JSON 형태의 데이터를 돌려주는 API를 제공한다.
REST API 와 GraphQL
REST API는 HTTP 메서드를 사용하여 작업을 수행하는 API를 구축하기 위한 아키텍처 스타일인 반면, GraphQL은 클라이언트 사이드에서 필요한 데이터만 요청할 수 있는 API를 위한 쿼리 언어이다.
REST API란 무엇인가?
REST는 Representational State Transfer라는 용어의 약자로서 2000년도에 로이 필딩 (Roy Fielding)의 박사학위 논문에서 최초로 소개되었다. 로이 필딩은 웹(HTTP) 설계의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표했다고 한다. REST API의 구성은 크게 다음과 같이 구성되어 있다.
- 자원(RESOURCE) - URI
- 행위(Verb) - HTTP METHOD
- 표현(Representations)
REST API의 중심 규칙은 다음과 같다.
- URI는 자원을 표현해야 한다.
- 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE)로 표현한다.
예시) 기본 리소스 URL: /products
- Read (Collection) → GET /products ⇒ 상품 목록 확인
- Read (Item) → GET /products/{id} ⇒ 특정 상품 정보 확인
- Create (Collection Pattern 활용) → POST /products ⇒ 상품 추가 (JSON 정보 함께 전달)
- Update (Item) → PUT 또는 PATCH /products/{id} ⇒ 특정 상품 정보 변경 (JSON 정보 함께 전달)
- Delete (Item) → DELETE /products/{id} ⇒ 특정 상품 삭제
REST API의 특징
- 클라이언트 / 서버 구조
- 무상태성 (Stateless)
- 캐시 처리 가능 (Cacheable)
- 자체 표현 구조 (Self - descriptiveness)
- 계층화 (Layered System)
- 유니폼 인터페이스 (Uniform)
GraphQL은 왜 등장했는가?
GraphQL은 떠오르는 소셜 미디어 플랫폼의 속도 요구 사항에 대응하여 2012년에 등장했다. 개발자들은 REST와 같은 기존 API 아키텍처가 너무 길고 정형화되어 있어서 뉴스 피드를 효율적으로 생성할 수 없다고 생각했고 구체적으로 다음과 같은 문제들에 직면했다.
- 고정 구조 데이터 교환
REST API는 클라이언트 요청이 고정된 구조를 따라야 리소스를 수신할 수 있다. 이 엄격한 구조는 사용하기 쉽지만 필요한 데이터를 정확히 교환하기에 항상 가장 효율적인 수단인 것은 아니다. - 오버페칭 및 언더페칭
REST API는 항상 전체 데이터 세트를 반환한다. 예를 들어 REST API의 person 객체로부터는 그 사람의 이름, 생년월일, 주소 및 전화번호를 받게 된다. 전화번호만 있으면 이 모든 데이터를 얻을 수 있다.
마찬가지로, 개인의 전화번호와 마지막 구매 내역을 알려면 여러 개의 REST API 요청이 필요하게 된다. /person이라는 URL은 전화번호를 반환하고 /purchase라는 URL은 구매 내역을 반환한다.
소셜 미디어 개발자는 API 요청을 처리하기 위해 많은 양의 코드를 작성해야 했고, 이는 성능과 사용자 경험에 영향을 미쳤습니다. 이에 대해 GraphQL이 쿼리 기반 솔루션으로 부상할 수 있었다. 쿼리는 한 번의 API 요청 및 응답 교환에서만 정확한 데이터를 반환할 수 있기 때문이다.
* 오버페칭(Overfetching) : 오버페칭은 클라이언트가 필요로하지 않는 추가 데이터까지 서버로부터 받아오는 상황을 가리킨다.
* 언더페칭(Underfetching) : 언더페칭은 클라이언트가 필요한 데이터를 한 번의 요청으로 가져올 수 없어 여러 번의 추가 요청이 필요한 상황을 가리킨다.
REST API vs GraphQL
GraphQL이 REST API와 비교해서 가지는 차이점
- GraphQL은 보통 하나의 엔드포인트를 가진다.
- GraphQL은 요청할 때 사용하는 쿼리에 따라 다른 응답을 받을 수 있다.
- GraphQL은 원하는 데이터(response)만 받을 수 있다.
RestAPI의 경우 모든 엔드포인트를 일일이 개발하고 여러 경우의 수를 대응해야 하기에 개발 속도가 상대적으로 느리고, GraphQL의 경우에는 원칙적으로 Multipart 방식의 전송이 허용되지 않기에 이미지, 영상 등의 처리에 굉장히 약한 모습을 보인다. 그러므로 적절한 균형을 찾아 사용하는 것이 바람직하다.
'ReactJS' 카테고리의 다른 글
[React] TDD (0) 2023.11.29 [React] React의 Component와 State (2) 2023.11.23 [React] VDOM(Virtual DOM)이란? (2) 2023.11.20 [React] 리액트에서 JSX를 쓰는 이유(feat. 리액트 공식문서) (2) 2023.11.19 [React] 리액트 SEO 도전기 (0) 2023.05.07