Navigation Guard

Navigation Guard 네비게이션 가드는 특정 URL에 접근(Navigation) 하기 전에 불려지는 (Hook)의 일종으로, 다른 페이지로 우회 하거나 접근 자체를 취소시킬 수 있기 때문에 네비게이션 가드라고 불립니다. 사용자의 권한에 따라 페이지 접근을 막거나 페이지를 로딩하기 전에 데이터를 미리 불러올 때 사용하기 좋은 기술입니다. 사실상 싱글 페이지 어플리케이션을 구현할 때는 거의 필수로 구현해야 합니다. 네비게이션 가드 종류 네비게이션 가드의 종류는 적용되는 위치, 범위에 따라서 전역, 지역, 컴포넌트 3가지로 나뉩니다. 전역 가드 전역 가드는 모든 라우팅에 적용되는 네비게이션 가드입니다. 라우터의 beforeEach라는 메소드를 통해 전역가드의 로직을 설정할 수 있습니다. 아래는 전역 ..

2024.01.31

vue-router (hash mode, guards)

보호되어 있는 글입니다.

2023.06.20

vue-router 404 페이지

보호되어 있는 글입니다.

2023.06.20

vue-router 상세페이지 /:id, URL파라미터

보호되어 있는 글입니다.

2023.06.20

vue-router 설치와 기본 라우팅

보호되어 있는 글입니다.

2023.06.16

react router dom

/detail 로 접속하면 상세페이지를, /cart 로 접속하면 장바구니 페이지를 보여주자. 1. React에서 페이지를 나누는 방법 1. 컴포넌트를 만들어서 상세페이지 내용을 만든다. 2. /detail 로 접속하면 그 컴포넌트를 보여준다. 3. React-router-dom 라이브러리로 쉽게 구현할 수 있다. 2. React-router-dom 설치 https://v5.reactrouter.com/web/guides/quick-start 해당 사이트에서 제공하는 문서를 보고 설치하자. 찾기가 어렵다 npm install react-router-dom npm install react-router-dom@6 3. 셋팅하기 src/index.js 파일로 가서 로 을 감싸면 된다. // src/index.j..

2022.11.11