Light

trys-ketch / trys-ketch-server Goto Github PK

View Code? Open in Web Editor NEW

11.0 0.0 3.0 811 KB

🎮보이스 채팅과 함께 즐기는 드로잉 게임🎨

Home Page: https://trys-ketch.com

Java 99.75% Shell 0.25%

aws-ec2 aws-rds-mysql aws-s3 drawing jwt redis sockjs spring-boot spring-jpa spring-security

trys-ketch-server's Introduction

눈치 코치 캐치 : TRY'S KETCH !

✨ 프로젝트 소개

🎤 보이스 채팅과 함께 즐기는 🎨 드로잉 게임입니다 !!

떠오르는 문장 또는 단어를 입력해주세요 !
게임을 시작하면 유저들은 다른사람이 그릴 문장 또는 단어를 제출해 주세요.
떠오르는게 없으셔도 괜찮습니다. 저희가 랜덤하게 드리니 그것을 사용하셔도 👌
제시어를 받으면 그림을 그려요!
다른 유저가 제출한 제시어를 보고 나만의 그림을 통해 표현해주세요.
그림을 받으면 제시어를 입력해요!
다른 유저가 그린 그림을 보고 여러분이 느끼신 그대로 적어주세요.
모든 라운드가 종료되면...?
게임이 진행되면서 결과물들이 어떻게 표현되는지 함께 보면서 즐겨주세요 😆

🔍 주요 기능

보이스 채팅 게임이 진행되는 동안 서로 대화를 주고받으면서 플레이 해주세요.
스케치북 내가 상상하는 것을 그림을 통해 마음껏 표현해 주세요.
결과 페이지 모두가 그린 그림을 함께 보면서 보이스 채팅을 통해 즐겨주세요.
좋아요 회원은 맘에 들었던 그림들을 좋아요를 통해 보고싶으실 때 얼마든지 다시 보실 수 있습니다.
이미지 저장 회원은 결과 페이지에서 맘에 드는 이미지가 있으면 저장해서 간직하실 수 있습니다.
초대 코드 각 방마다 가지고 있는 랜덤한 코드를 이용해서 친구에게 초대를 보낼 수 있습니다.
뱃지 특정한 상황마다 지급되는 뱃지를 통해 소소한 성취감을 느끼실 수 있습니다.

📆 프로젝트 기간

2022.12.30 ~ 2023.02.10 / 서비스 런칭 : 2023.01.30

👉🏻 게임 한판 하러 가시죠 !

👉🏻 눈코캐 팀 노션은 여기입니다 !

🎬 시연 영상 한번 보고 가시죠 !

🎮 실제 플레이 화면

📒 기술스택

FRONT-END

BACK-END

🧱 ERD

🏗️ 서비스 아키텍처

🤔️ 기술적 의사 결정

우리는 이렇게 생각하고 결정했습니다 !

