programming study/Vue (70) 썸네일형 리스트형 Vue.js - mapMutations, mapActions, 헬퍼의 유연한 문법 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 토대로 작성하였습니다. 1.Vue에서 권고하는 방식 template 안에서는 가급적 JavaScript 연산을 줄이기 template를 깔끔하게 표현 2. mapMutations Vuex에 선언한 mutations 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼 // App.vue import { mapMutations } from 'vuex'; methods: { ...mapMutations(['clickBtn']), atuhLogin() {}, displayTable() {} } // store.js mutations: { clickBtn(state) { alert(state.. Vue.js - mapState, mapGetters 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 토대로 작성하였습니다. 1. mapState Vuex에 선언한 state 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼 // App.vue import { mapState } from 'vuex'; computed() { ...mapState(['num']) // num() { return this.$store.state.num; } } // store.js state: { num: 10 } {{ this.num }} 2. mapGetters Vuex에 선언한 getters 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼 // App.vue import { mapGetters }.. Vue.js - actions 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 토대로 작성하였습니다. 1. actions란? 비동기 처리 로직을 선언하는 메서드 비동기 로직을 담당하는 mutations 데이터 요청, Promise, ES6 async과 같은 비동기 처리는 모두 actions에 선언 예시 1 // store.js state: { num: 10 }, mutations: { doubleNumber(state) { state.num * 2; }, }, actions: { // context로 store의 메서드와 속성 접근 delayDoubleNumber(context) { context.commit('doubleNumber'); // 비동기 로.. Vue.js - Helper 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 토대로 작성하였습니다. 1. Helper Store에 있는 속성들을 더 쉽게 사용 state -> mapState getters -> mapGetters mutations -> mapMutations actions -> mapActions 2. Helper의 사용법 Helper를 사용하고자 하는 vue 파일에서 아래와 같이 해당 헬퍼를 로딩 // App.vue import { mapState } from 'vuex'; import { mapGetters } from 'vuex'; import { mapMutations } from 'vuex'; import { mapActino.. Vue.js - mutations & commit 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 토대로 작성하였습니다. 1. mutations이란? state의 값을 변경할 수 있는 유일한 방법이자 메서드 mutations은 commit()으로 동작 // store.js state: { num: 10 }, mutations: { printNumbers(state) { return state.num }, sumNumbers(state, anotherNum) { return state.num + anotherNum; } } // App.vue this.$store.commit('printNumbers'); this.$store.commit('sumNumbers', 20); 2.. Vue.js - Vuex 설치 및 등록, state & getters 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 토대로 작성하였습니다. 1. Vuex 설치 및 등록 Vuex 설치 Vuex는 싱글 파일 컴포넌트 체계에서 NPM 방식으로 라이브러리를 설치하는 것이 좋음 ES6와 함께 사용해야 더 많은 기능과 이점을 제공받을 수 있음 npm install vuex --save Vuex 등록 src/store 디렉토리 생성 import Vue from 'vue'; import Vuex from 'vuex'; // use: 플러그인 사용 // vue 사용하는 모든 영역에 특정 기능 추가 // 전역에 Vuex 사용 Vue.use(Vuex); // export하면 다른 파일에서 접근 가능 export.. Vue.js - Vuex, Flux & MVC 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 토대로 작성하였습니다. 1. Vuex 소개 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 React의 Flux 패턴에서 기인 2. Flux & MVC Flux란? MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 - Unidirectional data flow 모든 데이터 흐름이 한 방향으로 부모 -> 자식 데이터 흐름을 제한함으로, 복잡도를 낮추어 문제 발생을 방지 데이터 흐름을 예측할 수 있음 Action -> Dispatcher -> Model -> View Action: 화면에서 발생하는 이벤트 또는 사용자의 입력 Dispatch.. Vue.js - Modal, Slot, Transition 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 토대로 작성하였습니다. 1. Modal Component Transition 효과 text/x-template로 구현 템플릿을 모듈화 2. Modal Component 모듈화 프로젝트 전반에서 모달을 사용할 수 있도록 모듈화 재사용성 일반적으로 자주 사용하는 모듈은 src/components/common과 같은 경로에 정리 예시 default header default body default footer OK 3. Slot 한 컴포넌트에서 모듈을 불러왔을 때 slot 부분을 재정의할 수 있음 일부 UI를 재사용 각 컴포넌트별로 불러온 모듈의 slot을 재정의하여 사용할 수 있음.. 이전 1 ··· 4 5 6 7 8 9 다음