[ 웹서비스기획 #2개발일지-큰틀잡기,DB ] 주식 투자참고서(by. 퀀트)

고성훈·2020년 6월 15일
0

개발 시작하기 - 1주차

지난 기획을 바탕으로 개발을 시작해보자. 다시 한번 1주차 개발 계획을 살펴보자.

  • 1주차 계획

    • DB구축 : 크롤링, 지표계산, DB 적재
    • 프론트엔드 : 웹페이지 뼈대(HTML+CSS) 구축

1주차 계획대로 개발을 진행해보자.

1) DB 구축

DB 구축의 경우 네이버 증권 정보를 기반으로 크롤링하여, 크롤링하여 MongoDB에 적재할 것이다.

크게 3가지 내용을 크롤링 할 것이다.

  • 코스피,코스닥 종목별 정보 (네이버 증권)
  • 각 종목 별 2년 간의 수정주가 정보 (네이버 증권 차트)
  • 각 종목 별 재무제표 (fn guide에서 제공하는 재무제표)

크롤링 내용을 기반으로 3가지 항목을 DB에 적재한 것이다.

  • 코스피, 코스닥 종목별 종보
  • 각 종목 별 2년 간의 수정주가 정보
  • 재무제표 기반으로 계산한 퀀트 지표 정보

크롤링서부터 데이터 전처리 가공 DB 적재의 일련의 과정을 R을 통해서 진행하였다.
R의 httr, readr, rvest 라이브러리를 통해 크롤링을 하였고, dplyr 라이브러리를 통해 전처리 가공을 하고, mongolite 라이브러리를 통해 DB에 적재하였다.

2. 웹페이지 뼈대 만들기(HTML+CSS) 구축

웹페이지의 뼈대를 잡는 것은 엄청난 고민이 필요했다. 나의 디자인적 감각이 매우 떨어지기에 어떻게 화면을 구성할지는 나에게 매우 어려운 얘기였다. 그래서 디자인 감각이 떨어지는 내가 만들어서 망치느니, 외부에 오픈된 디자인을 활용하기로 했다.

코드펜이라는 오픈소스 페이지를 참고했다.(https://codepen.io/)
다른 사람들이 자기가 만든 웹페이저 뼈대를 공개하는 사이트이다. 해당 사이트에서 내가 생각하는 컨셉이랑 가장 잘맞는 소스를 참고했다.

참고한 소스는 Newpaper 형식의 웹페이지 였다. (https://codepen.io/oliviale/pen/BaoXOOP)
큰 틀의 느낌만 참고하고, 레이아웃 구성은 내가 원하는 형태로 재구성했다.

레이아웃은 크게 3가지 영역으로 나누었다.

  • 주식 차트 영역
  • 퀀트 정보 영역
  • 사이드바 영역(퀀트 별 순위)

주식 차트의 경우 Highchart API를 활용하였다. 간단히 종목의 날짜 별 주가 정보만 입력하면 주식차트를 그릴 수 있는 간편한 API였다.
나머지의 영역의 경우 필요한 항목들을 부트스트랩을 활용하여 구성하였다.
최종적으로 구성한 화면을 아래와 같다.

<캡쳐화면 추가 예정>

3. 다음 To-Do

이어서 다음 개발을 진행할 내용은 아래와 같다.

  • 2주차 계획

    • 프론트엔드 : 웹페이지 기능(자바스크립트) 구축
    • 백엔드 : 필요한 API 개발

이 부분이 프로젝트에서 제일 고난이도 일 거 같이 많은 시간이 소요될 것 같다. 그래도 힘내서 완성해보자!

profile
Let me introduce myself.

0개의 댓글