[항해99] 9주차 실전프로젝트(2) 회고

😎이번주에 한 일

🤼‍♀️우리팀이 한 일

1. WebRTC + WebSocket
   • WebRTC
     • Signaling Server와 client가 WebSocket을 이용하여 통신
     • Signaling Server를 매개로 각 클라이언트가 서로의 SDP(Session Description Protocol) 를 교환하며 Peer Connection 연결
     • webRTC 연결이 필요한 페이지들에서 webRTC 연결을 담당하는 컴포넌트를 유지함으로써 연결이 끊기지 않게 유지
     • 다른 클라이언트들과 연결된 Peer Connection의 정보는 각 클라이언트에서 관리됨
     • 더 이상 webRTC 연결이 필요 없는 경우 연결을 초기화함
   • WebSocket
     • WebSocket을 이용하여 서버에 게임 진행 관련 데이터를 전달함 ( 게임 준비, 시작, 게임중 상태 등…)
     • 서버는 데이터를 받아 DB에 접근하여 해당 게임 진행 관련 데이터 상태 변경
     • WebSocket으로 클라이언트에 해당 데이터를 전달함으로써 실시간성 보장
2. 게임 메인 로직
   • 게임 시작
   • 제시어 제출
   • 제시어를 보고 이미지 제출 ( 제출 시 DB, S3 업로드 함께 이루어짐)
   • 이미지를 보고 제시어 제출
   • 게임 정상 종료
   • 게임 비정상 종료
3. 게임 방 관련 CRUD
   • 게임방 리스트 읽기
   • 게임방 생성
   • 게임방 입장
   • 게임방 퇴장
   • 게임 방장(host) 권한
4. 비회원 / 회원 처리 완료
   • 회원, 비회원 검증부 통합
   • 회원, 비회원 쿠키 개별 관리 및 처리
   • 검증 로직 모듈화
   • 모듈에 웹소켓 인증부 추가
5. 디자인 작업
   • 로그인 페이지
   • 게스트 페이지
   • 로비 페이지
   • 게임방 페이지
6. 이미지 데이터 삭제 스케쥴러 구현
   • 일정 시간마다 좋아요 여부에 따라 자동으로 이미지가 삭제되는 로직
   • Spring의 @Scheduler cron 사용하여 구현
   • 해당 로직에 Spring batch + Scheduler quartz 이용한 구현이 오버스펙인지?
   • (하단 질문 리스트)

👩🏻‍💻내가 한 일

• 게스트 로그인 / 카카오 로그인 연동
• 방 CRUD api 연동
• React-Query 적용 취소 (서비스의 성격과 맞지 않음)
• 로그인 페이지 → 게임방까지의 스타일 적용 완료

주간 멘토링

팀 질문

1. 게임방 리스트 조회

polling

단점 : 실시간 효과를 내려면 간격을 줄여야 하지만 서버와 클라이언트에 부담을 줄 수 있으며 보낼 데이터가 없어도 계속해서 데이터를 주어야하므로 서버의 리소스를 낭비하게된다.

장점 : 항상 연결이 유지 되어 있어 변경에 매우 민감하게 반응하며 사실상 실시간으로 통신이 가능하다.

websocket

단점 : 연결을 유지해야하기 때문에 서버의 부하가 발생할 수 있다.

장점 : 게임 방 리스트가 변경되면 즉각적으로 웹 소켓이 연결되어있는 클라이언트에게 전달되므로 실시간성을 보장받을 수 있다.

 

long-polling

장점 : 매우 간단하며 응답 간격을 일정하게 할 수 있다.

단점 : 요청간격이 줄어든다면 polling보다 훨씬 많은 데이터를 보내게된다.

 

게임 방 리스트를 불러오는 방식에 대하여 여러가지 의견이 있었습니다.

현재 저희 조에서 논의된 방식은 polling, longpolling, websocket 등이 있습니다.

 

2. SockJS vs StompJS

게임 진행중, 그리고 게임 결과 화면에서 websocket으로 서버와 통신을 해야 할 필요가 있습니다.그러나 stomp는 string 혹은 binary 데이터만 전송이 가능한데 이미지파일 역시 binary 데이터로 전송이 가능한지, 그리고 text를 전송하기 위해 만들어진 stompjs를 websocket처럼 사용하는것이 올바른 사용법인지가 의문이였습니다.

 

그러나 websocket을 이용하여 서버와 통신을 했을 때 서버단에서 코드가 지나치게 복잡해지는 문제가 있었습니다. 또한 정형화된 타입이 없어 코드 작성중 실수를 하더라도 에러를 throw하지 않고 잘못된 방식으로 작동하는 경우가 있었습니다. 이를 해결하기 위하여 stomp를 고려하게 되었습니다.

 

답변

1. 현재 유스케이스에는 SSE가 맞는 방식, polling과는 비슷하지만 push만 해주는 방식입니다.

2. 이미지 파일은 바이너리 형태로 전달 가능합니다. 올바른 방법대로 생각하고 계신 것 같습니다.

STOMP는 헤더를 추가하거나 소켓을 관리하는 것을 편하게 해주기 때문에 사용합니다.

같이 쓰면 좋고 왜 사용하는지 정확히 알고 사용해야합니다.자료를 많이 찾아보고 STOMP를 사용하시는 걸 추천드립니다.

Sending images/files over Sockjs + Spring Websocket + Stomp

피드백

1. swagger를 사용하세요

노션을 사용하면 백엔드에서 업데이트되는 내용들이 실시간으로 반영되지 않습니다.

2. 연동을 하면서 로직을 구현하세요

마일스톤을 짧게 잡으면서 조금 만들고 연동하는 식으로 작업하세요.