루지

Vuex란?Vuex는 Vue.js 애플리케이션에서 상태 관리 패턴을 지원하는 라이브러리이다. 애플리케이션 내부의 모든 컴포넌트들이 공유하는 집중화된 상태 정보 저장소 역할을 하며 상태 변경을 투명하게 할 수 있다. 각 컴포넌트가 공유하는 상태 데이터는 전역에서 저장소(store)객체를 통해서 관리한다. 이와 같은 방식으로 자식으로 또 그 자식으로 props를 이용해 속성을 계속해서 전달하지 않아도 되고 상태 데이터를 변경하기 위해 부모 콤포넌트로 이벤트를 발생시키지 않아도 된다. Vuex를 사용하는 이유1. 중앙 집중화된 상태 정보 관리가 필요할때2. 상태 정보가 변경되는 상황과 시간을 추적하고 싶을때3. 컴포넌트에서 상태 정보를 안전하게 접근하고 싶을때위의 그림을 보면 화살표가 한방향으로만 흘러간다. ..

axios를 이용한 서버통신서버와 통신하기 위한 라이브러리는 fetch, superagent, axios 등이 있으며 Vue.js 플러그인으로 개발된 vue-resource라는것도 존재하나 Vue.js 창시자인 에반 유는 axios를 사용할 것을 권장하고 있다고 한다. 서비스 APIS네트워크 사용에 제약이 따를 경우 로컬에서 실행할 수 있는 API코드를 다운로드하여 실행하는 연락처 서비스 API이다. 다운로드 >> https://github.com/STEPANOWON/CONTACTSVC [저수준 API]axios(config)axios(url, config] [각 메서드별 별칭]axios.get(url[, config])axios.delete(url[, config])axios.psot(url[, dat..

Vue CLIVue CLI는 Vue.js 애플리케이션을 빠르게 개발할 수 있는 관련된 기능을 모두 제공하는 Vue.js 개발 도구이자 시스템이다. 개발자들에게 표준화된 개발의 기준선을 제공하고 정해진 틀 속에서 개발이 가능하면서도 기본 제공되거나 제 3자가 제공하는 다양한 플러그인과 프리셋을 로딩하여 프로젝트의 초기 설정과 개발을 손쉽게 할 수 있도록 도와준다. 따라서 개발자가 프로젝트 구성을 설정하는데 드는 노력을 줄이고 개발에 좀더 집중할 수 있도록한다. 1. Vue CLI 구성요소1) CLI : @vue/cli컴퓨터 내부 어디에서나 실행할 수 있도록 npm을 이용해 전역에 설치하며 터미널창에서 vue 명령어를 실행할 수있도록 한다. vue 명령어로 수행할 수 있는 기능은 다음과 같다. - 새로운 V..

Component 대규모 어플리케이션인 경우 확장자가 .vue인 단일 파일 컴포넌트(SIngle File Component)형태로 많이 개발되지만 이번에는 컴포넌트 개념부터 정확히 잡아보려고 한다.대규모 어플리케이션에서 사용되는 단일 파일 컴포넌트를 작성하기 위해서는 ECMAScript 6에 대한 지식이 있어야한다. 컴포넌트의 장점은 아래와 같다.1. 뛰어난 재사용성한 애플리케이션에서 내부에 사용되는 UI와 기능은 반복되는 것들이 꽤 많다. 반복되는 부분을 컴포넌트로 작성해두면 여러 곳에서 재사용할 수 있어 생상선을 높일 수 있다.2. 테스트가 용이하다.컴포넌트 단위로 기능을 테스트할 수 있기 때문이다. Karma, Mocha와 같은 단위 테스트도구를 이용해 쉽게 테스트 할 수 있다.3. 디버깅이 편하다..

Vue.js Event 처리동적인 화면을 구성할때 다이나믹한 UI는 HTML 요소에서 발행하는 이벤츠 처리를 통해서 구현되는경우가 많다. HTML 문서에서 발생하는 이벤트는 다양하다 키보드를 누를 때 발생하는 keyup, keypress, keydown 이벤트 마우스 클릭할 때 발생하는 click, doubleclick 이벤트, 마우스를 움직일 때 발생하는 mousemove 이벤트 등이 있다. 1. 인라인 이벤트 처리Vue.js에서는 v-on 디렉티브를 이용해서 처리할 수있다. 가장 많이 쓰이는 Click 이벤트 처리를 예제로 만들어 보았다. hello vue.js .layout1 { margin: 30px 30px 30px 30px; } 예금 인출 계좌 잔고 : {{balance}} var vm = n..

Vue 인스턴스var app = new Vue({}) 형식으로 생성한 객체들을 Vue 인스턴스라고 부른다. 때로는 뷰모델을 의미하는 vm을 삽입해서 vue vm 인스턴스라고도 칭한다. 1. el, data computed 옵션data 옵션은 data 옵션에 주어진 모든 속성들을 Vue 인스턴스 내부에서 직접이용되지 않고 Vue 인스턴스와 Data옵션에 주어진 객체 사이에 프록시를 두어 처리한다. {{ name }} var model = { name: "홍길동" } var vm = new Vue({ el: '#test', data: model }) data 옵션 값이 vue 인스턴스에 의해 프록시 처리되어 vm.name과 같이 사용할 수 있음을 알 수 있다. 직접 data 옵션을 통해 접근하고 싶다면 vm..