온라인 1:1 코딩 배틀 게임 <친다 />입니다.
즐겁고 재미있게 같이 알고리즘을 풀자라는 취지로 기획하게 되었고
실시간 1:1 배틀 게임 컨셉이기에 화상과 채팅 기능을 포함하여 제작하였습니다.
chinda.mp4
2022년6월24일 ~ 2022년8월5일
- 알고리즘 문제를 난이도와 언어별로 나누어 게임을 즐길 수 있습니다.
- 상대방과 실시간으로 화상 및 채팅으로 소통할 수 있습니다.
Name | Appliance |
---|---|
React | 리액트 |
React-redux | 상태관리 |
React-router-dom | 브라우저 리액트 라우터 |
Axios | 서버와 통신을 위한 라이브러리 |
Styled-components | CSS-in-JS 라이브러리 |
History | 페이지 이동 |
SocketJS | 양방향 메시지 송수신 |
StompJS | 텍스트 지향 메시징 프로토콜 |
PeerJs | WebRTC 화상 |
Ace Editor | 코드 에디터 |
howlerJs | 배경음 및 효과음 |
SwiperJs | 캐러셀 |
react-toastify | 알림 팝업창 |
react-modal | 모달창 |
js-confetti | 폭죽 라이브러리 |
react-confetti-canvas | 폭죽 라이브러리 |
S3와 CloudFront 업로드 즉각 반영 안됨
S3 버킷의 내용을 변경했다고 하였지만 사이트에 반영이 되지 않는 이슈
-
가설
- build과정에서 내용 누락 (압축하는 과정에서 정보 누락 가능성).
- S3 자체적으로 반영이 안되는 경우.
- CloudFront의 작동 방식의 문제.
-
과정
- build과정에서 변하지 않는
index.html
에 내용을 추가해보고 안의 내용물을 변경하고 배포하여 build된 파일을 확인해서 문제가 없었지만 반영이 되지 않았음. - S3에 CloudFront를 연결하지 않고 내용물은 변경하고 확인해 본 결과, 변경된 내용이 즉각 반영됨.
- build과정에서 변하지 않는
-
해결
- CloudFront의 작동 방식에 대해서 찾아보니 S3에서 파일을 받아올 때 저장된 캐시가 24시간 유지되는 것을 확인하고 이를 무효화( Invalidations) 작업을 실행해 캐시를 삭제.
Websocket 다중 핸드쉐이크 발생
사이트가 동작하면서 계속 핸드쉐이크가 발생, 요청이 쌓이면서 소켓서버가 터짐.
-
가설
- 페이지 VIEW에 변화가 생기면서 리렌더링 될 때마다 핸드쉐이크가 발생하는 것으로 추측.
-
과정
- useState로 사용하던 변수들을 useRef와 redux로 전역상태관리로 사용해서 렌더링이 발생하지 않게 함.
- 한 함수형 컴포넌트 안에 작성되어 있던 것을 컴포넌트로 분리시켜서 만듦.
⇒ 렌더링의 횟수는 현저히 줄어들었지만, 여전히 핸드쉐이크가 발생.
-
해결
- 함수형 컴포넌트도 함수라는 것을 다시 한번 인지하고, 결국 함수 내부에 선언된 sock과 stomp가 함수가 재호출 되면서 선언 → 초기화 → 할당의 과정을 계속 하다보니, 선언이 될때마다 서버와 핸드쉐이크하는 것으로 추측.
- 함수형 컴포넌트 밖에 전역변수로 미리 sock과 client(stomp over시킬 변수명) 미리 선언해 주고, 함수가 재호출된 때, 초기화 → 할당 작업만 진행되게 만듦.
⇒ 초반 연결 시에만 핸드쉐이크 발생하고 View가 변경되어도 발생하지 않는 것을 확인.
음향 볼륨 조절
- 피드백
볼륨 조절이 필요할 것 같다.
볼륨이 너무 크다.
- 개선사항
- 배경음 및 효과음 볼륨을 on/off가 아닌 5단계로 볼륨 단계를 나누어 조절 가능하게 변경
게임 시작 방식 변경
- 피드백
게임 시작을 명확하게 알 수 없어 시작버튼이 조금 더 분명하게 나타났으면 좋겠다.
상대가 시작을 했는지 모르겠다는 다수의 의견
- 개선사항
- 양쪽 사용자가 ready메세지를 받으면 바로 게임을 시작하는 기존의 방식에서 양쪽이 ready를 누르면 상대의 ready가 보여 가시성을 높였고 방장에게 게임을 시작할 수 있는 버튼을 추가
튜토리얼이 자동으로 보여지는 기능 추가
- 피드백
뒤로 가기 버튼이나 따로 설명이 없어서 뒤로 갈 때 사용하기가 어렵다.
이것저것 눌러보다가 언어 누르니까 뒤로 가게 되었다며 서비스에 대한 이해 부족으로 이탈률을 줄이기 위한 개선 필요
- 개선사항
- 최초 사용자에게 튜토리얼이 자동으로 보여지는 기능 추가
정원초과 알림
- 피드백
인원이 찬 방에 입장이 가능하다며 개선 요청
- 개선사항
- 정원초과 알림 기능 추가
이름 | GitHub | 포지션 |
---|---|---|
최성우 | https://github.com/ChoiSungwoo1216 https://tjddn8195.tistory.com/ |
FE🔰 |
이민석 | https://github.com/leeminseok22 | FE |
이윤영 | https://github.com/yunyeongyee | FE |
이정찬 | https://github.com/biolkj28 | BE🔰 |
문수찬 | https://github.com/MrEnum | BE |
이동재 | https://github.com/Epikoding | BE |
허화영 | https://www.instagram.com/workoon__21 | 디자이너 |
- DuckTales The Moon Theme
- Action52 CheetahMen Theme
- Pokemon Gold & Silver Goldenrod City