Vue 라이프사이클이란 Vue 인스턴스가 생성된 후 화면에 보여지고 사라지기까지의 단계 ​ - 종류 1. beforeCreate 2. created 3. beforeMount 4. mounted 5. beforeUpdate 6. updated 7. beforeDestroy 8. destroyed ​ * beforeCreate : 가장먼저 실행되는 beforeCreate, Vue 인스턴스가 초기화 된 직후에 발생한다. : 컴포넌트가 DOM에 추가되기도 전이어서 this.$el에 접근할 수 없다. : data, event, watcher에도 접근하기 전이라 data(), method: {} 에도 접근할 수 없다. ​ ex) ​ * created : data를 반응형으로 추적가능, computed, metho..

Actions : Mutations에는 동기적, 순차적 로직들만 선언하고 Actions에는 비동기 로직들을 선언 ​ - Actions 등록 Vuex에 Actions를 등록하는 방법은 다른 속성과 유사하다. // src/store/store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) ​ export const store = new Vuex.Store({ mutations: { addCounter: function(state, payload){ return state.counter++; } }, ​ actions: { addCounter: function(context) { // commit은 mutations 를 호출할때 사용하는 키워드..

Mutations 란 : Vuex의 데이터 state의 값을 변경하는 로직들을 의미 * Getters와 차이점은 1. 인자를 받아 Vuex에 넘겨줄 수 있다. 2. computed가 아닌 methods에 등록 * Actions와 차이점 1. Mutations는 동기적 로직 2. Actions는 비동기적 로직 ​ 예) return this.$store.state.counter++; 위 내용처럼 동시에 여러사람이 카운터값을 변경했을때 어느 컴포넌트에서 변경했는지 추적하기 어렵기때문에 안티패턴이 된다. ​ ​ - Mutations 등록 // src/store/store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(vuex) ​ export const s..

main.js import Vue from 'vue' import App from './App' import router from './router' //아래의 /src/router/index.js ​ new Vue({ el: '#app', router, store, render: h => h(App) }) ​ * /src/router/index.js (vue-cli를 사용하고 있을때 가정) import Vue from 'vue' import VueRouter from 'vue-router' ​ Vue.use(VueRouter) // vue-router를 사용하기 위한 설정 ​ import CustomerRouter from './modules/menu/customer' //아래의 customer.js ..

상위에서 하위컴포넌트로 데이터 전달( 동적 props) props를 사용하면 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있다. ​ //하위 컴포넌트 detail.vue ​ ​ //상위 컴포넌트 contractDetail.vue ​ //contractDetail에게 보내는 상위 컴포넌트 //list.vue this.$router.push({ name: 'contract_detail', path: 'contractDetail', params: { seq: seq }}) $router.push를 사용하여 router로 parmas의 값을 던진다. ​ //contract.js router 파일 { path: 'contractDetail/:seq', hidden: true, component: () =..

export - export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼때 사용한다. - 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있다. ​ * export 문은 html 안에 작성한 스크립트에서는 사용할 수 없다. ​ ex) export let myVariable = Math.sqrt(2); export function myFunction() {...}; ​ //자식 모듈을 가져와 다시 내보낼수 있다. import foo from 'bar.js'; export foo; ​ ​ * export 와 export deafault 선언의 차이 ​ - export 로만 선언 // Obo.js export const a = 12; ​ import { a } from..