Front

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

{{ originalPrice }}} {{ doublePrice }}} {{ triplePrice }}} {{ forPrice }}}

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

각 속성들을 더 쉽게 사용하는 방법 - 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..

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() 처럼 미리 연산된 ..

vuex는 싱글 파일 컴포넌트 체계에서 NPM 방식으로 라이브러리를 설치하는 게 좋다. npm i vuex@3.6.2 --save * ES6와 함께 사용해야 더 많은 기능과 이점을 제공받을 수 있음 이렇게 package.json에 "vuex" 가 추가되어 있으면 설치 성공

vuex - 상태 관리 라이브러리 개요 - 복잡한 애플리케이션의 컴포넌트들을 효율적으로 관리하는 vuex 라이브러리 소개 - vuex 라이브러이의 등장 배경인 Flux 패턴 소개 - vuex 라이브러리의 주요 속성인 state, getters, mutations, actions 학습 - vuex 를 더 쉽게 코딩할 수 있는 방법인 Helper 기능 소개 - vuex 로 프로젝트를 구조화 하는 방법과 모듈 구조화 방법 소개 vuex 란? - 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 - React의 Flux 패턴에서 기인함 - vue.js의 중고급 개발자로 성장하기 위한 필수 관문 vuex 가 왜 필요할까? vuex말고 이벤트 버스로 해결? - 어디서 이벤트를 보냈는지 혹..

화살표 함수 1. 함수를 정의할때 function 이란 키워드를 사용하지 않고 => 로 대체 2. 흔히 사용하는 콜백 함수의 문법을 간결화 // ES5 함수 정의 방식 var sum = function(a, b){ return a + b; }; // ES6 var sum = (a, b) => { return a + b; } sum(10, 20); // ES5 var arr = ['a', 'b', 'c']; arr.forEach(function(value){ console.log(value); // a, b, c }); // ES6 var arr = ['a', 'b', 'c']; arr.forEach(value => console.log(value)); // a, b, c Modules - 자바스크립트 모..

https://kr.vuejs.org/v2/guide/transitions.html 진입/진출 그리고 리스트 트랜지션 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org vue 는 애니메이션, 트렌지션이 프레임워크 자체에서 지원된다. {{ todoItem.item }}

https://kr.vuejs.org/v2/examples/modal.html 모달 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org slot은 부모 컴포넌트에서 자식 컴포넌트의 엘리먼트를 지정할때 사용한다. 부모에 따라서 자식의 컴포넌트에 영향을 받을 테니, 컴포넌트 재사용성면에서 좋은 장점을 가진다. 또한 범위 있는 slot을 통해 컴포넌트 내에서도 잘게 쪼개서 재사용이 가능하다. default header default body 할 일 입력 안하고 add 버튼 눌렀을시 경고창 구현 경고! 할 일을 입력하세요