타입스크립트(TypeScript)는 정적 타입을 지원하고 JavaScript의 상위 집합인 프로그래밍 언어입니다. 타입스크립트의 강력한 기능을 활용하여 GraphQL 서버를 개발하는 경우, Babel과 함께 사용할 수 있습니다. 이를 통해 타입스크립트의 정적 타입 검사 및 최신 JavaScript 기능을 활용할 수 있습니다.

이번 글에서는 타입스크립트와 Babel을 함께 사용하여 GraphQL 서버를 설정하는 방법을 살펴보겠습니다.

요구 사항

• Node.js가 설치되어 있어야 합니다.

단계별 가이드

1. 프로젝트 초기화

먼저 프로젝트 폴더를 생성하고, 해당 폴더에서 다음 명령을 사용하여 package.json 파일을 생성합니다.

npm init -y

2. 필수 패키지 설치

다음 패키지들을 설치합니다.

npm install -D typescript @babel/core @babel/preset-env @babel/preset-typescript
npm install graphql express apollo-server-express

3. Babel 설정

프로젝트 루트에 .babelrc 파일을 생성하고, 다음과 같이 설정합니다.

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }],
    "@babel/preset-typescript"
  ]
}

4. 타입스크립트 설정

프로젝트 루트에 tsconfig.json 파일을 생성하고, 다음과 같이 설정합니다.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

5. GraphQL 서버 구현

다음은 GraphQL 서버를 구현하는 예시 코드입니다.

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

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

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

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}`)
);

6. 빌드 및 실행

타입스크립트 코드를 빌드하고 실행하기 위해 package.json의 scripts를 다음과 같이 설정합니다.

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

위 설정을 마치면, 다음 명령어로 서버를 실행할 수 있습니다.

npm start

결론

위 단계들을 따라하면 타입스크립트와 Babel을 함께 사용하여 GraphQL 서버를 손쉽게 설정할 수 있습니다. 이를 통해 타입 안정성과 최신 JavaScript 기능을 활용하면서 GraphQL 서버를 개발할 수 있게 됩니다.