Colin's Blog
Apollo Server와 Prisma를 이용한 자바스크립트 실시간 알림 시스템 개발

소개

알림 시스템은 현대 웹 애플리케이션에서 매우 중요한 요소입니다. 사용자에게 실시간으로 정보를 전달하고 상호작용을 활성화하는 데 도움이 됩니다. 이번 기술 블로그에서는 Apollo Server와 Prisma를 이용해 자바스크립트로 실시간 알림 시스템을 개발하는 방법에 대해 알아보겠습니다.

Apollo Server란?

Apollo Server는 GraphQL API를 위한 완전한 서버입니다. Apollo Server는 데이터를 가져오고 변경하기 위한 GraphQL 쿼리와 뮤테이션을 처리하는 기능을 제공합니다. 이를 통해 클라이언트가 필요한 데이터만 요청하고 처리할 수 있습니다.

Prisma란?

Prisma는 데이터베이스를 위한 오픈 소스 ORM(Object-Relational Mapping) 도구입니다. Prisma를 사용하면 데이터를 읽고 쓰는 작업을 단순화하고 일관성 있게 관리할 수 있습니다. Prisma는 다양한 데이터베이스 시스템과 호환되며, 스키마를 정의하고 데이터베이스를 마이그레이션하는 작업을 용이하게 해줍니다.

실시간 알림 시스템 구현하기

  1. 프로젝트 설정 및 환경 구성

    • 새로운 프로젝트 디렉토리를 생성하고 Apollo Server와 Prisma를 설치합니다.
    npm init
npm install apollo-server prisma
    • GraphQL 스키마를 정의하는 schema.graphql 파일을 생성합니다.
    type User {
  id: ID!
  name: String!
  email: String!
}

type Query {
  users: [User]!
}

type Subscription {
  userAdded: User!
}

  2. Prisma 설정 및 데이터 모델 정의

    • Prisma를 사용하여 데이터베이스에 연결하고 데이터 모델을 정의합니다.
    • Prisma CLI를 사용하여 Prisma 스키마 파일과 데이터베이스 마이그레이션을 생성합니다.
    npx prisma init

    datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

model User {
  id    Int     @default(autoincrement()) @id
  name  String
  email String  @unique
}

  3. Apollo Server를 설정하고 GraphQL API를 구현합니다.

    • index.js 파일을 생성하고 다음과 같이 Apollo Server 및 Prisma를 설정합니다.
    const { ApolloServer, PubSub } = require('apollo-server');
const { PrismaClient } = require('@prisma/client');
const fs = require('fs');

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

const resolvers = {
  Query: {
    users: async () => {
      return prisma.user.findMany();
    },
  },
  Subscription: {
    userAdded: {
      subscribe: () => pubsub.asyncIterator(['USER_ADDED']),
    },
  },
};

const server = new ApolloServer({
  typeDefs: fs.readFileSync('./schema.graphql', 'utf8'),
  resolvers,
});

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

  4. 실시간 알림을 위한 Subscription 구현하기

    • index.js 파일에서 Subscription의 구독 함수를 구현합니다.
    const resolvers = {
  // ...

  Mutation: {
    addUser: async (_, { name, email }) => {
      const newUser = await prisma.user.create({
        data: {
          name,
          email,
        },
      });

      pubsub.publish('USER_ADDED', { userAdded: newUser });

      return newUser;
    },
  },
};

  5. 클라이언트에서 GraphQL API 사용하기

    • 클라이언트 애플리케이션에서 Apollo Client를 사용하여 GraphQL API를 호출하고 실시간 알림을 구독할 수 있습니다.
    import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

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

client.query({
  query: gql`
    query {
      users {
        id
        name
        email
      }
    }
  `,
}).then((result) => {
  console.log(result.data.users);
});

client.subscribe({
  query: gql`
    subscription {
      userAdded {
        id
        name
        email
      }
    }
  `
}).subscribe({
  next: (response) => {
    console.log(response.data.userAdded);
  },
});

결론

Apollo Server와 Prisma를 이용하여 자바스크립트로 실시간 알림 시스템을 개발하는 방법에 대해 알아보았습니다. Apollo Server를 사용하여 GraphQL API를 구현하고 Prisma를 사용하여 데이터베이스와 연동하는 것은 개발 생산성을 높이고 유지보수를 용이하게 만듭니다. GraphQL을 통한 실시간 알림 시스템은 사용자 경험을 향상시키고 현대적인 웹 애플리케이션 개발에 필수적인 기능입니다.

이 글은 #GraphQL #알림시스템 해시태그를 포함하고 있습니다.

© 2018 Colin. All rights reserved.