최근 진행하고 있는 프로젝트에서 GraphQL을 통해 개발을 진행하고 있는데 오늘은 학습 내용을 정리하는 겸 React와 Apollo, GraphQL을 사용해 채팅 서비스를 구현해보려고 한다. 일단은 리액트와 Express에 대한 설정 보다는 Apollo-server와 Apollo-client, 그리고 채팅 서비스를 구현하는데 집중해서 포스트를 작성할 예정이다.
일단 이번 채팅 서비스에는 React(CRA), Apollo Server(express), TypeScript를 사용해 환경 설정부터 채팅 서비스 구현까지 정리를 하는데 GraphQL과 Apollo에 관해 집중적으로 다룰 것이다.
이번 포스트는 다음과 같이 5단계로 나누어 포스팅을 진행하려고 한다.
포스트를 작성할 때마다 링크 추가하겠습니다.
GraphQL이란?
그렇다면 GraphQL이 무었인지부터 알아보자! 다들 GraphQL을 몰라도 이름은 들어본 사람이 많을 것이다. 그도 그럴 것이 요즘 아주 핫한 API 질의어이다. 페이스북에서 개발한 언어인데 REST API를 대체해 사용할 수 있다.
GraphQL은 기존의 REST API와는 다르게 클라이언트에서 서버로 원하는 데이터를 쿼리로 작성해 원하는 데이터만 가져올 수 있다. 쿼리의 구조도 아주 직관적이기 때문에 GraphQL을 처음 접하는 사람들도 쉽게 익힐 수 있다.
그리고 GraphQL은 여러 장점도 가진다.
오버패칭(OverFetching) 최소화
오버패칭은 당장 필요한 데이터 외에 필요 없는 데이터들 까지 서버에서 받아오는 것을 뜻하는데 GraphQL은 클라이언트에서 원하는 데이터만 쿼리로 작성해 서버에서 가져올 수 있기 때문에 오버패칭 문제를 최소화 할 수 있다.
언더패칭(UnderFetching) 최소화
언더패칭은 필요한 데이터를 요청하기 위해 서브데이터를 추가적으로 요청하는 경우, 즉 서버에 여러번 요청을 해야하는 경우를 말한다. GraphQL은 한번에 여러 쿼리를 요청할 수 있기 때문에 언더패칭 문제를 최소화 할 수 있다.
물론 GraphQL이 장점만 존재하는 것은 아니고 단점도 존재한다.
File 전송 등 Text만으로 하기 힘든 내용들을 처리하기가 복잡하다.
GraphQL에서 File 전송을 할 수 없는 것은 아니지만 일반적인 GraphQL 서버에 비해 구조가 복잡해지거나 외부 서비스에 의존해야하는 문제가 발생할 수 있다.
고정된 요청과 응답만 필요한 경우 쿼리로 인해 REST API보다 요청의 크기가 커질 수 있다.
그렇기 때문에 무조건 GraphQL이 좋다! 가 아니라 REST API나 GraphQL을 상황에 맞게 사용하는 것이 중요할 것 같다.
GraphQL 쿼리 종류
간단하게 쿼리의 종류를 알아보려고 한다. 자세한 내용은 실제 채팅 서비스를 구현하면서 학습하는게 좋을 것 같아 간단한 설명만 적어놓았다.
Query
REST API의 GET메서드라고 생각하면 된다. 보통 데이터를 조회할 때 많이 사용한다.
Mutation
REST API의 POST, PUT, DELETE 등의 메서드라고 생각하면 된다. 보통 데이터를 조작할 때 많이 사용한다.
Subscription
실시간 통신을 할때 사용하는 쿼리이다. 이름 그대로 구독하는 기능을 가지고 있으며 Mutation쿼리에서 데이터를 조작할 때 그 값을 구독해 변경사항을 실시간으로 가져올 수 있다.
GraphQL 문법
그렇다면 이제 GraphQL을 사용하기 위한 문법에 대해 간략하게 알아보자! (채팅 서비스를 구현하기 위해 필요한 기초적인 수준으로 작성하려고 한다)
스칼라 타입
GraphQL의 스키마에 사용할 수 있는 기본적인 자료형은 다음과 같다.
Int: 32비트 정수형Float: 실수형String: 문자열Boolean: true | falseID: id값임을 명시적으로 표현하기 위해 사용함, 내부적으로는 String과 동일
객체, 배열 타입과 필드
여러가지 스칼라 타입을 묶어 하나의 객체 형태로 묶을 수 있는데 이를 객체 타입이라 하며 자바스크립트의 객체와 유사한 모습을 가지고 있다.
type Chat {
id: Int!
writer: String!
content: String!
}
type Query {
getChats(chatId: ID!): [Chat]!
}
다음과 같이 쿼리를 작성할 수 있는데 타입 뒤에 붙인 느낌표(!)를 붙이면 null값이 아닌 무조건 저 타입만을 허용하겠다는 의미이다. (느낌표를 붙이지 않으면 기본적으로 null값이 허용됨)
그리고 배열을 사용하기 위해서는 배열 기호([])안에 타입을 명시해주면 된다.
그리고 쿼리에 대한 매개변수를 받을 때는 다음과 같이 괄호(())기호 안에 매개변수 명과 타입을 지정해 주면 된다.
다음 포스트는 GraphQL을 사용한 React 채팅 서비스를 구현하는데 필요한 서버 환경설정에 대한 내용을 다룰 예정이다.
본 포스트는 다음 문서를 참고해 작성했습니다.