Front

플러그인플러그인(Plugin)은 일반적으로 Vue에 전역 수준의 기능을 추가할 때 사용하는 기능을 말합니다. 플러그인에 대해 엄격하게 정의 된 범위는 없습니다. 일반적으로 플러그인이 유용한 시나리오는 다음과 같습니다.app.component() 메서드를 사용하여 전역 컴포넌트를 등록 하고자 할 때app.directive() 메서드를 사용하여 커스텀 디렉티브를 등록 하고자 할 때app.provide()를 사용하여 앱 전체에 리소스(메서드 또는 데이터)를 주입할 때전역 애플리케이션 인스턴스에 속성 또는 메서드를 추가하고자 할 때 app.config.globalProperties에 연결하여 추가할 수 있습니다.위의 몇 가지 조합을 수행하는 라이브러리를 설치하고자 할 때 (예: vue-router) 플러그인 작..

는 컴포넌트는 템플릿의 일부분을 외부에 존재하는 다른 DOM 노드로 **'텔레포트(이동)'**할 수 있게 해주는 내장 컴포넌트 입니다. 사용하기이동을 원하는 DOM에 다음과 같이 id를 지정할 수 있습니다. 컴포넌트를 활용하여 특정 요소 또는 컴포넌트를 다른 장소(DOM)로 이동할 수 있습니다. 이렇게 되면 아래와 같은 결과로 렌더링 됩니다.... ...참고https://vuejs.org/guide/built-ins/teleport.html

은 목록에서 렌더링되는 요소 또는 컴포넌트의 삽입, 제거 및 순서 변경을 애니메이션으로 만들기 위해 설계된 내장 컴포넌트입니다. https://vuejs.org/guide/built-ins/transition-group.html Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org

Vue에서는 Transitions 이나 Animations을 쉽게할 수 있도록 도움을 주는 두 가지 빌드인(내장) 컴포넌트를 제공합니다. : 컴포넌트가 DOM에 나타나고 사라질 때 애니메이션을 적용하기 위해 사용하는 컴포넌트 입니다. : 컴포넌트가 v-for 목록에 삽입, 제거 또는 이동할 때 애니메이션을 적용하기 위해 사용하는 컴포넌트 입니다. 컴포넌트은 기본으로 제공되는 컴포넌트 입니다. 즉, 등록하지 않고도 모든 컴포넌트 내 안에서 사용할 수 있습니다. default slot을 통해 전달된 컴포넌트가 나타나거나(enter) 사라질 때(leave) 애니메이션을 적용하는 데 사용할 수 있습니다. 입장(enter) 또는 퇴장(leave)은 다음 중 하나에 의해 트리거될 수 있습니다.v-if를 통한 조건부..

네비게이션 가드(navigation guard)이름에서 알 수 있듯이 Vue Router에서 제공하는 네비게이션 가드는 주로 페이지 이동을 리다이렉션 하거나 취소하여 특정 페이지 진입을 보호하는 데 사용됩니다.라우트 탐색 프로세스에 연결하는 방법에는 전역, 라우트별 또는 컴포넌트가 있습니다. 전역가드Global Before Guardsrouter.beforeEach를 사용하여 전역 가드를 등록할 수 있습니다.const router = createRouter({ ... })router.beforeEach((to, from) => { // ... // 네비게이션을 취소하려면 명시적으로 false를 반환합니다. return false})네비게이션이 트리거될 때마다 가드가 작성 순서에 따라 호출되기 전의 ..

동적 라우트 매칭주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야하는 경우가 자주 있습니다. 예를 들어**사용자 목록(User List)**은 /users와 같은 경로에 매핑되면 되지만**사용자 상세(User Detail)**는 사용자 식별자 별로 같은 컴포넌트에 매핑 되어야 합니다.(예: /users/alice, /users/emma, ... → UserComponent.vue)  이럴때 Vue Router에서는 경로에서 동적 세그먼트를 사용하여 해결할 수 있습니다. 이를 param이라고 합니다.const User = { template: 'User',}const routes = [ { path: '/users/:id', component: User },]이제 /users/alice, /use..

뷰 라우터 (Vue Router)뷰 라우터는 Vue.js를 이용하여 싱글 페이지 애플리케이션(SPA)을 구현할 때 사용하는 Vue.js의 공식 라우터 입니다.Getting Started | Vue RouterCreating a Single-page Application with Vue + Vue Router feels natural: with Vue.js, we are already composing our application with components. When adding Vue Router to the mix, all we need to do is map our components to the routes and let Vue Router know where to render them.https..

동적 컴포넌트 (Dynamic Component)컴포넌트를 동적으로 변경하고 싶을 때 v-bind:is 속성을 사용해서 변경할 수 있습니다. 동적 컴포넌트는 탭 인터페이스와 같이 컴포넌트간에 동적으로 전환해야 할 때 유용합니다.위 예시에서 :is 속성에 전달된 값은 다음 중 하나를 포함할 수 있습니다.등록된 컴포넌트의 문자열 이름 string실제 가져온 컴포넌트 객체 object 💡 를 사용하여 여러 컴포넌트간 전환하면 컴포넌트의 마운트가 매번 해제됩니다. 이때 내장 컴포넌트를 사용하여 “비활성 컴포넌트"들의 “활성” 상태를 유지할 수 있도록 강제할 수 있습니다.