[javascript] Webpack과 GraphQL 함께 사용하기

29 Nov 2023

javascript

Webpack은 모듈 번들러로서, 여러 개의 JavaScript 파일을 하나의 번들 파일로 만들어주는 도구입니다. GraphQL은 쿼리 언어와 런타임의 조합으로 데이터를 효율적으로 가져오는 기능을 제공하는 API입니다. 이번 글에서는 Webpack과 GraphQL을 함께 사용하는 방법에 대해 알아보겠습니다.

1. Webpack 설치하기

먼저 Webpack을 설치해야 합니다. 아래의 명령어를 사용하여 Webpack을 전역으로 설치할 수 있습니다.

npm install -g webpack

2. GraphQL 설치하기

GraphQL을 사용하기 위해 필요한 패키지들을 설치해야 합니다. 아래의 명령어를 사용하여 필요한 패키지들을 설치할 수 있습니다.

npm install graphql graphql-tools apollo-server-express

3. Webpack 설정하기

Webpack을 설정하기 위해 webpack.config.js 파일을 생성하고 다음의 내용을 추가합니다.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

위의 설정은 ./src/index.js 파일을 번들하여 bundle.js 파일로 출력하는 내용입니다. 필요에 따라 설정을 변경할 수 있습니다.

4. GraphQL 서버 설정하기

GraphQL을 사용하기 위한 서버를 설정해야 합니다. Express와 Apollo Server를 사용하여 간단한 예제 서버를 설정해보겠습니다. index.js 파일에 다음의 내용을 추가합니다.

const { ApolloServer, gql } = require('apollo-server-express');
const express = require('express');

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

const resolvers = {
  Query: {
    hello: () => 'Hello, world!',
  },
};

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

위의 설정은 /hello 필드를 가지는 Query 타입을 정의하고, hello 필드의 값을 Hello, world!로 정의하는 예제입니다. 필요에 따라 서버의 설정을 변경할 수 있습니다.

5. Webpack으로 번들링하기

Webpack을 사용하여 GraphQL 서버를 번들링해보겠습니다. 아래의 명령어를 사용하여 Webpack을 실행합니다.

webpack

위의 명령어를 실행하면 Webpack이 설정에 따라 src/index.js 파일을 번들하여 dist/bundle.js 파일을 생성합니다.

6. 서버 실행하기

번들링된 GraphQL 서버를 실행하기 위해 아래의 명령어를 실행합니다.

node dist/bundle.js

위의 명령어를 실행하면 Express 서버가 시작되고, GraphQL API가 http://localhost:4000에서 접근 가능해집니다.

위의 방법을 따라하면 Webpack과 GraphQL을 함께 사용하는 간단한 환경을 구성할 수 있습니다. 이를 기반으로 원하는 기능을 추가하고 더 복잡한 프로젝트를 개발할 수 있습니다.

참고 자료

Webpack 공식 문서: https://webpack.js.org/
GraphQL 공식 문서: https://graphql.org/
Apollo Server 공식 문서: https://www.apollographql.com/docs/apollo-server/
Express 공식 문서: https://expressjs.com/