‘미국 주식을 한 눈에’ 개발일지_2일차
스파르타코딩클럽 개인프로젝트 과제 개발진행과정
목차
1.오늘 한 일/해야할 일
(한 일과 해야할 일은 나눠야하는 것은 알지만 차차 고쳐가겠습니다.)
- 부트스트랩(BootStrap) 찾기
- Material Dashboard Dark Edition
- Black Dashboard (최종선택)
- 결정하게 된 이유
둘 중에 고민하다가 더 끌리는 쪽으로 선택함.
사실 대쉬보드를 어떻게하는게 가장 좋을까? 고민했을 때 조금 어두운 느낌으로 구성하고싶었다. 그래서 다크모드가 기본인 템플릿을 찾았고, 그 중에 Black Dashboard가 더 좋은 것같아서 선택함. (특별한 이유는 사실 없음. 그냥 개인 취향이 반영됨. 아직은 뭐가 똥인지 된장인지 구분도 못하는 상태…)
-
포트폴리오 페이지 만들기
-
표 구성
- 데이터 구성 (티커, 종목명, 섹터, 내용, 수익률, 손익, 평가금액, 평균매수액, 수량, 비중, 현재가)
- 순서가 이게 가장 좋을 지 모르겠다. 이건 급한 것 아니니 추후에 하자
- 티커를 Keyvalue로 잡자
- API로 가져올 데이터 : 종목명, 섹터, 내용, 현재가
- 고객이 직접 입력할 데이터 : 평균매수액, 수량
- 자동으로 계산해서 보여줄 데이터 : 수익률, 손익, 평가금액, 비중
-
메인 사이드바 구성
- MVP버전 : 대시보드, 포트폴리오
- Sprint2 : 일별 손익결산, 월별 손익결산, 매매일지
- Sprint3 : 배당현황, 배당일지
-
버튼 삽입 (종목 추가/수정/삭제)
- 버튼을 더 간결하게 할 수 있는 방법이 있을 것같은데, 어떻게 하면 좋을 지 레퍼런스 더 찾아보자!
- 추가 버튼만 위에 남기고, 수정, 삭제 버튼은 테이블의 각 행에 넣어주면 지저분한가? 연필모양, 휴지통 모양이 계속 있으면 지저분해보일 수도 있겠다.
- 통합해서 보여준다면 수정, 삭제버튼 눌렀을 때 진행 flow는 어떻게하지? 팝업? 페이지 내 수정? 고민해보자
- 버튼의 위치가 우측정렬 해야하는데, 아직 전혀 되지 않고 있다. 이 것도 방법을 찾아보자!
- 각 버튼 눌렀을 때, 데이터 추가, 수정, 삭제가 되어야한다. (POST방식으로 DB에 밀어넣기)
-
pagination 삽입
- 아직 아무런 기능은 없다. 단지 껍데기만 있을 뿐. 각 페이지 별로 적당한 종목수는 10개로 생각중. 10개 넘어가면 자연스럽게 다음페이지로 넘어갈 수 있게 해주자. 생명을 불어넣기!
-
- 대시보드 페이지 만들기
- 나한테 필요한 차트 유형 찾기 ( Ref : chartjs.org )
- Line Chart (일별수익률/월별수익률)
- Doughnut (섹터 분포)
- Pie (종목 분포)
- Combo bar/line (수익률과 투자금액)
- Time Series (환율)
- 데이터 값 위치 찾기
- Demo.js에 숨어있었다. 근데 이 JS파일이 아니라 DB랑 API에서 데이터 가져올 수 있는 지 다시 고민해보자
- 파이차트, 도넛차트 추가
- 파이차트, 도넛차트를 넣었는데, 사이즈가 어긋났다. 범례를 지워도 카드안에 들어오지않고있다. 적정 사이즈로 조절하자 (범례가 legend라는 것을 배웠다.)
- 파이차트와 도넛차트 안에는 labeling 작업 필요할 듯
- 선차트가 너무 곡선인것같다. 조금 더 딱딱한 느낌이면 좋을 것같은데, 이것도 방법을 찾아보자!
- 나한테 필요한 차트 유형 찾기 ( Ref : chartjs.org )
2.오늘 배운 것과 깨달은 것
- 템플릿을 다운 받았는데 너무 놀랐다. CSS파일, HTML파일, JS파일에 수많은 코드들 지금까지 배운건 정말 짧은 코드들이었구나. 갈 길이 멀다. 꾸준히 하자.
- 다른 사람의 소스코드를 수정하는 것보다 새로 만드는게 더 나을 수도 있다. (결과물은 장담할 수 없지만)
- 그래도 하나씩 만들어가는 재미가 있다. 시간가는지 모르고 했다.
- 나는 밤에 코딩하는 것이 더 잘 된다
- 내 개발일지는
초등학생 일기같다. 있어보이는 척하는 것같다…오글거리지만 조금 더 전문적이 될 수 있도록…
3.지금까지 작업물 (사진)
댓글남기기