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; }..
자주 쓰지만 항상 어떤 속성을 사용할지 고민하게 되는 margin과 padding. 여러가지를 참고하며 작성하는 글이지만 사실 아직 어느 상황에 써야 맞는지 헷갈리는건 여전하다. 그래도 검색하면서 다른 사람들도 많이 헷갈려 하는구나.. 라는 위안을 얻으며 기록해본다. 🔎 BOX MODEL HTML은 4가지 박스 형태로 만들어진다. 이 네가지 영역을 박스모델이라고 한다. ▪️ content: 내용이 담긴 부분 ▪️ padding: border와 content사이의 영역 ▪️ border: element를 감싸는 경계 ▪️ margin: border의 바깥 영역 🔎 비교 ✅ margin: 바깥쪽 여백 ✅ padding: 안쪽 여백 양수 (+) 음수 (-) auto collapse margin O O O O ..
Vue로 개발을 진행하다 보면 기존과 약간 다른 개발 방식에 애매한 상황이 생긴다. 그 중 하나로 Vue의 데이터와 화면의 UI를 찾아 접근해야 하는 상황에서 DOM을 찾지 못하는 상황이 있다. 데이터를 통해서 만들어지게 되는 DOM이 완성되기 이전 시점에 호출을 하려고 하는 상황인데, 어떠한 데이터를 변수에 담아 화면이 갱신되는 DOM에 바로 접근하려고 하면 DOM 요소가 없다는 에러를 뱉는다. 💡 예시코드 show Input 모든 데이터 처리가 비동기로 처리되는 자바스크립트 특성 때문에 DOM이 갱신되기 전 탐색하는 상황에서 생기는 현상이다. 그래서 setTimeout을 이용해 약간의 시간차를 주게되면 문제없이 DOM에 접근 할 수 있게 된다. // ... showInput() { this.isSho..