요구 사항	선택지	핵심 기술을 선택한 이유 및 근거
WebRTC를 이용한 사용자 음성 연결	- Mesh(p2p) - SFU	- SFU는 하나의 서버를 더 구축해야하기 때문에 프로젝트의 규모에 맞지 않음 - 영상 없이 음성통신만 구현하면 되기 때문에 클라이언트의 부하가 심하지 않다고 판단 - Mesh방식의 코드 샘플이 가장 많아 정보를 찾아보기 편했음
게임 로비에서 실시간 방 정보 조회	- Polling - Long Polling - SSE - WebSocket	- 리소스와 실시간성 두가지 측면 고려 필요 - 많은 데이터를 주고받아야하므로 서버의 부하가 적어야함 - polling은 구현이 간단하나 실시간으로 반영되지 않고 실시간으로 반영시키고 싶다면 서버에 짧은 간격으로 요청을 하면 되나 서버의 부하가 심해짐 - Long Polling은 실시간성을 보장받을 수 있으나 구현이 번거로움 - 클라이언트와 서버간 상호작용 불필요, 서버에서 클라이언트로 단방향 통신만 필요한 케이스이므로 리소스 측면 고려하여 SSE방식을 채택
게임 진행 과정에서 간단한 그림 그리기	- Canvas API - WebGL	- WebGL은 복잡한 3D 렌더링에 더 선호되고 Canvas API는 일반적으로 2D 렌더링에 더 선호됨 - 간단한 그림을 그리는 기능을 구현하기 위해 WebGL은 너무나 많은 러닝커브를 필요로 함 - 따라서 제로베이스에서 금방 구현할 수 있는 Canvas API를 채택하였음
그림 이미지 파일 관리	- Spring Scheduler - Spring Batch - Scheduler quartz	- 그림을 DB에 저장하여 게임 중 데이터 손실을 방지하며 필요없는 데이터를 주기적으로 없애기 위해 스케줄링 필요 - 이벤트 일정에 변동이 없으며 이벤트 시 동작하는 로직이 단순하고 프로젝트 규모에 맞게 간단하게 구현 가능한 Spring Scheduler 사용
비회원 정보 관리	- MySQL - Redis - Memcached	- Redis는 데이터 입력과 삭제가 MySQL에 비해서 10배정도 빠름 - 관계형 데이터베이스와 같이 쿼리 연산을 지원하지 않지만, 대신 데이터의 고속 읽기와 쓰기에 최적화 되어 있음 - Redis는 Memcached 와 달리 단순한 key/value 자료구조 외에도 다양한 자료구조 지원 - 하나의 비회원 정보에 “고유번호, 닉네임, 이미지URL” 여러개의 값을 저장이 가능 - Redis 자체적으로 만료 시간 설정 가능

🛠️ 트러블슈팅

FRONT-END

webRTC 연결 관련 이슈

진행 순서	내용
😱 문제	미디어 스트림을 접근 권한을 허가 혹은 거부하지 않으면 소켓이 연결되지 않아 게임을 제대로 진행이 불가능하다. 내 소리를 다른 사람은 들을 수 없으나 나는 다른 사람의 소리를 들을 수 있는 문제가 있음
🤔 원인	미디어 스트림 접근 권한을 요청할 때 코드의 흐름이 정지되기 때문에 이후 코드가 실행되지 않으므로 소켓 연결이 되지 않음 미디어 스트림 권한이 처리되지 않았을 때 다른 사용자가 rtc연결을 요청시 나의 미디어 스트림이 undefined 상태이므로 상대의 음성은 들리나 나의 음성이 전달되지 않음
😭 시도	• getUserMedia()를 별개의 useEffect로 분리하여 소켓과 rtc를 연결하는 로직에 병렬적으로 처리되게 구현 이 경우 미디어스트림을 허가하기 전에 rtc연결을 요청하므로 내 로컬스트림이 undefined 인 문제가 발생함 • getUserMedia()함수를 소켓 연결 이후에 호출하도록 변경함. 그러나 이 경우 다른 사용자가 rtc연결을 요청했을 때마이크 접근 권한을 허가하거나 거부하지 않은 상태이면 나의 미디어스트림이 undefined 인 경우가 발생하므로 나의 말을 다른 사람이 들을 수가 없음
😄 해결	• getUserMedia()함수를 별개의 useEffect를 이용해 병렬적으로 처리하는 로직은 그대로 둠 • 요청을 받아 rtc연결을 실행하거나, 내가 새로운 rtc연결을 시도하고자 하는 경우 사용자가 마이크 사용을 허가/거부하지 않은 상태면 반복문과 함께 Promise, setTimeOut으로 구현한 sleep함수를 이용해 코드의 흐름을 막음 • 사용자가 마이크 사용을 허가한 경우 그대로 연결을 진행함, 사용을 거부한 경우 본인의 마이크는 사용이 불가능하지만 사용자가 의도한 것이므로 특별히 예외처리하지 않음

특정 영역을 한 가지 색으로 색칠하는 floodfill 알고리즘

