작업 내용 정리

요즘 D3.js 활용해서 캔들차트 구현하느라 많이 애먹고 있다.

차트 구현에만 매달려있다보니 작업의 진도가 나아가질 않는데,

차트 구현은 일단 뒤로 미루고 다른 작업들부터 해야겠다.

 

1. 홈 화면

1 - 1)

모든 종목의 정보를 화면에 노출시킬 수는 없다. 만약 그런다면 굉장히 무거워지고, 성능도 떨어지겠지.

그래서 홈 화면에 노출되는 종목은,

     (1) 보유 종목

     (2) 검색 종목

으로 한정한다.

보유 종목은 DB내 정보로 구분하고

검색 종목은 검색 내역을 vuex-persistedstate로 저장하여 가져온다.

만약, 보유종목과 검색종목이 둘 다 없을 시

해당 상태를 알리는 화면을 따로 띄운다.

 

1 - 2) 

홈 화면에서의 종목별 캔들차트는 별도의 기능(확대/축소, 이동, 십자선,  툴팁 등)을 요구하지 않기에

현재 구현된 차트 생성 로직을 바로 적용한다.

 

2. 트레이딩 화면

2 - 1)

화면 우측의, 

     (1) Sell / Buy

     (2) History

     (3) Note

구현하기

*

(1)은 서버에 입력내용 전송까지만

(2)는 DB/서버에서 받아오는 내용까지만

(3)은 송수신 둘 다

 

2 - 2)

차트 우측 상단의 종목정보 팝업과 차트 기능 드롭다운 구현하기

종목 정보 팝업은, 이전에 다른 파트들 하면서 구현했던 내용들로 빠르게 진행

차트 기능 드롭다운은, slot 형태로 구현

(하나의 드롭다운에 두 개의 slot 부착

   - 상단 슬롯은 주기 ; 일, 주, 월, 년

   - 하단 슬롯은 차트 보조지표 ; 일목균형표, 볼린저밴드 등)

 

2 - 3) 아래 사진 참고

트레이딩 화면에서,  헤더 검색창에 종목을 검색했을 때

화면이 이동하지 않는 현상 해결

 

2 - 4) 아래 사진 참고

종목 조회 후 다른 종목 조회 시

이전 종목의 가격 데이터가 차트 상에 그려지는 현상 해결

(서버 기록 상, MongoDB 쿼리문이 두 번 실행되는 것을 확인함)