51. CLI 2.x vs CLI 3.x 차이점 CLI 2.x vs CLI 3.x - 명령어 - 2.x : vue init '프로젝트 템플릿 이름' '파일 위치' - 3.x : vue create '프로젝트 이름' - 웹팩 설정 파일 - 2.x : 노출 O - 3.x : 노출 X - 프로젝트 구성 - 2.x : 깃허브의 템플릿 다운로드 - 3.x : 플러그인 기반으로 기능 추가 - ES6 이해도 - 2.x : 필요 X - 3.x : 필요 O vue.js/vue.js 2 2022.08.04
50. <vue-todo> 프로젝트 모듈화 import Vue from 'vue' import Vuex from 'vuex' import todoApp from './modules/todoApp' //use 는 vue의 플러그인, vue를 사용할때 전역으로 모든 영역에 특정 기능을 추가하고 싶을때 사용한다. Vue.use(Vuex); export const store = new Vuex.Store({ modules:{ todoApp } }); const storage = { // 원격 API를 간편하게 호출할수 있도록 브라우저에서 제공하는 함수 fetch() { const arr = []; if (localStorage.length > 0) { for (let i = 0; i < localStorage.length; i++) { if (local.. vue.js/vue.js 2 2022.08.02
49. <vue-todo> 프로젝트 구조화 import Vue from 'vue' import Vuex from 'vuex' import * as getters from './getters' import * as mutations from './mutations' //use 는 vue의 플러그인, vue를 사용할때 전역으로 모든 영역에 특정 기능을 추가하고 싶을때 사용한다. Vue.use(Vuex); const storage = { // 원격 API를 간편하게 호출할수 있도록 브라우저에서 제공하는 함수 fetch(){ const arr = []; if (localStorage.length > 0) { for (let i = 0; i < localStorage.length; i++) { if (localStorage.key(i) !== 'logle.. vue.js/vue.js 2 2022.08.02
48. 프로젝트 구조화와 모듈화 방법 1, 2 아래와 같은 store 구조를 어떻게 모듈화 할 수 있을까? // store.js import Vue from 'vue' import Vuex from 'vuex' export const store = new Vuex.Store({ state: {}, getters: {}, mutations:{}, actions:{} }); Vuex.Store({}) 의 속성을 모듈로 연결 ↓ - ES6의 Import & Export 를 이용하여 속성별로 모듈화 import Vue from 'vue' import Vuex from 'vuex' import * as getter from 'store/getters.js' import * as mutations from 'store/mutations.js' import * .. vue.js/vue.js 2 2022.08.02
47. <vue-todo> vuex로 리팩토링 import Vue from 'vue' import Vuex from 'vuex' //use 는 vue의 플러그인, vue를 사용할때 전역으로 모든 영역에 특정 기능을 추가하고 싶을때 사용한다. Vue.use(Vuex); const storage = { // 원격 API를 간편하게 호출할수 있도록 브라우저에서 제공하는 함수 fetch(){ const arr = []; if (localStorage.length > 0) { for (let i = 0; i < localStorage.length; i++) { if (localStorage.key(i) !== 'loglevel:webpack-dev-server') { arr.push(JSON.parse(localStorage.getItem(localStora.. vue.js/vue.js 2 2022.08.02
46. 헬퍼 함수가 주는 간편함 {{ originalPrice }}} {{ doublePrice }}} {{ triplePrice }}} {{ forPrice }}} vue.js/vue.js 2 2022.08.02
45. mapState, mapGetters, mapMutations, mapActions | 헬퍼의 유연한 문법 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 }} mapGetters - vuex에 선언한 getters 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼 // App.vue import { mapGetters } from 'vuex' computed(){ ...mapGetters(['reverseMessage']) } // store.js getters:{ reverseMe.. vue.js/vue.js 2 2022.08.02
44. Helper (각 속성들을 더 쉽게 사용하는 방법) 각 속성들을 더 쉽게 사용하는 방법 - Helper Store에 있는 아래 4가지 속성들을 간편하게 코딩하는 방법 - state -> mapstate - getters -> mapGetters - mutations -> mapMutations - actions -> mapActions 헬퍼의 사용법 - 헬퍼를 사용하고자 하는 vue 파일에서 아래와 같이 헬퍼를 로딩 // App.vue import { mapState } from 'vuex' import { mapGetters } from 'vuex' import { mapMutations } from 'vuex' import { mapActions } from 'vuex' export default { computed(){ ...mapState(['nu.. vue.js/vue.js 2 2022.08.02
43. vuex 기술 요소 (state, getters, mutations, actions) vuex 기술 요소 - state : 여러 컴포넌트에 공유되는 데이터 data - getters : 연산된 state 값을 접근하는 속성 computed - mutations : state 값을 변경하는 이벤트 로직, 메서드 methods - actions : 비동기 처리 로직을 선언하는 메서드 aysnc methods state 란? 여러 컴포넌트 간에 공유할 데이터 - 상태 // vue data : { message: "hello vue.js!" } // vuex state: { message: "hello vue.js!" } {{ message }} {{ this.$store.state.message }} getters란? - state 값을 접근하는 속성이자 computed() 처럼 미리 연산된 .. vue.js/vue.js 2 2022.08.02
42. vuex 설치 vuex는 싱글 파일 컴포넌트 체계에서 NPM 방식으로 라이브러리를 설치하는 게 좋다. npm i vuex@3.6.2 --save * ES6와 함께 사용해야 더 많은 기능과 이점을 제공받을 수 있음 이렇게 package.json에 "vuex" 가 추가되어 있으면 설치 성공 vue.js/vue.js 2 2022.08.01