반응형 next.js23 [React] 뒤로가기 방지 [React, Next.js] 뒤로가기(이전 페이지 가기) 방지 const preventGoBackHandler = () => { history.go(1); }; useEffect(() => { window.addEventListener("popstate", preventGoBackHandler); return () => { window.removeEventListener("popstate", preventGoBackHandler); }; }, []); history.go를 이용해 뒤로가기를 막는 효과이다. * 사실 뒤로가기 자체를 막는 로직은 아니고 뒤로가고 앞으로 오는 로직이지만 UX적으로는 현재 페이지에 머물러 있는다. hisyoty.go 2023.02.12 - [분류 전체보기] - [js] his.. 2023. 2. 12. [Next.js] Slug Next.js에서 동적 라우팅, 슬러그(Slug)의 사용 1. 슬러그 사용법 슬러그는 1. 슬러그:[slug], 2. 다중 슬러그 [...slug], 3. 옵셔널 슬러그 [[...slug]] 3가지 형태가 있다. 다중 슬러그와 옵셔널 슬러그에서 slug는 배열이므로 []안에 스프레드 연산자(...)을 이용하여 생성한다. 슬러그를 이해하기 위해 아래 예제를 보자 1. pages/post/create.js 2. pages/post/[pid].js 3. pages/post/[...slug].js /가 pages라고 되어있을 때, 1의 pages/post/create.js는 /post/create 경로와 일치한다. 2의 pages/post/[pid].js는 /post/1, /post/abc, 기타등등과 경로가 .. 2023. 2. 3. [Next.js] Routing_라우팅 Next.js에서는 File system을 기반으로 라우팅이 된다. File system은 pages 폴더 아래에 있어야 한다. 우선순위: src/pages { return router.push("URL"); }; re.. 2023. 2. 3. 이전 1 2 3 다음 반응형