FrameWorks/Vue30

• 

  Vue의 시점을 정확하게 파악하기 위한 LifeCycle LifeCyclebeforeRouteLeave기존에 존재하던 컴포넌트가 제거되기 전에 이 훅을 호출주로 문서(게시글 등)를 저장하지 않은 상태로 다른 곳으로 이동하는 것을 방지하는데 사용beforeEach기존의 컴포넌트가 제거된 후 새로운 네비게이션이 시작될 때 이 훅을 호출전역으로 사용할 로직을 명시beforeRouteUpdate컴포넌트를 재사용 할 경우에만 발생하는 훅예를 들면 /board/page/1에서 /board/page/2로 게시판의 페이지를 이동 할 경우beforeEnter이동하려는 라우트에 진입하기 전 호출되는 훅beforeEach와 달리 라우트마다 각각 다르게 가드를 지정할 수 있음beforeRouteEnter새로운 컴포넌트를 만들기 전 호출되는 훅아직 컴포넌트를 만들기 전이므로 컴포넌트.. FrameWorks/Vue 2024. 8. 3.

• 

  VueRouter의 Dynamic Routing 파헤치기 Adding routes동적 라우팅 에서는 주로 두가지의 메서드로 인해 동작하게 됩니다.router.addRoute()router.removeRoute()새 경로만 등록하기 때문에, 페이지 이동시에는 router.push() 또는 router.replace()메서드를 사용해야 합니다.const router = coreateRouter({ history: createWebHistory(), routes: [{ path: '/:articleName', component: Article}],}) 위와 같은 경우 /about, /store, /3-twinkle 등 모든 라우트가 Article 컴포넌트를 렌더링 할 것입니다. 이제 새로운 /about이란 라우트를 추가해 보겠습니다.router.addRo.. FrameWorks/Vue 2024. 8. 3.

• 

  VueRouter의 Lazy Loading Routes 파헤치기 Lazy Loading Routes라우트를 설정하는데 import xxx from 'xxx를 사용하여 임포트해서 사용합니다.하지만, 이 경우 컴포넌트의 수에 따라 엄청난 지연이 발생할 수 있습니다. 그러면 어떻게 해결 할 수 있을까요? 우리는 import하는 함수를 이용하여 이를 해결할 수 있습니다.아래 코드를 이용해서 말이죠.const UserDetail = () => import('./UserDetail.vue')const router = createRouter({ //... routes: [ { path: '/users/:id', component: UserDetail }, // 위 아래 모두 같은 기능을 합니다. { path: '/users/:id'.. FrameWorks/Vue 2024. 8. 3.

