나만의 무기 프로젝트 - 디버깅

우리의 프로젝트를 구현하는데 

새로고침, 뒤로가기로 인해서 문제가 발생하여 해결하기 위해서 필요

 

새로고침 시, 동기 비동기 문제로 인해서

TypeError: Cannot set properties of null (setting 'srcObject')이러한 오류가 등장하여

게임 페이지가 랜더링이 불가한 상황이 발생한다. 소켓문제도 있는듯하다..

그래서 새로고침 or 뒤로가기를 제한하려고 한다.

 

새로고침 방지

const PreventReload = (event) => {
    
    

    useEffect(() => {
        window.addEventListener("beforeunload", alertUser);
        return () => {
          window.removeEventListener("beforeunload", alertUser);
        };
      }, []);
      const alertUser = (e) => {
        // window.location.href = "/lobby"
        e.preventDefault();
        e.returnValue = "";
      };
      return '';


    }

새로고침을 아예 막는 방법 or 새로 고침 시 lobby로 리다이렉트를 시켜야하는데

새로고침을 누르는 이벤트를 가져오기가 쉽지 않다.

이런 부분을 어떻게 구현할지 생각해봐야겠다.

 

뒤로가기 방지

const PreventGoBack = () =>{

    useEffect(() => {
        const preventGoBack = () => {
          window.history.pushState(null, '', window.location.href);
          // console.log('prevent go back!');
          const check = window.confirm("패배 추가");
        //   alert(check);
        //   alert("페이지를 변경하시면 패배하게 됩니다.");
        if(check){
            window.location.href = "/lobby"
        }
        else{
            
        }
        };
        
        window.history.pushState(null, '', window.location.href);
        window.addEventListener('popstate', preventGoBack);
        
        return () => window.removeEventListener('popstate', preventGoBack);
      }, []);   
}

뒤로가기 방지 코드이고, 뒤로가기를 했을 때 원래는 console만 찍거나, alert만 찍었는데

취소 버튼을 눌러서 뒤로가기를 취소할 수 있게 confirm을 사용하였다. 

window를 붙치지 않아서 오류가 났었다..

 

새로고침 이벤트를 다시 가져오는 방법에 대해서 계속 생각해봐야할 것 같다.

거의 5시간 정도 찾은 것 같은데, 새로고침에 대한 내용을 파악하기 힘들다.