이번에는 타입스크립트(TypeScript)와 GraphQL을 함께 사용하는 예제 프로젝트를 알아보려고 합니다. 우리는 타입스크립트로 백엔드 서버를 구축하고, GraphQL을 사용하여 데이터를 쿼리하고 뮤테이션하는 방법을 살펴볼 것입니다.
1. 타입스크립트와 GraphQL 기초
먼저, 타입스크립트와 GraphQL의 기초를 이해해야 합니다. 타입스크립트는 정적 타입을 지원하는 JavaScript의 확장된 버전이며, GraphQL은 데이터를 효율적으로 다룰 수 있는 쿼리 언어 및 런타임 시스템입니다.
2. 프로젝트 설치 및 설정
프로젝트를 시작하기 위해선, 타입스크립트와 GraphQL을 함께 사용할 수 있는 환경을 설정해야 합니다. 여기서는 Node.js와 npm을 사용하여 필요한 패키지를 설치하고, 타입스크립트와 GraphQL을 설정하는 방법을 다룰 것입니다.
npm install typescript graphql
3. 타입스크립트로 GraphQL 서버 구축
타입스크립트로 GraphQL을 사용하기 위해서는 apollo-server-express나 express-graphql과 같은 라이브러리를 활용할 수 있습니다. 서버를 구축하고 스키마를 정의하는 방법을 다음과 같이 살펴볼 수 있습니다.
예시 코드:
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}`)
);
4. GraphQL 쿼리 및 뮤테이션
타입스크립트를 사용하여 GraphQL의 쿼리와 뮤테이션을 수행하는 방법을 다룰 수 있습니다. GraphQL 쿼리를 작성하고 결과를 받아오는 예제 코드를 다음과 같이 살펴볼 수 있습니다.
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
const client = new ApolloClient({
uri: 'http://localhost:4000/graphql',
cache: new InMemoryCache()
});
client.query({
query: gql`
query {
hello
}
}
}).then(result => console.log(result));
5. 결론
타입스크립트와 GraphQL을 함께 사용하는 것은 데이터를 강력하게 타입 지정하고 효율적으로 다룰 수 있는 좋은 방법입니다. 이번 예제를 통해 타입스크립트와 GraphQL을 함께 사용하는 기초를 익힐 수 있었습니다. 더 많은 기능들을 배우고 응용하기 위해 관련 문서와 자료를 참고해보세요.