[typescript] 타입스크립트와 GraphQL을 함께 사용하는 개발 환경 설정 방법

GraphQL은 효율적이고 강력한 쿼리 언어입니다. 대부분의 GraphQL 서버는 Node.js 백엔드에서 작동되며, 타입스크립트는 JavaScript 언어를 기반으로 하는 강력한 타입 시스템을 제공합니다. 타입스크립트와 GraphQL을 함께 사용하여 개발하려면 다음과 같이 개발 환경을 설정해야 합니다.

1. 타입스크립트 프로젝트 초기화

먼저 타입스크립트 프로젝트를 초기화합니다.

mkdir my-graphql-app
cd my-graphql-app
npm init -y
npm install typescript
npx tsc --init

npx tsc --init 명령을 사용하여 tsconfig.json 파일을 생성하고 필요한 설정을 추가합니다.

2. GraphQL 관련 패키지 설치

GraphQL과 관련된 패키지를 설치합니다.

npm install graphql express apollo-server-express
npm install --save-dev @types/node @types/express

3. TypeScript 및 GraphQL 설정

타입스크립트와 GraphQL을 함께 사용하려면 타입스크립트에서 GraphQL 스키마를 인식할 수 있도록 해야 합니다. 또한, Express와 Apollo Server를 사용하여 GraphQL 서버를 설정해야 합니다.

index.ts

import { ApolloServer, gql } from 'apollo-server-express';
import express from 'express';

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello from GraphQL!'
  }
};

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

const app = express();
server.applyMiddleware({ app });

app.listen({ port: 4000 }, () =>
  console.log(`Server ready at http://localhost:4000${server.graphqlPath}`)
);

이제 package.json 파일에 다음과 같이 스크립트를 추가하여 타입스크립트 코드를 빌드하고 실행할 수 있습니다.

package.json

"scripts": {
  "start": "tsc && node dist/index.js"
}

결론

타입스크립트와 GraphQL을 함께 사용하는 개발 환경을 설정하는 방법에 대해 알아보았습니다. 이제 타입스크립트의 강력한 타입 시스템과 GraphQL의 유연한 데이터 쿼리 기능을 활용하여 효율적으로 개발할 수 있을 것입니다.

참고 자료: TypeScript 공식 문서, GraphQL 공식 문서