incodevelop

MakeCandidate.tsx에서는 WebSocket 응답으로 받은 voteLimit 값을 기반으로 조건 분기(voteLimit !== null)하여 공(ball)을 생성한다.하지만 예상과 달리 voteLimit이 null이 아님에도 null로 참조되어, 제한/무제한 여부가 잘못 반영되는 공이 생성되는 문제가 발생했다.🔍 원인 분석1. React 함수형 컴포넌트의 클로저 구조WebSocketProvider 컴포넌트에서 Websocket 응답을 받고 setVoteLimit으로 voteLimit 상태를 업데이트 하고 있다.아래 subscribeAll 함수 내부에서는 업데이트 된 voteLimit 값을 사용하고 싶었으나, 항상 null로 참조가 되었다. // AS-ISuseEffect(() => { //..

실시간 투표서비스를 개발하며 WebSocket을 사용 중에현재 서비스에서 전역상태 관리로 Recoil을 사용 중이니 웹소켓도 recoil로 관리할까? 싶었다.하지만 WebSocket은 단순한 값과는 성격이 다르기 때문에, Recoil로 관리하는 것이 오히려 문제가 될 수 있다는 걸 발견했다.📌 WebSocket은 "값"이 아닌 "리소스 객체"WebSocket은 단순한 데이터가 아니라, 서버와의 연결을 유지하는 연결된 객체다.연결된 객체란?life-cyle(연결, 해제, 에러, 브로드캐스트) 상태를 가진 객체onopen, onmessage, onerror, onclose 등 이벤트 루프에 등록된 이벤트 핸들러도 가지고 있음지속적으로 외부와 연결되어 있는 상태로, 명시적으로 해제-close() 하지 않으면..