요구 사항	핵심 기술을 선택한 이유 및 근거
😱 문제	floodfill 알고리즘의 성능이 좋지 않아 색을 칠하는데 지나치게 오랜 시간이 소요됨 선을 그었을 때 테두리의 rgba값이 선의 rgba값과 아주 작은 차이가 있어 floodfill 알고리즘 이 제대로 적용되지 않음
🤔 원인	선을 그었을 때 테두리가 픽셀의 중간에 겹치는 경우 Canvas API에서 자동으로 보정하여 픽셀의 색상이 바뀌게 되면서 floodfill 알고리즘이 적용되지 않음 floodfill 알고리즘은 기본적으로 수만~수십만개의 픽셀을 대상으로 적용되기 때문에 함수의 오버헤드나 시간복잡도에 큰 영향을 받게 됨 따라서 오버헤드를 줄여야 하며 메모리 공간 역시 최적화 되어야함
😭 시도	• 재귀 형태의 floodfill 알고리즘 을 stack의 pop과 push로 구현해보았으나 pop과 push메소드의 오버헤드로 인해 만족할만한 성능을 내지 못했음 • rgba값에 tolerance를 주어 rgba값의 차이가 크지 않다면 같은 색으로 인식하고 floodfill 알고리즘의 적용을 받게 구현함 • rgb값을 string을 이용해 구하고자 했으나 이는 너무 많은 오버헤드를 발생시켰음. 또한 해당 픽셀의 rgb값이 tolerance 범위 내에 존재하는지를 판단하기 위해 Math.abs() 혹은 rgb값의 표준편차를 이용해 tolerance와 비교하였음 그러나 이 역시 많은 오버헤드를 발생시킴
😄 해결	• pop과 push를 사용하지 않고 배열에 x와 y의 픽셀 위치 정보를 담아 현재의 픽셀을 포인터를 이용해 배열의 인덱스를 가리킴으로서 특정하고 해당 픽셀에 대한 floodfill 알고리즘을 적용하여 성능 향상을 이끌어냄 • rgba값을 추출해내기 위해 unsigned int로 표현된 rgba값의 해당하는 비트에 비트연산자 &로 마스킹하여 rgba값을 추출하고 오른쪽으로 shift하여 rgba값을 사용하도록 함 • tolerance와 현재 rgba값을 비교하는 부분에서 다른 방식을 차용하지 않고 그냥 tolerance값과 일일이 비교함 다른 방식보다 이 방식이 가장 빨랐음

다른 시간에 생성된 토스트가 동일한 타임아웃을 공유하는 문제

요구 사항	핵심 기술을 선택한 이유 및 근거
😱 문제	토스트에서 생성시 3초뒤에 삭제되는 타임아웃을 적용해놓음 각각의 토스트가 서로 다른 종료 시점을 가지지 않고 모두 같은 종료시점을 가짐
🤔 원인	rerendering 되면서 타임아웃도 재설정됨
😭 시도	• react devtools render highlight 디버깅을 위해 렌더링되는 컴포넌트를 하이라이트해주는 react devtools 기능 사용 ⇒ 디버깅 결과 토스트가 생성될 때 이미 존재하는 토스트들도 함께 렌더링되는 것을 발견
😄 해결	• 토스트 컴포넌트에 memo 적용 • 토스트 컴포넌트에 전달되는 함수 props에 useCallback 적용 위 두가지를 적용하면서 리렌더링해야할 컴포넌트로 인식하지 않아서 각각의 타임아웃이 업데이트되지 않음

BACK-END

Redis `@Indexed` 의 참조값 삭제 문제

요구 사항	핵심 기술을 선택한 이유 및 근거
😱 문제	레디스에서 키값으로 조회하기 위해서 사용했던 @Indexed 어노테이션을 사용 이 어노테이션을 붙여 줘야지만 key 값으로 검색이 가능하며, 비회원 정보의 검증을 하기 위해서 추가 `예)`새로운 비회원이 생기면 guest:10001 이라는 하나의 파일이 생기고 동시에 guest:10001:idx 라는 새로운 파일이 생기는데 이 파일이 만료시 삭제가 되지 않는 문제 발생
🤔 원인	@Indexed 로 인해 같이 생성된 참조값들은 만료시 자동으로 삭제가 되지 않는것이 문제였다.
😭 시도	• 강제 지정 (redistemplate.expire) 참조값이 생성될 때 생기는 이름은 동일한 패턴이기 때문에 RedisTemplate 에서 만료시간을 해당 파일이 생성되면 바로 같이 지정하는 방식을 사용하면 가능하지만 이는 근본적인 해결법이 아니여서 다른 방법을 더 찾아보기로 결정 • @Id 만을 사용 레디스를 통해 비회원정보 검증하는 부분이 존재하기 때문에 @Id 어노테이션 만으로는 찾는 비회원정보를 찾을수가 없어서 @Indexed 를 사용하는 것은 유지
😄 해결	@EnableRedisRepositories(enableKeyspaceEvents = EnableKeyspaceEvents.ON_STARTUP) 위처럼 RedisRepo 에 속성을 추가해서 사용해본 결과 Server 가 내려간 사이 Redis 에서 삭제가 되는 경우가 아닌 이상 삭제시의 이벤트를 수신해서 참조값도 함께 잘 삭제가 되는것을 확인

