수민정의 기술블로그

여러가지 속성 들을 분리시키려면 어떻게 해야하는지Vuex.Store({}) 속성의 내용을 ES6의 Modules로 연결시킨다.// store.js import Vue from 'vue' import Vuex from 'vuex' export const store = enw Vuex.Store({ state : {}, getters : {}, mutations : {}, actions : {} });속성 파일의 분리ES6 Modules 의 Export => Import 문을 사용한 속성의 모듈화import Vue from 'vue' import Vuex from 'vuex' import * as getters from './getters' import * as mutations from './mutatio..

개요 mapMutations Vuex 에 선언 된 Mutations 속성을 컴포넌트에 더 쉽게 Mapping 해주는 헬퍼 //사용.vue import {mapMutations} from 'vuex' methods: { ...mapMutations({clickBtn:'clickBtn'}), authLogin() {}, displayTable() {} } //store.js mutations: { clickBtn(state) { alert(state.msg); } } //template popup message mapActions Vuex 에 선언 된 Actions 속성을 컴포넌트에 더 쉽게 Mapping 해주는 헬퍼 //사용.vue import {mapActions} from 'vuex' methods: ..

개요 mapState Vuex 에 선언된 state 에 더 쉽게 접근시켜주는 방법이다. 객체 전개 연산자로 선언된 Helper 들은 하나의 함수 이다. computed() 속성과 연계된다. 컴포넌트에서 해당 Helper 를 다른 이름으로 쓰고 싶다면 object로 속성을 받아온다. //사용.vue import {mapState} from 'vuex' computed: { //num() { return this.$store.state.num } ...mapState(['num']) // Array literal } ///template {{ this.num }} //다른이름으로 받고 싶다. computed: { ...mapState({ name: 'num' }) } mapGetters Vuex 에 선언된 ..

Helper 기존의 Vuex.Store 에서 정의하던 state , getters, mutations , actions 를 더 쉽게 코딩하는 방법이다. state => mapState getter => mapGetters mutations => mapMutations actions => mapActions 사용 Vuex.Store 에서 각 Helper 함수를 꺼내다 쓴다. 컴포넌트 로직에서 객체전개연산자로 사용가능하다. Vuex.Store 에서 Helper 함수롤 꺼내온 원소 값들은 에서 this. 로 호출이 가능해진다. Vuex.Store 의 속성 값과 해당 컴포넌트의 속성 값을 Mapping 하는 함수라고 보면 된다. this.$store.state.num = Helper > this.num comp..

Actions? 비동기 처리 로직을 기술하는 메서드이다. 동기 로직은 Mutations 가 관리한다. 서버 데이터 요청, Promise, ES6 async 등의 비동기 처리는 전부 Actions 에 선언한다. Actions 에서 Mutations 의 메서드는 Context 로 접근한다. this.$store.dispatch( name ) 으로 사용한다. //store.js new Vuex.Store({ state: { product: {} }, //동기처리 mutations: { setData(state, fetchData) { state.product = fetchData; } }, // 비동기 처리 actions :{ fetchProductData(context) { // store 의 메서드는 co..

Mutations Mutations 는 state 값을 변경시키는 유일한 방법이다. 메서드 형식으로 작성하며 commit( name, args ) 으로 접근하게 된다. getter() 는 제공방식이며 mutations 는 값을 변경시키는 방식이다. commit() 의 arg 속성은 object 로 주어 다양한 인자를 한번에 줄 수 있다. //store.js new Vuex.Store({ state : { num : 10 }, getters: { getNum(state) { return state.num; } }, mutations: { printNumbers(state) { return state.num }, sumNumbers(state, anotherNum) { return state.num + an..

NPM ES6 기반 지원을 많이 하기 때문에 ES6 기반 코딩이 권장된다. package.json 에 해당 의존정보가 기술된다. 관행적으로 루트폴더 아래 store 라는 폴더에 들어가며 store.js 파일로 정의된다. npm i vuex --save "dependencies": { "vue": "^2.5.11", "vuex": "^3.6.0" }, 시작 store.js 의 기본적인 생성 import Vue from 'vue' import Vuex from 'vuex' //use() 는 전역적으로 기능을 추가할 때 사용한다. &store 로 접근 가능하다. Vue.use(Vuex); export const store = new Vuex.Store({ }); main.js 에 등록하여 Root Instan..

Vue 가 사용하는 React 의 단방향 데이터 흐름 구조로 보았을 때 Component 의 트리구조가 복잡해질 수록 거슬러 올라가서 내려가는 이벤트와 props 전달이 어려워진다. 어느 컴포넌트에서 이벤트를 보냈는지, 어디서 이벤트를 받았는지 알기 힘들다. EventBus 를 사용하더라도 코드에서 컴포넌트 간의 이벤트 수송신이 명시적이지 못하다. //어디로 보내는지, 어디서 보냈는지 기재되지 않는다. //Login.vue evenBus.$emit('fetch',LogInfo); //List.vue evenBus.$on('diplay', data => this.displayOnScreen(data)); //Chart.vue evenBus.$emit('refreshData', chartData); Vuex..

MVC ? Model + View + Controller 를 합친 용어로 이상적은 구현은 각 구조는 서로의 존재를 몰라야하며 단순해야한다. 즉 각각 역할을 나누어 코드 관리를 하여 직관성과 유지보수 성의 향상을 꾀한다. 낮은 결합도와 높은 응집력을 위해 나누어졌다. 1. 흐름 Flux 패턴을 읽으면서 가장 의아 했던것은 왜 View 와 Model 서로 통신하지? 였다. 계정, 멘트, 아이콘, 이벤트 등의 다양한 Model 을 사용하는 Facebook 에서 다양한 Model 과 각각의 View 가 있을 것 같다. 하나의 Model 변화는 다른 View 로 전파되고 View 의 변경은 다른 Model 로 전파되는 것을 보면 결합도가 점점 올라가는 것으로 보인다. 하지만, MVC 패턴에서 왜 Controlle..

Vuex 란 무엇인가. 무수히 많은 컴포넌트 데이터를 관리하는 Pattern 이자 Library 이다. React 의 Flux 패턴에 기인 Vue.js 성장 필수 관문이다. Flux MVC 패턴의 복잡한 흐름을 해결하는 개발 패턴이다. 복잡한 흐름이란 거대 App 에서 이벤트 흐름을 추적하기 어렵다는 것이다. React 의 단방향 흐름 처럼 한방향으로 흐르게 하여 추적에 용이하게 한다. Action : 이벤트, 사용자의 입력 Dipatcher : 데이터 변경법 , 메서드를 의미 ( 데이터만을 변경 ) Model = Store : 화면에 보여줄 데이터 View : 화면에 비추어지는 화면 View 에서 일어난 Action 이 다시 순환적으로 흐르게 된다. 비교 Controller 에 의해 Model 과 Vi..