Vue - 프로젝트 회고 (2)
서론
(1) 에 이어서 이번 포스팅에서는 프로젝트에서 사용했던 Flux 패턴에 대해서 소개하고자 한다. 그를 위해 사전지식부터 차근차근 정리하려고 한다.
Vuex란?
Vue
나 React
의 경우 무수히 많은 컴포넌트로 구성되어 있다. 데이터를 관리하기 위한 상태관리 패턴인 Vuex
는 React
의 Flux 패턴에서 영향을 받았다고 한다.
Flux란?
MVC 패턴의 복잡한 데이터 흐름의 문제를 해결하는 개발패턴이다.
1. MVC 패턴
- controller : Model을 변경하기 위한 함수로 구성
- Model : 서버에서 가져온 데이터를 구성하는 객체
- View : 사용자와 Interface
위와 같은 형태는 컴포넌트나 기능이 많아지면 아래와 같이 복잡해진다.
그러다보니 기능이 추가됨에 따라 생길 수 있는 문제를 예측할 수가 없다. 또 앱이 커지면서 업데이트가 굉장히 많아질것이다.
2. Flux 패턴
- action : 화면에서 발생하는 이벤트 또는 사용자의 입력
- dispatcher : 데이터를 변경하는 일련의 함수(메서드)
- model : 화면에 표시하거나 관리할 대상(데이터)
- view : 사용자와 interface
위처렴 Controller를 Action 과 Dispatcher로 분리하여 관리한다.
Vuex 의 구조
위 그림을 보고 이해하면 쉽다. 순서는 아래와 같다.
- Vue Components에서 사용자 동작으로 인한 이벤트가 발생한다
- Dispatch 함수들이 Vuex의 actions을 호출 및 수행한다.
- actions의 비동기 함수를 통해 REST api 서버와 통신 한다.
- 서버에서 받아온 데이터나 로직을 Mutation을 통해 State(데이터, 모델) 에 전달한다.
- State(데이터, 모델) 의 변화가 생기고 자연스레 Vue component(사용자 interface)에 전달한다.
저기서 actions
, mutiotions
, state
는 Vuex라는 Object가 실제로 key값으로 가지고 있으며 getter
를 통해 Vue Components에 전달 할 수 있다. 이 문장은 실제로 vuex를 설치하면 무슨 말인지 단번에 알아 들을 수 있다.
예제는 아래와 같다.
/* store.js */
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0,
weight: 2,
random: 0,
},
mutations: {
increment(state) {
state.count++;
},
decrement(state) {
state.count--;
},
successGenerateRandomNumber(state, payload){
state.random = payload.num;
},
failGenerateRandomNumber(/*state, payload*/){
console.log('ERROR!');
}
},
getters:{
count(state, getters){
return Math.pow(state.count, getters.weight);
},
weight(state, /*getters*/){
return state.weight;
},
random(state, /*getters*/){
return state.random;
}
},
actions:{
generateRandomNumber({commit, /*state*/}) {
console.log(arguments);
axios.get(`http://localhost:4321/`)
.then((res) => {
commit('successGenerateRandomNumber', res.data);
})
.catch((res) => {
commit('failGenerateRandomNumber', res);
});
}
}
})
Author And Source
이 문제에 관하여(Vue - 프로젝트 회고 (2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lshn1007/Vue-프로젝트-회고-2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)