Each Vue component instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages. 각 Vue 구성 요소 인스턴스는 생성될 때 일련의 초기..
🔎 Mutations과 Actions의 차이 ✅ Mutations은 동기적 로직을 정의 ✅ Actions는 비동기적 로직을 정의 Mutations에서 다수의 상태 변경이 비동기적으로 수행되었을 경우 예측 불가능한 상태가 되는 것을 막기 위한 의도가 있는 것 같다. action에서는 mutations으로 commit을 행함으로써 간접적으로 상태를 변경하지만 actions을 호출하기 위한 dispatch method는 Promise를 반환하기 때문에 처리의 순서를 제어하는 것이 가능하다. 🔎 동기적 처리의 사용 📎actions 을 활용한 예시코드 new Vuex.Store({ state: { count: 0 }, mutations: { plus(state, num) { stage.count += num; }..
Vue로 개발을 진행하다 보면 기존과 약간 다른 개발 방식에 애매한 상황이 생긴다. 그 중 하나로 Vue의 데이터와 화면의 UI를 찾아 접근해야 하는 상황에서 DOM을 찾지 못하는 상황이 있다. 데이터를 통해서 만들어지게 되는 DOM이 완성되기 이전 시점에 호출을 하려고 하는 상황인데, 어떠한 데이터를 변수에 담아 화면이 갱신되는 DOM에 바로 접근하려고 하면 DOM 요소가 없다는 에러를 뱉는다. 💡 예시코드 show Input 모든 데이터 처리가 비동기로 처리되는 자바스크립트 특성 때문에 DOM이 갱신되기 전 탐색하는 상황에서 생기는 현상이다. 그래서 setTimeout을 이용해 약간의 시간차를 주게되면 문제없이 DOM에 접근 할 수 있게 된다. // ... showInput() { this.isSho..
1. vuelidate 라이브러리 설치 npm install vuelidate https://www.npmjs.com/package/vuelidate vuelidate Simple, lightweight model-based validation for Vue.js. Latest version: 0.7.7, last published: a year ago. Start using vuelidate in your project by running `npm i vuelidate`. There are 427 other projects in the npm registry using vuelidate. www.npmjs.com 2. 전역 등록 // main.js import Vuelidate from 'vuelida..