• 

  VueRouter의 Scroll Behavior 파헤치기 Scroll Behavior보통의 브라우저라면 페이지 이동시에 항상 페이지의 최상단으로 이동하는 것을 경험해 본적이 있을겁니다.하지만, 안타깝게도 Vue에서는 이 기능이 default가 아닌데요...우리가 이 문제를 해결하기 위해 사용할 수 있는 것이 scrollBehavior입니다. 선언 위치를 보실까요??const router = createRouter({ history: createWebHistory(), routes: [...], scrollBehavior (to, from, savePosition) { // return desired position }}) 위에서 인자로 사용되는 to와 from은 Navigation Guards과 유사합니다. 세번째 인자인 sa.. FrameWorks/Vue 2024. 8. 3.

• 

  VueRouter의 Transitions 파헤치기 Transition앞전에 [[RouterView Slot]] 에서 배운 transition을 좀 더 활용하는 방법을 알아보겠습니다.route의 meta태그를 이용하여 동적으로 을 컨트롤 할 수 있습니다. 동작 방식이나 방법은 앞서 배웠기에 자세한 설명은 생략하고 예시를 보겠습니다.이전 글을 안보고 오셨다면 [[RouterView Slot]]을 먼저 보고 보시는걸 추천합니다.const routes = [ { path: '/custom-transition', component: PanelLeft, meta: { transition: 'slide-left' }, }, { path: '/other-transition', compone.. FrameWorks/Vue 2024. 8. 3.

• 

  VueRouter의 RouterView Slot 파헤치기 RouterView slot에 v-slot을 사용하여 특정 컴포넌트를 유연하게 조작할 수 있습니다.  위의 코드는 평소에 사용하는 코드와 동일하게 동작합니다.위의 코드를 활용해서 유연하게 조작하는 것이지요. 살펴보도록 할까요??KeepAlive태그 안에 를 넣어 사용하는 방법입니다.태그로 감싸면 해당 컴포넌트는 리렌더링 하지 않겠다는 뜻입니다. 그럼 리렌더링을 하지 않으면 어떻게 될까요?? 만약 데이터를 변경시키고 다른 컴포넌트로 이동 후 다시 돌아왔을 대 데이터가 유지되어 있을 겁니다. 아래와 같이 사용합니다. Transition태그 안에 를 넣어 사용하는 방법입니다.태그로 감싸 하위의 컨텐츠에 트랜지션 or 애니메이션을 넣을 .. FrameWorks/Vue 2024. 7. 29.

• 

  VueRouter의 Composition API 파헤치기 Composition APIVue가 Version2에서 Version3가 되면서 가장 큰 변화는 setup하는 과정이라고 할 수 있습니다.기존의 방식을 Options라고하며, 현재 등장한 방법을 Composition이라고 합니다.하지만, 아직 우리는 Options API를 사용할 수 있습니다. route 객체는 동적인(반응형) 객체입니다. 때문에 대부분의 경우 route 객체를 감시하는 것을 지양해야 합니다. 대신에 변경이 예상되는 하위 속성을 감시할 수 있습니다.Navigation Guard이전에 우리는 beforeRouteLeave와 beforeRouteUpdate에 대해 학습했습니다.Composition API에서는 Vue Router update와 leave를 다음과 같이 사용합니다. Compos.. FrameWorks/Vue 2024. 7. 29.

• 

  VueRouter의 Data Fetching 파헤치기 데이터 가져오기때때로 경로가 활성화될 때 서버에서 데이터를 가져와야하는 경우가 발생 할 수 있습니다.탐색 후 데이터를 가져오거나, 탐색 전 데이터를 가져오거나 할 수 있습니다.탐색 후 데이터 가져오기이 접근 방식은 즉시 들어오는 컴포넌트를 탐색하고 렌더링하며, 컴포넌트 자체에서 데이터를 가져오게 됩니다.이는 네트워크를 통해 데이터를 가져오는 동안 로딩 상태를 표시할 수 있으며, 각 뷰에 대해 로딩을 다르게 처리할 수 있습니다. 로딩 중... {{ error }} {{ post.title }} {{ post.body }} 탐색 전 데이터 가져오기beforeRouteEnter를 통해 컴포넌트가 렌더링되기.. FrameWorks/Vue 2024. 6. 27.

• 

  VueRouter의 Router Meta Field 파헤치기 route's meta field라우트에 meta라는 속성 객체를 사용하여 임의의 정보를 추가하면, route location과 navigation guard에서 접근할 수 있습니다.const routes = [ { path: '/posts', component: PostsLayout, children: [ { path: 'new', component: PostsNew, // only authenticated users can create posts meta: { requiresAuth: true }, }, .. FrameWorks/Vue 2024. 6. 27.

• 

  VueRouter의 Navigation Guard 파헤치기 네비게이션 가드주로 탐색을 리다이렉션 or 취소하여 탐색을 막는데 사용하게 됩니다.가드를 연결하는 방법은 다양한데 다음 세 가지 종류가 있습니다.전역라우트별컴포넌트 내부BeforeGuardBeforeGurad는 탐색 이전에 실행되게 됩니다.router Instance의 beforeEach()메서드에 콜백 함수를 전달하여 등록합니다.콜백함수에서 사용하는 parameter에는 다음과 같은 종류가 있습니다.to : 탐색 될 라우트 위치 객체from : 탐색 전 현재 라우트 위치 객체만약 라우트 작업을 취소하고 싶을 경우엔 return false로 취소 할 수 있습니다.또한, return { name: ${route_name} }을 통해 리다이렉션를 명시할 수 있습니다.router.beforeEach(async.. FrameWorks/Vue 2024. 6. 27.

• 

  VueRouter의 Diffrenet History Modes 파헤치기 다양한 히스토리 모드Vue Router Instance에는 생성할 때, history 옵션을 사용하여 다양한 히스토리 모드 중 하나를 선택해서 적용할 수 있습니다.Hash ModecreateWebHashHistory()를 사용하여 설정합니다.https://example.com/#/user/id와 같은 모습 내부적으로 사용하는 URL 앞에 해시 문자(#)를 사용합니다.URL의 이 섹션은 서버로 전달되지 않으므로 특별한 조치가 필요하지 않으나, SEO에 나쁜 영향을 미치므로 이것이 문제가 된다면 HTML5 모드를 사용해야 합니다.import { createRouter, createWebHashHistory } from 'vue-router'const router = creatgeRouter({ hist.. FrameWorks/Vue 2024. 6. 26.

• 

  VueRouter의 Active Links 파헤치기 황성 링크활성 링크란 현재 활성화된 링크를 지칭하는 뜻입니다.RouterLink 컴포넌트는 활성 링크에 router-link-active 및 router-link-exact-active 두가지 CSS 클래스를 추가합니다.따라서, 활성된 링크에 맞게 특정 CSS를 활성화 시킬 수 있는 것이죠. 그럼 활성화된 링크란 무엇일까요?? 예를 들어보겠습니다.아래와 같이 route와 RouterLink가 작성되어 있는 상황입니다.const routes = [ { path: '/uesrs/:username', component: User, children: [ { path: 'grade/:number' .. FrameWorks/Vue 2024. 6. 23.