지금, 개발하기/Vue12 Vue] Getters 파헤치기 이번시간에는 Vuex에서 Getter를 사용하는 방법을 알아보겠습니다. 먼저 아래와 같은 예시를 만들어주세요. Getter의 개념을 이해하기 위해서 예제는 최대한 쉽게 만들었습니다 :) 1) main.js import Vue from 'vue' import App from './App.vue' import { store } from './store/index.js' Vue.config.productionTip = false new Vue({ render: h => h(App), store }).$mount('#app') 2. store > index.js - 멤버들의 정보가 담김 import Vue from 'vue'; import Vuex from 'vuex' Vue.use(Vuex); export c.. 2022. 4. 28. Vue] State, mutations, actions 한 눈에 보기 Vuex vue에서 컴포넌트 간의 정보 전달을 위해서는 props(부모→자식)와 event(자식→부모)를 사용했습니다다. 부모-자식 관계가 아니거나 계층구조가 복잡해지면 EventBus를 사용했습니다. 그러나 이벤트 버스 객체를 사용하는 방식도 애플리케이션의 규모가 커지만 복잡도가 커져서 사용이 힘듭니다. 이러한 이유로 나온것이 바로 'Vuex'입니다. 각 컴포넌트가 공유하는 상태 데이터는 전역에서 Store저장 객체를 통해서 관리할 수 있습니다. Store에 전역데이터와 메소드들을 저장해 놓으면, 언제든지 원하는 로컬 컴포넌트와 연결해서 사용할 수 있습니다. 이를 통해 우리는 좀 더 투명하고 유지보수가 뛰어난 코드를 활용할 수 있게됩니다. 지금부터 Vuex의 전역데이터와 메소드들을 어떻게 사용하는지 간.. 2022. 4. 22. Vue] Vuetify 설치, 적용하기 Vuetify란? Vuetify란 구글의 material design을 사용할 수 있게 만든 Vue.js를 위한 UI 프레임워크입니다. Vuetify는 사용자가 원하는 컴포넌트를 사용할 수 있도록 다양하고 유용한 라이브러리를 제공합니다. vuetify를 사용하고자한다면, vue-cli를 이용하여 vue 프로젝트를 생성한 직후 vuetify를 바로 설치하는 것이 좋습니다. 프로젝트 진행 중에 설치하면 잘못하다간 폴더 구조가 바뀔 수 있습니다. 저는 무튼 프로젝트 생성 직후는 아니지만 지금 설치 하였습니다. 설정은 권장되는 Default로 고고! vue add vuetify 설치가 완료되면 main.js에서 vue생성자에 vuetify가 추가된 걸 볼 수 있습니다. 그리고 화면은 아래처럼 바뀝니다 우리는 이.. 2022. 4. 8. Vue] Vue CLI 3.0 프로젝트 생성하기 먼저 Vue Project를 시작하기 위해선 간단한 준비물이 필요합니다. 1. Visual Sudio Code Visual Studio Code는 Microsoft에서 개발한 코드 에디터 어플리게이션입니다. 무료로 사용할 수 있는 소스 코드 편집기이죠. 다양한 프로그래밍 언어를 다양한환경에서 지원하는데 가볍기까지해서 인기가 많은 IDE입니다. Visual Studio Code가 아직 설치되어 있지 않다면 아래 링크에서 설치해주세요. https://code.visualstudio.com/download 2. Extention 설치 Visual Studio Code의 왼쪽 메뉴바에서 extention이모티콘을 클릭한 뒤, 원하는 플러인 명을 검색해주세요. 그리고 오른쪽에서 install을 클릭하면 끝! Ve.. 2022. 4. 5. 이전 1 2 3 다음
