GraphQL 이란?

아현·2일 전

Computer Science

목록 보기

63/63

GraphQL은 Facebook이 2012년에 개발하고 2015년에 오픈 소스로 공개한 쿼리 언어(Query Language) 및 API 런타임입니다.
클라이언트가 원하는 데이터만 정확히 요청하고, 서버는 그에 맞춰 응답을 제공하는 방식으로, REST API의 한계를 보완하기 위해 설계되었습니다.

GraphQL의 장점
1. 필요한 데이터만 요청 가능 → 성능 최적화
  - 클라이언트가 필요한 데이터만 가져오기 때문에 네트워크 비용 절감
2. 단일 API 엔드포인트로 유지보수 용이
  - 하나의 엔드포인트에서 모든 데이터를 처리
3. 프론트엔드 개발 효율성 증가
  - 프론트엔드 개발자가 백엔드 의존도를 줄이고 원하는 데이터를 직접 구성
4. 데이터 연관 관계 처리 용이
  - 복잡한 관계형 데이터도 한 번의 요청으로 처리 가능
GraphQL의 단점 및 고려사항
1. 캐싱 어려움
  - REST의 GET 요청 캐싱이 쉽지만, GraphQL에서는 쿼리 복잡도 때문에 캐싱이 어렵다.
2. 초기 학습 곡선
  - GraphQL 스키마 및 리졸버 설정이 익숙하지 않으면 복잡할 수 있음.
3. 과도한 요청 가능성
  - 클라이언트가 너무 많은 데이터를 요청하면 서버 부하 증가 가능
4. 보안 고려 필요
  - 클라이언트가 직접 필드를 정의하므로, 민감한 데이터를 요청하지 않도록 주의해야 함.

클라이언트 중심 데이터 요청
- 클라이언트는 필요한 데이터만 요청하고, 서버는 정확한 데이터만 반환하여 불필요한 네트워크 사용을 최소화함.
- Over-fetching(불필요한 데이터 요청)과 Under-fetching(데이터 부족)을 방지함.
- 예제
```
  {
    user(id: "123") {
      name
      email
      profilePicture
    }
  }
```
- name, email, profilePicture만 반환됨

단일 엔드포인트(Endpoint)
- REST API에서는 여러 개의 엔드포인트(/users, /products 등)를 사용하지만, GraphQL은 단일 엔드포인트(/graphql)만 사용하여 모든 요청을 처리함.
- 유지보수가 쉬워지고, 클라이언트의 요청이 유연해짐.

타입 시스템(Type System)
- GraphQL은 자체적인 스키마 언어(SDL, Schema Definition Language)를 사용하여 API의 데이터 구조를 명확하게 정의함.
- 예제
```
type User {
  id: ID!
  name: String!
  email: String!
}
```
실시간 데이터 제공(Subscriptions)
- subscription을 통해 WebSockets 등을 활용하여 실시간 데이터 업데이트 제공 가능
- 예제
```
  subscription onNewMessage {
    newMessage {
      content
      timestamp
    }
  }
```
계층형 데이터 페칭
- API 응답이 계층적 구조(Hierarchical Structure)로 구성되어 있어, 클라이언트에서 복잡한 데이터를 한 번의 요청으로 받아올 수 있음.
- 예제
```
 {
   product(id: "1") {
     name
     price
     reviews {
       rating
       comment
     }
   }
 }
 
```
  - product와 그 하위의 reviews 정보를 한 번에 가져옴.

강력한 도구 생태계
- GraphQL을 사용하면 클라이언트 및 서버에서 여러 툴을 활용하여 효율적으로 API를 관리할 수 있음.
  - 예: GraphiQL, Apollo Client, Relay 등.

스키마(Schema)
- API의 구조와 가능한 쿼리, 데이터 유형을 정의하는 중심 요소
- GraphQL 스키마는 type, query, mutation, subscription으로 구성됨.
- 예제
```
type Query {
  getUser(id: ID!): User
}

type User {
  id: ID!
  name: String!
  email: String!
}
```
쿼리(Query)
- 클라이언트가 데이터를 가져올 때 사용
- SQL의 SELECT와 유사
- 예제
```
  {
    user(id: "123") {
      name
      email
    }
  }
```

뮤테이션(Mutation)

예제


  mutation {
    createUser(name: "Alice", email: "alice@example.com") {
      id
      name
    }
  }

서브스크립션(Subscription)
- 실시간으로 데이터를 업데이트할 수 있도록 하는 기능 (WebSocket 기반)
- 예제
```
  subscription {
    onMessageAdded {
      content
      author
    }
  }
```
리졸버(Resolver)
- GraphQL 서버에서 데이터를 어떻게 가져올지를 정의하는 함수
- 예제(Express + Node.js 기반)
```
  const resolvers = {
    Query: {
      user: (_, { id }) => getUserFromDB(id),
    },
  };
```

For the sake of someone who studies computer science