웹게임 개발기 (7) - html에서 data 불러오기

지난번에는 게임 대기화면, 게임화면에서 유저정보를 불러오면 이를 확인할 수 있는 data holder 역할을 하는 템플릿을 만든 적이 있다.

 

게임방에 입장하기 전에 게임방의 목록들을 보고, 우측에는 나의 정보를 확인할 수 있는 형태의 UI로 구성하였다.

 

우측에 빨간박스로 표시된 부분은 로그인한 사용자의 닉네임과, 등급, 전적에 대한 데이터를 보여주는 요소이다. token을 가지고 해당 주소에 대한 요청을 보내면 token을 통해 사용자 데이터를 조회하고, 이를 반환하여 html의 특정위치에 표시해주는 방식이다.

 

[사진] 게임대기방

 

이번 개발에서는 이에 유의미한 실제값이 담기도록 fetch 후 반환되는 json값을 해당 html tag 위치에 반영시켜 줄 것이다.

 

물론 추후에 이부분은 axios와 react로 대체하겠지만, 일단 그 부분은 우선순위가 아니기 때문에 지금은 fetch를 활용하여 구현할 것이다.

 

https://github.com/KerNYing/exitplan/issues/6

[feature/improvement#1] SignIn / SignUp 기능향상 · Issue #6 · KerNYing/exitplan