[항해99] 8주차 실전프로젝트(1) 회고

이번주 한 일

TEAM

1. 프로젝트 기획

프로젝트 기획을 이틀이나 하게되었는데 이유는 한번 엎었기 때문이다.

기획을 엎는 결정이 상당히 힘들었지만, 기획에 치명적인 결함이 있다는 게 느껴졌기 때문에 하루를 더 들여서 기획했다.

 

결론은 텔레스트레이션 like인 그림 게임을 하게 되었다.

우리 식대로 조금의 차별화가 될 예정이다.

 

2. API 명세

 

API 명세를 작성하는 게 쉽지 않았다. 웹소켓 통신이 필요했기 때문인데,

이게 스펙이 웹소켓이어야 하는지 웹소켓이라면 어떻게 주고 받아야 할지가 상당히 애매했다.

일단 수정이 많이 필요하게 되겠지만, 대충 이런 기능에 이런 게 필요하겠다는 정도만 짚고 넘어갔다.

 

3. ERD 작성

 

ERD도 api 명세와 마찬가지로 데이터 베이스에 어떤 것들을 저장해야하는지 확실하지 않은게 훨씬 많았다.

하면서 확실해지겠다는 생각이 들어서 마찬가지로 틀만 잡고 넘어갔다.

 

4. Frontend/Backend CI/CD 적용

 

github actions을 이용해서 각각의 배포 환경에 CI/CD를 적용했다.

많은 변경이 있을 것 같지만  

 

5. 통신 라이브러리 조각 기능 테스트

 

WebRTC(Spring + React 텍스트 채팅 기능 테스트)

WebSocket(SockJS, STOMP)

WebRTC (Nodejs + React 음성 채팅 로컬 테스트)

 

6. HTTPS 적용

 

7. 카카오 로그인 구현

 

8. S3 이미지 업로드 및 조회기능 구현

 

그린 그림 좋아요 누를 시 S3에 저장되며, 마이페이지에서 좋아요 누른 그림 조회 가능

 

9. Redis

 

비회원 쿠키 발급 방식으로 사용

 

10. 그림판 구현

 

선 굵기, 선 색상 선택

바탕 색 칠하기 (페인트)

Undo, Redo 기능

 

11. 랜덤 닉네임, 제시어 DB 구축

 

게스트 로그인 할 경우 랜덤닉네임이 주어져야하며 게임 시작 시에도 랜덤한 제시어가 주어저야 하는데,

이 부분에서 팀의 백엔드 분께서 좋은 데이터를 구해서 갈무리해주셨다.

 

재밌는 닉네임과 제시어가 많다

내가 한 일

CI/CD 적용

 

aws s3, github actions

 

카카오 로그인 구현

 

카카오 로그인은 어렵지 않았는데, 게스트 로그인을 어떻게 구별해서 구현할지 백엔드 팀원분들과 고민을 많이 했다.

레퍼런스를 찾을 수 없어서 가장 좋은 방법인지는 모르겠지만, 우리가 할 수 있는 한에서 최대한의 좋은 방법을 논의하고 적용했다.

 

마크업 작업

 

로그인, 게스트페이지, 로비, 게임방 페이지에서 기능만 먼저 붙여볼 수 있도록 마크업 작업을 했다.

스타일링은 디자인 시안이 나오기 시작하면 작업할 예정이다.

 

sockJS, stomp

 

spring boot 시그널링 서버와 연동하여 채팅 기능 실습하는 시간을 가졌다.

vite의 default 설정으로는 ws 통신에 문제가 있다.

이부분에서 시간을 상당히 많이 소비해서 쉽지 않았다.