수민정의 기술블로그

복잡한 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' }..

출근하고 나서 Vue.js 를 다시 건드려보다가 기억이 안나 처음부터 복기를 시작했다. Vuex 관련하여 할 일이 생겨서 Vue 에 대한 개념이 잡혀야 Vuex 를 할 수 있을 거라는 생각에 시작했다. 맞아 떨어졌다. 중급 지식을 기억이 안나는 상태로 들이 받았다가는 시간을 어마어마하게 낭비했을 것 같다. 일부러 책에서 많이 다루지 않은 Single File Component 체계로 공부했다. 색다른 방법으로 재미를 붙이고, 정보를 수집하면서 , 복기하면서도 더 좋은 방향으로 공부하기 위해서 그랬다. 그러다보니까 질리지않고 재밌었다. 처음엔 이해안되던 것들이 2회독 차에는 빠르게 접해졌고, 정보를 긁어모을 때 마다 공부하고 찾아봐야할 것들이 연쇄적으로 늘어났던 것 같다. 일부러 ES6 를 사용해보기도하면..

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

개요 뷰를 통해 대규모, 소규모 App 을 만들때 html 파일에 Vue 코드를 다 끼워 넣는 일은 Vue 가 가지는 컴포넌트 기반의 특성을 무시하는 일과도 같다. 재사용성, 가독성, 직관성 을 얻게해주는 MVVM 모델의 장점이 무너지는 것으로 보인다. 그러므로 Single File Component 를 이용하여 .vue 파일로 컴포넌트를 나누고 ES6 와 연계하여 코드의 가독 성과 직관성, 재사용성을 꾀한다. 이를 위한 Project 구조, 파일, 기능 등을 만들어주는 것이 Vue CLI 이다. Vue CLI Single File Component 체계를 위해서 .vue 파일을 웹 브라우저가 이해할 수 있는 형태의 파일로 변환해주어야한다. 이런 기능을 제공해주는 녀석들은 Module Bundler 라고..

Vue Template Vue Template 는 HTML CSS 등 과 기술한 JS 로직들과 연결시켜 사용자가 볼 수 있는 DOM 으로 렌더링하는 속성이다. 내부적으로 React 의 Virtual DOM 기반, render() 함수를 호출하여 ( Vue LifeCycle 의 beforeMount ) 화면을 그린다. 이때 Vue 의 Reactivity 가 화면에 더해진다. doli0413.tistory.com/713?category=951835 2.Vue Instance 와 속성, 라이프 사이클 개요 Vue Instance 란 필수적으로 생성해야만 하는 기본적 단위이다. Vue Instance 가 DOM Element 에 마운팅 되기 때문에 템플릿 기호에 Vue Instance 에 정의한 data() {..

Axios 는 Ajax 와 같이 Vue 에서 제공하는 HTTP 통신 라이브러리 이다. Promise 기반의 API 형식이 제공되는 등 주어진 API 로도 충분히 원하는 로직을 작성 가능하다. NPM npm i -g axios --save 임포트 사용법은 Ajax 와 굉장히 유사하다. cli 로 다운로드 받아 package.json 에 추가했을 시에 import 시켜주면 된다. {{MainPageGreeting}} GuidePage InfoPage 러닝 가이드 xn--xy1bk56a.run/axios/guide/api.html#%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EB%A9%94%EC%84%9C%EB%93%9C API | Axios 러닝 가이드 API 구성(configurat..

개요 Routing 이란 웹 페이지 간의 이동 방법 이다. SPA 싱글페이지 어플리케이션에 사용되며 이는 미리 페이지를 받아 놓고 클라이언트의 라우팅을 사용하여 화면을 전환시키는 방법을 말한다. 소위 말하는 깜빡임 (새로고침) 이 없기에 UX 가 상승된다. Vue 에서는 이를 위해 Vue Router 를 제공한다. Vue Router 에서 제공하는 태그 : anchor 태그로서 지정한 URL 로 이동시킨다. : URL 에 맞는 컴포넌트를 뿌려주는 영역이다. URL 에 따라 유동적으로 변화한다. SingFileComponent 체계에서의 Vue Router 일단 package.json 에 vue-router 를 등록시키고 설치해야한다. npm i vue-router --save router 의 설정을 정의..