GraphQL for Dummies
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 웹 개발자, API 설계자, 프론트엔드/백엔드 엔지니어
- REST와 GraphQL의 차이를 이해하고자 하는 중급 개발자
- API 성능 최적화와 데이터 요청 효율성 개선에 관심 있는 분들
핵심 요약
- GraphQL은 클라이언트가 필요한 정확한 데이터만 요청할 수 있는 쿼리 언어로, REST의 과도한 데이터 다운로드와 다중 요청 문제를 해결
- 스키마(Schema)는 데이터 구조와 가능 연산을 명시하며,
type,query,mutation등으로 정의 - REST vs GraphQL 비교:
- REST: 다중 요청, 불필요한 데이터 전송
- GraphQL: 단일 요청, 정확한 데이터 요청 가능
- Apollo Client, Relay, Hasura 등 도구로 GraphQL을 쉽게 구현 가능
섹션별 세부 요약
1. REST의 한계와 GraphQL의 탄생
- Facebook의 모바일 앱에서 REST API의 느린 성능과 불필요한 데이터 다운로드 문제로 GraphQL 개발
- REST는 각 요청마다 별도의 API 호출이 필요하지만, GraphQL은 단일 요청으로 필요한 데이터만 전송
2. GraphQL의 핵심 개념
- 스키마(Schema) 예시:
```graphql
type User {
id: ID!
name: String!
posts: [Post!]!
}
```
- 쿼리(Query) 예시:
```graphql
query {
user(id: "123") {
name
posts {
title
likes
}
}
}
```
- 뮤테이션(Mutation) 예시:
```graphql
mutation {
createPost(title: "New Post", content: "Hello!") {
id
createdAt
}
}
```
3. REST vs GraphQL 비교
- REST:
- 4개의 네트워크 요청 필요
- 불필요한 데이터 포함
- 캐싱이 용이
- GraphQL:
- 단일 요청으로 필요한 데이터만 전송
- limit, relatedPosts 등의 파라미터로 정확한 필터링 가능
- 캐싱이 복잡해짐 (해결책: DataLoader 사용)
4. GraphQL 사용 시 고려사항
- 적용 권장 사례:
- 다중 클라이언트(모바일, 웹, 관리자 패널)가 다른 데이터 필요
- 페이지당 5개 이상의 API 호출이 필요
- 복잡한 데이터 관계(사용자 → 게시물 → 댓글 → 대댓글)
- 실시간 기능(라이브 댓글, 알림) 필요
- 적용 불가 사례:
- 단순한 CRUD 작업만 필요
- 강력한 캐싱이 필수적
- 공개 API 개발 (REST가 더 직관적)
5. GraphQL 도구 및 설정 예제
- Apollo Server로 간단한 서버 구축 예시:
```javascript
const { ApolloServer, gql } = require('apollo-server-express');
const typeDefs = gql`
type User {
id: ID!
name: String!
}
type Query {
users: [User!]!
}
`;
const resolvers = {
Query: {
users: () => [{ id: '1', name: 'John' }, { id: '2', name: 'Jane' }]
}
};
const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => console.log(Server ready at ${url}));
```
결론
- GraphQL은 정확한 데이터 요청과 실시간 기능을 필요로 하는 프로젝트에 적합
- Apollo Client나 Hasura 같은 도구를 사용해 쉽게 구현 가능
- REST보다 복잡한 경우, 단순한 API라면 REST 사용 권장
- GraphQL을 사용하기 전, 실제 문제(예: 과도한 API 호출, 복잡한 데이터 관계)가 있는지 확인