Colin's Blog
GraphQL Subscriptions를 이용한 자바스크립트 실시간 주식 시세 추적 애플리케이션 개발하기

GraphQL Subscriptions는 GraphQL의 기능 중 하나로, 실시간 데이터를 처리하기 위해 사용됩니다. 이 기능은 서버와 클라이언트 간의 실시간 상호작용을 위한 솔루션으로써, 주식 시세 추적처럼 실시간으로 변하는 데이터를 처리해야 하는 애플리케이션 개발에 유용합니다.

자바스크립트로 주식 시세 추적 애플리케이션 개발하기

이번 블로그에서는 GraphQL Subscriptions를 이용하여 자바스크립트로 주식 시세 추적 애플리케이션을 개발하는 과정을 안내하겠습니다.

1. 프로젝트 설정

먼저, 주식 시세 데이터를 제공하는 외부 API와 통신하기 위해 Node.js와 Apollo Server를 사용하는 프로젝트를 설정합니다. 아래 명령어를 사용하여 필요한 패키지를 설치합니다.

npm install express apollo-server apollo-server-express graphql graphql-subscriptions

2. GraphQL 스키마 정의하기

다음으로, GraphQL 스키마를 정의합니다. 이번 예제에서는 Stock라는 타입을 정의하고, subscription 타입을 사용하여 주식 시세 업데이트를 구독할 수 있도록 합니다. 아래는 스키마의 예시 코드입니다.

type Stock {
  symbol: String
  price: Float
}

type Query {
  getStock(symbol: String): Stock
}

type Subscription {
  stockUpdate(symbol: String): Stock
}

3. GraphQL 서버 설정하기

Apollo Server를 사용하여 GraphQL 서버를 설정합니다. 아래는 간단한 예시 코드입니다.

const { ApolloServer, PubSub } = require('apollo-server');
const pubsub = new PubSub();

const typeDefs = /* 정의한 스키마 */;
const resolvers = /* Resolver 함수 정의 */;

const server = new ApolloServer({ 
  typeDefs, 
  resolvers,
  subscriptions: {
    onConnect: () => console.log('클라이언트가 연결됨'),
    onDisconnect: () => console.log('클라이언트가 연결 해제됨'),
  },
});
server.applyMiddleware({ app });

const httpServer = http.createServer(app);
server.installSubscriptionHandlers(httpServer);

httpServer.listen({ port: 4000 }, () => {
  console.log(`서버가 http://localhost:4000/graphql 주소에서 실행중입니다.`);
});

4. 실시간 데이터 업데이트 처리하기

이제 주식 시세 데이터를 실시간으로 업데이트하는 로직을 구현해야 합니다. 이를 위해 PubSub 기능을 사용합니다. 아래 코드는 주식 시세 업데이트를 구독하는 로직의 예시입니다.

const stockUpdate = (root, { symbol }) => {
  // 주식 시세 데이터 업데이트 로직
  // 업데이트된 데이터를 pubsub.publish를 사용하여 클라이언트에게 전송
  const updatedData = /* 주식 시세 데이터 업데이트 로직 */;
  pubsub.publish('STOCK_UPDATE', { stockUpdate: updatedData });
  return updatedData;
};

const resolvers = {
  Query: {
    getStock: (root, { symbol }) => {
      // 주식 시세 데이터 조회 로직
      return /* 조회된 주식 시세 데이터 */;
    },
  },
  Subscription: {
    stockUpdate: {
      subscribe: () => pubsub.asyncIterator('STOCK_UPDATE'),
    },
  },
};

5. 클라이언트 구현하기

마지막으로, 실시간 주식 시세 데이터를 클라이언트에서 구독하는 로직을 구현해야 합니다. 클라이언트에서는 Apollo Client를 사용하여 GraphQL Subscription을 구독할 수 있습니다. 아래는 간단한 예시 코드입니다.

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

const stockSubscription = gql`
  subscription {
    stockUpdate(symbol: "AAPL") {
      symbol
      price
    }
  }
`;

const subscription = client.subscribe({ query: stockSubscription }).subscribe({
  next({ data }) {
    console.log(data.stockUpdate);
    // 업데이트된 주식 시세를 출력 또는 처리하는 로직
  },
  error(error) {
    console.error(error);
  },
});

이제 위 코드를 실행하면, 클라이언트는 주식 시세 데이터의 실시간 업데이트를 구독하고, 새로운 데이터가 도착할 때마다 업데이트된 주식 시세를 출력하거나 처리할 수 있습니다.

이러한 방식을 통해 GraphQL Subscriptions를 이용하여 자바스크립트로 실시간 주식 시세 추적 애플리케이션을 개발할 수 있습니다.

더 자세한 내용은 GraphQL Subscriptions 공식 문서를 참고하세요.

#주식 #GraphQL

© 2018 Colin. All rights reserved.