[86] TIL Refresh Token 트러블 슈팅

놀러와주셔서 감사합니다 ㅎㅎ

 

1. 어려웠던 부분 : 

• 리프레시 토큰을 이용해 액세스 토큰 재발급을 하는 api가 이상하게 게임룸페이지 안에서는 정상 작동하지 않았다. 로비페이지 랜딩페이지, 커뮤니티 페이지에서는 문제없이 토큰 재발급이 되고 로그인이 순조롭게 연장이 되는데 확실하진 않지만 WebRTC 때문인지 WebSocket 때문인지 뭔가 충돌이 있는 듯 하다. 
• 처음에 의심한 부분은 아래 사진과 같이 다른 페이지들에서는 Request Header 부분에 키값이 accesstoken 으로 그리고 밸류가 토큰값으로 잘 들어가는데  게임룸에서는 cookie 라는 키값에 밸류로 액세스토큰 값과 닉네임 값이 같이 들어가 있는 부분이었다. 결론적으로 이 부분은 상관이 없던 문제 였던 것 같다.

좌측이 게임룸일때 우측이 로비페이지일때

• 프론트엔드 팀원분과 오랜 삽질 끝에 문제의 해결책을 발견할 수 있었다. 일단 프론트엔드에서 액세스토큰 발급을 일정 시간이 지나면 setTimeout() 으로 토큰 재발급 api 요청을 하도록  하고 있는데, 이 코드가 전역적으로 반영이 되는 구조였다. 그런데 이상하게 WebRTC 코드가 있는 GameRoomRTC 컴포넌트에는 반영이 되지 않았다. 
• 그래서 아래와 같이 [ GameRoomRTC ] - [ WebRTC signaling ] 이 처음 시작되는 [ useEffect ] 안에서 액세스 토큰을 만드는 setAccessToken() 함수를 호출하여 유저이 토큰정보를 담아서 보내주도록 코드를 수정하였다. 이렇게 일부러 함수를 따로 선언하고 호출했더니 게임룸에서도 제대로 토큰 재발급 api가 작동했다.

  // WebRTC signaling section
  useEffect(() => {
    setAccessToken(getAccessToken('AccessToken'));
    if (!sessionStorage.getItem('normalEnter')) {
      useToast('정상적인 접근이 아닙니다', 'warning');
      navigate('/rooms');
    }
    connect();
    socketRef.current = new SockJS(`${process.env.REACT_APP_SIGNAL_URL}`);

 

2. 느낀 점 : 

• 이제 프로젝트도 마무리 단계이다. 프론트엔드팀은 유저 피드백을 반영해서 UX/UI 수정하느라 바쁘고 백엔드는 그동안 구현한 개념 공부를 하고 있다. 이제 진짜 일주일 남았다는 사실이 믿기지가 않는다. 오늘도 새벽 3시가 넘은 시간까지 같이 버그를 수정하고 브로셔 작업, 영상촬영 스크립트 작업을 했다. 우리 팀원들은 다 좋은 개발자가 될 것 같다.

 

3. 새로 알게 된 내용 :

• 새로 알게 된 내용은 아닌데 오늘 트러블 슈팅을 비롯해 웹소켓 동시성 제어도 그렇고 일단 뭔가 해결은 됐는데 왜 어떤 이유로 트러블이 발생했는지 원인을 모르는 경우가 꽤 있다. 
• 시니어님이 일단 원인부터 알아야 된다고 하셨는데, 원인 그거 어떻게 알 수 있나요 ㅜ ? ㅎㅎ 

 

4. 셀프칭찬 (오늘 잘한 일) : 

• 오늘도 잘 버텼따 아 . 깊게 파고드는 것은 정말 힘들지만 해결하고 나면 뿌듯하다 ! 

5. 내일 할 일 : 영상 제출 및 개념 정리 공부 / 코드 리팩토링 

 

---

[ 오늘 한 일 ] 

• 리프레시토큰 버그 수정
• 브로셔 작성
• 깃허브 리드미 작성
• 설문 이벤트 당첨자 발표

 

[ 나몰닭 FE Github 주소 ] 

https://github.com/namoldak/Frontend/blob/dev/src/components/GameRoom/GameRoomRTC.jsx

GitHub - namoldak/Frontend

https://www.notion.so/802c9f1f4fce4ed29557a7ea2768fd6b

[나만 모른 닭] 실시간 화상 채팅으로 즐기는 퀴즈 게임