실시간 협업 드로잉 보드 프로젝트 단계별 개발 계획

1단계

• Liveblocks와 Clerk을 사용한 서버리스 개발 (Next.js 기반)

목표

서버리스 환경에서 Liveblocks를 사용해 실시간 협업 기능을 구현하고, Clerk으로 로그인 및 인증 시스템을 간편하게 통합.

주요 작업

• Liveblocks 통합:

  • Liveblocks API를 활용해 실시간 협업 드로잉 기능을 구현.
  • WebSocket 기반 실시간 데이터 전송을 Liveblocks에서 처리하므로, 프론트엔드에서만 개발 진행.

• Clerk 통합:

  • Clerk을 사용해 로그인, 회원가입 및 사용자 인증 시스템을 간편하게 설정.
  • 사용자별 드로잉 데이터와 방 관리 기능을 쉽게 관리할 수 있음.

• Next.js 서버리스 설정:

  • 서버리스 방식으로 배포할 예정이므로, 백엔드 서버 없이 Next.js의 API 라우트를 활용하여 필요한 데이터를 처리.
  • next.js 내부에서 간단한 API 라우트를 정의해 인증이나 기본적인 CRUD를 처리.

주요 기능 구현

• 실시간 드로잉: Liveblocks를 통해 브라우저에서 여러 사용자가 동시에 그림을 그릴 수 있음.
• 사용자 인증: Clerk으로 간편한 회원가입 및 로그인 기능을 제공.

---

2단계

• Liveblocks 제거 후 직접 WebSocket 구현

목표

Liveblocks 의존성을 제거하고, WebSocket을 직접 구현하여 실시간 협업 기능을 관리.

주요 작업

• WebSocket 구현:

  • Next.js API 라우트를 활용해 WebSocket 서버를 구현하고, 실시간 드로잉 데이터를 주고받을 수 있게 처리.
  • 클라이언트와 서버 간 양방향 통신을 직접 관리해 드로잉 내용을 공유.

• 기능 확장:

  • 실시간으로 드로잉 데이터를 주고받는 것 외에도, 사용자 목록, 마우스 위치 등 다양한 데이터를 실시간으로 공유하도록 구현.

주요 기능 구현

• 실시간 드로잉 직접 구현: WebSocket을 직접 구현하여 실시간으로 드로잉 데이터를 주고받음.
• 사용자 목록 및 상태 표시: WebSocket을 통해 접속 중인 사용자 목록과 각 사용자의 상태를 실시간으로 반영.

---

3단계

• Clerk 제거 후 로그인 및 인증 기능 직접 구현

목표

Clerk 의존성을 제거하고, 직접 로그인 및 인증 기능을 구현하여 전체적인 사용자 인증 흐름을 관리.

주요 작업

• JWT 기반 인증:

  • 직접 JWT 토큰을 생성하고 검증하는 방식을 구현하여, 사용자의 로그인 상태를 관리.
  • 로그인, 회원가입, 로그아웃 등 사용자 인증과 관련된 기능을 API 라우트를 통해 처리.

• 세션 관리:

  • 사용자의 세션을 서버 측에서 관리하거나, 쿠키 및 로컬 스토리지를 활용해 인증 상태를 유지.

주요 기능 구현

• 사용자 인증: JWT를 활용해 로그인 및 인증을 직접 처리.
• 인증 관리: 클라이언트와 서버 간의 인증 상태를 안전하게 관리하고, JWT를 활용해 사용자 세션을 유지.