1. router 함수와 pushState 메서드

router 함수가 route의 guard 프로퍼티를 통해 로그인한 사용자가 아니라면 /rank 경로로 이동시 /signin 경로로 이동하도록 구현을 해주었다.

이 때 발생한 문제가 화면 렌더링은 signin 컴포넌트로 변경되었지만 라우터는 이상하게 / Home 컴포넌트가 그려지는 것이다.

문제가 어디서 발생하는지 찾아보니, 클릭 이벤트 발생할 때, router 함수가 호출되는데 이 때 상태로 관리하는 Page가 Home에서 변경되지 않는 문제였다.

왜 이 경우에서만 변경되지 않는지에 대해서는 아직 파악하지 못했지만, 리팩터링 시간을 가져서 파악해보도록 해야겠다.

2. 서버에 랭크 데이터를 보내고 랭커들을 랭크 페이지에 보여주자

유저점수를 게시판에 보여주기 위해서 게임이 종료되었을 때, /matching 경로로 post 요청을 보내서 record를 서버에 보내준다.

서버에서는 mongodb와 연결되어 있어 database에서 해당 유저의 이전 기록과 비교하여 더 빠른 기록으로 갱신해준다.

또한 rank 페이지를 누르거나 URL로 직접 요청할 때마다 데이터를 가져와서 보여줘야 하므로 router 함수 내부에서 /ranker 경로로 get 요청을 보내서 데이터를 가져와야한다.

isSignin 함수에서 /auth 경로로 get 요청해서 guard 프로퍼티에 불리언 값을 저장한 것 처럼 /rank 경로가 아닌 /ranker 경로로 get 요청을 해야한다.

1
2
3

app.get("*", auth, (req, res) => {
  res.sendFile(path.join(__dirname, "public/index.html"));
});