SSE 연결 관련 이슈

요구 사항	핵심 기술을 선택한 이유 및 근거
😱 문제	emitter의 객체 시간을 길게 설정할 때, 데이터를 제대로 전송하지 못할 때 발생하는 IOException : Broken Pipe 에러가 발생
🤔 원인	JPA 사용시 open in view 설정이 기본으로 true로 설정됨. true로 설정되면 HTTP Connection이 열려있는 동안 DB Connection도 같이 열려있게 됨. 보통은 HTTP 호출이 끝나고 DB 커넥션도 종료되나, SSE 사용시에는 객체가 만료되기 전까지 계속해서 DB 커넥션이 열려 고갈되는 것이 문제였음
😭 시도	객체의 시간을 짧게 설정 해봄 → 객체의 만료시간이 지날 때마다 재연결되고 이는 결국 리소스의 낭비로 이어져 SSE를 사용하는 목적에 맞지않음
😄 해결	DB 커넥션을 계속 물고 있지 않도록 OSIV 설정을 끔. → 이러한 경우 프록시 객체를 초기화 시키지 못한다는 다른 에러가 발생 → @OneToMany의 fetch join 타입을 Eager로 설정하여 해결

게임 중 발생하는 동시성 제어(synchronized, DB Lock)

요구 사항	핵심 기술을 선택한 이유 및 근거
😱 문제	제한 시간을 넘어 미처 제출하지 못한 유저의 키워드나 이미지가 일괄 자동 제출 되었을 때 DB에 제대로 데이터가 쌓이지 않거나 다음 라운드로 진행되지 않는 이슈가 발생함.
🤔 원인	현재 로직상 save → find의 구조를 가지고 있기에 자동제출 기능 구현 시 동시에 동일한 자원에 접근하려 하는 것을 원인으로 판단.
😭 시도	• synchronized 제출로직의 Controller method 에 synchronized 적용하여 스레드 간 데이터 동기화함. 의도대로 동작 했으나, 성능 상 속도 저하 이슈 발생함. • Thread Scheduler 제출 인원을 확인하는 로직을 독립시켜서 thread를 만들고, 일정 시간 동안 주기적으로 돌아가게끔 구현함. 그러나 DB에 읽기 되는 순서를 제어 하지 못해 동일한 문제 발생함. • Optimistic Lock 제출 로직 특성 상 빈번한 충돌이 예측 가능했기 때문에 롤백 비용을 고려하여 Optimistic Lock 미적용. • Pessimistic Lock 제출 인원을 하나의 column으로 갖는 table을 생성하고, row level lock 적용, update용 find method를 구현 및, 해당 method에 @Lock 어노테이션과 모드를 설정함. 제출 인원을 수정할 때 write lock이 걸리고 transaction이 끝나야 lock이 풀리는 것을 이용함.
😄 해결	게임의 최대 인원이 8명으로 테스트 했을 때, 비교적 성능 이슈가 없던 Pessimistic Lock을 사용하는 것이 적절하다고 판단되어 도입함.

‍🧑‍💻 프로젝트 멤버

🔰장신원	이민규	🔰안은솔	김재영	서혁수	황미경	조문정

FRONT-END	FRONT-END	BACK-END	BACK-END	BACK-END	BACK-END	DESIGN

trys-ketch-server's People

Contributors

Stargazers

Forkers

gosuee code0613 shsus1122

trys-ketch-server's Issues

GameService 리팩토링

이슈 상세 내용

GameService 내부 중복코드 분리
주석 수정 및 제거
꼭 필요하지 않은 로그 제거

getAllGameRoom 반환정보 수정

이슈 상세 내용

