Vue.js28 [Vue.js][Error] type check failed for prop "chartData" vue-chartjs로 개발을 수행하다보면 아래와 같은 Error를 만날 수 있습니다. 그 이유에 대해서 간단히 살펴보도록 하겠습니다. [Vue warn]: Invalid prop: type check failed for prop "chartData". Expected Object, got Null 보통 개발을 수행하면, 사용하는 library의 개발자 혹은 개발사에서 제공하는 docs를 참조하게 됩니다. 물론 vue-chartjs도 해당 가이드를 제공합니다. (vue-chartjs.org/) 해당 Getting Started를 통해서 참조하여 개발을 수행하면, 해당 Error가 발생하는데... 우선 내용만 분석을 해보면 prop로 전달하는 chartData가 Object를 원하지만 Null이 들어왔다는.. 2021. 3. 31. [Vue.js] 16. use doughnut chart with label plugin vue-chartjs를 사용하다 보면, 여러가지 custom하고 싶은 욕구가 생기기 마련입니다. 물론 다른 여러가지 chart를 그려주는 library를 사용할때도 마찬가지 입니다. 오늘은 vue-chartjs 중 doughnut chart를 구현할 때, 적용한 여러가지 항목에 대해서 알아보겠습니다. 0. DoughnutChart.vue 생성하기 기본적으로 vue-chartjs는 component로 구성이 됩니다. 따라서 doughnut chart를 그려주는 vue는 default로 제작하며, dataCollection과 options를 그 props로 지정하여 전달하면 됩니다. [DoughnutChart.vue] 이제 나머지 대다수는 options setting에 따라서 달라지며, 필요한 경우에는 pl.. 2021. 3. 30. [Vue.js] 15. use Components 이번에는 vue.js에서 Components를 사용하여, 코드를 분리하는 방법에 대해서 알아보겠습니다. vue.js가 SPA를 가능하게 하는 Frontend 프레임워크 입니다. 하지만 엄청난 코드를 한개의 vue 파일로 만드는 것은 상상하기 힘듭니다. 이에, vue에서는 각 기능이나 화면에 대해서 부분 부분을 분리하여 각 조각별로 개발을 진행하게 됩니다. 이를 Components라고 하는데, 당장 생각해 봐도... 이렇게 기능을 혹은 화면을 분리해서 개발한다고 하면 필요할때 해당 기능을 조립해서 적용할 수도 있고, 결국 코드의 재사용가 가능해 집니다. 이때, Components에도 관계가 형성되는데 보통은 Parent / Child로 구분하게 됩니다. 물론 이 둘 사이에 데이터의 이동도 가능합니다. 간단.. 2021. 3. 9. [Vue.js] 14. use Vue chart plugin application을 만들다보면, 다양한 수치의 데이터에 대해서 직관적으로 chart로 보여줘야 할 때가 많습니다. 예를들어 AT Project에서 진행하는 MACD / Signal 에 대한 지표에 대해서도 Golden Cross나 Dead Cross를 시각적으로 보는것이 훨씬 이해가 빠를 것 입니다. 이번에는 Vue에서 이러한 Chart를 구현할 수 있도록 해주는 Plugin에 대해서 알아보겠습니다. 뭔가 새로운 것을 내 프로젝트에 적용하려고 할때는 가끔 막막할 때가 많습니다. 하지만 이럴때는 역시 npm repository에서 검색을 해보는게 가장 좋겠죠?? 모든 검색에서는 중요한 것이 검색어 인데... 한번 아래의 키워드로 검색을 해보겠습니다. vue charts 뭐 있나요. 단도 직입적으로 내가.. 2021. 3. 8. 이전 1 2 3 4 5 6 7 다음
