Next.js에서 실시간 투표 시스템 구현하기

18 Oct 2023

nextjs

투표 시스템은 사용자들로부터 투표를 받고 실시간으로 결과를 확인할 수 있는 기능을 제공합니다. Next.js는 React 기반의 프레임워크로서 효과적인 웹 애플리케이션 구축을 위한 많은 기능을 제공합니다. 이번 블로그 포스트에서는 Next.js와 Socket.io를 이용하여 실시간 투표 시스템을 구현하는 방법을 살펴보겠습니다.

개요

이 실습을 진행하기 위해선 다음과 같은 도구가 필요합니다:

Node.js와 npm
Next.js
Socket.io

프로젝트 설정

먼저, 새로운 Next.js 프로젝트를 생성해야 합니다. 터미널에서 다음 명령을 입력합니다:

npx create-next-app voting-app

프로젝트 디렉토리로 이동한 후, 필요한 패키지를 설치합니다:

cd voting-app
npm install socket.io

서버 구현

투표 시스템의 핵심은 실시간 데이터 통신이므로, 서버 부분을 먼저 구현해야 합니다. server.js 파일을 만들고 다음 코드를 작성합니다:

const http = require('http');
const socketIO = require('socket.io');

// 서버 생성
const server = http.createServer();
const io = socketIO(server);

// 클라이언트 연결 시 이벤트 처리
io.on('connection', (socket) => {
  console.log('새로운 클라이언트 연결됨');

  // 투표 이벤트 처리
  socket.on('vote', (option) => {
    console.log('투표:', option);
    io.emit('vote', option); // 모든 클라이언트에게 투표 결과 전달
  });

  // 클라이언트 연결 해제 시 이벤트 처리
  socket.on('disconnect', () => {
    console.log('클라이언트 연결 해제됨');
  });
});

// 서버 시작
server.listen(3000, () => {
  console.log('서버가 3000번 포트에서 실행 중');
});

클라이언트 구현

이제 클라이언트 부분을 구현해보겠습니다. pages/index.js 파일을 열고 다음 코드를 작성합니다:

import { useEffect, useState } from 'react';
import socketIOClient from 'socket.io-client';

const socket = socketIOClient('http://localhost:3000');

export default function Home() {
  const [votes, setVotes] = useState({ option1: 0, option2: 0 });

  useEffect(() => {
    // 투표 결과 업데이트 이벤트 처리
    socket.on('vote', (option) => {
      setVotes((prevVotes) => ({
        ...prevVotes,
        [option]: prevVotes[option] + 1,
      }));
    });
  }, []);

  const handleVote = (option) => {
    socket.emit('vote', option);
  };

  return (
    <div>
      <h1>실시간 투표 시스템</h1>
      <div>
        <h2>옵션 1: {votes.option1}표</h2>
        <button onClick={() => handleVote('option1')}>투표하기</button>
      </div>
      <div>
        <h2>옵션 2: {votes.option2}표</h2>
        <button onClick={() => handleVote('option2')}>투표하기</button>
      </div>
    </div>
  );
}

실행 및 테스트

서버를 실행하기 위해 터미널에서 다음 명령을 입력합니다:

node server.js

Next.js 애플리케이션을 실행하기 위해 또 다른 터미널에서 다음 명령을 입력합니다:

npm run dev

웹 브라우저에서 http://localhost:3000으로 접속하면 실시간 투표 시스템을 확인할 수 있습니다. 여러 브라우저 창을 열고 투표를 시도해보세요. 투표 결과가 실시간으로 업데이트되는 것을 확인할 수 있을 것입니다.

결론

이번 포스트에서는 Next.js와 Socket.io를 사용하여 실시간 투표 시스템을 구현하는 방법을 알아보았습니다. Next.js의 SSR(Server-side Rendering) 기능과 Socket.io의 실시간 통신 기능을 효과적으로 결합하여 사용자들이 실시간 투표 결과를 확인할 수 있는 웹 애플리케이션을 구현할 수 있습니다.

참고 자료

Next.js 공식 문서: https://nextjs.org/docs
Socket.io 공식 문서: https://socket.io/docs

#nextjs #socketio