이번 포스트에서는 lazy loading route 즉 지연 로딩 경로라는 것에 대해서 알아보자. lazy loading route 우리는 SPA Vue의 큰 특징은 SPA 즉 Single Page Application이다. 이녀석은 "최초 사이트에 요청 시 전체 애플리케이션에 대한 내용을 가져오고 이후에는 데이터만 이동하기 때문에 매우 효율적이다"라고 학습한 적이 있다. https://goodteacher.tistory.com/545 [vue 3] 01.SPA & SFC & Vite 이번 포스트에서는 SPA와 SFC 그리고 이를 구현하기 위한 Vite에 대해서 살펴보자. SPA vs MPA 정의 SPA(Single Page Application)과 MPA(Multi Page Application)이라는..

이번 포스트에서는 route의 meta field를 활용한 dynamic layout에 대해 살펴보자.  기존의 layout named view를 이용한 layout 구성앞서 우리는 named view를 이용해 페이지의 layout을 구성한 바 있다.{ path:"/named/home", components:{ header: HeaderView, footer: FooterView, default:SiteMainView, }}, 또는 Header와 Footer는 고정하고 SiteMainView만 RouterView의 형태로 작성해 볼 수도 있다. 하지만 이때의 문제는 각 뷰 마다 layout이 "고정적"이라는 데 있다.  어떻게 하면 필요에 따라 여러가지 레이아웃을 구성해 볼 수 있을..

이번 포스트에서는 내비게이션 가드에 대해 살펴보자.   navigation guard navigation guard란?navigation guard는 router를 이용한 경로 탐색 과정에서 라우터가 동작하기 전/후에 추가적인 동작을 실행하게 해 준다.예를 들면 로그인하지 않은 사용자에게 로그인을 유도한다든가, 권한이 없는 사용자의 접근을 차단하거나 경로 탐색 이력을 로그로 작성하는 일등이 가능하다.여기까지 개념을 backend에서 생각해 보면 servlet의 filter나 spring의 interceptor를 떠올릴 수 있는데 딱 들어맞는다. navigation guard는 router에 적용하는 filter 또는 interceptor이다. 테스트 시나리오navigation guard 예제를 위한 시나..

이번 포스트에서는 작지만 유용한 라우팅 기법들에 대해 살펴보자.  reidrect와 alias redirectredirect는 어떤 경로로 요청이 들어왔을 때 다른 경로로 연결하는 기법을 의미한다. 예를 들어 링크 설계는 이미 되었지만 아직 컴포넌트 구현은 되지 않은 경우 404로 처리하는 대신 EmptyComponent로 redirect를 요청할 수 있다.{ path:"/etc/nextstep1", redirect: "/under"},{ path:"/etc/nextstep2", redirect: {name:'underconstruction'}}redirect 할 때에는 일반적으로 redirect 된 route의 component를 사용하면 되기 때문에 component 속성이 불..

이번 포스트에서는 중첩 경로와 이름 있는 뷰에 대해 살펴보자. 중첩 경로(nested route) 중첩 경로란?중첩 경로란 상위 컴포넌트에 하위 컴포넌트를 포함하는 구조를 의미한다.페이지를 구성하다 보면 상위 요소가 선택되어야 의미가 있는 하위 요소들이 있다. 예를 들어 특정 사용자의 프로필을 본다든가, 그 사람이 작성한 글을 보는 상황을 생각해 보자. 이 페이지들은 [사용자 선택]이 없다면 아무 의미가 없는 행동들이다. 이런 경우 상위 컴포넌트에 하위 컴포넌트를 포함시키는 중첩 경로 즉 nested route를 구성할 수 있다. Router 작성중첩 경로를 작성하기 위해서는 상위 경로에 children이라는 속성을 이용해서 중첩 경로 정보를 작성해주면 된다. children은 []로 여러 개의 중첩 컴..

이번 포스트에서는 다양한 방식으로 경로를 매칭하는 방법에 대해 알아보자.  파라미터를 활용한 동적 라우팅 params와 query가끔 동일한 컴포넌트를 주어진 경로의 패턴에 따라 동작시켜야 하는 경우가 있다. 예를 들어 사용자의 프로필을 표현하는데 /profile/hong , /profile/jang 형태로 불리는 경우이다. 당연히 이 과정에서 개인의 profile을 보여주는 component는 동일하고 뒤에 있는 /profile/[사용자이름]의 경로가 처리될 필요가 있다. 이를 위해 route에는 파라미터라는 것을 사용하는데 :을 이용해서 표현한다. 마치 스프링에서 path variable과 유사하다.{ path: '/profile/:id', component: DynamicPathView..

이번 포스트에서는 Vue의 공식 라우터인 vue router에 대해서 살펴보자. SPA는 서버에 요청 시마다 웹 페이지를 새로 받아오지 않고 최초의 요청에서 전체를 받아온 후 보이는 컴포넌트만 교체하는 형식이다. 따라서 기본적으로 한 페이지이기 때문에 페이지 이동이라는 개념이 없다. 단지 컴포넌트의 교체만 존재할 뿐이다. router란 컴포넌트를 교체하면서 마치 페이지가 이동하는 것처럼 만들어주는 역할을 수행하는 라이브러리다.  vue router 기본 vue router 특징vue router는 Vue에서 라우팅 기능을 지원하는 공식 라이브러리이다.https://v3.router.vuejs.org/kr/ Vue Router v3.router.vuejs.org다음은 vue router의 주요 기능이다.중..