개요

싱글톤 패턴을 이용한 웹 소켓 다중 연결 해결

위 과정을 통해서 웹소켓이 다중 연결되는 상황을 해결했다. 하지만 로컬 환경에서는 다음과 같은 에러가 추가적으로 발생했다.

build 상태에서는 정상작동 했기 때문에 React.StrictMode 컴포넌트 때문에 발생한 에러라고 추측할 수 있었고, WebSocket is closed before the connection is established 에러를 구글에 검색했다.

스택 오버 플로우에서 나와 같은 에러를 발생한 사람의 글을 찾을 수 있었고, 해당 글의 답변에서 웹소켓 에러의 원인을 찾을 수 있었다.

• 연결이 설정 되기도 전에 웹소켓.close()가 호출된 것.

• 즉, 오류의 원인은 소켓이 실제로 연결될 기회를 갖기 전에 웹소켓 연결을 닫으려고 시도하는 경우에 발생한 오류

  What does "WebSocket is closed before the connection is established" mean?

<aside> 💡 React.StrictMode는 왜 웹소켓이 제대로 연결될 기회를 갖기 전에 웹소켓을 close하려고 했을까?

</aside>

위 질문을 답변하기 전에 고려할 사항들.

1. StrictMode가 꼭 필요한가?

   • build 시에 없어진다면 개발 모드에서 필요 없을 수도?
   • 만약 필요 없다면 전체 컴포넌트를 <StrictMode>가 감싸지 않도록 하자.

2. StrictMode가 꼭 필요하다면

   • 실행 환경에 따른 웹소켓 사용 방식을 채택하도록 설계할 수 있지 않을까?

     process.env.NODE_ENV === 'production' ? 싱글톤 웹소켓 로직 : 원래 웹소켓 로직 ;
     

   • StrictMode로 deepdive해서 문제의 원인을 찾고 해결할 수 있지 않을까?

     • 가장 시간이 많이 걸리는 방법이지만, React를 더 잘 이해할 수 있지 않을까?

StrictMode의 효용을 먼저 확인하자.

React.StrictMode가 꼭 필요한가?

StrictMode 컴포넌트를 사용했을 때 얻을 수 있는 장점은 다음과 같다. (공식문서 참고)