[swift] 아폴로 서버와 실시간 대시보드 구현 방법

15 Nov 2023

swift

소개

이번 블로그에서는 아폴로 서버와 실시간 대시보드를 구현하는 방법에 대해 알아보겠습니다. 아폴로 서버는 GraphQL을 위한 강력한 도구로, 실시간 데이터 업데이트를 처리하는 데 특히 적합합니다. 실시간 대시보드는 실시간으로 데이터를 업데이트하고 화면에 보여줄 수 있는 웹 애플리케이션입니다. 이 블로그에서는 Swift 언어를 기반으로 아폴로 서버의 실시간 기능을 사용한 예제 코드를 제공하겠습니다.

전제 조건

이 예제 코드를 실행하기 위해서는 다음의 전제 조건이 필요합니다:

Swift 언어가 설치되어 있어야 합니다.
Node.js와 npm이 설치되어 있어야 합니다.
Apollo Server를 설치하기 위해 npm 패키지 매니저를 사용할 줄 알아야 합니다.

아폴로 서버 설정하기

아폴로 서버를 설정하려면 다음 단계를 따르세요:

프로젝트 폴더를 만들고 해당 폴더에 이동하세요.
터미널에서 다음 명령어를 사용하여 아폴로 서버를 설치합니다:
```
$ npm install apollo-server graphql
```

서버 코드를 작성하기 위해 index.js 파일을 생성하고 다음과 같은 코드를 작성하세요:

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

const typeDefs = `
  type Counter {
    value: Int!
  }

  type Query {
    counter: Counter!
  }

  type Subscription {
    countUpdated: Counter!
  }
`;

const resolvers = {
  Query: {
    counter: () => ({ value: 0 }),
  },
  Subscription: {
    countUpdated: {
      subscribe: () => pubsub.asyncIterator(['COUNTER_UPDATED']),
    },
  },
};

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

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

터미널에서 다음 명령어를 실행하여 서버를 시작합니다:
```
$ node index.js
```

이제 아폴로 서버가 실행되고, http://localhost:4000에서 확인할 수 있게 됩니다.

클라이언트 애플리케이션 작성하기

이제 실시간 대시보드를 보여주는 Swift 기반의 클라이언트 애플리케이션을 작성해보겠습니다.

프로젝트 폴더 내에 Podfile을 생성하고 다음과 같은 코드를 작성하세요:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'YourAppName' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for YourAppName
  pod 'Apollo', '0.19.0'
end

터미널에서 프로젝트 폴더 내에서 다음 명령어를 실행하여 CocoaPods을 설치하세요:
```
$ pod install
```
YourAppName.xcworkspace 파일을 열어 Xcode에서 프로젝트를 열어주세요.

AppDelegate.swift 파일을 열고 다음과 같은 코드를 추가하세요:

import Apollo

let apollo = ApolloClient(url: URL(string: "http://localhost:4000")!)

실시간 대시보드를 보여줄 ViewController 파일을 생성하고 다음과 같은 코드를 작성하세요:

import UIKit
import Apollo

class DashboardViewController: UIViewController {

    var counterSubscription: Cancellable?
    @IBOutlet weak var counterLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        subscribeToCounterUpdates()
    }

    func subscribeToCounterUpdates() {
        counterSubscription = apollo.subscribe(subscription: CountUpdatedSubscription()) { [weak self] result in
            switch result {
            case .success(let graphQLResult):
                if let counterValue = graphQLResult.data?.countUpdated.value {
                    self?.counterLabel.text = "\(counterValue)"
                }
            case .failure(let error):
                print("Failed to update counter: \(error)")
            }
        }
    }

    deinit {
        counterSubscription?.cancel()
    }

}

Main.storyboard 파일을 열고 뷰 컨트롤러에 UILabel을 추가하고 IBOutlet을 연결합니다.
실행하여 실시간으로 대시보드의 숫자가 업데이트되는지 확인하세요.

결론

이번 블로그에서는 아폴로 서버와 실시간 대시보드를 구현하는 방법에 대해 알아보았습니다. Swift 언어를 기반으로 아폴로 서버의 실시간 기능을 사용하는 클라이언트 애플리케이션을 만드는 예제 코드를 제공했습니다. 실시간 데이터 업데이트가 필요한 웹 애플리케이션을 개발하는 경우, 아폴로 서버와 실시간 기능을 사용하는 것을 고려해보세요.