[Projects] 라이어게임:비밀의 문

개요

• 개발기간 : 2022.11.04 ~ 2022.12.02
• 인원 : 총 6인 (FE 3인, BE 2인, Design 1인)
• 기술 : JavaScript, React, Redux, SCSS, WebSocket, WebRTC
• 주요기능
  1. 화상채팅과 채팅
  2. Web Socket을 이용한 게임 기능
  3. 실시간 업적 달성 알림 기능
  4. 게시글, 댓글 CRUD 및 검색 및 정렬 기능
  5. 로그인, 소셜로그인
• Github : https://github.com/HangHae-TheFinalProject/FrontEnd

---

시연 영상

 

---

작업 내용

• Open vidu를 이용하여 게임 내 화상채팅 기능 구현
  • Class component로 작성된 Open-vidu 코드를 Function component로 변경하여 작업
  • 게임 룰에 맞게 mic 송출 제어 기능 구현
• WebSocket을 이용하여 게임 룰 구현 🔖Link 
• AWS Amplify를 이용하여 자동배포
• Github issue tracker(Issues, Projects, Pull requests) 를 이용하여 협업
• 시범 서비스를 통해 생성된 게임 방 669개, 회원 239명, 플레이된 게임 657판.
  그리고 36 건의 피드백 수집 및 개선 경험
• Sentry를 이용하여 User side error log 실시간 수집 및 Hotfix
• 그 외 팀원 기능 구현 헬프
  
  • 게시글 목록 페이지네이션과 정렬
  • 채팅 조건부 Style 설정

---

트러블 슈팅

• 카메라/마이크 접근이 거절된 경우 Open-vidu 서버에는 접속하지 못한 채로 Game room에 접속되어 정상적인 게임 진행 불가.
  Open-vidu 서버 접속 실패 시 Game room 입장을 제한해야하나 라이브러리 내에서 오류가 발생해서 예외 분기점을 잡기 어려웠다.  navigator.medisDevices.getUserMedia()  함수를 통해 Device 접근 가능여부를 Game room에 접속하기 전에 미리 체크하여 예외처리했다.
• Login 직후 Axios header에 Token이 전달되지 않는 문제점 확인
  Login 성공 시 Instance header에 Token을 전달하는 Interceptor 함수를 추가하여 해결했다.
• Game-room 입장 직후 Mike 또는 Video On/Off 버튼 클릭 시 페이지가 멈추는 오류
  배포 후 Sentry를 이용하여 Error log가 수집되어 확인.
  Open-vidu 서버에 접속되기 전에 Mike와 video를 제어했을 때 발생하는 오류로 확인되어 Game room 로딩이 완료되기 전 렌더링 되지 않도록 수정하여 해결했다.

---

회고

• 부트캠프 내내 반복된 CRUD가 아닌 다른 기능을 경험해보고 싶다는 의지로 선택한 기획이었다.
  이로 인해 WebSocket과 WebRTC를 경험할 수 있었던 점도 꽤 좋았지만 그보다 즐거웠고 나에게 큰 자신감을 얻게 해준 포인트는 이 프로젝트가 강좌로 지어진 프로젝트가 아니라는 점이었다.
  커리큘럼에는 전혀 없던 기능들이라 Google과 Github, Youtube 등 야생의 글들을 뒤지고 스스로 생각하고 테스트해가며 필요로 하는 기능을 완성했다는 점이 앞으로 어떤 기능을 구현하게 되더라도 부족할 지언정 근처에도 못가지는 않겠구나. 싶은 자신감이 생겼다.
  다만 Redux, Redux-Toolkit 등 배운 기능의 능숙한 사용을 보여 주기에는 부족한 기획이었다.
• Styled-components를 사용하며 가독성에 아쉬움을 느꼈고, Nesting, Mixin 등의 기능을 통해 보다 합리적인 구조를 만들 수 있을 것으로 기대되어 SCSS를 사용했으나 이점을 잘 살리지 못한 것 같아 아쉽다. 차후에는 SCSS 7-1 Pattern을 활용해보고 싶다.
• Open-Vidu에서 제공한 소스가 Class component로 작성된 코드였는데 이를 100% 활용하지 못했다. 시간이 넉넉했다면 전체 코드를 Function component로 만드는 작업을 더 시도해보았을 것 같다.
• 유저 사이드에서 발생한 모든 버그를 해결하지 못했다. 왜 문제가 발생했는지, 어떤 케이스에서 발생한 문제인지 자세히 알고 싶고, 어떤 예외처리를 추가했어야했는지는 아직도 고민이 된다.