Vue의 상태관리🏠상태관리- 애플리케이션의 상태(데이터)를 효율적으로 관리하는 것 🏠Vue의 상태 관리 구성- Vue의 컴포넌트는 state, view, action 구성으로 상태를 관리하고 있다.(1) state: 컴포넌트 내에 선언된 상태(data)(2) view: 상태가 선언적으로 매핑된 템플릿(template)(3) action: view에서 사용자의 입력에 대한 반응으로 state를 변경한다.(methods) 🏠Vue에서 상태를 공유하는 방법(1) emits & props로 전달을 통한 관리- 깊은 계층 구조를 가진 컴포넌트에선 provide와 inject를 통한 Prop Drilling 활용- 이러한 코드는 유지관리가 힘들다. (2) Reactivity api를 통한 관리- 공유해야하..
Vue 네비게이션 가드 (navigation guard) - 페이지 이동을 다른 페이지로 리다이렉션하거나 취소하여 특정 페이지 진입을 보호하는데 사용한다.- Vue Router에서 제공한다.- 연결 방법은 전역, 라우트, 컴포넌트 내부가 있다. 🛡️전역 가드 (1) global before guardconst router = createRouter({ ... })router.beforeEach((to, from) => { // ...})- router.beforeEach를 통해 전역 가드 등록- 네비게이션이 트리거될 때마다 작성 순서에 따라 호출되기 전의 모든 경우에 발생한다.- 가드는 비동기식으로 실행될 수 있다.- 네비게이션은 모든 훅이 해결되기 전까지는 보류 중으로 간주된다. (2) glob..
Vue Router의 다양한 history 모드와 hash 모드🍃history 모드- router 인스턴스의 history 옵션을 사용하면 history옵션의 다양한 모드를 선택할 수 있다. (1) Hash 모드const router = createRouter({ history: createWebHashHistory(), routes: [ // ... ],}) - history: createWebHashHistory()- 히스토리 관리 기법을 해시(#)형으로 쓸 수 있다.- 내부적으로 전달되는 실제 url 앞에 #이 붙는다. → localhost:3000/#/posted (2) History 모드const router = createRouter({ history: ..
route의 props를 허용하여 라우트 컴포넌트에 속성 전달🔓$route에 의존된 컴포넌트const routes = [{ path: '/user/:id', component: User }]- 컴포넌트에서 $route객체(param 등)를 사용하면 특정 url에서만 사용할 수 있게 되어서 의존적이다.(url이 '/user/tay' 에서만 'tay'에 대한 User 컴포넌트를 가져올 수 있음)즉, 해당 url이 아닌 곳에서는 User 컴포넌트를 불러올 수 없게 된다. 🔓속성을 전달하여 $route에 의존성 해제 const routes = [{ path: '/user/:id', component: User, props: true }]- 필요에따라 어디서든 컴포넌트를 사용할 수 있도록 하려면 route에..
Vue Router의 프로그래밍 방식 네비게이션🪐선언적 방식과 프로그래밍 방식 비교 선언적 방식 프로그래밍 방식 router.push(...) - 를 사용하여 선언적 네비게이션용 태그를 사용하는 것 외에 라우터 인스턴스 메서드를 사용하여 페이지 이동 가능하다. 🪐router.push(url) 사용법- push를 통해 다른 url로 이동 가능하다.- 히스토리 스택에 넣어서 뒤로가기 시 이전 url로 이동한다.- 사실 의 내부 메소드라서 기능이 동일하다. ※ router.push 파라미터는 문자열 경로 또는 객체가 가능(1) 리터럴 문자열 경로 → router.push('/users/tay')(2) 경로가 있는 개체 → router.push({ path: '/users/tay' })(3) 이름을 가..
