beomy

번들러를 사용하여 앱을 빌드할 때, JavaScript 번들이 커지게 되면 페이지 로드하는데 걸리는 시간이 길어지게 됩니다. 각각 라우트 컴포넌트 단위로 나누고 그 라우트에 방문하게 될 때 파일을 로드하는 것이 더 효율적입니다. 1. Vue의 비동기 컴포넌트 + Webpack의 코드 분할 Vue의 비동기 컴포넌트([Vue.JS] 컴포넌트 (고급:Dynamic & Async Components) 참고)와 Webpack의 코드 분할(Code Splitting 참고)을 결합하여 Lazy Loading Route를 쉽게 구현 할 수 있습니다. Vue의 비동기 컴포넌트 비동기 컴포넌트는 Promise를 반환하는 팩터리 함수를 이용하여 만들 수 있씁니다. 컴포넌트 정의는 resolve 함수의 인자로 전달 되어야 합..

client-side 라우팅을 할 때, 새로운 라우트로 이동 할 때 스크롤을 맨 위로 위치하게 하거나, 페이지를 다시 로드 했을 때 스크롤 위치를 유지하게 할 수 있습니다. 심지어 스크롤 위치를 원하는데로 커스터 마이징 할 수도 있습니다. 이 기능은 브라우저가 history.pushState를 제공 해야 동작합니다. 1. scrollBehavior 함수 vue-router 인스턴스를 생성할 때 scrollBehavior 함수를 정의하면 됩니다. const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return desired position } }) 전달 인자 scrollBehavior 함수는 t..

이번 포스트에서는 라우트가 활성화 될 때 서버에서 데이터를 가져오는 2가지 방법에 대해 이야기 할 것입니다. 첫번째 방법은, 네비게이션이 된 후 데이터를 가져오는 방법 입니다. 네비게이션을 먼저 동작하고, 활성화 된 라우트 컴포넌트의 라이프 사이클 훅에서 데이터를 가져오는 방법입니다. 데이터를 가져오는 동안에 로딩 상태를 표시합니다. 두번째 방법은, 네비게이션이 되기 전 데이터를 가져오는 방법입니다. 컴포넌트 내부 가드를 사용하여 네비게이션 되기 전에 데이터를 가져오는 방법입니다. 데이터를 가져오는 것이 끝나면 네비게이션이 동작합니다. 1. 네비게이션이 된 후 데이터 가져오기 이 방법은 즉시 네비게이션이 된 후, 컴포넌트가 렌더링 되어 컴포넌트의 라이프 사이클 훅인, created 훅에서 데이터를 가져오..

는 사실 동적인 컴포넌트이기 때문에 컴포넌트를 사용하는 것과 동일한 방식으로 트랜지션 효과를 적용 할 수 있습니다. 1. 라우트 별 트랜지션 위의 코드와 같이 작성하게 되면 모든 라우트에 동일한 트랜지션을 적용하게 됩니다. 각 라우트 컴포넌트가 서로 다른 트랜지션을 갖도록 하기 위해서는, 각각의 라우트 컴포넌트 내에서 다른 이름으로 을 사용하면 됩니다. const Foo = { template: ` ... ` } const Bar = { template: ` ... ` } 2. 라우트 기반 동적 트랜지션 이동할 라우트와 현재 라우트 간의 관계를 기반으로 동적으로 트랜지션을 결정할 수 있는 방법도 있습니다. // 그런 다음 부모 구성 요소에서 `$route`를 보고 사용할 트랜지션을 결정합니다 watch:..

라우터를 정의할 대 meta 필드를 포함할 수 있습니다. const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // 메타 필드 meta: { requiresAuth: true } } ] } ] }) routes 설정의 각각의 라우터 객체를 라우트 레코드라고 합니다. 라우트 레코드는 중첩 될 수 있기 때문에, 라우터가 일치하면 2개 이상의 라우트 레코드와 일치 할 수 있습니다. 예를 들어, 위의 코드와 같이 라우트를 설정하면, /foo/bar라는 URL로 접속 하였을 때, 상위 레코드와 하위 레코드 2개가 일치하게 됩니다. 라..

네비게이션 가드는 이름에서 알 수 있듯이 리다이렉션하거나 취소하여 네비게이션을 보호하는데 사용됩니다. 전역, 라우트별, 컴포넌트별로 네비게이션 가드를 등록하여 사용할 수 있습니다. 이번 포스트에서는 전역, 라우트별, 컴포넌트 각각의 방법으로 네비게이션 가드를 등록하는 방법을 이야기 하도록 하겠습니다. params나 query가 변경되어도 네비게이션 가드는 실행되지 않습니다. 변경되는 시점을 알고 싶다면, vue 옵션 중 watch 옵션에 $router 객체를 등록하거나 컴포넌트 가드인 beforeRouteUpdate(2.2 버전에서 추가 됨)를 사용해야 합니다. 1. Global Before 가드 router.beforeEach를 사용하여 Gobal Before 가드를 사용할 수 있습니다. const r..

vue-router의 기본 설정은 hash 모드입니다. URL 해시를 사용하기 때문에 URL이 변경될 때 페이지가 다시 로드되지 않습니다. 해시를 제거하기 위해 vue-router는 history 모드도 지원합니다. history.pushState API를 사용하여 페이지를 다시 로드하지 않고 URL을 변경 할 수 있습니다. const router = new VueRouter({ mode: 'history', routes: [...] }) 위의 코드와 같이 history 모드로 설정 할 수 있습니다. history 모드를 사용할 때, 처음 경로 부터 쭉~ 사용한다면 문제없이 정상적으로 동작합니다. 하지만 중간 경로로 직접 접속하면 404 오류가 발생합니다. http://서버주소/user/1와 같은 URL..

컴포넌트에서 $route를 사용하게 되면, 컴포넌트가 URL에 의족적이게 되어 재사용성이 떨어지게 됩니다. 이 의존성을 제거하기 위해서는 props 옵션을 사용하면 됩니다, const User = { template: 'User {{ $route.params.id }}' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }) 위의 코드는 $route를 사용한 예제입니다. URL에 의존적이기 때문에 다른 URL를 가지는 컴포넌트에서 재사용하기 어렵습니다. const User = { props: ['id'], template: 'User {{ id }}' } const router = new VueRouter..

1. Redirect 리다이렉션은 vue-router를 설정할 때 정의 할 수 있습니다. 예를 들어 /a라는 URL로 접속할 때, /b라는 URL로 리다이렉션을 시켜주고 싶다면, const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] }) 위의 코드와 같이 vue-router를 설정 할 수 있습니다. const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ] }) 위의 코드와 같이 Named router를 사용할 수도 있습니다. const router = new VueRouter({ routes: [ { path: '/a', redirec..

1. Named Routes vue-router를 사용할 때, 이름이 있는 라우트를 사용하는 것이 더 편리할 때가 있습니다. const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] }) 위의 코드와 같이 라우트를 설정하였다면, User 혹은, router.push({ name: 'user', params: { userId: 123 }}) 를 이용하여 라우터를 변경 할 수 있습니다. 위의 두가지 모두 /user/123으로 경로를 이동합니다. 2. Named Views 여러개의 view를 중첩하지 않고 동시에 표시해야 할 경우, 이름을 갖는 v..