본문 바로가기

vuetify10

[Vue.js] 08. use v-data-table 이번에는 table형태로 표현이 가능한 data를 vuetify를 통해서 구현해 보도록 하겠습니다. 기존에 AT Project를 통해서 구현했던, corp_info table을 Spring Boot에 구현한 Rest API를 통해서 가져오고 그 결과를 vue.js로 렌더링 하는 것 입니다. 일단 구현했을때 그 결과 화면을 보고... 어떻게 구현을 해야할지 고민해 보겠습니다. 아마 아래 화면은 대다수의 application이 구현하고 제공하는 양식입니다. API를 통해서 가져온 데이터를 list로 이쁘게 뿌려주고... 데이터가 음청 많을경우 아래처럼 pagination되어 해당 부분만 보여주도록 되어있습니다. 그리고 다음 page를 보려면 next버튼 혹은 원하는 page번호를 선택하면 해당 페이지의 데이.. 2021. 2. 10.
[Vue.js] 07. use Vuetify 지난시간 까지는 vue.js를 사용해서 프로젝트를 만들고, SPA(Single Page Application)를 위한 SFC(Single File Components)에 대해서 알아보았습니다. 그 후에는 API를 통해서 데이터를 받아오기위한 axios의 설치 및 사용에 대해서도 살펴보았죠. 이제는 가져온 데이터에 대해서 화면에 렌더링하는 방법에 대해서 알아보고자 합니다. 물론 자신이 디자인이나 UI에 대해서 해박한 능력을 가지고 있다면 음... 크게 신경쓸 필요가 있을까 싶지만... 저와 같이 이런 분야에 대해서는 0%의 능력을 가지고 있다면 관심을 가져볼만한 주제입니다. UI에 대해서는 별도로 Framework을 제공하는 곳이 많은데, vue.js사용자들이 많이 사용하는 몇가지를 알아보고 이번 프로젝트.. 2021. 2. 9.