웹게임 개발기 (3) - 세부적인 요소와 data holder 만들기

오늘은 게임이 진행중에 보여질 /game page의 세부요소와 data를 즉각적으로 반영할 수 있는 data holder들을 정의했다.

 

기본적으로 game page에서 부터는 SPA(Single Page Application) 처럼 구성하여 상대방/나의 정보, 게임진행정보, 실시간 채팅을 확인할 수 있도록 구성했다.

 

아래에서 border로 감싼 부분들은 다 실 서비스에서는 데이터를 가져올 자리들이다. 일종의 Data holder 역할을 하는 것이다. 찾아보면 react와 같은 기술에서는 안에 들어가는 정보를 일종의 상태(state)로 root component에서부터 전파시키면서 반영을 하는데, 일단은 그게 중요한 게 아니다 보니 바닐라로 바로바로 textContent에 넣는 식으로 작성했다.

 

또한, 중간에 게임부분은 조금 우선순위를 미룬상태이다.

[사진] /game page

 

 

기술적으로 고민해볼만한 부분은 일단, 페이지의 새로고침이나 페이지의 이동에 의해 web socket 을 통해 socket이 해제되고 연결되기를 반복하여, localstorage 에 socket 정보를 삽입하고, 해당 정보가 없거나 만료기간을 지나면 다시 발급받는 방식으로 수정을 할 예정이다.

 

또한, 아직 DB를 RDB로 할지 Doc type으로 할지 오락가락한 상태인데, 아무래도 가볍게 최소기능구현을 빠르게 하려면 mongoDB로 구현부터 해야겠다는 생각이 앞선다.

 

아직도 Docker가 정상적으로 실행되지 않고 있어서 일단 배포 자체도 매번 ssh로 접속하여 git repo를 가져와서 실행시키는 중이다. 

 

https://github.com/KerNYing/exitplan

GitHub - KerNYing/exitplan: exitplan game