VUE10 Chart.js ) Vue2 + Chart.js 해당 글은 vue2.^, chart.js 2.^ 버전을 바탕으로 합니다. Vue2 + Chart.js 실행화면 Chart.js 설치 npm install chart.js 를 통해 간단하게 설치할 수 있습니다. chart.js NPM 폴더 구조 plugins/ChartPlugin.js import Chart from 'chart.js' export default { install(Vue) { Vue.prototype.$_Chart = Chart; // xx.vue // this.$_Chart => 차트 접근 } } 여러 컴포넌트에서 chart library 를 import 해야 할 경우, 위처럼 임의의 js 파일에서 chart.js 를 import 한 뒤 사용할 컴포넌트에서 this.$_Ch.. 2022. 3. 1. Vue 2 ) Vue 에서 fontAwesome Icon 사용하기 Vue 2 + fontawosome cdn 방식을 통해 fontawesome 아이콘을 바로 사용할 수 있지만, 저는 사용할 아이콘이 많지 않았기에 몇 개의 특정 아이콘만 import 해 사용하는 것을 선택했습니다. npm install npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/vue-fontawesome@latest fontawesome 의 아이콘을 사용하기 위해 먼저 설치합니다. fontAweosome Icon 가져오기 main.js import "../fontAwesomeIcon.js" // ... 생략 fontAwesome.js.. 2022. 1. 18. Vue 3 ) 반응형 api 를 이용해보자 반응형 기초 아래 글을 읽고 오시면 이해가 더욱 편합니다. 반응성과 관련된 APIs ref, refs 란?? 반응형 상태 선언하기 JavaScript 객체에서 반응형 상태를 생성하기 위해, reactive method 를 사용할 수 있습니다. import { reactive } from 'vue' // 반응형 상태 const state = reactive({ count: 0 })reactive 는 Vue 2 버전에서의 Vue.observable() API 와 동일한 것으로, RxJS 의 observables 과 혼동을 피하기 위해 이름을 바꿨습니다. 여기서 반환된 상태는 반응형 객체입니다. 반응형 변환은 "deep" - 전달된 객체의 모든 중첩된 속성 (property) 에 영향을 미친다는.. 2022. 1. 14. Vue 3 ) Ref, Refs ?? Refs Vue 2 까지 쓰이던 this.$refs 를 Vue 3 의 Composition API 에서는 각각 함수로 제공됩니다. setup() 함수 내에서 각 Refs 를 import 하여 사용할 수 있습니다. ref 전달받은 기본 자료형 변수를 반응형 객체로 변경합니다. 이 객체의 value 속성을 통해서 자유롭게 변경할 수 있습니다. 일반적으로 이렇게 나온 반응형 객체를 ref 라 칭합니다. unref ref 를 다시 일반 변수로 바꿉니다. 내부적으로 프록시 객체에서 분리하는 과정을 진행합니다. toRef reactive API 로 생성돈 객체의 속성을 ref 를 이용해 반응형 객체로 생성합니다. toRefs toRef 를 해당 객체의 모든 속성에 적용합니다. isRef ref 객체인지 확인합니다... 2022. 1. 9. Vue 3 ) Vue3 에서 제공하는 반응성과 관련된 APIs 반응성 관련 API Vue 3 는 프록시를 이용해 반응성을 관리합니다. 어떤 변수가 반응성을 가지게 하기 위해서는 프록시로의 변환이 필요하고, 반응성을 해제하기 위해서는 프록시에서 일반 변수로의 변환이 필요합니다. reactive 객체의 속성들이 반응성을 갖게 만들어줍니다. 일반적으로 기본 자료형 변수가 반응성을 갖도록 할 때 ref 함수를 이용하는데, 객체의 속성으로 변수들을 모아 reactive 를 사용하면 변수의 개수가 많을 때 매우 유리하게 사용할 수 있습니다. readonly 일반 객체나 프록시 객체를 읽기전용 프록시로 변경합니다. 기본적으로 객체 내 모든 속성을 읽기전용으로 변경합니다. isProxy 인자로 들어온 변수가 reactive 나 readonly 등으로 만들어진 프록시 객체인지 확인.. 2022. 1. 9. Vue 3 ) Provide ? Provide 란? 일반적으로 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때는 props 를 이용합니다. 하지만 부모와 자식 관계가 깊어질수록 props 로 데이터를 전달하는 데는 한계가 있습니다. Vue2 까지는 이 문제를 해결하기 위해 Event Bus 를 생성하거나 Vuex 에 데이터를 담았었습니다. 하지만 Vue3 에서는 Event Bus 와 같이 비정형적 데이터 전송이 프로젝트의 관리를 어렵게 하기 때문에, $on, $off, $once 와 같은 이벤트 method 를 모두 삭제했습니다. Vue3 에서는 Provide/Inject 를 활용해 이러한 문제를 해결할 수 있습니다. 부모 컴포넌트에서 어떤 데이터를 provide 해주면 자식 컴포넌트에서 해당 데이터를 inject 해서 사용할 수.. 2022. 1. 9. Vue 3 ) Props Props props 는 컴포넌트에 데이터를 넘겨줄 수 있는 사용자 지정 속성입니다. 컴포넌트를 생성할 때 props 옵션을 이용해 어느 이름의 props 데이터를 받을지 결정하게 됩니다. 일반적으로 props 라는 옵션에 Props로 넘어오는 속성의 키 값들을 배열로 지정하면 사용에 큰 문제가 없습니다. props: ["name", "age"] 하지만 어떤 컴포넌트는 특정한 Props 를 필요로 할 수도 있고, 정해진 데이터 타입에 맞게 들어왔는지 확인이 필요할 수도 있습니다. 이럴 때는 props 옵션의 값을 배열 대신 객체로 변경하고 각 Props 데이터의 상세 내용을 지정해주면 됩니다. type 데이터 타입을 정의합니다. default 해당 Props 가 들어오지 않을 경우 사용할 기본값을 가지게.. 2022. 1. 8. Vue3 ) watch 와 watchEffect watch?? watch 는 개발자가 코드로 지정한 변수값의 변화를 감시하여 콜백함수로 하여금 부가적인 작업을 할 수 있도록 해줍니다. watch 는 지정된 특정한 변수의 감시와 더불어 값이 변경되기 이전 값을 참조할 수 있다는 장점이 있습니다. 컴포넌트가 생성되어 변수가 할당되기 전에 모든 변수는 null 값을 가지고 있습니다. 이 후 변수의 초기값이 들어가게 되는데, watch는 기본적으로 이러한 null값에서 초기값으로 넘어가는 과정을 데이터의 변경으로 판단하지 않습니다. 일반적으로 이 값을 바라볼 일은 없지만 같은 컴포넌트를 다시 불러올 때 props 의 처음 값이 매우 중요할 때가 있습니다. 이런 경우에는 immediate 옵션을 true로 설정해주면 처음 값도 볼 수 있습니다. 아래의 예시코드.. 2022. 1. 8. Vue 3 ) 뷰 라이프사이클의 변경?! Vue Component LifeCycle ( 생명주기 ) Vue 공식문서를 살펴보던 중 기존의 LifeCycle 과 다르게 destory 부분이 없어지고 새로운 LifeCycle 요소가 생긴 것을 확인할 수 있었습니다. 그래서 새롭게 바뀌어진 Vue LifeCycle 에 대해 정리하는 글을 쓰고자 했습니다. LifeCycle 이란? 컴포넌트를 생성하여 DOM 노드 트리에 마운트하고, 불필요한 엘리먼트를 제거하는 일련의 과정을 생명주기라고 합니다. Vue는 각 생명주기를 Hooking 할 수 있는 방법을 제공하는데 이를 LifeCycle Hook 이라고 합니다. Options API를 사용할 경우, 각 LifeCycle은 지정된 옵션 함수를 정의하여 Hooking 할 수 있습니다. LifeCycle은 어.. 2022. 1. 8. 이전 1 2 다음 반응형