getAllGameRoom 반환정보 수정

체크리스트

기존 gameRoomList만 반환하던 getAllGameRoom 메소드가 gameRoomList와 LasgPage를 함께 반환하도록 변경

구글 Oauth2 구현

이슈 상세 내용

구글 계정을 이용한 회원가입 및 로그인 구현

체크리스트

잘 작동하는지 체크

회원 정보 조회 API 구현

이슈 상세 내용

회원 고유 번호, 닉네임, 회원 프로필 조회 API 구현

체크리스트

화면에 잘 보여지는지 확인

게임중 제출인원 표시

이슈 상세 내용

게임 중에 제출을 한 인원들을 표시해주는 기능을 추가

체크리스트

프론트와 테스트 해서 정상작동 확인

WebSocket + SockJS + STOMP를 이용한 다대다 채팅

이슈 상세 내용

WebSocket + SockJS + STOMP 활용
MessageMapping을 이용해서 채팅 구현

체크리스트

클라이언트와 테스트

방장의 강퇴 기능 구현

이슈 상세 내용

방장의 경우에는 유저들을 강퇴가 가능하게 구현

체크리스트

프론트와 맞춰보기
강퇴시 재입장 불가능

S3 관련 - 그림 좋아요 취소기능 추가 및 httpservlet로 변경

이슈 상세 내용

좋아요 취소기능 추가
비회원 확인 위해 userdetailsimpl -> httpservlet으로 변경

체크리스트

포스트맨으로 확인하기

WebRTC 다대다 연결 구현

이슈 상세 내용

Signaling Server를 수정하여 다대다 연결 가능하도록 구현

체크리스트

클라이언트와 테스트

SignalingHandler 리팩토링

이슈 상세 내용

주고 받는 데이터에 중복되는 내용이 많아 type을 줄이고 전달되는 데이터 안에서 최대한 활용할 수 있도록 리팩토링

체크리스트

클라이언트와 테스트

네이버 소셜로그인 기능 구현

이슈 상세 내용

네이버 소셜로그인 기능 구현

[FIX] 게임 중 퇴장하더라도 정상 진행되도록 구현

이슈 상세 내용

게임 중 연결 끊기더라도 정상 진행되도록 구현
이미지 라운드에서 제출하지 못한 경우, DB에 가지고 있는 미제출 이미지 뜨도록 함

체크리스트

서버 배포하여 확인하였습니다

OAuth2.0 카카오톡 로그인 구현

이슈 상세 내용

OAuth2.0 카카오톡 로그인 구현

체크리스트

발급받은 access Token으로 email, nickname 잘 찍히는지 확인
포스트맨으로 테스트 완료

로그인 관련 오류 해결

이슈 상세 내용

서버 배포 후 카카오톡 redirect URI 변경
도메인 주소로 접근 시 redirect 하기 전에 token 받아오는 부분에서 발생한 에러 처리

체크리스트

프론트팀과 확인했습니다

에러 메시지 마침표 제거

이슈 상세 내용

에러 메시지가 클라이언트 메시지로 쓰이면서 에러 메시지의 통일성 필요
사용자가 보는 안내 메시지의 경우 마침표를 찍지 않는 것을 추천
관련 자료

체크리스트

실 서비스에서 안내 메시지에 마침표가 있지 않은지 확인

눈치코치캐치 게임 로직 구현

이슈 상세 내용

게임의 메인 로직(서비스) 구현

체크리스트

게임 시작
게임 종료
게임 강제 종료

닉네임, 방제목 정규식 적용

이슈 상세 내용

방제목 정규식 적용 (알파벳 대소문자, 한글, 숫자, 특수문자, 2~25자)
닉네임 정규식 적용 (알파벳 대소문자, 한글, 숫자, 2~12자)

체크리스트

포스트맨 확인하기

Redis 를 이용한 웹소켓 채팅 구현

Redis 를 MessageBroker 로 활용해서 채팅 구현

새롭게 알게된 pub/sub 개념을 이해하면서 Redis 를 구현하는 작업

체크리스트

Redis 를 잘 이해하고 사용 했는가

sessionId가 null로 들어와 발생하는 에러상황 처리

이슈 상세 내용

