Vue.js30 [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. [Spring Boot][Error] blocked by CORS policy 지난 번에 vue project와 springboot project의 결함에 대해서 알아보았습니다. Vue는 SPA (Single Page Application)을 구현해 주는 프로젝트이며, springboot와 결함함으로써 Frontend와 Backend의 일원화를 가능하게 해 줍니다. 해당 Project를 build하여 서버에 구성하기 위해서는 다음의 절차를 거치게 됩니다. vue project를 npm으로 build실행 - npm run build build의 결과는 project > config > index.js에 정의되어 있는 경로로 이동 springboot project를 build 및 run 따라서 개발자는 개발하는 단계에서 vue project에 뭐라도 살짝 건드리게 된다면... 위의 절.. 2021. 3. 21. [Vue.js] 15. use Components 이번에는 vue.js에서 Components를 사용하여, 코드를 분리하는 방법에 대해서 알아보겠습니다. vue.js가 SPA를 가능하게 하는 Frontend 프레임워크 입니다. 하지만 엄청난 코드를 한개의 vue 파일로 만드는 것은 상상하기 힘듭니다. 이에, vue에서는 각 기능이나 화면에 대해서 부분 부분을 분리하여 각 조각별로 개발을 진행하게 됩니다. 이를 Components라고 하는데, 당장 생각해 봐도... 이렇게 기능을 혹은 화면을 분리해서 개발한다고 하면 필요할때 해당 기능을 조립해서 적용할 수도 있고, 결국 코드의 재사용가 가능해 집니다. 이때, Components에도 관계가 형성되는데 보통은 Parent / Child로 구분하게 됩니다. 물론 이 둘 사이에 데이터의 이동도 가능합니다. 간단.. 2021. 3. 9. [Vue.js] 13. use Grid System 이번에는 Dashboard 등 화면 Layout구성의 근간이 되는 Grid System에 대해서 알아보고자 합니다. Vuetify에서는 Layout 구성을 위한 방법을 제공하는데... 그것이 Grid System 입니다. 1. Grid System이란? Vuetify는 flex-box를 사용하여, 화면을 가로를 기준으로 12개로 나누어 유연하게 구성이 가능하도록 기능을 제공합니다. 이를 기준으로 사용자는 자신이 원하는 기준에 맞게 Layout을 구성하여 사용하면 됩니다. 여기에는 window size 및 window의 방향을 고려한 5가지의 Breakpoints를 지정하여 사용이 가능하도록 제공합니다. 이러한 해상도에 대한 정보는 Vuetify 공식 페이지에서 제공하는 내용을 작성해 보겠습니다. [12 .. 2021. 3. 4. 이전 1 2 3 4 5 6 7 8 다음
