밝을희 클태

문제 : 웹소켓 연결이 끊겨 버리고 서버가 터져버림 사실 수집 : 게임을 하다가 뒤로 가기 동작을 하면 가끔씩 웹소켓 연결이 끊기고 서버가 터져버리는 현상이 발생 서버 로그를 확인해보니 같은 에러 로그가 반복적으로 발생 게임 페이지에서 뒤로가기를 통해 다른 페이지로 이동한 후 방향키를 누르면, 이전에 등록된 이벤트 리스너가 계속 실행되는 현상이 발생 원인 추론 : VanillaJS로 SPA 방식의 게임을 구현했는데, SPA는 페이지가 새로고침되지 않기 때문에, 기존에 등록된 이벤트가 따로 제거되지 않으면 그대로 남아있게 된다. 방향키로 탁구채를 움직이는 동작을 할 때, 이 이벤트 리스너가 실행되면서 서버로 현재 탁구채의 좌표(int 형)를 웹소켓을 통해 보내는데, 여기서 뒤로 가기 동작을 할 경우 게임 ..

환경 : 바닐라JS SPA 방식 문제 : 안 읽은 메세지 카운터 기능을 구현중에 메세지를 읽지 않았는데 안 읽은 메시지 갯수가 뜨지 않음 사실 수집: A 채팅방에 들어갔다가 다른 컴포넌트로 이동해서 A가 메세지를 보내면 안 읽은 메세지 갯수가 떠야하는데 뜨지 않음을 확인 원인 추론: 1 :1 채팅방에 들어갈때 WebSocket send를 날리고 다른 컴포넌트로 이동을 할때 Webscoket 에 나갔다고 다시 send를 날려야하는데 하지 않아서 이런 버그가 난걸로 예상 조치 방안 및 구현: document.querySelectorAll('a[data-spa]').forEach(link => { link.addEventListener('click', () => { this.leaveWebSocket(); }..

문제 : 전체채팅 페이지에서 한 유저를 골라서 1 : 1 채팅으로 넘어가서 새로고침시 대화방의 내용이 다시 렌더링이 안된다. 다른 페이지에서 웹소켓을 연결을 하고 채팅방 페이지로 오면 문제가 없지만 채팅방 페이지에서 새로고침해서 최초로 웹소켓 연결시 문제가 발생 사실 수집: 문제 재현 과정에서 WebSocket 연결 후 메시지 송수신 과정에서 비동기 처리의 순서 문제를 확인. 새로고침 시 웹소켓 재연결 과정에서 이전 채팅 내용을 fetch하기 전에 웹소켓으로 메시지를 보내려 하였으나, 웹소켓 연결이 완료되지 않은 상태였음. 원인 추론: await checkConnectionSocket(this.socketEventHendler.bind(this)); const $chatRoom = document.que..