Vue의 내장 컴포넌트, Built-in Component🧱 Built-in Component란- Vue에서 기본적으로 제공하는 내장 컴포넌트- 동적 컴포넌트를 렌더링하기 위한 '메타 컴포넌트'로 KeepAlive, Transition, Teleport 등이 있다. 🧱 KeepAlive - 기본적으로 컴포넌트의 인스턴스는 전환하게되면 마운트가 해제되어 모든 변경상태가 사라진다.- 컴포넌트를 다시 표시하게 되면 초기 상태의 새 컴포넌트가 생성된다.- KeepAlive는 컴포넌트 인스턴스가 비활성 상태일 경우에도 상태를 보존할 수 있도록 해준다. 🧱 Transition토글 안녕 - Vue에서 트렌지션과 애니메이션을 쉽게 줄 수 있는 내장 컴포넌트- 컴포넌트가 DOM에 나타나고 사라질 때 애니메..
Vue Composition api의 반응형 유틸리티 함수 (toRef, toRefs)😚toRef()- 반응형 객체의 속성을 하나의 ref 객체로 만들 때 사용한다.즉, 반응형을 잃지 않은채로 뽑을 때 사용하는 api- 생성된 ref 객체는 원본 반응형 객체의 속성과 동기화된다! toRef 사용 방법(1) 반응형 객체 생성const state = reactive({ foo: 1, bar: 2}) (2) ref로 추출const fooRef = toRef(state, 'foo') (3) 참조를 변경하면 원본이 업데이트된다fooRef.value++console.log(state.foo) // 2 (4) 원본을 변경하면 ref도 업데이트된다state.foo++console.log(fooRef.va..
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: ..
