GraphQL Subscriptions를 활용한 자바스크립트 실시간 주식 시세 추적 애플리케이션 개발

10 Nov 2023

javascript

소개

이번 글에서는 GraphQL Subscriptions를 활용하여 자바스크립트를 사용하여 실시간 주식 시세를 추적하는 애플리케이션을 개발하는 방법에 대해 알아보겠습니다. GraphQL Subscriptions은 GraphQL의 기능 중 하나로, 실시간으로 데이터를 구독하고 업데이트를 받을 수 있게 해줍니다. 이를 활용하여 실시간 주식 시세를 추적하는 동적인 애플리케이션을 만들 수 있습니다.

개발 환경 설정

GraphQL Subscriptions 라이브러리 설치

먼저, GraphQL Subscriptions를 사용하기 위해 필요한 라이브러리를 설치해야 합니다. 다음 명령어를 사용하여 graphql-subscriptions 패키지를 설치합니다.

npm install graphql-subscriptions

주식 시세 API 사용

주식 시세를 추적하기 위해 실제로 데이터를 제공하는 API가 필요합니다. 주식 시세를 제공하는 API 중에서 사용할 API를 선택하고 API 키를 발급받아야 합니다. 이를 통해 주식 시세를 실시간으로 업데이트할 수 있습니다.

GraphQL 서버 설정

GraphQL Subscriptions를 사용하기 위해 GraphQL 서버를 설정해야 합니다. 여러가지 방법이 있지만, Apollo Server를 사용하여 설정하는 방법을 알아보도록 하겠습니다. 먼저, apollo-server 패키지를 설치합니다.

npm install apollo-server

그리고 다음 코드를 사용하여 GraphQL 서버를 설정합니다.

const { ApolloServer, gql } = require('apollo-server');
const { PubSub } = require('graphql-subscriptions');

const pubsub = new PubSub();

const typeDefs = gql`
  type StockPrice {
    symbol: String!
    price: Float!
  }

  type Query {
    stockPrices: [StockPrice]
  }

  type Subscription {
    stockPriceUpdated: StockPrice
  }
`;

const stockPrices = [
  { symbol: 'AAPL', price: 150.50 },
  { symbol: 'GOOG', price: 2500.00 },
];

const resolvers = {
  Query: {
    stockPrices: () => stockPrices,
  },
  Subscription: {
    stockPriceUpdated: {
      resolve: (Payload) => Payload,
      subscribe: () => pubsub.asyncIterator(['STOCK_PRICE_UPDATED']),
    },
  },
};

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

server.listen().then(({ url }) => {
  console.log(`Server started at ${url}`);
});

위 코드에서는 typeDefs 변수에 GraphQL 스키마를 정의하고, stockPrices 배열에 초기 주식 시세 데이터를 저장합니다. resolvers 변수에는 쿼리와 서브스크립션을 처리하는 로직을 정의합니다. pubsub 객체는 PubSub 클래스의 인스턴스로, 실시간 업데이트를 위해 사용됩니다.

클라이언트 애플리케이션 개발

클라이언트 애플리케이션은 GraphQL Subscriptions를 활용하여 주식 시세를 실시간으로 추적하는 기능을 개발해야 합니다. 클라이언트 애플리케이션을 개발하기 위해서는 GraphQL 클라이언트 라이브러리를 사용해야 합니다. 예를 들어, Apollo Client를 사용해보도록 하겠습니다.

먼저, apollo-client, react-apollo, subscriptions-transport-ws 패키지를 설치합니다.

npm install apollo-client react-apollo subscriptions-transport-ws

그리고 다음 코드를 사용하여 클라이언트 애플리케이션을 설정합니다.

import React from 'react';
import { ApolloProvider, ApolloClient, createHttpLink, InMemoryCache, split } from '@apollo/client';
import { getMainDefinition } from '@apollo/client/utilities';
import { ApolloLink } from 'apollo-link';
import { WebSocketLink } from 'apollo-link-ws';
import { SubscriptionClient } from 'subscriptions-transport-ws';

const httpLink = createHttpLink({
  uri: 'http://localhost:4000/graphql',
});

const wsLink = new WebSocketLink(new SubscriptionClient('ws://localhost:4000/graphql', {
  reconnect: true,
}));

const link = ApolloLink.split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink,
);

const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
});

function App() {
  return (
    <ApolloProvider client={client}>
      {/* TODO: 애플리케이션 UI 개발 */}
    </ApolloProvider>
  );
}

export default App;

위 코드에서는 ApolloClient 객체를 생성하여 GraphQL 서버의 엔드포인트 URL과 WebSocket 연결을 설정합니다. 그리고 ApolloProvider 컴포넌트를 사용하여 애플리케이션 전체에 Apollo Client를 제공합니다. 이제 애플리케이션의 UI를 개발하는 작업을 진행할 수 있습니다.

결론

이번 글에서는 GraphQL Subscriptions를 활용하여 자바스크립트를 사용하여 실시간 주식 시세를 추적하는 애플리케이션을 개발하는 방법에 대해 알아보았습니다. GraphQL Subscriptions를 사용하면 쉽게 실시간 데이터 업데이트를 구현할 수 있으며, 주식 시세 추적 외에도 다양한 실시간 애플리케이션 개발에 활용할 수 있습니다. 추가적인 기능 구현이나 세부 설정은 해당하는 라이브러리 또는 도구의 공식 문서를 참고하시기 바랍니다.

참고 자료: