실시간 코드 테스트와 디버그
두 플레이어가 상호작용할 때만 나타나는 버그 찾고 고치기
⏱ 예상 ~10분
01 · 읽기
게임은 happy path 에서 작동해요. 두 플레이어가 서로를 찾고, 차례대로 두고, 누군가 이겨요. 하지만 실시간 멀티플레이어 코드에는 여러분이 한 번도 마주친 적 없는 부류의 버그가 있어요.
이런 버그는 타이밍 관련 이에요. 이벤트가 특정 순서로 도착하거나, 플레이어가 게임 중에 브라우저를 닫는 등 예상치 못한 일을 할 때만 나타나요. 정상 테스트에서는 보이지 않아요. 여러분이 '예의 바르게' 플레이하니까요. 좋은 엔지니어는 못된 시나리오도 테스트해요.
핵심 정리
- 실시간 버그는 타이밍 관련. 정상 테스트에서는 안 나타나요
- Disconnect 시나리오가 가장 흔한 버그 출처예요
- Chrome DevTools 에 디버그용 WebSocket inspector 가 있어요
- happy path 만이 아니라 못된 시나리오도 테스트해요
02 · 단계별 설명
Chrome DevTools 로 WebSocket 트래픽을 검사해요. 실시간 통신 문제를 디버그하는 방법이에요.
1. DevTools 열기
게임 페이지 아무 곳이나 우클릭하고 'Inspect' 를 고르거나 F12 를 눌러요. DevTools 위의 'Network' 탭을 클릭해요.
2. WebSocket 필터
Network 탭에서 'WS' 필터 버튼을 클릭해요 (WebSocket 약어). 일반 HTTP 요청을 다 숨기고 WebSocket 연결만 보여줘요.
3. Socket.io 연결 찾기
페이지를 새로고침해요. WebSocket 연결이 나타나는 게 보일 거예요. 클릭한 다음 'Messages' 탭을 눌러요. 보낸 메시지와 받은 메시지가 실시간으로 보여요.
4. 이벤트 흐름 보기
게임을 하면서 Messages 탭을 봐요. 'find-game' 이 나가고 (초록 화살표) 'game-start' 가 들어오는 게 (빨간 화살표) 보여요. 각 메시지는 이벤트 이름과 데이터 payload 를 표시해요. Socket.io 의 궁극적인 디버그 도구예요.
03 · 실기 실습
WebSocket inspector 를 열고 이벤트 흐름을 볼 수 있는지 확인해요.
04 · 체크리스트
이 8 가지 엣지 케이스를 테스트해요. 두 탭을 열고 각 시나리오를 시도해요. 망가지는 게 있으면 버그를 찾아서 고친 거예요.
- 플레이어가 매치메이킹 queue 에서 기다리는 중에 브라우저 탭을 닫음. 서버가 정리하나요?
- 플레이어가 게임 중에 브라우저 탭을 닫음. 상대가 'Opponent disconnected' 를 보나요?
- 플레이어가 이미 점유된 cell 을 클릭. 아무 일도 안 일어나나요?
- 플레이어가 자기 차례가 아닐 때 cell 을 클릭. 아무 일도 안 일어나나요?
- 플레이어가 여러 cell 을 빠르게 클릭. 첫 번째 유효한 수만 등록되나요?
- 게임이 승리로 끝남. 이후 보드 클릭이 무시되나요?
- 플레이어가 게임 후 'Play Again' 클릭. 매치메이킹이 깔끔하게 다시 시작하나요?
- 세 탭 열기: 둘은 게임 중, 하나가 'Find Game' 클릭. 세 번째 플레이어가 제대로 기다리나요?
05 · 프롬프트 템플릿
버그를 찾았든, 아니든, Claude에게 코드 리뷰를 부탁해서 흔한 실시간 문제를 찾게 해요.
tic-tac-toe 게임 코드를 리뷰해서 버그와 엣지 케이스를 찾아 주세요. server.js, game.js, matchmaking.js, public/client.js 를 봐 주세요. 중점 확인 항목: (1) Race condition. 두 이벤트가 동시에 도착하면 어떻게 되나요? (2) Memory leak. disconnect 된 플레이어가 모든 데이터 구조에서 정리됐나요? (3) 상태 불일치. 클라이언트와 서버가 동기화에서 벗어날 수 있나요? (4) 빠진 검증. 플레이어가 자기가 속하지 않은 게임에 move 를 보낼 수 있나요? 찾은 문제를 나열한 다음 고쳐 주세요.
06 · 읽기
실시간 코드 디버그는 기술이에요. 뭔가 잘못되면, 첫 번째 도구는 서버의 console.log 예요. 각 이벤트 핸들러 전후에 로그를 추가해요. 두 번째 도구는 브라우저의 WebSocket inspector 예요. 세 번째 도구는 Claude에게 시나리오를 추적해 달라고 하는 거예요.
대부분의 실시간 버그는 세 부류로 나뉘어요:
1. Stale 참조 — 플레이어가 disconnect 됐는데 그들 socket 이 어딘가에서 여전히 참조되고 있음 2. 누락된 정리 — 게임이 끝났는데 방 데이터가 삭제되지 않음 3. Race condition — 두 이벤트가 예상하지 못한 순서로 도착
게임이 위의 8 가지 엣지 케이스 테스트를 통과했다면 견고해요. 아니라면, 이제 어디를 봐야 할지 정확히 알아요.
핵심 정리
- 서버의 console.log 가 첫 번째 디버그 도구예요
- DevTools 의 WebSocket inspector 가 두 번째 도구예요
- 대부분의 버그는 stale 참조, 누락된 정리, race condition
- 막히면 Claude에게 시나리오를 추적해 달라고 해요
07 · 퀴즈
플레이어가 게임 중에 disconnect 됐는데 서버가 그들 데이터를 정리하지 않아요. 다음 플레이어가 합류하면 어떻게 될까요?
- 새 플레이어가 disconnect 된 플레이어 유령과 매칭돼서 망가진 게임이 만들어질 수 있어요
- 아무 일 없어요. 서버가 자동으로 처리해요
- Socket.io 가 disconnect 된 socket 의 모든 데이터를 자동으로 제거해요
- 브라우저가 disconnect 된 플레이어를 재연결해요
⚠ 전체 인터랙티브 경험에는 JavaScript가 필요해요. JavaScript를 켜고 새로 고침해 주세요.
※ 이 사이트는 독립 운영되는 교육 프로젝트로, Anthropic의 공식 제품이 아니에요. Claude™ 는 Anthropic, PBC 의 상표예요.