[typescript] 타입스크립트와 GraphQL을 함께 사용하는 프로젝트의 이점

15 Dec 2023

typescript

타입스크립트(TypeScript)와 GraphQL은 개발자들 사이에서 인기가 높은 기술이다. 타입스크립트는 정적 타입 시스템을 제공하여 코드의 안정성과 가독성을 향상시켜주며, GraphQL은 API 개발을 위한 강력한 쿼리 언어와 타입 시스템을 제공한다. 이 둘을 함께 사용하는 것은 프로젝트에 다양한 이점을 제공한다.

1. 타입 안정성

타입스크립트의 주요 이점 중 하나는 타입 안정성이다. GraphQL 스키마를 타입스크립트 인터페이스와 연결하면 API 쿼리에 의해 반환되는 데이터의 구조를 미리 파악할 수 있다. 이를 통해 런타임 에러를 최소화하고 유지 보수성을 향상시킬 수 있다.

interface User {
  id: number;
  name: string;
  age: number;
}

const user: User = getUserById(123);
console.log(user.name); // 타입스크립트는 name이 string임을 알기 때문에 에러를 방지할 수 있다.

2. 자동 완성 및 문서화

타입스크립트와 GraphQL을 함께 사용하면 GraphQL 스키마로부터 자동으로 타입 정의를 생성할 수 있다. 이를 통해 개발자는 쿼리와 뮤테이션을 작성할 때 자동 완성 기능을 활용할 수 있으며, 스키마에 대한 정확한 문서화를 제공받을 수 있다.

const user = await graphqlClient.query({
  query: gql`
    query GetUser($id: ID!) {
      user(id: $id) {
        id
        name
        age
      }
    }
  `,
  variables: { id: 123 },
});

console.log(user.data.user.name); // 자동 완성으로 인해 정확한 프로퍼티에 접근할 수 있다.

3. 타입 세이프한 쿼리

GraphQL 쿼리를 문자열로 작성하는 것은 오타나 잘못된 필드를 사용할 가능성이 높다. 하지만 타입스크립트로 작성한 쿼리는 컴파일 과정에서 오류를 발견할 수 있다. 이를 통해 불필요한 런타임 에러를 방지하고 안정적인 쿼리 작성을 가능케 한다.

const query = gql`
  query GetUser {
    user {
      id
      username // 오타로 작성된 프로퍼티명이 타입시스템에서 오류를 발생시킨다.
    }
  }
`;

타입스크립트와 GraphQL의 조합은 프로젝트의 안정성, 생산성, 유지 보수성을 향상시키며, 개발자들이 더욱 안정적이고 효율적으로 협업할 수 있도록 도와준다.

참고 자료: