인증 방식 완전히 바꾸기

오델로 프로젝트를 진행한지 거의 3주가 지났는데 너무 제자리 걸음이다.

그래서 오늘부터라도 하루마다 진행한 내용과 어떤 삽질이 있었는지 기록해둬야겠다는 생각이 들었다.

그래야 이전에 어떤 생각으로 이렇게 구현했고 저렇게 구현했고.. 이런걸 알 수 있을 것 같다.

 

일단.. 이전에 다음과 같은 방식으로 인증과 소켓연결을 시도했다.

 

로그인  ➡️ 서버에서 토큰 발급하여 리스폰스 ➡️ 액세스토큰과 간단한 유저 정보를 로컬스토리지에 저장 ➡️ 클라이언트에서 로컬스토리지에 토큰이 존재하면 바로 게임 로비로 리디렉션 ➡️ 로비페이지에 접속하면 자동으로 socket.io 연결 시도 ➡️ 서버에서 연결

 

이러한 과정을 구현했다.

 

그리고... 지금 문제가 되는 부분이 있다.

소켓에 연결된 로비페이지에는 방 목록 (다른 유저들이 만든 소켓 room 들..)이 보이고, 해당 방을 클릭하면 게임룸으로 이동한다.

그래서 처음엔 방을 클릭하는 클라이언트 이벤트에 socket.emit을 이용하여 join_room을 보내고, 서버에서는 해당 신호를 받아 방으로 join시켜줬다.

 

그런데 만약!! 해당 방에서 새로고침을 하거나, 친구로부터 공유받은 url을 통해 게임방에 접속하게 되면.. join하는 과정이 없어 다시 목록으로 돌아가서 재접속을 시도해야만 했다.

 

하지만 이게 불편하다고 느낀 나는 그냥 그러지 말고 게임방 페이지가 마운트 될 때, useEffect를 통해서 join_room 신호를 보내주면 되지 않을까??? 하는 생각을 하였고.. 그렇게 로직을 바꿔놨다..

 

그리고 문제가 발생한 오늘.. 사실 문제라기보다 이게 맞나? 라는 생각이 드는 현상이 발생하는데...

게임방에는 각자의 turn이 존재하고, 각 turn에는 15초라는 시간 제한이 있다. 그래서 사용자가 15초를 눈으로 볼 수 있게 타이머 컴포넌트를 만들어서 추가했는데, 매 초가 줄어들 때마다 페이지가 리렌더링 되어 join_room객체를 다시 보내는것이다..!

물론 이 문제를 처음 인식했을땐 '아! 그럼 useEffect의 의존성 배열을 서로 다르게 두면 되겠구나!' 라고 생각했는데,,, 이 turn이 바뀌는 방식이 socket으로부터 통신을 받아야 했고, 해당 socket객체는 두 useEffect에 모두 존재해야만 정상 작동 했다...

 

사실 지금 당장 기능만 보면....    정상동작한다

그게 문제다. 지금까지 어떻게든 기능만 동작하게 만들어온 나지만, 아무리봐도 join_room 신호를 계속 보내는것이 나중에 어떤 문제를 불러올지 예측이 되기에.. 방식을 바꿔야 겠다는 생각이 든다.

 

그래서 인터넷 검색과 챗 지피티와 지인찬스등을 통해서 시도해볼 방법은

 

애초에 DB에 유저의 상태를 계속 업데이트 해주고, 어디에 있었는지에 대한 정보등을 담아뒀다가 재연결 시 토큰을 통해 해당 유저라는게 인증 되면, DB에서 해당 유저의 상태를 추적하고, 만약 게임중이였다면 어느 방에서 게임중이였는지 확인 후, 다시 그 방에 join시켜주고, 클라이언트에게 해당 방의 주소를 알려주어 리디렉션 되도록 해주는 것이다.

 

그리고 로컬스토리지에 저장했던 방식도 쿠키를 이용하는 방식으로 바꿔볼 생각이다.

 

일단.. 앞으로 매일 이러한 글을 작성하면서 내가 어떤 생각으로 개발했는지 작성해야겠다.