수민정의 기술블로그

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..

예정대로 Vuex 를 공부하고 있다. ES 6 쪽에 점점 접근하게 되는데, 일부러 하나라도 ES6 로 사용해보고 있다. Promise , async & await 문법 관련 이해가 안되는 점이 있었는데 이번 기회에 이해를 조금 한것 같기도 하다. Flux 패턴을 확인하고 MVC 패턴과 차이점을 조사하고 읽어보면서 Facebook 에서 제시한 문제점이 어떤 것일지 곰곰히 생각해보고는 했다. Micro Service 관련하여 같이 연동해보면 좋을 것 같다는 생각이 많이 드는데, 부지런히 공부해서 조그마한 것이라도 만들어봐야겠다. 그래야 기억에 보다 선명하게 남으니까 그렇기도 하고, CORS 문제는 WebMvcConfigurer 에서 해결할 수 있으니까, 프론트 엔드 서버와 백엔드 서버를 따로 돌려서 가져가면..

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..

개요 JavaScript 비동기 처리 패턴 중 가장 최근에 나온 문법 체계이다. CallBack 함수, Promise 의 단점을 개선하고 클린 코드를 작성할 수 있게 해준다. 클린코드 스스로 생각하기에 클린코드를 짜는 개발자가 정말 대단한 개발자라고 생각하고는 한다. 읽은 그대로, 이해한 그대로 코드를 구성하는 것이 async & await 문법의 탄생 목적이다. var user = { id: 1, name: 'Josh' }; if (user.id === 1) { console.log(user.name); // Josh } // HTTP 통신 코드 라고 가정하였을 시 해당 코드가 async & await 문법 적용 형태이다. var user = fetchUser('domain.com/users/1'); ..

Promise 는 JavaScript 비동기 처리에 사용되는 객체이다. Promise 의 주 사용처는 서버에서 받아온 데이터를 표시하는데 있다. 기초 학습 //인자로 함수를 받아 응답데이터를 매개 값으로 넘김 function getData(callbackFunc) { $.get('url 주소/products/1', function(response) { callbackFunc(response); }); } // tableData 로깅 getData(function(tableData) { console.log(tableData); }); Promise 사용 function getData(callback) { // 프로미스 객체를 추가 return new Promise(function(resolve, reje..

Java Script 의 비동기 처리는 특정 코드의 연산이 끝나기 전까지 Thread 가 Blocking 되지않고 다음 코드를 실행하며, 이후 CallBack 으로 연산 결과를 받는 자바스크립트의 특성을 의미한다. 사례 Ajax 가 대표적이다. 해당 코드는 Blocking 되지않고 내려가기 때문에 log 결과는 undefined 이다. function getData() { var tableData; $.get('https://domain.com/products/1', function(response) { tableData = response; }); return tableData; } console.log(getData()); // undefined setTimeout() 해당 Web API 도 Bloc..

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..