접속한 사용자들이 실시간 소통을 통해서 “생선을 훔쳐 간” 고양이를 찾는 컨셉의 채팅 기반 웹 게임
2021.10/29(금) ~ 2021.11.05(목) 7일간
사용자들은 실시간으로 대화하면서 생선을 훔쳐 간 마피아 고양이를 찾아야 합니다. 이를 위해서 사용자에게 재미있는 게임 요소를 주어 사용자들이 투표를 통해서 마피아를 찾을 수 있는 게임 입니다.
소켓 통신을 이용한 사용자간 양방향 채팅 기능입니다.
게임 시간, 게임 상태 메시지 등 게임 정보 노출 영역입니다.
사용자의 투표 영역 및 투표 결과를 보여주는 영역입니다.
프로젝트의 논리적 흐름은 다음과 같습니다.
-
배운점 socket.io 라이브러리를 사용하며 실시간 채팅을 구현해 볼 수 있었습니다. 게임 로직을 플로우 차트를 작성하며 파악해볼 수 있었습니다. 상태 관리를 안전하게 하기위해 클로저로 setter, getter 접근자 프로퍼티를 사용해보았습니다.
-
아쉬운 점 반응형을 구현하기에 아직 CSS실력이 부족하다는 것을 느꼈습니다. 조장을 맡아서 처음으로 git flow 를 총괄하며 이슈를 관리하니 conflict가 났을 때 두려움이 더 커지고 책임감도 생겼습니다. 아직도 가독성 좋은 변수명과 코드를 작성하기 어려웠다. 리팩토링을 하며 비슷한 일을 하는 함수들을 중복을 줄여 하나로 만들고 싶었지만 몇개는 해결한 반면 해결하지 못한 함수들도 많았습니다.
느낀 점 / 배운 점 채팅 게임을 기획하면서 서버 통신이 잘 구현될지 막연하게 느껴졌는데, 생각보다 잘 구현이 되어 뿌듯합니다. Socket.IO 라이브러리의 Documentation을 읽으며 사용법을 파악하면서 JavaScript 기본 개념이 왜 탄탄해야 하는지를 느낄 수 있었다.
아쉬운 점 / 노력할 점 시간 관계상 Web Socket 공부를 하지 못한 것이 아쉽습니다. 프로젝트 이후에 Web Socket과 Socket.IO 라이브러리를 비교해 보며 라이브러리의 장점과 쓰임새를 파악해 보면 좋을 것 같습니다. 게임 로직 구현 시에 이슈가 많아서 예상보다 구현 완료가 늦어졌고, 때문에 리팩토링에 할애할 시간이 많이 줄어서 아쉽습니다. 팀원들과 시간을 내어 함께 리팩토링하고, 부족한 점을 보완하는 시간을 가지면 좋을 것 같습니다.
“짧은 기간 안에 많은 성장”
이번 프로젝트를 통해서 새로운 개념인 Socket.io에 대해 공부할 수 있었다는 점이 가장 큰 수확이었습니다. 실제 현장에서 프론트엔드 개발자로서 백엔드 개발자와 협업하게 될텐데, 소켓 개념을 통해서 실제 서버와 클라이언트가 소통하는 방식을 간접적으로 알 수 있어서 의미있는 시간이었습니다. 또 복잡한 로직을 구현하기 위해서, flow chart를 통해 구현 사항을 정리하여 구현 목표를 달성할 수 있어 좋은 개발자로 한 발짝 성장했다고 생각합니다.
느낀점 지금까지 해왔던 프로젝트는 기존에 배운 JavaScript를 사용해서 하는 경우가 대부분이었고 저 또한 익숙한 것을 하는것을 좋아하였습니다. 그러나 이번에는 JavaScript뿐만 아니라 새로운 기술인 socket io를 사용해서 구현을 해야해서 이것을 해낼 수 있을지 막막하였습니다. 하지만 소켓에 대한 공부를 하면서 실제로 이 기술이 그렇게 어려운 기술이 아니라는 것을 알게 되었고 직접 구현해보면서 자신감을 얻고, 제 comfort zone을 벗어나 새로운 기술을 사용하는것에 대한 저의 두려움을 없애준 프로젝트가 되었던 것 같습니다.
배운점
- webpack과 같은 bundler와 함께 클라이언트 측 socket io를 사용하는 방법(socket io client)
- ws와 socket io의 차이
- ws는 W3C에서 관리하는 WebAPI
- socket io는 표준이 아닌 라이브러리 (ws보다 더 많은 기능 지원하며 이전 버전 호환까지 지원)
- Socket을 사용한 앱에서는 http server와 socket에서의 cors에러가 각각 발생해 둘 다 처리해주어야 한다는 점
- socket에서의 cors 처리 방법
- 일반 http server에서의 cors 처리 방법
아쉬운점
- 기능 구현을 다 완료하고 보니 리팩토링 시간이 충분하지 않아서 많이 못하였던 점
- 확장성을 고려하면서 코딩을 하지 못한점
- socket io에 대한 더 깊은 이해