개발일지

오늘 엄청난 사실을 알게되었다!!! (우리 실전프로젝트에서 WebRTC 성공에 이어 2번째 축포를 터트리는 순간인거같기도 한데 좀 다르다) 우리가 계속 고민했던 부분은 게임 방 resource의 용량이 커서 로딩에 시간이 오래걸리는 문제였다. 구입한 3D 모델링 파일이 150MB 정도라서 여기서 크게 줄어들지 않을 것으로 생각하고 로딩이 오래걸릴 때 화면에 어떤걸 보여줘야 하는지 (예를 들면, 로딩페이지에서 게임 안내나 팁 같은 간단한 텍스트를 보여준다거나), 로딩 중에 유저가 disconnect됬을 때 어떻게 해야하는지, 모든 클라이언트가 로딩이 완료된 걸 어떻게 처리할지 고민했었다. 그런데 정작 게임 방 resource를 export하니 용량이 2MB였다....!!! 우리가 걱정했던 많은 문제들을 단..

새로운 quiz를 만들면서 imgUrl이 추가되었다. 퀴즈 유형마다 필요한 column이 달라서 RDB에서는 어떻게 스키마를 잡아야 할지 고민이 된다. 현재는 필요한 column을 모두 넣어놓고 값이 없는 column은 null이 저장될 수 있게 지정해놓은 상태이다. 만약에 noSQL을 쓴다고 하면 저장은 스키마 상관없이 자유롭게 할 수 있을 것 같은데, 클라이언트에 데이터를 내려줄때는 어떤 형태로 내려주는게 좋을지 고민이 될 것 같다. (퀴즈마다 아에 다르게 내려주거나, 아니면 지금처럼 모든 걸 포함하는 dto를 만들어서 해당되는 값이 없으면 null을 넣어주거나....?) noSQL은 SQL과는 많이 다른 것 같아서 사실 어떤 식으로 구성될지 잘 이해가 안간다. Rank 쪽에서도 수정이 있었다. Ra..

로그인은 없고, 게임할 때만 임의로 방과 유저를 만든 후에 이를 모두 삭제하지만 게임 결과는 별도로 저장해서 보여주기로 했다. 메인페이지에서 게임 순위를 보여주는 부분이 있고, 게임 종료 후에는 해당 팀의 결과 포함 위아래 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의 람다나 다른 방법을 통해 서버가 로딩이 완료된 시점을 알 수 있는지 찾아봤는데, 로딩은 결국 클라이언트에서 방을 랜더링하는 과정까지 포함하기 때문에 서버에서 알 수 있는 방법은 없는 것 같다. 그렇다면 클라이언트에서 완료됬을 때 요청을..

실전 2주차가 시작됬다! 다른 팀원들이 S3와 로딩 문제를 봐주시는 동안 퀴즈를 어떻게 낼 것인지 생각해봤다. 우선 퀴즈는 1. 퀴즈만으로 푸는 문제, 2. clue가 필요한 문제로 나눌 수 있고 일단 각각 한 문제씩 만들었다. clue의 경우 clueA와 clueB를 만들어서 방을 개설할 때 미리 랜덤으로 값을 주게 하였고, clueA와 clueB가 필요한 문제인 Ba의 답을 해당 방의 clueA, clueB 값으로 계산하여 맞추도록 하였다. 문제를 조회하는 api는 하나를 만들고 quizType을 pathvariable로 주면 해당하는 문제와 답을 미리 내려주고, 맞는 답을 제출하면 count +1 api를 통해 해당 방의 맞춘 문제 개수를 늘려주었다. 문제를 2개 만들었는데 문제를 풀 힌트도 필요할..

오늘은 한 주의 마지막 날이다. 한 주 동안 실전 프로젝트를 진행하면서 힘든 적도 많았지만 무엇보다 처음 목표했던 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가 아니라..

nodeJS로 socket.io를 구현하기 위해 먼저 노마드코더에서 무료로 제공하는 줌 클론코딩 강의를 듣고 해당 코드를 가지고 서버에 올려서 프론트와 연결해보기로 했다. 강의 듣기 전에 node에 대해서 너무 모르는 상태라서 코드잇에 있는 강의를 앞부분만 들었다. 비동기 개념이 너무 신기했고, 서버를 정말 간단하게 구현할 수 있다는 것이 놀라웠다...! 아직 스프링도 잘 이해한 상태가 아니라서 제대로 비교하기는 그렇지만 확실히 다른 타입인 것 같다. 또, 자바와 스프링을 조금 하고 공부를 시작하니 라이브러리를 인포트에서 쓴다던지, 필요한 객체를 선언하는 거라든지 클라이언트와 서버에 대한 기본적인 관계는 이해가 되어 있어서 가볍게 지나갈 수 있었다. 하나를 잘 해놓으면 다른 언어나 프레임워크를 배우기 수..