Problem

• 여러 명이 하나의 페이지를 수정합니다. 모두 동일한 데이터로 그려진 화면을 봐야합니다.
• 실시간으로 페이지가 수정되는 것이 업데이트되어야 합니다.
• 배포되었을 때도 기능이 유지되어야 합니다.

Problem Solving

• 실시간으로 웹이 업데이트 되어야 하며, 양방향 통신이 가능해야 함 ⇒ 웹 소켓 기술 도입, 해당 기술을 지원하는 라이브러리로 socket.io 선택

• Next.js 서버에서는 socket.io, 클라이언트에서는 socket.io-client 사용

• Zustand를 사용한 전역 소켓 상태 관리

  export const useSocketStore = create<SocketState>((set) => ({
    socket: null,
    setSocket: (newSocket) => set({ socket: newSocket }),
    initializeSocket: async (dashboardId: string) => {
      await fetch('/api/socket');
  
      const newSocket = io();
  
      newSocket.on('connect', () => {
        newSocket.emit('join-room', dashboardId);
      });
  
      set({ socket: newSocket });
  
      return () => {
        newSocket.disconnect();
      };
    },
  }));
  

• Vercel의 서버리스 함수는 웹 소켓이나 SSE와 같은 지속적인 연결을 지원하지 않음

  • socket.io 에서 Pusher 써드파티 라이브러리로 교체

Output

• 실시간 웹 업데이트 구현

  팀원이 접속하는 경우

  팀원이 접속하는 경우

  다른 팀원이 카드를 생성하는 경우

  다른 팀원이 카드를 생성하는 경우

  대시보드가 삭제되는 경우

  대시보드가 삭제되는 경우

• 웹 소켓 기술과 적용 방법을 팀원들에게 공유

• 다음 프로젝트에서 SSE를 통한 알림 적용 시, Vercel 지원 여부를 미리 확인해 실수를 예방