개발일지

로그인은 없고, 게임할 때만 임의로 방과 유저를 만든 후에 이를 모두 삭제하지만 게임 결과는 별도로 저장해서 보여주기로 했다. 메인페이지에서 게임 순위를 보여주는 부분이 있고, 게임 종료 후에는 해당 팀의 결과 포함 위아래 2개씩 해서 총 5개만 보여주기로 했다. 전체 Rank를 보여주는 api는 이미 작성한 상태고, rankList를 가져오고 나면 Dto에 넣는 과정은 비슷하기 때문에 RankService의 같은 로직을 조금만 수정해서 그대로 사용하고 싶었다. 먼저 매개변수가 있고, 없는 차이가 있었는데 이거는 Controller에서 임의값을 넣어주기로 했다. // 전체 랭킹 조회하기 @GetMapping("/ranks") public List getRanks() { Long roomId = -1L; ..

현재 퀴즈는 같은 문제가 나오지 않도록 문제 유형만 통일하고 변수들의 값을 변화를 줘서 다른 답을 제출하도록 구성해놓았다. 그런데 문득 다른 팀원 분이 이렇게 하면 문제를 클릭할 때마다 달라진다는 사실을 캐치하셨다...!! 적어도 같은 방에서는 누가 클릭해도 같은 문제를 보이게 해서, 처음 우리의 의도대로 같이 문제를 풀 수 있게 구상하기로 했다. 현재 퀴즈는 단서 없이 해당 문제만으로 답을 찾을 수 있는 A타입과, 단서가 다른 오브젝트에 있어서 단서를 찾아서 조합해 풀어야 하는 B타입이 있다. A타입은 별도로 Quiz entity를 만들어서 퀴즈를 조회할 때 저장된 값이 없으면 새로 만들어서 저장하고, 그 이후에는 db에 저장된 값을 불러오도록 하였다. B타입의 경우 현재 Room entity 안에 c..

유저의 로딩 완료 문제를 처리하다가, 로딩 중에 연결이 끊기면 어떻게 되지? 라는 질문이 나왔다. 기본적으로 클라이언트가 방에 들어오면 socket통신으로 연결되기 때문에, 연결이 끊기면 socket.io에서 가장 먼저 알게된다. 문제는 이렇게 연결이 끊긴 것을 spring 서버에서 알고 db에서 처리를 해줘야 한다는 점이다. 메인페이지에서 방 리스트를 조회할 때 방의 인원수도 같이 표시되기 때문에 업데이트를 해줘야 한다. 그래서 처음에 고민했던 것은 node에서 spring으로 바로 socket.id를 알려주는 것이다. socket의 disconnect 이벤트 안에서 spring으로 데이터를 보내줘야 하는데 socket 통신에서 HTTP 통신을 쓸 수 있는지 알 수 없었다.(불가능하지 않을까?) 서버 ..

게임을 동시에 시작하기 위해서는 해당 방의 모든 유저들의 로딩이 완료되어야 한다. 클라이언트는 자신이 로딩이 완료된 것 밖에 알 수 없기 때문에 서버를 통해서 처리하는게 필요하다. 로딩이 완료되면 api를 통해 로딩이 완료됬음을 서버에 알리고, 서버는 해당 방의 loadingCount를 올려서 방의 인원 수와 일치하는 순간(즉 모두가 로딩된 경우) true를 return하여 클라이언트에게 알려주기로 했다. 현재 S3에서 게임 resource가 저장되어 있기 때문에 aws의 람다나 다른 방법을 통해 서버가 로딩이 완료된 시점을 알 수 있는지 찾아봤는데, 로딩은 결국 클라이언트에서 방을 랜더링하는 과정까지 포함하기 때문에 서버에서 알 수 있는 방법은 없는 것 같다. 그렇다면 클라이언트에서 완료됬을 때 요청을..

