수민정의 기술블로그

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

복잡한 App 의 다수의 Component 를 효율적으로 관리하기 위함 Vuex 등장 배경인 Flux 패턴 Vuex 라이브러리 주요 속성은 state, getters, mutations, actions 이다. state = data | getters = computed | mutations = method | actions = Async Method Vuex 를 쉽게 작성하는 Helper 함수 존재 프로젝트 구조화 , 모듈 구조화

ECMAScript 2015 Front End Framework 의 React, Angular, Vue 에서 권고하는 형식이다. 문법이 간결하며 코딩방식이 편해진다. Babel 브라우저 중 ES6 를 지원하지않는 브라우저 있으므로 이를 transpiling 하는 기능이 필요하다. 그러므로 Babel 을 사용하게 된다. Webpack 이 만든 js를 Babel 이 모든 브라우저가 호환 되게 끔 변환시킨다. Webpack.config.js 에 Module 란의 loader 에 기술되어 있는 것으로 기억난다. { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, Const & Let Closer 단위의 Variable Scope 를 정의하는 ..

kr.vuejs.org/v2/guide/transitions.html 진입/진출 그리고 리스트 트랜지션 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org Transition , Transition Group 태그로 나뉘며 해당 영역은 transition 활성 영역이 된다. v-enter -> v-enter-to / v-leave -> v-leave-to 로 이동하면서 선명도가 바뀌는 예시. v-enter-to + v-leave | v-leave-to + v-enter 로 자주 사용된다. 사용 예시 사용할 영역을 , 으로 정의한다.

Vue 가 React 와 대비해 가지는 장점은 라이브러리 단에서 애니매이션과 트랜지션 등을 지원하는 것이다. kr.vuejs.org/v2/examples/modal.html 모달 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org .vue 파일로 컴포넌트 모듈화할 때는 x-template 라는 개념이 나온다. id 값을 기준으로 Template 파일을 맵핑시켜 사용하는 것으로 필요한 컴포넌트에 등록하여 사용할 수 있다. #modal-template 의 id 값을 가지고 해당 Template 를 찾겠다는 것이다. // register modal component Vue.component('modal', { template: '#modal-template' }..

개요 중급지식에 대한 간단한 설명만을 제공 Vuex App 의 상태를 관리하는 라이브러리이다. Vuex 의 State 란 Vue 의 data() {} 와 유사하다. ex) 로그인시 id 를 제공 받고 이를 전역적으로 사용하면 모든 컴포넌트가 id(State) 를 공유한다. 즉, 특정한 data() {} 를 여러 Component 에서 공유하고 있을 때에 이를 State 라고 한다. React 에서 가져온 단방향 데이터 흐름에서 최상위 컴포넌트를 통해 하위로 데이터를 넘겨주는 것은 트리구조가 깊으면 깊을 수록 어려운 일이다. 이를 해결해기위해 Event Bus 를 사용하는데, 수많은 요청들에 대한 Event Bus 의 흐름을 추적하는(Slueth) 일은 재앙이다. 모든 데이터를 중앙에서 관리하여 data(..