Juwon

이번 포스팅에서 다뤄볼 Vue.js 어디서든 Store 호출하기입니다. store.js import { createStore } from "vuex" const store = createStore({ state(){ return{ data : 'Vuex' } }, mutations : { setDataFunction(context, text){ context.data = text } }, actions : { setTimeOutFunction(context, text){ setTimeout( text => { this.commit('setDataFunction', text) }, 3000) } }, export default store Actions 함수에서 Mutations 함수를 호출할때 사용하는 구..

Vuex 설치 명령어 //npm npm install vuex@next --save //yarn yarn add vuex@next --save Vuex는 Vue.js의 applications이며 state management pattern( 상태 관리 패턴 ) 역할을 합니다. 모든 컴포넌트에서 접근할 수 있는 중앙 데이터 저장소로 코드의 재사용성을 확장시켜주는 기능이 있습니다. 상위 컴포넌트와 하위 컴포넌트 간에 props, emit 같은 기능의 상위 호환이라고 생각하시면 됩니다. vue 3 버전은 vuex 4 버전은 호환하고 vue 2 버전은 vuex 3 버전을 호환합니다. vuex 예시코드 Main.js import { createApp } from 'vue' import App from './App..

vue의 대표적인 기능인 디렉티브를 알아볼 수 있는 시간입니다. 앞서 Pure JavaScript의 10줄을 단 2줄~3줄로 줄이는 역할을 하는 기능 디렉티브입니다. v-text {{텍스트}} 해당 요소(Element)의 textContent를 업데이트합니다. text의 일부만 업데이트해야 하는 경우엔 mustache interpolation(머스태시 보관법)을 사용합니다. ( 사용법 {{변수명}} ) v-show Flag가 참일 경우 보입니다. v-show 디렉티브는 조건이 변경될 때 transition을 전환합니다. v-if Flag가 참일 경우 보입니다. v-if는 자주 사용하는 디렉티브 중 하나입니다. 변수 Flag의 진리 값에 따라 요소를 조건부로 렌더링 합니다. 요소와 포함된 디렉티브 / 컴포..

Vue 3 version 기준으로 작성된 포스트입니다. 글쓰기 앞서서 많이들 들어보셨을 듯 한 React, Anguler, Vue 등 많은 프레임 워크/라이브러리가 있습니다. React, Vue, Anguler의 공통적인 특징은 Single Page Application이라는 것입니다. Single Page Application (SPA)? 쉽게 말하는 SPA는 한 페이지 내에서 만 동작하는 웹 개발 방식을 의미합니다 . 한 페이지 내에서 다른 컴포넌트를 호출하고 사용하고 보여주는 방식이라고 할 수 있습니다. 컴포넌트(Compunent)? Component는 레고 블록 하나하나 혹은 객체 하나하나라고 생각하시면 이해가 빠를 수 있습니다. 컴포넌트 여러 개를 조합하여 화면을 구성할 수 있는 블록을 의미합니..