브라우저 새로고침 방지를 이어서 찾아온 뒤로가기 방지하기..새로고침 방지할 때는 beforeunload 이벤트를 사용해서 브라우저에서 제공하는 안내 팝업을 띄웠지만뒤로/앞으로가기를 방지할 때는 popstate 이벤트를 사용하여 우리가 직접 만든 레이어팝업을 띄우고자 했다! 팝스테이트popstate 이벤트는 브라우저 탐색(뒤로가기, 앞으로 가기)시 발생하며, 브라우저의 히스토리 스택의 상태가 변경될 때 트리거 됨 특징window.history API와 연동됨사용자가 브라우저 탐색 버튼(뒤로/앞으로)을 클릭할 때 실행됨pushState 또는 replaceState 메서드로 변경된 히스토리 상태를 읽을 수 있음 사용 방법 (Next.js 기준)const MultiStepForm = () => { // 레이어..

프로젝트를 진행하며 데이터를 입력 받는 폼에서 새로고침을 할 경우 방지하는 창이 필요하다 판단했고이리저리 찾아본 결과 브라우저 네이티브 기능인 beforeunload 이벤트를 사용해서 저 창을 띄울 수 있다는 것을 알게 되었다 beforeunloadbeforeunload 이벤트는 사용자가 페이지를 떠나기 전(새로고침, 탭 닫기, 브라우저 종료, 다른 URL로 이동) 실행되며브라우저 네이티브 기능으로, 사용자가 페이지를 떠나기 전 경고 메시지를 표시하거나 특정 작업을 수행할 때 사용된다. 특징브라우저가 페이지를 떠나기 직전에 이벤트 발생주로 사용자 확인 메시지를 띄우는데 사용 됨브라우저마다 다르게 동작하며, 최신 브라우저에는 보안 정책 상 커스텀 메시지를 사용할 수 없음 사용 방법 (Next.js 기준)c..