[구현 완료] 주식 웹어플리케이션

<실행 영상>

https://youtu.be/LStiBWvVnc4

Github 링크 (소스 코드)

https://github.com/jooyeokkim/StockWeb

jooyeokkim/StockWeb

 

프로젝트 소개

• 프로젝트 이름 : 주식 웹어플리케이션 구현
• 기술 스택 : Python Flask Framework, Crawling(BeautifulSoup, pandas), Bootstrap, matplotlib
• 진행 인원 및 작업 기간 : 2인, 2021.4.10 ~ 2021.5.18
• 본인 담당 작업 : 백엔드 20%(Blueprint, Refactoring), 프론트엔드 100%
• 사용 프로그램 : Visual Studio Code
• 버전 관리 툴 : Git
• 상세 기능

- 사용자가 종목 검색을 하면 주가 정보, 기업 정보, 재무제표를 확인할 수 있다.   - 검색 키워드의 공백, 대/소문자가 일치하지 않아도 검색 가능하다. 예) 삼  성전 자, S-OiL  - 재무제표와 상위 업종/테마 메뉴에서는 pyplot그래프가 추가되어, 데이터를 시각적으로 확인할 수 있다.  - 데이터를 가져오는 동안 로딩중임을 알리는 Spinner을 웹사이트에 표시했다.

 

프로젝트 내용

   < 개요 >

• Blueprint
• Main page
• Check page
• Statistics page
• Domain 발급

 

1. Blueprint

MVC구조에서 C에 해당하는 Controller은 사용자가 요청한 URL를 확인해서, 해당 요청을 담당하는 메소드로 매핑시켜주는 역할을 한다. 그리고 이 메소드에서는 요청에 대한 처리(DB 등)가 이루어지고, 최종적으로 사용자에게 결과 페이지를 보여주기 위해 View로 이동시키게 된다.

그런데, 이 Controller처리를 한 파일에서 모두 수행한다면 소스코드가 매우 길어져서 유지보수는 상당히 어려워지게 된다. 그래서 Flask에 Blueprint를 도입하게 되었다.

Blueprint는 상위 경로와 하위 경로를 각각의 파일로 계층적으로 관리하기 위한 Flask의 기능이다.

 

 

2. Main page

[이미지1]

 

[이미지2]

carousel : 슬라이드쇼 기능 (interval=2.5초)

 

 

3. Check page

[이미지1]

 

[이미지2]

 

 

4. statistics page

1) 지수 차트

2) 상위 업종/테마

3) 시가 총액 상위

4) 거래량 상위

5) 상한가/하한가 종목

6) 관리/정지 종목

 

 

5. Domain 발급

 

 

프로젝트를 마치며...

본인은 백엔드측에서 Blueprint부분과 Refactoring을 담당했고, 모든 프론트엔드측 작업을 담당했다.

프론트엔드를 담당하는 것은 처음이었지만 부트스트랩이라는 CSS Framework의 도움으로 어렵지 않게 웹페이지를 제작할 수 있었다.

프로젝트 동료도 데이터 수집과 코드 정리를 잘해주었고, 원활한 소통 덕에 큰 문제는 없었던 것 같다.

프로젝트를 하면서 Flask는 Spring에 비해 가볍고 간단한 웹 프레임워크라는 것을 느꼈고, Flask는 Jinja2라는 웹 템플릿 엔진을 제공하기 때문에 html코드에 쉽게 조건문과 반복문을 적용할 수 있었다.

초반에는 bootstrap에서 제공하는 class가 어떤 기능을 담당하는 것인지 파악해나가느라 애를 먹었지만, bootstrap가이드를 많이 찾아다니다보니 적응도 되고 감도 잡혀가서 프로젝트 중후반에는 진행 속도가 빨라졌다.

해당 프로젝트는 많은 데이터를 네이버 금융에서 크롤링 해왔기 때문에 공식 서비스 및 운영을 하지는 않을 것이다. 그래서 포트폴리오를 개발 카테고리가 아닌 구현 카테고리에 넣은 것이다.

그래도 이 웹 어플리케이션은 투자에 참고할만한 핵심 정보를 보기 좋게 확인 할 수 있게 제작되었기 때문에 개인적 참고용으로 사용하기 좋을 것 같다.

이 프로젝트를 수행하며 웹의 원리를 익히는데 도움이 되었지만 아직 갈 길은 멀다고 생각한다. 여러 경험을 거듭해가며, 웹 요소의 breakpoint를 더 깊이 이해해서 더 유연한 반응형 웹을 만들어볼 것이며, 다음 프로젝트는 Spring Web Framework으로 프로젝트를 진행해볼 계획이다.