브라우저 백버튼을 눌렀을 때 뒤로가기 동작을 막고 모달을 띄우고 싶습니다.
모달에서 확인을 눌렀을 때 뒤로가게하고 취소를 하면 페이지에 머물게 만드려고 합니다.

next.js에서 브라우저 백버튼 이벤트를 감지할 수 있는 방법이 있을까요???

next.js의 router object가 제공하는 beforePopState 함수를 통해 브라우저의 뒤로가기 이벤트를 제어할 수 있습니다.

beforePopState 함수의 실행 흐름은 다음과 같습니다.

뒤로가기 버튼 클릭 → 브라우저 주소 변경 → router.beforePopState 실행 → router.beforePopState 함수가 false를 리턴하면 주소만 변경되고 실제로 화면을 이동하지 않음

beforePopState 함수를 이해하려면 브라우저가 어떻게 주소를 변경하고 페이지를 이동시키는지 이해해야 합니다. 간단하게 기술해보면

브라우저 백버튼 클릭 -> 브라우저 히스토리의 주소가 변경됨 (맨 위의 주소가 pop됨) -> popstate 이벤트가 실행되면서 페이지가 이동.

beforePopState함수는 boolean 값으로 popstate 이벤트를 실행할지 결정할 수 있어서 실제 브라우저의 이동을 막을 수 있습니다.

여기서 한가지 중요한 것은 브라우저의 주소가 변경되는 것은 막을 수 없기 때문에 바뀐주소를 다시 원상태로 되돌려야 합니다. 그때는 보통 window.history.pushState 함수를 사용하여 브라우저 히스토리에 주소를 추가합니다 (pushState 함수는 popstate 이벤트를 발생시키지 않고 주소만 추가함)

말씀하신 기능 요구사항에 맞추어 코드를 작성하면 대략 다음과 같을 것 같네요!

  useEffect(() => {
    router.beforePopState(state => {
      window.history.pushState(null, '', router.asPath);
      OpenModal().then(({ isConfirmed }) => {
        if (isConfirmed) { 
          router.beforePopState(() => true);
          router.back();
        }
      });

      return false;
    });
  }, []);

Software Engineer

성원

next.js 브라우저 뒤로가기 이벤트 막기

현재 파이어베이스와 리액트를 사용해서 
혼자 파이어베이스 서버를 사용해 
포트폴리오를 만드려합니다.

코드에서 에러문제는아니고

파이어베이스는 백엔드없이 서버를 쉽게 사용할 수 있게 해주는 서비스인데

현업에서나 프로젝트에서 백엔드와 작업하는것과 비슷하게 이루어지는지 궁금합니다.

코드상에서 데이터베이스의 데이터를 가져오고 로그인을 시켜주고 회원가입을하고 등등
여러 코드들이 실제 협업하는 코드들과 유사한지가 궁금합니다.

알려주실분 계실까요?

독학중이라 이러한것들을 알수있는 방법이 없네요..ㅠ

또는 혼자서 협업느낌의 작업을 해볼 수 있는 방법이 있을까요?

파이어베이스로 작업하면 협업의 느낌이있나요?

안녕하세요..! window size를 체크해서 mobile여부를 확인하는 커스텀 훅을 만들었습니다.  

코드도 아래 첨부합니다.

원하는 대로 동작하지 않네요 크롬 개발자도구로 윈도우 사이즈를 줄여봤는데 useIsMobile의 리턴값이 false입니다. 혹시 뭐가 문제인지 아시는분 답변 부탁드립니다!

useRef를 사용해서 window resize hook을 만들었는데 잘 동작하지 않습니다.

와 자세한 설명 정말 감사합니다!! 해당 코드 적용해 보겠습니다ㅎㅎ

 안녕하세요, 커리어리 Q&A를 운영하고 있습니다!

커리어리 Q&A 운영자

지식 나눔

아무래도 브라우저 히스토리를 직접 조작하면 타이밍 이슈와 같은 사이드 이펙트가 발생할 수 있습니다🙏 제 코드가 정답이라고 할 수 없어서 next.js에서의 history이벤트 조작, 브라우저 변경 이벤트가 어떻게 이루어지는 지를 중점으로 이해해 주시고 사용에 참고해주시면 감사하겠습니다!