3D Pong (ft_transcendence)

2023년 6월 2일

github: https://github.com/3DPong/transcendence

1️⃣ 시작 전 마음가짐 #

42서울이라는 프로그래밍 교육과정에서 마지막 과제로 웹 프로그래밍 과제를 하게되었다.
시간이 오래걸리는 과제라는걸 이미 알고있었기에 드랍할지 진행할지 많은 고민을 하고있었다.
웹 취약점 점검 일을 할때에도 js, html, css 만 알고있던 상황에서 리액트가 어떻게 동작하는지 정확히 알수 없어서 궁금하던차에 42서울을 어차피 끝내려면 해야하는 과제라 잘됐다고 생각하기로 했다.

2️⃣ 프로젝트 소개 #

과제인 만큼 어느정도 구현 요구사항이 정해져 있다.

강제화된 기술스택 #

백엔드는 nestjs
프론트엔드는 typescript 프레임워크
스테이블 버전을 사용해야한다.
postgreSQL 데이터베이스
도커 컴포즈로 인프라 구현

기능 요구사항 #

42 OAuth API로 로그인 구현
two-factor 인증
웹소켓을 이용한 멀티 ping-pong 게임

매치메이킹 시스템
파워업 모드 등 게임 모드 추가

웹소켓을 이용한 멀티 채팅 (내가 담당했던 기능)

private(비공개) / public(공개) / protected(비밀번호) 타입의 채널
DM 기능
소유자 기능 (권한 부여)
관리자 기능 (킥, 밴, 뮤트)
채팅메시지로 게임 초대
다른 유저의 프로필을 확인 가능해야함

3️⃣ 프로젝트 시작 #

팀원 구성 #

총 5명으로 구성되었고, 프로젝트에 들어가는 시간이 시간인지라 할까말까 고민하던 시기에 아는사람의 소개로 이미 뭉쳐있던 4명의 팀원들 사이에 끼게 됐다.
간단하게 작성할 것이기 떄문에 팀원들에 대한 설명은 생략한다.

역할분담 #

프론트 2명, 백엔드 3명으로 진행했는데 프론트 다른 한분인 민규님과 상의한 결과 가장 할일이 많은 채팅부분과 나머지 이렇게 나누기로 해서 나는 채팅을 가져가고 민규님은 나머지(게임 + 로그인)을 진행하기로 했다.

프로젝트 기간 #

팀원을 알게된건 2월 중순이였지만, 나만 inception 과제가 남아있는 상황이라서 프로젝트 시작을 못하고 있었다.
2월말까지 inception을 빨리 끝내고 프로젝트를 시작하기로 했는데 미리 끝낼 수 있는 기능회의, 테마회의 등을 시작하기로 했다.
그래서 실질적인 시작 날짜는 2월 중순에 시작했고 대략 2달이 걸렸다.

회의 (2w) : 2월 중순 ~ 2월 28일
개발 (4w) : 3월 1일 ~ 3월 30일
API 연결 (1w) : 3월 31일 ~ 4월 8일
리팩토링 (3w) : 4월 8일 ~ 4월 26일
평가 (0w) : 4월 27일
버그수정 (8w) : 계속

4️⃣ 완성품 및 후기 #

시작할때 회의에서는 테마를 어떻게해야 더 멋있을까 라는 생각을 했는데, 구현하다보니 길어지고 버그 고치고 이런 부분에서 어려움이 많고, css도 고치려고 하니 쉽지 않았다.
역시 교수님이 바라는 결과물과 내가 만든 결과물은 천지차이인것같다. 그래도 처음부터 공부한것 치고는 Atomic 디자인 패턴을 적용해서 구조도 깔끔하고 재활용성 있도록 구현하려고 노력했다고 생각한다.
리액트에대해서도 어떻게 동작하는지 알게돼서 궁금증은 해결됐고 협업할때 깃허브를 잘 쓰는 방법들도 많이 배운것같아서 아깝지 않은 시간이라고 생각한다.

채팅방 리스트와 채팅 #

채팅을 만들때 여러 문제에 직면했다. 안그래도 처음해보는 웹 프론트 개발이라 구조를 제대로 짜지 못하고 발생한 문제들이 많았다.

기본 소켓은 연결 시 쿠키를 같이 보내지 않는데, http-only 속성을 갖는 세션 쿠키를 어떻게 전달할지
채팅방 리스트를 같은 화면에서 띄우려고 하다보니 채팅방이 켜진 상태에서 새로고침 했을때 fetch가 늦어서 발생하는 문제
채팅방이 변동됐을때 리스트에서 정보를 변경해줘야 하는데 이때 채팅방 소켓을 어디에서 연결할지에 대한 문제
필요없는 메시지를 프론트에서 거르는건 쉬운데, 어떻게 서버에서조차 보내지 않게 처리할지

구조에 대해서 고민과 회의를 많이했다. 갈아엎기도 많이 했다.
결국 채팅방 정보 변경, 소유자 변경, 킥 밴 초대 등에 대한 알람을 받을 alarm룸과 채팅방 내부에서 전달되는 자세한 메시지 등에 대한 active룸을 따로 관리했다.
소켓 구조와 명세에 대한 자세한 내용