websocket에 흥미가 생겨 공부하고 이것을 정리하며 직접 구현해보기 위해 만든 체스 게임입니다.
- 유투브 시연영상 보기 클릭!
- 이미지
-
홈페이지
-
로그인
-
체스페이지
-
체스ing-1
-
게임종료
-
- 2023년 2월 ~ 5주
- Typescript
- Express
- Socket.io
- Zustand
- Styled-Components
| 페이지 | 내용 |
|---|---|
| 홈페이지 | 홈 화면에서 입장하고자하는 방이름, 혹은 이미 생성된 방이름을 입력하여 게임방에 입장할 수 있습니다. 입장가능한 최대인원수는 2명이고 정원이 찬 방에 입장하고자하면 알람을 통해 입장 불가사유를 알립니다. 로그인을 할 수 있습니다. 로그인한다면 이후 게임 결과에 따른 승패를 기록할 수 있습니다. |
| 체스페이지 | 최초 입장시 입장 순서에 따라 내가 몇번 플레이어인지, 무슨색 말인지 알람을 통해 확인할 수 있습니다. 마찬가지로 상대방이 입장하거나 게임 준비, 말이 잡힐 때 등 알람을 통해 확인할 수 있습니다. 양측이 Ready 버튼을 누르면 게임이 시작되며, 누구의 순서인지 쉽게 확인할 수 있도록 배경화면의 색과 문구가 뜹니다. 채팅을 통해 게임준비 하라는 등의 대화를 나눌 수 있습니다. 각각의 체스말을 클릭하면 이동가능한 타일이 표시됩니다. 게임이 종료되면 리게임을 하거나 게임방을 나갈 수 있습니다. |
| 1. 체스 판 그리기 | |
|---|---|
| 문제 상황 | 체스판을 어떤 방법으로 그릴까. |
| 해결 방법 도출 및 해결 |
체스판을 구현할 때 Canvas와 HTML/CSS중 어떤 기술로 구현을 할까 생각했지만, 체스라는 게임 특성상 Reflow로 인한 이슈가 거의 없을 것이라 생각하여 순수하게 HTML/CSS로 구현하였으며 체스판을 효율적으로 구현하기 위해 Grid를 활용하였습니다 |
| 2. 상태 관리 | |
|---|---|
| 문제 상황 | 상태를 관리해야 할 값들이 많고 사용할 컴포넌트가 많다. |
| 해결 방법 도출 및 해결 |
체스 말의 이동, 상태, 및 차례 등등 많은 상태를 효율적으로 관리하기 위해, 사용이 용이하며 가벼운 전역 상태관리 라이브러리인 Zustand를 이용하였습니다 |
| 3. 체스 상태 관리 | |
|---|---|
| 문제 상황 | 체스의 상태를 서버에서 관리 할까, 클라이언트에서 관리할까. |
| 해결 방법 도출 및 해결 |
각 체스의 알고리즘과 이것을 socket을 이용하여 양측에 반영하는 과정에서 모든 체스 정보를 서버에 저장 후 클라이언트에 반영할지, 각각의 클라이언트에서 체스 정보를 바로 처리할지 고민했지만, 실제 상용 서비스 프로그램은 아니어서 서버에 정보를 저장해 둘 필요가 없고, 클라이언트 측에서 충분히 각 체스 말 정보를 처리할 수 있기에 후자의 경우로 프로그래밍 했습니다 |
| 4. 체스의 표현 | |
|---|---|
| 문제 상황 | 상대방의 체스를 잡거나 잡힐때 체스 상태를 어떻게 관리해야할까. |
| 해결 방법 도출 및 해결 |
현재 체스판의 모든 상태(내꺼, 상대꺼)를 전역으로 관리중이므로 체스판을 3가지 영역으로 분리. 1.내 체스말, 2. 상대 체스말, 3. 빈영역 움직일 체스말 클릭시 토글로 이동가능한 영역을 클릭가능. 클릭한 곳에 상대 체스말이 있을 경우 해당 영역의 체스 상태를 나의 말로 덮어씌어 업데이트. 소켓을 통해 체스 상태를 상대방에게 전달해 상대방의 체스판도 업데이트. |
| 5. 배포 | |
|---|---|
| 문제 상황 | 배포 비용이 부담스럽다. |
| 해결 방법 도출 및 해결 |
FrontEnd는 aws EC2, backEnd는 aws ElasticBean 에 배포중이였는데 달에 6만원가까이 비용이 청구됨. 너무 과도한 비용이라 느끼고 무료 혹은 좀더 저렴한 배포를 위해 프론트는 vercel, backend는 railway에 배포함. 달에 최대 1만원 청구 예상됨. |