beomy

1. 단일 상태 트리 (Single State Tree) Vuex는 단일 상태 트리(single state tree)를 사용합니다. 즉 이말은, 하나의 객체가 모든 어플리케이션의 state를 포함하고 이 객체가 하나의 원본 소스(single source of truth)입니다. 하나의 어플리케이션은 하나의 store만 가진다는 것을 의미합니다. 단일 상태 트리는 특정 state를 바로 찾을 수 있게 만들고, 현재 앱의 state의 스냅샷을 가져올 수 있어 디버깅을 간편하게 만듭니다. 2. Vuex의 state를 Vue 컴포넌트에 가져오기 Vuex의 store를 Vue 컴포넌트에서 사용할 수 있는 가장 간단한 방법은 computed 속성을 사용하는 것입니다. // Counter 컴포넌트를 만듭니다 cons..

모든 Vuex 어플리케이션의 중심에는 store가 있습니다. store는 어플리케이션의 상태를 저장하는 컨테이너입니다. Vuex의 store와 전역객체와 두가지 차이점이 있습니다. Vuex store는 반응형입니다. Vuex store가 변경되면 컴포넌트는 변경된 store를 감지하여 화면을 업데이트합니다. store의 state를 직접 변경 할 수 없습니다. store의 상태를 변경할 수 있는 유일한 방법은 commit을 통해 mutations를 이용하는 방법입니다. 이렇게 하면 state 변화를 추척할 수 있고, 디버깅도 용이해 집니다. 1. Vuex 예시 state와 mutations를 사용한 간단한 Vuex 예제입니다. // 모듈 시스템(npm 혹은 yarn)을 사용하는 경우 Vue.use(Vue..

Vuex는 Vue.js 어플리케이션을 위한 상태 관리 패턴 + 라이브러리 입니다. 어플리케이션의 모든 컴포넌트를 위한 중앙 집중식 저장소 역할을 합니다. 상태 변화를 예측하기 쉽도록 도와 줍니다 Vue에서 devtools 확장 프로그램을 지원하여 디버깅이 매우 편합니다. 1. 상태 관리 패턴 Vue.js로 작성한 간단한 카운터 앱을 예제로 이야기 하도록 하겠습니다. new Vue({ // 상태 data () { return { count: 0 } }, // 뷰 template: ` {{ count }} `, // 액션 methods: { increment () { this.count++ } } }) 상태: 앱을 작동하는 진실의 근원(source of truch)입니다. 뷰: 상태의 선언적 매핑입니다. 액..

1. 직접 다운로드 / CDN https://unpkg.com/vuex 위의 링크는 NPM 기반의 CDN 링크를 제공합니다. 항상 최신 NPM 릴리즈 버전을 가르킵니다. https://unpkg.com/vuex@2.0.0과 같이 특정 버전/태그를 사용할 수 있습니다. vue 선언 뒤에 vuex를 추가하면 자동으로 설치됩니다. 2. NPM / Yarn npm install vuex --save # NPM yarn add vuex # Yarn 위의 코드와 같이 npm과 yarn을 사용하여 설치할 수 있습니다. 위의 방법으로 설치하기 위해서는 Vue.use()를 사용해야 합니다. import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vue..

번들러를 사용하여 앱을 빌드할 때, 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..