👥 팀원
🌞 Front-end : 이윤, 김정욱
🌝 Back-end: 서만원, 장현석, 이영균
🃏 프로젝트 소개 - 시연 (1분 30초 정도)
기획의도 :
팀원들 모두 게임을 좋아하고 평소에 즐기기 때문에 그동안 배워왔던 게시판 형식의 사이트가 아니라 실시간으로 유저들이 즐길 수 있는 게임 사이트를 어떨까? 라는 생각과 함께 특히 해리포터를
좋아하는 팀원의 의견으로 마법사 카드 게임으로 기획 되었다. 개발하는 저희 또한 재미있게 개발 할 수 있고 좋아하는 분야인 만큼 좋은 결과물이 나올 수 있다고 생각했다.
기술적으로는 단순한 CRUD가 하기 싫다는 점이 있다. 물론 우리 프로젝트는 웹이라는 관점에서 CRUD를 바탕으로 하고 있지만 언어와 프레임워크에 충실하게, 객체지향과 상태관리를 통해서
서비스 로직을 어디까지 구현해 볼 수 있는 가를 테스트 하는 프로젝트였다고 생각한다
- 내용 : 술에 취한 마법사들이 시비가 붙어서 싸움을 벌인다!? 웹에서 즐기는 2:2 카드 대전 게임!
- 주요 기능
- SNS 로그인
- 현재 접속중인 유저 확인
- 나의 전적 확인
- 게임방 생성 & 진행
- 웹 소켓을 이용한 로비내 다대다 채팅 구현
- 웹 소켓을 이용한 카드게임
📌 아키텍처
<aside>
🗒️ 클라이언트 - 이 파트는 대본 따로 써드리겠습니다.
- 실시간 게임 통신을 위해 stompJS와 sockJS 를 이용한 소켓 통신을 구현함
- 주된 비동기 통신은 리액트 쿼리를 이용함 - 이유 쓰자
- 인게임에서 사용되는 게임 데이터는 리덕스 툴킷을 사용해서 관리함
</aside>
<aside>
🗒️ 서버
- STOMP를 사용한 이유
- STOMP란, websocket 위에서 동작하는 문자 기반 메세징 프로토콜로써 클라이언트와 서버가 전송할 메세지의 유형, 형식, 내용들을 정의하는 매커니즘이다. 기본적으로 pub/sub 구조로 구성되어, 메세지를 전송하고 받아 처리하는 부분이 확실히 정해져있다. 장점으로 메세지 포맷을 정하지 않아도 사용가능하다.
- 우리의 경우, STOMP를 이용해서 다자 간의 채팅, 그리고 게임이 동작하게 만들어야 했다. 따라서, 메세지 브로커를 이용해서 메세지를 전송하고 받아 처리하는 부분이 확실해야 했고, 일일이 메세지의 포맷을 정하지 않아도 되는 STOMP를 활용하기로 결정했다.
- 가장 주요했던 점은 클라이언트와 서버가 전송할 메세지의 유형과 형식, 내용들을 자유롭게 정의할 수 있다는 점이었다. 원하는 기능과 원하는 정보를 원하는 상황에 줄 수 있다는 장점이 주요했고, 이를 STOMP의 pub/sub 구조를 통해 확실히 처리할 수 있었다. 그리고 Spring Security를 이용해서 메세지를 보호할 수 있었기 때문에 STOMP를 사용했다.
- 다중 Database를 사용한 이유
- 게임 데이터는 게임이 진행되는 동안 빈번하게 데이터의 조회를 요청, 만약 대량의 트래픽이 짧은 시간 안에 집중될 경우 병목으로 인한 여러 문제가 예상되는 상황
- 일반적인 관계형 데이터베이스는 서버와 통신을 위해 네트워크 연결을 통할 수 밖에 없고 여기서 발생하는 지연시간은 데이터베이스 조회의 속도를 느리게 하는 원인
- 그렇기에 게임데이터는 IMDB H2 database 에 저장하고 유저정보는 MySQL에 저장하는 멀티소스 데이터베이스 구축
</aside>
🛠️ 주요 기술
📌 Front-End