GameCrew

프로젝트 개요

2023.10 ~ 2023.11_6주, FE:2, BE:2

다양한 멀티게임을 함께 즐길 수 있는 사람들을 찾는 간단한 채팅 기능이 내장된 커뮤니티 애플리케이션

 

만들게 된 계기

새로운 기술을 배우고자 SWR, Emotion, Socket, AWS를 활용하여 프로젝트를 진행하였다. 게임을 즐기는데 있어 대규모 멀티게임에서 함께 할 동료를 찾는 것이 어려웠다. 블로그, 카페, 디스코드 등을 활용해보았지만 어려운점이 많았다. 이에 실제 게임을 즐기는 사람들을 위한, 빠르게 동료를 찾을 수 있는 멀티게임 커뮤니티 애플리케이션을 만들기로 결정했다. SWR로 서버 데이터를 가져오고, Emotion을 활용하여 스타일링을 하였으며, Socket을 통해 채팅 기능을 구현하고 AWS를 활용하여 배포해보기로 하였다.

 

기술스텍

React, Vite, TypeScript, Swr, Emotion, AWS, Jira

 

디자인

https://www.figma.com/file/sHxiS5VR0eoDwlNlEKLHKA/Untitled?type=design&node-id=5-291&mode=design&t=enlv5PZghXUyL2U3-0

 

Figma Ai를 통해 Wire Frame을 구현하였다

원하는 부분과 다른점이 많았기 때문에 Ai가 만들어준 틀에서 필요한 부분만 빼내어 수정해 사용하였다

 

진행과정

1. 아이디어 설정
2. 기술적 의사결정
3. Jira confluence에서 문서 관리
4. MVP 설정 및 Figma AI를 통한 WireFrame 구현
5. GroundRule 설정 및 Convention 설정
6. Vite를 통한 환경구축
7. Jira와 Github를 연동하여 repository관리 및 개발환경 설정
8. 개발

 

후기

트러블 슈팅

1. 실시간 채팅시 입장하셨습니다라는 시작글이 여러번 되는 문제(코드 링크)
   • 문제: 처음 구독을 할때 입장을 알리는 메세지를 보내는데 다른방을 갔다가 다시 원래대로 이동했을 경우 처음 시작일지라도 시작 메세지를 여러번 보내는 문제
   • 해결: useEffect의 클린업 부분에 해당 채팅이 마칠 경우에 구독을 끊고 연결도 끊도록 설정
2. CloudFront 캐시 무효화(코드 링크)
   • 문제: 캐쉬로 인해 S3에 새롭게 배포해도 24시간 뒤에 CloudFront가 적용됨
   • 해결: yaml 파일을 수정하여 S3를 배포한 후 CloudFront 캐쉬를 무효화 하도록 함
3. SSL발급 및 서브도메인 설정(블로그 링크)
   • 문제: 서브 도메인을 통해 동일한 도메인을 사용하려고 하였으나 설정 과정에서 SSL발급 및 서브 도메인 설정이 안됨
   • 해결: 설정 과정에서 제대로 도메인이 설정이 안된 문제여서 Route53에서 Gabia에서 구매한 도메인을 호스팅 영역에 추가하고 단순 레코드 정의에서 설정한 값을 토대로 작성함

 

아쉬웠던 점

디자이너분 없이 프론트 2명에서 디자인부터 개발까지 해야했는데 둘다 디자인쪽은 잘 모르고 어려워 디자인을 직접하기 보다는 Figma Ai를 사용해 제공해주는 것을 필요한 부분만 수정하여 사용하였는데 하고 보니 별로여서 차라리 템플릿을 가져와 수정하는 것이 어땠을까 하는 부분이 있다. 차리라 그것이 더 이쁘고 시간도 단축되었을 것 같다. 또한 일정관리와 GroudRule를 개인의 양심에 맡겨 단기적 목표를 도달하지 못해 일정이 밀리는 일이 발생하였는데 좀더 제제력이 있게 했어야 했다는 생각이 든다. 차라리 모이는 시간을 정하여 캠을 키고 집중하는 시간을 가진다든가 단기적 목표를 확실하게 설정하고 이행할 수 있게끔 했어야 했는데 아쉽다. 또한 Api 설계나 기술스택 선정에 대한 원할하지 못한 의사소통 부족으로 시간을 잡아먹는 부분도 발생했다. 처음에 같이 Api 설계를 했지만 시간이 흐르고 보니 조금씩 부족한 부분이 보여 수정해야하거나 설계를 따라가지 않은 부분도 발생하여 시간을 내어 Api를 점검해야해 회의 시간이 길어졌으며 채팅을 구현하기 위해 socket으로 코드를 구현했지만 백엔드에서 stomp를 사용함에 따라 프론트도 뒤늦게 stomp를 사용해 코드를 변경해야하는 문제가 발생했다.

 

느낀 점

프로젝트를 통해 AWS를 실제로 활용하여 배포환경을 구축한 경험이 매우 의미 깊었다. 이전 프로젝트에서는 부분적으로 참여하여 AWS를 다루는데 한계를 느꼈는데 이번 기회를 통해 AWS 배포에 대한 심도 있는 이해를 갖게 되었다. 또한, Socket과 Stomp를 이용한 채팅 구현, SWR을 활용한 데이터 요청 및 관리 등 새로운 기술들을 적용하며 성장할 수 있는 기회를 가졌다. 아직 SWR 다루는 것에 부족한 점이 많지만 좀더 공부하고 반복 숙달해야겠다

이번 프로젝트를 진행하면서 아쉬운 점이 많았는데 다음에는 명확한 단기 목표와 집중하는 시간을 설정하여 효율적인 일정 관리와 목표 달성을 이루기 위해 노력하며 충분한 논의와 검토를 통해 발생할 수 있는 문제를 최소화 할 수 있도록 해야겠다. 또한 이번에 백엔드 쪽에서 stomp를 사용하는 것을 몰라 채팅을 구현하는데 애를 먹었는데 이런 기술적 조율이 중요하다는 것을 깨닫게 되어 다음번에는 효율적인 프로젝트 관리와 의사소통으로 더 나은 프로젝트를 구현해야겠다