Apollo Server와 Prisma를 이용한 자바스크립트 실시간 식당 예약 시스템 개발하기

10 Nov 2023

graphql

오늘은 Apollo Server와 Prisma를 사용하여 자바스크립트로 실시간 식당 예약 시스템을 개발하는 방법에 대해 알아보겠습니다. 이 시스템은 사용자가 식당을 예약하고 예약 상태를 실시간으로 확인할 수 있는 기능을 제공합니다.

개발 환경 준비하기

이 프로젝트를 시작하기전에 몇 가지 개발 환경을 준비해야 합니다.

Node.js: 프로젝트를 실행하기 위해 Node.js를 설치합니다.
npm: Node.js 패키지 관리자인 npm을 이용하여 프로젝트 종속성을 관리합니다.
Apollo Server: GraphQL 서버를 개발하기 위해 Apollo Server를 설치합니다.
Prisma: 데이터베이스 ORM 도구로 Prisma를 사용합니다.

위의 사항들을 모두 설치하고 설정한 후에 실제 개발을 시작할 수 있습니다.

데이터베이스 모델링하기

이 식당 예약 시스템에서는 다음과 같은 데이터베이스 모델을 사용할 것입니다.

model Restaurant {
  id      Int     @id @default(autoincrement())
  name    String
  address String
  tables  Table[]
}

model Table {
  id           Int     @id @default(autoincrement())
  restaurantId Int
  restaurant   Restaurant @relation(fields: [restaurantId], references: [id])
  capacity     Int
  reservations Reservation[]
}

model Reservation {
  id        Int     @id @default(autoincrement())
  tableId   Int
  table     Table   @relation(fields: [tableId], references: [id])
  startTime DateTime
  endTime   DateTime
  status    String
}

위의 데이터베이스 모델을 Prisma 스키마로 작성하고 prisma migrate save 명령을 사용하여 데이터베이스에 적용합니다.

GraphQL 스키마 작성하기

다음으로, GraphQL 스키마를 작성해야 합니다. 이 스키마는 사용자가 예약을 조회하거나 생성하는 데 사용됩니다. 예약 상태를 실시간으로 업데이트하기 위해 Apollo Server의 subscriptions 기능도 함께 사용합니다.

아래는 스키마 예시입니다:

type Query {
  reservations: [Reservation!]!
}

type Mutation {
  createReservation(startTime: String!, endTime: String!, tableId: Int!): Reservation!
}

type Subscription {
  reservationCreated: Reservation
}

이 스키마를 기준으로 Apollo Server의 resolvers를 작성하여 실제로 데이터를 조작하고 예약 상태를 업데이트할 수 있습니다. 여기에서 Prisma를 사용하여 데이터베이스와 상호작용하는 로직을 작성합니다.

Apollo Server 설정하기

Apollo Server를 구성하기 위해 다음과 같이 서버를 생성하고 스키마, 리졸버 및 데이터베이스 연결 정보를 설정합니다.

const { ApolloServer, PubSub } = require('apollo-server');
const { PrismaClient } = require('@prisma/client');

const prisma = new PrismaClient();
const pubsub = new PubSub();

const server = new ApolloServer({
  typeDefs: ...,
  resolvers: ...,
  context: { prisma, pubsub },
});

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

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

마지막으로, 클라이언트 애플리케이션을 개발하여 사용자가 식당 예약을 생성하고 예약 상태를 실시간으로 확인할 수 있게 만듭니다. 클라이언트 애플리케이션은 웹 또는 모바일 앱으로 개발할 수 있으며 Apollo Client를 사용하여 GraphQL API에 연결합니다.

예를 들어, 웹 애플리케이션에서는 Apollo Client를 설치하고 구성한 후에 GraphQL 쿼리와 뮤테이션을 사용하여 서버와 통신합니다.

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

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

// 예약 생성하기
const createReservation = async (startTime, endTime, tableId) => {
  const mutation = gql`
    mutation CreateReservation($startTime: String!, $endTime: String!, $tableId: Int!) {
      createReservation(startTime: $startTime, endTime: $endTime, tableId: $tableId) {
        id
        startTime
        status
      }
    }
  `;

  const variables = {
    startTime,
    endTime,
    tableId,
  };

  const { data } = await client.mutate({ mutation, variables });
  console.log(data.createReservation);
};

// 예약 조회하기
const getReservations = async () => {
  const query = gql`
    query {
      reservations {
        id
        startTime
        status
      }
    }
  `;

  const { data } = await client.query({ query });
  console.log(data.reservations);
};

getReservations();

클라이언트 애플리케이션에서는 Apollo Client를 사용하여 쿼리와 뮤테이션을 실행하고 응답을 처리합니다.

이제 Apollo Server와 Prisma를 이용하여 자바스크립트로 실시간 식당 예약 시스템을 개발하는 방법을 알게 되었습니다. 이를 기반으로 필요한 기능을 추가하고 향상시킬 수 있습니다.