[TIL] WebRTC 프로젝트 트러블슈팅 (DB · WebSocket · Frontend)
📌 오늘 한 일
WebRTC 기반 스터디룸 기능을 연결하는 과정에서
DB, WebSocket, 프론트엔드 아키텍처 전반에서 발생한 에러들을 직접 추적하며 해결했다.
❗ 트러블슈팅 정리
1. 데이터베이스 및 백엔드 (Persistence Layer)
1-1. JPA 엔티티와 DB 테이블 미동기화
문제
- 서버 실행 시
Table 'virtudy.room_member' doesn't exist에러 발생
원인
- JPA 엔티티만 정의
- 실제 DB 스키마 업데이트가 누락된 상태
해결 ```yaml jpa: hibernate: ddl-auto: update
→ 엔티티 기준으로 테이블 자동 생성 및 동기화
1-2. 중복 입장 오류와 Ghost Session 문제
문제
방 입장 시 이미 다른 방에 참여중입니다 예외 발생
원인
비정상 종료 시 study_session.end_time이 NULL로 남음
서버가 해당 유저를 아직 방에 있는 것으로 판단
해결
MySQL Safe Update Mode 해제 후 비정상 세션 정리
SET SQL_SAFE_UPDATES = 0; DELETE FROM study_session; SET SQL_SAFE_UPDATES = 1;
- 네트워크 및 실시간 통신 (Signaling Layer) 2-1. WebSocket 404 Not Found (포트 혼동)
문제
SockJS 연결 시 404 Not Found 발생
원인
API 서버(8080)와 WebSocket 서버(8081) 포트를 혼동
해결
WebSocket 전용 포트로 URL 명확히 분리
const SOCKET_URL = “http://localhost:8081/ws”;
- 프론트엔드 아키텍처 및 WebRTC (Interface Layer) 3-1. RoomManager 메서드 누락으로 인한 TypeError
문제
캠 활성화 시 rm.setCameraEnabled is not a function 에러 발생
원인
UI와 Hook에서는 기능을 호출
실제 동작을 담당해야 할 RoomManager 클래스에 메서드 미구현
해결
RoomManager.ts에 직접 메서드 구현
setCameraEnabled
setMicrophoneEnabled
sendControlMessage
clearTrackListeners
3-2. Hook과 Component 간 인터페이스 불일치
문제
useStudyRoom에서 반환하지 않는 값을 StudyRoomPage.vue에서 구조 분해 할당
TypeScript 타입 에러 발생
해결
Hook 반환 객체와 Component 수신 변수 1:1 정합
필요 구간에서는 as any로 타입 검사 우회
💡 오늘 느낀 점
JPA 엔티티만 정의했다고 DB가 자동으로 맞춰지는 것은 아니다.
실시간 서비스에서는 세션 종료 실패가 치명적인 버그로 이어질 수 있다.
WebRTC 이전에 포트와 역할 분리를 먼저 명확히 해야 한다.
is not a function 에러는 단순 문법 문제가 아니라 설계 책임이 어긋났다는 신호라는 것을 다시 느꼈다.