sessionId가 null로 들어와 발생하는 에러상황 처리

체크리스트

프론트와 확인필요

[FIX] 재게임시 방장 여부 미전달 버그

이슈 상세 내용

게임이 재시작 할 때, 사용자 시점에 방장만이 보이는 게임시작 버튼이 보이지 않는 에러 발생

체크리스트

백엔드 코드 수정만으로 적용되는지 프론트와 함께 확인

방 생성 api 구현

이슈 상세 내용

create GameRoom api 구현

WebSocket 게임 준비방 연결

이슈 상세 내용

게임 준비방에서 WebSocket 연결로 전체 참여 유저가 잘 보일 수 있도록 일부 수정

체크리스트

클라이언트와 테스트

방 나가기 api 구현

이슈 상세 내용

EXIT Game Room api 구현

체크리스트

일반

한 유저는 한 방에만 존재할 수 있는지
방장이 게임시작전 에 나갔을 때 분기처리( 다음 방장 선정 )
다음 방장 선정 → gameroom의 방장정보 업데이트
일반유저가 나갔을때의 처리
유저가 나갔을때 방의 인원이 0명이면 gameroom 도 제거

게임시작중

방장이 게임시작중 에 나갔을 때 분기처리( 다음 방장 선정 )
유저가 나갔을때 방의 인원이 3명 이하면 게임 강제 종료

결과창 방장이 원하는 순서대로 보여주기

이슈 상세 내용

방장이 유저들에게 게임 결과물을 보여줄 때 라운드별로 정보를 주는 기능 구현

체크리스트

프론트와 테스트
코드 다이어트

회원, 비회원 로직 리팩토링

이슈 상세 내용

회원, 비회원 관련 코드 리팩토링

체크리스트

포스트맨 확인하였습니다

해당 방의 디테일 조회 API 구현

이슈 상세 내용

현재 클라이언트에서 관리하고 있는 방의 title 과 randomCode를 서버쪽에서 API로 구현

체크리스트

클라이언트와 테스트

S3 이미지업로드 관련 - 게임진행시 일부아닌 전체 이미지 업로드로 로직 변경

이슈 상세 내용

기존에는 그림을 좋아요 누를 경우에만 S3에 저장되는 로직이었는데, 좋아요와 관계없이 모든 이미지 파일이 저장되는 로직으로 변경

체크리스트

ERD, API 수정필요
포스트맨 확인필요

게임 메인 로직 WebSocket STOMP 적용

이슈 상세 내용

현재 RESTful API 로 구현된 코드를 WebSocket STOMP 를 적용하여 실시간 통신이 가능하도록 변경

체크리스트

클라이언트와 테스트

Redis 기능 추가 및 연관된 로직 병합

Redis 를 활용한 비회원 기능 추가 및 연관된 로직 병합

Redis 를 활용한 비회원의 경우는 이제 마무리가 되었습니다.

체크리스트

비회원 PK 생성방법 보완하기
Redis 관련 회원, 비회원 완료
gameRoomService 의 모듈화에 적용 완료

WebRTC Signaling Server 구축

이슈 상세 내용

WebRTC 를 위한 Signaling Server 구축

체크리스트

서버 배포 후 클라이언트 테스트
음성, 채팅 잘 되는지 확인

SSE를 이용한 실시간 게임방 조회

이슈 상세 내용

SSE를 이용하여 실시간으로 생성되고 소멸되는 방정보를 조회

체크리스트

클라이언트와 테스트

webSessionId로 변경, WebRTC 관련 Security CORS 설정

이슈 상세 내용

game_room_user 에서 websession_id를 web_session_id로 변경
GameRoomUser의 websessionId를 webSessionId로 변경
WebRTC 관련 Security CORS 설정
WebRtcConfig 클래스의 setAllowedOrigins -> setAllowedOriginPatterns 로 변경

체크리스트

클라이언트와 테스트

OAuth2.0 로그인 시 랜덤 닉네임 부여

이슈 상세 내용

OAuth2.0 로그인 시 랜덤 닉네임 부여

체크리스트

DB 잘 저장되는지 확인필요
토큰에 닉네임 잘 가지고있는지 확인필요
포스트맨으로 확인필요

Scheduler 이용해서 좋아요 안눌린 S3의 그림 삭제하기

