페이지 이동에 따른 게임 실행 에러 해결.V2

이번 글은 저번에 발생했던 에러와 추가적으로 발생한 에러를 포함한 에러들을 수정한 내용을 정리하는 글이다.

페이지 이동에 따른 게임 실행 에러 해결

 

추가적으로 발견한 에러

게임 페이지에서 다른 페이지로 이동한 상태에서 네비게이션 바의 링크 버튼으로 이동할 때 발생하는 에러는 이전에 보완작업을 진행해 에러가 사라졌었다.

 

하지만 새롭게 발견한 에러는 뒤로가기를 통해 이동했을때 게임 코드가 원활하게 동작하지 않는 에러였다.

 

기본적으로 저번 에러의 경우와 동일한 현상이 발생되었다.

 

이 에러의 주 원인은 이전 글에서도 다뤘듯이 kaplay 함수를 통해 생성된 객체가 전역에 존재하며, 이 전역에 생성된 값은 다른 컴포넌트가 렌더링되어도 실제 DOM환경에 여전히 살아있어 문제가 된다.

 

내가 생각한 해결 방법으로는 새로고침을 해주는 a 태그를 이용하는 것이였는데, 뒤로가기시 a 태그를 이용한 솔루션은 유효하지 않았다.

 

그래서 조건부 렌더링과 useEffect를 이용한 언마운트 처리 방법을 적용해 봤지만 해결되지 않았다.

지금 생각해보니 당연한 결과였을 것이다.

 

그래서 전역 상태관리 라이브러리인 Zustand를 이용해 store에 게임 플레이 페이지에 들어왔는지를 저장하는 상태를 저장해 주고, 이 상태를 이용해 브라우저의 새로고침을 명시적으로 실행했다.

// Zustand를 이용한 전역 상태 관리
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface DetectPlayPageInterface{
  isGamePage: boolean | null,
  yesGamePage: () => void,
  noGamePage: () => void
}

export const useDetectPlayPageStore = create(
  persist<DetectPlayPageInterface>(
    (set) => ({
      isGamePage: null,
      yesGamePage: () => set(state => ({ isGamePage: true })),
      noGamePage: () => set(state => ({ isGamePage: false })),
    }
    ),
    {
      name: 'checkGamePage'
    }
  ));

 

const GamePlayingPage = () => {
  const mainRef: RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
  const { isGamePage, yesGamePage, noGamePage } = useDetectPlayPageStore();
  
  useEffect(() => {
    if (!isGamePage) {
      yesGamePage();
      window.location.reload();
    }
    return () => {
      noGamePage();
    }
  }, []);

  return (
    <PlayingPage>
      <Header />
      <GameDisplayArea ref={mainRef}>
        <GamePlaying />
      </GameDisplayArea>
    </PlayingPage>
  )
}

 

이때 새로고침은 전역 상태까지 초기화하지 않나?
이러한 문제는 Zustand의 persist를 이용해 새로고침해도 상태가 유지되게 할 수 있다.

아래는 참고한 블로그 글이다.

Zustand persist: 페이지 새로고침 시 전역상태 초기화 방지 (문제 해결)

 

 

왜 굳이 전역 상태를 이용해 새로고침을?

흠.... 나도 고민을 많이 했다....

 

사실 원래는 a 태그로 새로고침이 되게끔 해줬었다. 하지만 위에서 말했듯이 뒤로가기 이벤트 발생시 게임 실행에 어려움이 있다.

 

그래서 생각한 방법이 전역으로 새로고침을 해도 초기화되지 않는 상태를 이용해 특정 조건에만 새로고침 이벤트를 발생시키면 어떨까 라는 생각이 들었었다.

 

결론적으로는 문제는 해결되었다. 추후에 이 문제를 해결할 더 좋은 방법이 생각나거나 적용하면 좋을거같은 기술이 있다면 적용할 예정이다.