요즘 RESTful API보다는 GraphQL을 선호하는 추세입니다. 그럼 왜 그래프큐엘을 선호하는지 GraphQL 정의 및 장단점 그리고 RESTful API와의 차이점에 대해서 알아보도록 하겠습니다.
GraphQL 정의 및 특징
그래프QL은 데이터 쿼리 및 조작 언어입니다. 웹 클라이언트가 서버로부터 원하는 데이터를 효율적으로 요청하고 받을 수 있는 기능을 제공하며 2015년 페이스북에서 개발되었습니다.
그래프QL이 나오기전에는 RESTful API를 사용하였는데 RESTful는 달리 클라이언트가 필요로하는 데이터의 구조를 정의할 수 있고 클라이언트가 원하는 데이터의 구조와 필드를 지정하여 단일 요청으로 원하는 정보만을 받을 수 있습니다.
또한 GraphQL 특징 중 하나는 타입 시스템을 사용하여 데이터의 구조와 관계를 정의(타입스크립트 구조)합니다. 서버는 타입과 필드를 정의하고, 클라이언트는 이를 사용하여 데이터를 쿼리하거나 변경할 수 있습니다. 이를 통해 데이터의 일관성과 안전성을 보장할 수 있다는 장점이 있습니다.
GraphQL은 다양한 데이터 소스로부터 데이터를 가져올 수 있는데. 관계형 데이터베이스, NoSQL 데이터베이스, 웹 서비스 등 다양한 백엔드 시스템과 통합이 가능하며, 클라이언트에게는 특정 데이터 소스에 종속되지 않는 유연성을 제공하며 다양한 프로그래밍 언어 및 프레임워크에서 지원되고 있으며, 개발자들에게 좀 더 직관적이고 유연한 데이터 요청 및 조작 방식을 제공하여 개발 생산성을 향상시키는 데 도움을 줍니다.
GraphQL과 RESTful API 장단점 비교
GraphQL 장점
- 효울적인 데이터 요청
필요한 데이터의 구조와 필드를 정의하여 단일 요청으로 원하는 정보만을 받을 수 있습니다. 그렇기에 RESTful API의 단점인 불필요한 데이터 수신, 데이터 부족으로 추가 요청을 해결할 수 있습니다. - 유연한 데이터 쿼리
GraphQL은 클라이언트에게 데이터 구조를 동적으로 조작할 수 있는 기능을 제공하여 클라이언트는 필요에 따라 데이터의 필드, 관계, 정렬, 필터링 등을 쿼리하거나 변경할 수 있습니다. - 단일 엔드포인트
단일 엔드포인트를 사용하므로 여러 번의 요청 없이 한 번의 요청으로 여러 데이터를 얻을 수 있고 이는 네트워크 오버헤드를 줄이고 빠른 데이터 전송을 가능하게 합니다. - 타입 시스템과 스키마
타입 시스템과 스키마를 사용하여 데이터의 구조와 관계를 명확하게 정의하고 이를 통해 개발자들은 데이터 요구 사항을 더욱 명확하게 이해하고 협업을 용이하게 할 수 있습니다.
GraphQL 단점
- 학습 곡선
ESTful API에 비해 GraphQL은 새로운 개념과 구문을 도입하기 때문에 초기에는 학습 곡선이 존재할 수 있습니다. 특히, 타입 시스템과 스키마 설계에 대한 이해가 필요합니다. - 복잡성 관리
클라이언트가 데이터 요청을 정의하기 때문에 서버 측에서 요청의 복잡성을 관리해야 하는데 잘못된 쿼리나 많은 데이터 요청으로 인한 성능 저하가 발생할 수 있습니다. - 파일 업로드의 어려움
RESTful API에 비해 파일 업로드를 처리하기에 다소 어려움이 있습니다. 파일 업로드를 위해 추가적인 작업이 필요하거나 외부 라이브러리를 사용해야 할 경우가 많습니다.
RESTful API 장점
- 간단하고 직관적인 설계
URL와 HTTP메서드를 사용하여 자원을 표현하고 조작하기 상대적으로 직관적입니다. - 많은 사용으로 표준화
웹에서 널리 사용되는 표준이기 때문에 많은 개발자들이 이미 알고 있고 사용하고 있습니다. - 캐싱과 브라우저 지원
HTTP의 캐싱 기능을 활용하고 브라우저의 히스토리와 함께 작동합니다.
RESTful API 단점
- 불필요한 데이터 수신, 데이터 부족 추가 요청
클라이언트가 필요로 하는 데이터와 서버가 제공하는 데이터의 불일치로 인해 문제 발생할 수 있습니다. - 여러 요청 필요
다양한 데이터를 한 번에 얻기 위해서는 여러번의 요청이 필요합니다. - 버전 관리의 어려움
변경이나 업데이트가 필요한 경우, 버전 관리를 위해 새로운 엔드포인트 생성하거나 버전 관리 체계를 구현해야 합니다.
GraphQL 요청받기
npm i @apollo/clientGraphQL 요청을 받으려면 가장 먼저 해당 코드를 이용해서
npm으로 apollo를 설치 해줍니다.
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'
export default function App({ Component, pageProps }) {
//그래프큐엘 세팅
const client = new ApolloClient ({
uri: "요청받을 백엔드 URI",
cache: new InMemoryCache() //컴퓨터의 메모리에다가 백엔드에서 받아온 데이터 임시로 저장해 놓기
})
// ApolloProvider로 그래프QL 이용
return (
<div>
<ApolloProvider client = {client}>
<Component {...pageProps} />
</ApolloProvider>
</div>
)
}공통으로 들어가는 app.js에 들어가서 ApolloClient, InMemoryCache, ApolloProvider를 import를 해줍니다.그 후 요청받을 백엔드 URI를 작성해주고 ApolloProvider도 선언 해주면 완료됩니다.
import { useMutation, gql } from "@apollo/client"
const mygraphqlsetting = gql`
요청할 쿼리데이터 작성
`
export default function GraphqlPage(){
const [myfunction] = useMutation(mygraphqlsetting)
const onClickSubmit = async () => {
const result = await myfunction()
console.log(result)
}
//한 줄일때는 괄호 필요 없음
return <button onClick={onClickSubmit}>GRAPHQL-API 요청하기</button>
}useMutation, gql를 @apollo/client에서 import를 해준다. 후에 gql에서 요청할 데이터 쿼리를 작성합니다. 여기서 주의해야할 점은 백틱 안에 넣어야 하며 안에 데이터가 전부 문자열 처리라 가독성이 안좋을 경우가 있습니다.
- 이런 경우에는 VSCode 플러그인 중에 GraphQL for VSCode 플러그인을 설치해주면 가독성이 해결됩니다.
이 후에는 useMutation에 gql이 들어있는 변수를 넣어주고 이벤트를 작성해주면 됩니다. useMutation는 React 애플리케이션에서 GraphQL 뮤테이션을 수행하기 위해 사용하는 Hook으로 뮤테이션은 그래프QL 서버에 데이터를 변경하거나 업데이트하는 작업을 수행하는데 사용되는 훅(Hook)입니다.
여기서 자바스크립트는 기본적으로 async 언어기 때문에 async와 await를 이용하여 sync처리를 해주어야 promise 결과값이 뜨는 것을 해결할 수 있습니다.