이슈 상세 내용

좋아요 안 눌린 그림 스케줄러 이용해서 주기적으로 삭제하는 기능 구현

체크리스트

S3에서도 잘 지워졌는지 확인하기
포스트맨에서 확인하기

디렉토리 구조 변경

이슈 상세 내용

디렉토리 구조 변경

체크리스트

기존 도메인 기준 디렉토리 구조에서 계층형으로 변경

초대코드 발급 기능 추가

이슈 상세 내용

초대코드 발급 위한 랜덤한 문자열 생성 및 게임 입장시 적용

체크리스트

포스트맨 확인 완료

게임 중 예외처리

이슈 상세 내용

해당 게임 방의 방장이 나가고 두번째 입장한 유저가 방장이 되었을 때, 그 유저의 readyStatus가 true가 되도록 변경
게임 나가기 오류 생길 시 방 랜덤 코드 제거되지 않도록 변경

체크리스트

postman 테스트
클라이언트와 테스트

방 조회 api 구현

이슈 상세 내용

Get All Game Room api 구현

마이페이지 기능 구현

이슈 상세 내용

<소셜로그인 회원전용>

마이페이지 회원조회 ( id, email, nickname, ImgUrl )
회원 닉네임 수정

Redis 캐시 적용 하기

Redis 캐시 적용 해서 테스트 해보기

Redis 캐시를 적용해서 읽어들이는 속도를 향상시킵니다.

체크리스트

비회원 관련 Repo 에 적용하기
확장해서 적용할 수 있는 부분에 적용하기

동시성 제어

이슈 상세 내용

여러명이 동시에 방입장을 할 경우 가장빠른 유저 1명만 정상 처리되고 다른 유저들은 입장이 되지않고 DB에도 저장되지 않음
그와중에 방에는 들어가져서 채팅은 가능

WebRTC 통신에 게임방 로직 연결

이슈 상세 내용

게임방 생성, 게임방 입장 등 구현 해놓은 로직에 소켓 통신 연결

체크리스트

클라이언트와 테스트

웹소켓, STOMP 적용한 채팅기능 구현

이슈 상세 내용

채팅기능 구현

체크리스트

채팅 기능을 프론트에서 직접 스톰프를 사용해서 구현함으로 인해 관련 불필요 코드 주석처리

게임 중 중복 제출 관련 이슈

이슈 상세 내용

게임을 진행 하면서 중복 제출이 되어 다음 라운드로 강제 이동 되는 이슈 발생

체크리스트

정상 제출 되어 게임 룰에 맞게 라운드 진행되는 것 확인

게임 준비, 게임 시작 로직 구현

이슈 상세 내용

유저가 게임 방에 입장한 후 모든 참여자가 게임 준비를 완료하면 방장이 게임시작을 눌러서 게임을 진행할 수 있도록 로직 구현

체크리스트

참여자가 게임 준비를 했을 때, 본인을 제외한 다른 참여자에게 게임 준비 상태가 보여지는지 확인
모든 참여자의 상태가 준비로 바뀌면 방장이 게임을 시작할 수 있는지 확인

유저 활동내역 저장기능 구현, 업적 기능 구현

이슈 상세 내용

유저의 활동내역을 저장하는 entity service repository 작성
그에따른 업적 부여 기능 구현

방 입장 api 구현

이슈 상세 내용

Enter Game Room api 구현

회원가입, 로그인 기본 뼈대 업로드

회원가입, 로그인 기본 뼈대 업로드

이슈 내용 요약 설명

체크리스트

회원가입 기능 추가 완료
로그인 기능 추가 완료
MySQL 이용한 RefreshToken 적용 완료

프로젝트 디렉토리 구조 개편

이슈 상세 내용

프로젝트 디렉토리 구조 개편

S3 이미지 업로드 및 조회

이슈 상세 내용

그림에 좋아요 버튼 클릭시 S3에 이미지 업로드 기능
마이페이지에서 좋아요 누른 이미지 조회 기능

체크리스트

S3에 이미지 업로드 잘 되는 지 확인
이미지 업로드 시 DB에도 데이터 잘 들어가는 지 확인
포스트맨으로 모든 과정 확인 필요

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.