지난 시간에는 키움증권에서 제공하는 전체 종목에 대해서 Dart(전자공시시스템)의 OPEN Data를 통해서 재무제표 정보를 얻어왔습니다. 이를 통해서 자신이 설정한 기준을 통해 우량주를 추출해서 DB에 저장하는 로직까지 구현해 보았습니다.
이제부터는 DB에 저장된 정보를 화면에 뿌려주고, 필요한 정보를 알려주는 대시보드(Dashboard)를 제작해 보도록 하겠습니다. 우선 전체 제작된 모습을 확인하고 하나하나 제작하는 방법을 알아보도록 하겠습니다.
1. Dashboard 개요
[개발환경]
AT-Front : vue.js v2.9.6
AT-Back : SpringBoot Framework v2.4.2 (openjdk version v1.8.0_282)
DBMS : MariaDB v5.5[AT-Front Dashboard 결과]
기존에 구현했던 것들을 최대한 모아서 AT-Front에 구현한 결과입니다. 아직 부족한 부분은 많지만 그래도 대시보드에 대해서 하나하나 자세히 알아보도록 하겠습니다. 디자인 측면에서는 더 개선할 것들이 많을 수 있지만 이정도 화면을 위해서는 어느정도 개발적인 측면이 필요한지 소개하는 기회가 될 것이며, 자신만의 Application을 제작할때 약간의 도움이 되었으면 합니다.
2. 사용된 AT-Back에서 제공하는 API
기존에 Ayotera-Trade를 구독해주신 분들이 쉽게 찾으실 수 있도록 각 영역에서 사용한 AT-Back에서 제공하는 API를 기술해 보겠습니다. 혹시나 기존에 글들에서 찾을 수 없는 API가 있다면 댓글에 남겨주세요~!!
[First Line]
- Firtst Card - "/qss/listCount" 우량주로 판단되는 (저평가 포함) 전체 종목의 개수를 제공하는 API
- "/qss/listPerUser" 개인별로 세팅된 저평가 판단기준을 적용한 우량주 종목 리스트를 제공하는 API
- Second/Third Card - "/qss/macdInfo" 저평가 우량주 기준 MACD와 Signal의 Cross정보 별 종목 리스트를 제공하는
API로 GC, DC, Point로 리스트 제공
[Second Line]
- First/Second Card - "/stock/eachRecent60" 선택한 개별 종목의 이전 60일간 데이터 제공하는 API
(MACD, Signal, MA5, MA10, MA20, MA60, MA120, MA240)
3. 동작로직
우량주 매매시점 알림 Dashboard는 다음과 같이 동작하게 됩니다.
- 우량주 전체 개수와 개인별 설정된 저평가 리스트를 받아와서 개수를 구하고, Doughnut Chart를 작성
- 동시에 저평가 리스트를 Chart옆에 list로 뿌려줌
- 저평가 리스트 중 MACD vs Signal 정보를 받아오고, GC / DC / Point의 개수에 대한 Doughnut Chart를 작성
- GC에 대한 리스트를 Default로 Chart옆 card에 뿌려주고, Chart의 특정 영역을 클릭하면 해당 MACD vs Signal cross에 해당하는 리스트로 바꾸어 뿌려줌
그럼 실제 구현에 들어가 보겠습니다.
- Ayotera Lab -
댓글