본문 바로가기

GraphQL 사용하기: REST 대안으로 GraphQL 활용

에온르 2024. 8. 8.
반응형

이 강의에서는 웹 API 설계의 혁신적인 접근 방법인 GraphQL의 기본 개념을 소개하고, 실제로 GraphQL을 사용하여 효율적인 데이터 쿼리 및 조작 방법을 배우게 됩니다. GraphQL은 Facebook에 의해 개발되었으며, RESTful API의 몇 가지 한계를 극복하는 데 중점을 둡니다.

source : Graphql

GraphQL의 핵심 개념

GraphQL은 클라이언트가 필요한 데이터의 구조를 명시적으로 요청할 수 있게 하여, 오버 페칭(필요 이상의 데이터를 받는 것)과 언더 페칭(필요한 데이터를 충분히 받지 못하는 것)을 방지합니다. 이는 애플리케이션의 성능을 개선하고, 개발 과정을 더욱 효율적으로 만듭니다.

주요 특징:

  • 강력한 타입 시스템: 모든 데이터는 스키마에 의해 정의되고 검증됩니다.
  • 단일 엔드포인트: 모든 쿼리는 단일 엔드포인트를 통해 처리됩니다.
  • 실시간 데이터: GraphQL Subscriptions을 통해 실시간으로 데이터 변경을 구독할 수 있습니다.

GraphQL 서버 설정하기

Node.js 환경에서 GraphQL 서버를 설정하는 방법을 단계별로 살펴보겠습니다. 여기서는 Apollo Server, 가장 인기 있는 GraphQL 서버 구현 중 하나를 사용합니다.

설치 및 기본 서버 설정

npm install apollo-server graphql
const { ApolloServer, gql } = require('apollo-server');

// 스키마 정의
const typeDefs = gql`
  type Query {
    hello: String
  }
`;

// 리졸버 정의
const resolvers = {
  Query: {
    hello: () => 'Hello, world!'
  }
};

// 서버 생성
const server = new ApolloServer({ typeDefs, resolvers });

// 서버 실행
server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

이 코드는 가장 간단한 GraphQL 서버를 설정하고, "Hello, world!" 문자열을 반환하는 쿼리를 제공합니다.


GraphQL 쿼리 및 뮤테이션

GraphQL의 쿼리는 데이터를 읽는 데 사용되고, 뮤테이션은 데이터를 변경할 때 사용됩니다.

쿼리 예제

query {
  hello
}

뮤테이션 예제

데이터를 생성, 수정, 삭제하는 작업을 처리합니다.

mutation {
  addMessage(content: "Hello, GraphQL!") {
    id
    content
  }
}

고급 GraphQL 기능

인터페이스와 유니온 타입

GraphQL에서 인터페이스와 유니온 타입은 다양한 객체 타입을 하나의 필드 아래에 그룹화하여, 다형성을 효과적으로 관리할 수 있게 합니다.

인터페이스 예제

interface Character {
  id: ID!
  name: String!
}

type Human implements Character {
  id: ID!
  name: String!
  height: Float
}

type Alien implements Character {
  id: ID!
  name: String!
  planet: String
}

이 인터페이스는 Character가 공통 필드를 갖도록 하며, Human과 Alien 타입이 이를 구현하도록 합니다.

유니온 타입 예제

union SearchResult = Human | Alien

type Query {
  search(name: String!): [SearchResult]
}

유니온 타입을 사용하여, 검색 결과가 Human 또는 Alien 타입의 객체 배열을 반환할 수 있습니다.


프래그먼트

프래그먼트를 사용하면 쿼리 내에서 반복되는 필드 집합을 재사용할 수 있습니다. 이는 쿼리를 더욱 간결하고 관리 가능하게 만듭니다.

fragment characterFields on Character {
  id
  name
}

query getCharacters {
  humans {
    ...characterFields
    height
  }
  aliens {
    ...characterFields
    planet
  }
}

이 예제에서는 Character 인터페이스에 정의된 필드를 프래그먼트로 묶어, 다양한 타입에 재사용하고 있습니다.


성능 최적화

GraphQL 쿼리는 매우 유연하지만, 때로는 비효율적으로 데이터를 가져오는 경우가 있습니다. 이를 해결하기 위해 캐싱과 배치 처리 같은 기술을 사용할 수 있습니다.

서버 사이드 캐싱

Apollo Server와 같은 플랫폼은 자동화된 캐싱 메커니즘을 제공하여, 반복되는 쿼리 요청의 처리 속도를 향상시킵니다.

const { InMemoryCache } = require('apollo-cache-inmemory');

const server = new ApolloServer({
  typeDefs,
  resolvers,
  cache: new InMemoryCache()
});

이 설정은 Apollo Server의 인메모리 캐시를 활용하여 결과를 저장하고, 동일한 요청이 들어왔을 때 빠르게 응답할 수 있게 해주는 세팅입니다.


결론

GraphQL은 API 설계에서의 유연성과 효율성을 극대화할 수 있는 쿼리 언어 중 하나인데요. 이번 강의에서는  GraphQL의 기본을 이해하고, 실제로 어떻게 서버를 설정하고 쿼리와 뮤테이션을 구현하는지 설명드렸습니다. 덧붙여 고급 기능과 성능 최적화 방법, 실제 GraphQL 서버를 구축해 보는 것도 간략하게 진행해보았습니다.

GraphQL을 통해 애플리케이션의 데이터 요구사항을 정확하게 충족시킬 수 있기 때문에 개발 과정에서의 복잡성을 줄일 수 있습니다. 이번에 배운 핵심 기술을 활용하여 보다 효과적인 데이터 관리 전략을 수립하고, 사용자에게 최적화된 경험을 제공할 수 있도록 개발에 써먹어보시기 바랍니다!

반응형

댓글