Related PR : https://github.com/urdego/Urdego_Frontend/pull/135, https://github.com/urdego/Urdego_Frontend/pull/144, https://github.com/urdego/Urdego_Frontend/pull/202

• ENGLISH TRANSLATION (read me!)

• js 클래스 객체를 기반으로 만든 Websocket 연결 코드 설명(이전 코드)

• zustand를 활용한 websocket연결과 ,react hook으로 구현한 구독, 타입 메시지 발송 코드 설명

초기에는 싱글톤 패턴을 사용하여 웹소켓 연결을 관리하는 클래스를 구현했습니다. 이 방식은 애플리케이션 전체에서 단 하나의 인스턴스를 보장하고, 여러 컴포넌트에서 동일한 웹소켓 연결을 공유할 수 있다는 장점이 있었습니다. 하지만 실제 Next.js와 React 환경에서 다음과 같은 문제점과 한계가 드러났습니다.

1. React의 선언적 프로그래밍 모델과의 부조화

• 싱글톤 패턴의 한계:

  클래스 기반의 싱글톤 패턴은 명령형 코드로 상태를 내부적으로 관리하기 때문에, React 컴포넌트의 상태 변화에 따른 리렌더링이나 UI 업데이트와 자연스럽게 연동되기 어려웠습니다.

• 개선된 방식:

  Zustand와 React Hook을 활용하면, 웹소켓 상태를 전역 상태로 관리하면서도 React의 선언적 프로그래밍 패러다임에 맞춰 컴포넌트와 자연스럽게 연동할 수 있습니다. 상태 변화가 발생하면 해당 상태를 구독하는 컴포넌트들이 자동으로 업데이트되므로, UI와 데이터의 일관성을 유지하기 좋습니다.

2. 서버 사이드 렌더링(SSR) 환경 대응

• 싱글톤 패턴의 문제:

  Next.js와 같은 SSR 환경에서는 서버와 클라이언트가 혼합되어 실행되는데, 싱글톤 인스턴스를 전역에서 관리할 경우 서버 사이드와 클라이언트 사이드 간의 상태가 혼동될 수 있습니다.

• 개선된 방식:

  Zustand는 클라이언트 사이드에서만 전역 상태를 관리하도록 설계할 수 있어, SSR 환경에서도 안전하게 사용할 수 있습니다. 이를 통해 Next.js 프로젝트에서 서버와 클라이언트 간의 상태 불일치를 예방할 수 있습니다.