실시간 채팅 프로그램

기능을 새로 짜는 것보다 에러를 잡는 게 더 어려운 일이었다.
배울 게 너무 많아

특히 내가 검증해보고자 하는 베타 서비스에는 실시간 채팅이 중요한데,
실시간 채팅이 구현도 어려웠지만,
원인을 알 수 없는 에러도 많이 났다.
현재 진행 중이라는 게 너무 슬프다...

일단 그 과정에서 해결한 에러만 벨로그에 적어둔다.
나중에 나머지도 해결하고 적어둬야지...

에러 요약은 나의 친구 GPT의 도움을 받아 정리하는 중이다.

문제 1 : 웹소켓 연결, 종료 무한 반복

문제 요약

현재 ChatRoom 컴포넌트에서 WebSocket 연결이 해제되고 재연결되는 문제가 발생하고 있습니다.

로그를 보면 다음과 같은 순서로 이벤트가 발생합니다:

1. WebSocket 연결 해제 (WebSocket 연결 해제 로그 출력)
2. WebSocket 연결 시작 및 성공 (WebSocket 연결 성공 로그 출력)
3. 첫 입장 메시지 전송
4. 메시지 수신

이러한 현상이 반복되면서 WebSocket 연결이 끊어졌다가 다시 연결되는 문제가 발생합니다.

---

원인 분석

1. React.StrictMode로 인한 useEffect의 이중 호출

• React 18 버전부터 개발 모드에서 React.StrictMode가 활성화되어 있으면, 컴포넌트의 마운트와 언마운트, 그리고 useEffect의 호출과 클린업이 두 번씩 발생합니다.
• 이는 개발 단계에서 부작용을 감지하기 위한 의도된 동작입니다.
• 따라서 useEffect의 클린업 함수가 예상치 않게 호출되어 WebSocket 연결이 해제되는 것처럼 보일 수 있습니다.

2. 컴포넌트의 리렌더링 또는 재마운트

• 컴포넌트가 리렌더링되면서 useEffect가 재실행되고, 클린업 함수가 호출되어 WebSocket 연결이 해제될 수 있습니다.
• 의존성 배열에 포함된 값들이 변경되거나, 컴포넌트가 언마운트될 때 클린업 함수가 호출됩니다.

근데 사실 이번에는 에러만 작성해놓고 해결 상황을 정리를 못했다...

일단 해결했지만, 정리는 못한 에러

• 참여자 수가 입장 시마다 추가되는 에러
• 메시지가 중복으로 처리되는 문제
• 뒤로 가기와 나가기의 동작이 똑같이 처리되는 문제
• 플로팅 버튼 웹앱 박스 밖으로 나가는 문제
• 스크롤 UI에서 없애기
• 채팅 리스트 바닥이 끝까지 스크롤 되도록
• 시간 제한이 되면 채팅이 막히고, 사전 안내 메시지 출력
  기타 ... 기억나지 않는 수많은 문제들이 있었고...
  아직 남아있는 몇 가지 에러가 있다.

아래는 지금 해결하고 있는 에러

• 닉네임 매핑 에러(메시지에 표시되는 닉네임과 입퇴장 시 표시되는 닉네임이 다름)
  이걸 며칠 잡고 있는건지ㅠㅠㅠ

혼란스러운 상황이지만 이번주에 꼭 해결할 수 있길...