본문 바로가기

vue5

Vue] vue.js 데이터 시각화 라이브러리 for 리포트 1. Bryntum(브린텀) vue 2, 3 대표 사이트: https://bryntum.com/ 데모 : https://www.bryntum.com/products/grid/examples/columntypes/ 기능: 열별로 데이터 그룹화, 특정 값(날짜 등)으로 필터링, 그룹 내 정렬, 그룹 요약, 등 기본기능 가격 : https://bryntum.com/store/ High Performance Web Components For Project Management A suite of customizable Gantt, Scheduler, Grid, Calendar and Kanban web components that are seamlessly integrated with React, Vue, Ang.. 2023. 1. 5.
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.

티스토리툴바