오늘은 한 주의 마지막 날이다. 한 주 동안 실전 프로젝트를 진행하면서 힘든 적도 많았지만 무엇보다 처음 목표했던 RTC를 구현해서 너무 좋다. 오늘 spring서버도 HPPTS로 배포하고 socket이랑 spring 모두 잘 연결되는 것도 확인했다. 다음주 월요일에는 2명이 아니라 한명을 더 추가해서 잘 연결되는지 확인해보기로 했다. 이번 주 진행상황 리뷰하고 다음주에는 게임 방 resource를 내리는 것과 퀴즈를 구현해보기로 했다. 게임 resource는 서버에서 내릴지, 클라이언트에서 내릴지 고민했는데 우선 서버의 S3에서 내리는걸 시도해보기로 했다. 확장자가 glb라서 어떻게 내리고 어떻게 구현하는지 궁금했는데 프론트에서 라이브러리를 써서 파일만 다운받으면 가능한 것 같다. 또 eventList..

어제 https를 붙인 socket 서버를 테스트해보았다. 역시나 제대로 연결이 되지 않았다. 그런데 socekt서버를 수정하면서 햇갈렸던 부분이 있어서 그 부분을 바꿔봤는데 연결이 잘 되었다!! 프론트에서 처음에 S3로 배포해서 연결을 했는데 HTTPS 관련 에러가 떠서 프론트서버도 HTTPS로 배포했다. 현재는 1:1이지만 연결이 잘 되었다! socket 서버 event에 console.log를 찍어서 데이터가 잘 들어오는 것도 확인했다. 그리고 프론트에서 서버 2개가 연결이 되는지 확인해보기 위해 spring서버를 따로 EC2로 배포하고 axios로 api를 통해 데이터가 잘 들어오는지도 확인해봤다. 데이터도 잘 들어왔다!!! 진짜 너무 좋았다 ㅋㅋㅋㅋㅋㅋ spring서버가 아직 HTTPS가 아니라..

어느 정도 기능 구현은 완료한 상태이고, 로그인 후 요청 시 인증이 안되는 부분은 우선 프론트에서 작업하고 계셔서 낮에는 조금 여유가 있었다. 오전에는 반 비몽사몽으로 있었던 것 같고 오후에는 자바와 스프링도 조금 봤다. cs스터디하고 나서 JWT 토큰 방식이 궁금해서 다른 팀원분들께 물어봤는데 다들 잘 알려주셔서 많이 배울 수 있었다. 프론트에서 header에 세션아이디를 토큰 처럼 보내주셨다. 그 뒤에도 여전히 인증이 안되는 문제가 있어 찾아봤는데 samesite 문제인 것 같았다. (참고자료: https://yousrain.tistory.com/23) 한참 검색하다가 어떻게 방법을 찾긴 했는데, 또 다른 문제에 봉착했다... none으로 설정할 경우 secure을 속성에 추가해야 하고, 이경우 HT..

현재 로그인은 기본적으로 controller에 구현되어 있고(로직들이 controller에 너무 많이 들어가 있는 것 같아서 서비스에서 구현되도록 리팩토링했다.), 아마 authenticationManager가 인증하면서 코드에는 보이지 않지만 AuthenticationProvider ~ DB에서 User를 찾아서 UserDetails에 담아 리턴하는 것까지 이루어지는 것 같다. 여기서도 보면 UsernamePasswordAuthenticationFilter를 통해 Authentication Manager로 연결되고 이후 로직들이 처리되는 것을 볼 수 있다. (참고자료: https://webfirewood.tistory.com/115) formLogin을 Disable한 상태고 별도로 Filter를 커스..

시큐리티를 우선 세션으로 하기로 했는데, 시큐리티는 기본적으로 formLogin방식이었다. 프론트 코드를 함께 보면서 얘기를 해봤는데 form이 아닌 json으로 로그인 값을 받아야 할 것 같았다. (axios는 서버 url 입력하는 부분이 있었는데, form은 그 부분이 없어서 어떻게 서버와 연결해야하는지 잘 모르겠다고 하셨다.) 그래서 시큐리티 설정의 formLogin을 disable로 하고 json으로 받는 방식으로 변경하였다. json으로 받기 위해서 LoginDto를 새로만들고 UsernamePasswordAuthenticationFilter를 상속받아 custom 클래스를 만들었다. LoginDto도 새로 만들어서 Filter가 가로챈 값을 넣어주었다. public class CustomUse..