본문 바로가기

vuetify10

[Vue.js] 11. use v-navigation-drawer 바로전에 App Bar를 구성해 보았습니다. 그 요소중에서 App Bar Navigator에 대해서 좀 더 깊이 알아보겠습니다. 사실 기존에 구현한 내용은 Navigator를 통해서 생성한 icon을 클릭했을때 아무런 반응이 없었습니다. 하시만 실제적으로는 클릭을 한다면 무언가... 왼쪽에서 메뉴판이 쫙 나오면서 리스트를 제공해야 합니다. 이렇게 가능하게 해주는 tag는 바로... 입니다. 하지만 실질적인 코드적인 내용으로 생각해보면... 을 클릭하면 가 보이게 하고, 이외의 영역을 클릭하면 사라지게 하는 것 입니다. 그럼 차근차근 알아보도록 하겠습니다. 1. v-navigation-drawer 구현 우선 v-navigation-drawer 자체를 구현해 보겠습니다. 실질적으로 안에 menu는 아직 넣지.. 2021. 3. 2.
[Vue.js] 10. use v-app-bar 지금까지는 단편적인 개별 화면을 구성하는 방법에 대해서 알아보았습니다. 하지만 SPA를 만들기 위해서는 개별적인 화면이 아닌 전체 Frame(틀)을 구성하고 그 안에서 동작하는 sub frame을 만들어서 동작을 시키게 됩니다. 기존의 단편적인 개별화면이 sub frame이 되겠고, 오늘부터는 main frame을 만드는 방법에 대해서 차근차근 알아보겠습니다. Material Design에 대해서 들어보셨나요?? Google이 Android 스마트폰에 적용하면서 유행하며 널리 퍼진 방식으로 간단하게 말하면... 평면적인 디자인을 그림자 효과를 주어 입체효과를 주고 아주 최소화된 feature를 사용해서 원하는 바를 최대한으로 표현하는 디자인 방식을 말합니다. 대표적으로 Gmail, YouTube 등이 있.. 2021. 2. 26.
[AT] 30. 우량주 종목 자동 예측 및 선정 (4-4) 이제 어느정도 우량주 종목 중 저평가 종목에 대한 추출의 로직이 마무리 단계에 접어들고 있습니다. DB상에는 이제 원하는 모든데이터가 저장되어 있으며... 우량주 종목 중 저평가 종목에 대한 추출로직을 spring boot에 넣어서 화면에 렌더링을 해보겠습니다. 우량주 종목 선정을 위한 기반 데이터 수집 방안 (전자공시시스템 활용) - 1개 종목기준 정리된 데이터 수집 방안에 대해서 코스피, 코스닥 전체 종목에 대한 데이터를 DBMS에 적재 우량주 종목 선정 로직을 적용하여 대상 종목 추출 추출된 우량주 종목에 대해서 저평가 종목 추출 추출된 종목에 대해서 실험실 진행 우량주 종목에 대해서 저평가 종목을 추출하는 내용을 완성하기 위해서는 아래의 추가 단계가 필요하고, 앞으로 당분간은 해당 구성을 구현해 .. 2021. 2. 23.
[Vue.js][Error] loading status in v-data-table 이번에는 vue.js의 data table 구성 시, loading상태에 대한 처리관련하여 발생이 가능한 고민거리에 대해서 생각해 보고자 합니다. 사실상 vuetify에서 제공하는 UI components를 main으로 사용하기로 했기 때문에 대부분이 제공되는 기능입니다. 이번에 생각해보고자 하는 부분은 API로 받아온 데이터를 table에 뿌려줄때, 해당 데이터를 가져오는 중에는 progress bar로 표시를 해주고 데이터 로딩이 완료된다면... progress bar를 종료시키는 기능입니다. v-data-table에서는 해당 기능을 loading이라는 property로 완성합니다. 이렇게 간단하게 구현이 가능한데... 왜 이렇게 생각까지 해야할까요?? 문제상황은 아래와 같습니다. API로 받아오는 .. 2021. 2. 10.