Next.js 실시간 애플리케이션 구축하기: WebSocket과 서버리스 활용

작성일 : 2024-07-19

Next.js 실시간 애플리케이션 구축하기: WebSocket과 서버리스 활용

Next.js는 React와 함께 사용되는 인기 있는 JavaScript 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 웹사이트 생성을 모두 지원합니다. 실시간 애플리케이션을 구축하기 위해 Next.js와 WebSocket을 결합하면, 사용자가 즉각적으로 변화를 경험하도록 할 수 있습니다. 이 글에서는 이러한 실시간 기능을 서버리스 환경에서 구현하는 방법을 소개하겠습니다.

Next.js 소개

Next.js는 Vercel에서 개발한 React 애플리케이션을 위한 프레임워크로, 서버 사이드 렌더링과 정적 사이트 생성을 용이하게 만듭니다. 여기서 주목할 부분은 Next.js가 페이지 수준에서 자동 코드 분할을 제공하여 초기 로딩 속도를 크게 향상시킨다는 점입니다.

주요 특징

서버 사이드 렌더링(SSR): 페이지 로드를 위한 최적화된 HTML을 생성하여 초기 페이지 로드 속도를 높입니다.
정적 사이트 생성(SSG): Build 시점에 HTML을 생성하여 빠른 정적 페이지를 제공합니다.
API Routes: 백엔드 서버 설정 없이 API를 생성할 수 있습니다.

WebSocket 개요

WebSocket은 HTTP와 달리, 클라이언트와 서버 간의 양방향 통신을 가능하게 하는 프로토콜입니다. 일반적으로 실시간 데이터 전송이 필요한 채팅 애플리케이션이나 온라인 게임 등에 사용됩니다. WebSocket은 연결이 초기화된 후, 지속적인 연결 상태를 유지하여 데이터를 주고 받기 때문에 실시간 데이터 전송에 매우 효율적입니다.

서버리스 개요

서버리스 아키텍처는 서버 관리를 필요로 하지 않는 클라우드 컴퓨팅 실행 모델입니다. AWS Lambda, Google Cloud Functions와 같은 서버리스 플랫폼을 통해 컴퓨팅 자원을 자동으로 관리하고, 이벤트 기반으로 짧은 시간 동안 애플리케이션 코드를 실행할 수 있습니다.

실시간 애플리케이션 구축하기

이제 Next.js, WebSocket, 그리고 서버리스 환경을 활용하여 실시간 애플리케이션을 구축해 보겠습니다.

프로젝트 초기 설정

먼저 Next.js 프로젝트를 생성합니다.


bash
npx create-next-app@latest 실시간-애플리케이션
cd 실시간-애플리케이션

프로젝트가 생성되면 필요한 의존성을 설치합니다.


bash
npm install ws
npm install @vercel/node

서버리스 함수 구현

이제 서버리스 함수로 WebSocket 서버를 설정해 보겠습니다. pages/api 폴더에 새로운 파일을 생성합니다.


javascript
// pages/api/socket.js
import { Server } from 'ws';

export default function handler(req, res) {
  if (!res.socket.server.ws) {
    const wsServer = new Server({ server: res.socket.server });

    wsServer.on('connection', socket => {
      socket.on('message', data => {
        const message = JSON.parse(data);
        wsServer.clients.forEach(client => {
          if (client !== socket && client.readyState === client.OPEN) {
            client.send(JSON.stringify(message));
          }
        });
      });
    });

    res.socket.server.ws = wsServer;
  }
  res.end();
}

이 코드 블록은 WebSocket 서버를 설정하고, 서버리스 환경에서 다수의 클라이언트 간 메세지를 송수신 할 수 있도록 합니다.

클라이언트 구현

이제 클라이언트에서 WebSocket을 설정하고 통신을 시작합니다.


javascript
// pages/index.js
import { useEffect, useState } from 'react';

export default function Home() {
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState('');

  useEffect(() => {
    const socket = new WebSocket('ws://localhost:3000/api/socket');

    socket.onmessage = (event) => {
      const newMessage = JSON.parse(event.data);
      setMessages((prevMessages) => [...prevMessages, newMessage]);
    };

    return () => socket.close();
  }, []);

  const sendMessage = () => {
    const socket = new WebSocket('ws://localhost:3000/api/socket');
    socket.onopen = () => {
      socket.send(JSON.stringify({ text: message }));
      setMessage('');
    };
  };

  return (
    <div>
      <h1>실시간 채팅 애플리케이션</h1>
      <div>
        {messages.map((msg, i) => (
          <p key={i}>{msg.text}</p>
        ))}
      </div>
      <input
        type='text'
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={sendMessage}>전송</button>
    </div>
  );
}

이제 Next.js 페이지가 WebSocket을 통해 실시간 소통을 할 수 있게 되었습니다. useEffect를 사용하여 컴포넌트가 마운트될 때 WebSocket 연결을 설정하고, 새로운 메시지가 수신될 때마다 상태를 업데이트합니다.

결론

이번 글에서는 Next.js를 사용하여 서버리스 환경에서 WebSocket을 통해 실시간 애플리케이션을 구축하는 방법을 알아보았습니다. 이러한 접근 방식은 서버 관리를 단순화하면서도 고성능의 실시간 경험을 제공할 수 있습니다. 이를 통해 다양한 실시간 애플리케이션, 예를 들어 채팅 애플리케이션, 주식 거래 플랫폼, 라이브 데이터 대시보드 등을 쉽게 구현할 수 있게 되었습니다. 앞으로도 Next.js와 같은 최신 기술을 통해 더욱 효과적이고 효율적인 개발을 계속해 나가시기 바랍니다.