재무제표 기반 주식가격 평가 서비스 프로젝트 '돈다' 의 웹 뷰 레포지토리 입니다.
프론트엔드 프레임워크 입니다. Vuetify 2.6.0 의 원활한 사용을 위해 Vue 2.6.0 버전을 채택하였습니다.
- Vuetify가 곧 3.0 버전 정식 릴리즈가 될 예정입니다. 릴리즈 내역에는 Vue3.0 이상 지원 내용이 포함되므로, Vue 3.0 으로 마이그레이션을 고려중입니다. 자세한 내용은 해당 링크를 참조하세요.
복잡한 주가 데이터를 원활히 다루고, 백엔드와의 원활한 소통을 위해, 타입을 정의하고 사용하기 용이한 Typescript를 채택하였습니다.
Vue.js 의 CSS 프레임워크 입니다. CSS 요소를 간편하고 빠르게 만들기 위해 채택하였습니다.
- Vuetify가 곧 3.0 버전 정식 릴리즈가 될 예정입니다. 릴리즈 내역에는 Vue3.0 이상 지원 내용이 포함됩니다. 자세한 내용은 해당 링크를 참조하세요.
Vue.js 의 상태 관리 도구* 라이브러리 입니다.
- vuex가 곧 LTS 버전으로 들어갑니다. 따라서 Vue.js 에서 공식적으로 권하는 상태 관리 도구는 vuex 에서 Mutation* 을 제거하고, 새로운 기능을 추가한 Pinia입니다.
상태 관리 도구* : 컴포넌트 간의 데이터 전달이 아닌, 중앙 데이터 저장소(store) 를 통해 데이터를 관리하는 도구를 의미합니다.
Mutation* : vuex의 store의 state* 를 변경하는 동기적 함수들을 의미합니다.
state* : 접근이 허용된 컴포넌트에서 공통적으로 사용 가능한 store의 변수들을 의미합니다.
Vue2 버전에서 Typescript 를 사용하여 클래스형 컴포넌트를 작성할 수 있도록 지원하는 라이브러리 입니다.
Vue2 버전에서 Typescript 를 사용하여 데코레이터를 사용한 클래스형 컴포넌트를 작성할 수 있도록 지원하는 라이브러리 입니다.
Vue.js 의 라우터입니다. SPA의 구현, 동적 라우팅, 사용자 정의 스크롤 등의 기능을 사용하기 위해 채택하였습니다.
차트를 쉽게 그릴 수 있는 Javascript, Typescript 라이브러리 입니다. 주가와 제무재표를 다양한 방식으로 시각화 하기 위해 채택하였습니다. chart.js는 특히 plugin 커스텀 기능이 강력하여 다양한 차트 시각 옵션을 설정할 수 있습니다. 자세한 내용은 하단의 차트 항목에서 살펴보시기 바랍니다.
HTTP 비동기 통신 라이브러리입니다. 백엔드 와의 데이터 통신을 위해 채택하였습니다. 관련 API 매핑은 하단의 API 항목에서 살펴보시기 바랍니다.
📦src
┣ 📂@types
┃ ┣ 📂chartjs-plugin-zoom
┃ ┃ ┗ 📜index.d.ts
┃ ┣ 📂d3
┃ ┃ ┗ 📜index.d.ts
┃ ┣ 📂vue-mobile-detection
┃ ┃ ┗ 📜index.d.ts
┃ ┗ 📜index.d.ts
┣ 📂api
┃ ┣ 📜stocks.ts
┃ ┗ 📜types.ts
┣ 📂assets
┃ ┣ 📜koreaflag.png
┃ ┣ 📜logo.png
┃ ┣ 📜logo.svg
┃ ┣ 📜readme-chart1.png
┃ ┣ 📜readme-chart2.png
┃ ┣ 📜readme-chart3.png
┃ ┗ 📜usaflag.png
┣ 📂mixins
┃ ┣ 📜StoreMixin.vue
┃ ┣ 📜tools.ts
┃ ┗ 📜TopListMixin.vue
┣ 📂models
┃ ┣ 📜app.ts
┃ ┣ 📜interest.ts
┃ ┣ 📜market.ts
┃ ┣ 📜payload.ts
┃ ┣ 📜stock.ts
┃ ┗ 📜user.ts
┣ 📂plugins
┃ ┗ 📜vuetify.ts
┣ 📂routes
┃ ┗ 📜index.js
┣ 📂scss
┃ ┗ 📜variables.scss
┣ 📂store
┃ ┣ 📜index.ts
┃ ┣ 📜InterestStore.ts
┃ ┣ 📜MarketStore.ts
┃ ┣ 📜payload.ts
┃ ┣ 📜StockStore.ts
┃ ┗ 📜UserStore.ts
┣ 📂v2
┃ ┣ 📂components
┃ ┃ ┣ 📂detail
┃ ┃ ┃ ┣ 📂factories
┃ ┃ ┃ ┣ 📂finance
┃ ┃ ┃ ┃ ┣ 📜FinanceContentFactory.vue
┃ ┃ ┃ ┃ ┣ 📜InformationFactory.vue
┃ ┃ ┃ ┃ ┣ 📜StockFinance.vue
┃ ┃ ┃ ┃ ┣ 📜StockFinanceBarChart.vue
┃ ┃ ┃ ┃ ┗ 📜StockFinanceLineChart.vue
┃ ┃ ┃ ┣ 📂indicator
┃ ┃ ┃ ┃ ┣ 📜IndicatorContentFactory.vue
┃ ┃ ┃ ┃ ┣ 📜StockIndicator.vue
┃ ┃ ┃ ┃ ┣ 📜StockIndicatorBarChart.vue
┃ ┃ ┃ ┃ ┣ 📜StockIndicatorChart.vue
┃ ┃ ┃ ┃ ┣ 📜StockIndicatorDetail.vue
┃ ┃ ┃ ┃ ┣ 📜StockIndicatorLineChart.vue
┃ ┃ ┃ ┃ ┗ 📜StockPolarAreaChart.vue
┃ ┃ ┃ ┣ 📂similar
┃ ┃ ┃ ┃ ┣ 📜NewsContentsFactory.vue
┃ ┃ ┃ ┃ ┣ 📜StockNews.vue
┃ ┃ ┃ ┃ ┣ 📜StockSimilar.vue
┃ ┃ ┃ ┃ ┗ 📜StockSimilarContents.vue
┃ ┃ ┃ ┣ 📂stock
┃ ┃ ┃ ┃ ┣ 📜Stock.vue
┃ ┃ ┃ ┃ ┣ 📜StockBigChart.vue
┃ ┃ ┃ ┃ ┣ 📜StockChartD3.vue
┃ ┃ ┃ ┃ ┣ 📜StockChartD3LineBar.vue
┃ ┃ ┃ ┃ ┗ 📜StockInfo.vue
┃ ┃ ┃ ┣ 📂valuation
┃ ┃ ┃ ┃ ┣ 📜StockScore.vue
┃ ┃ ┃ ┃ ┣ 📜StockScoreBarChart.vue
┃ ┃ ┃ ┃ ┣ 📜StockValuation.vue
┃ ┃ ┃ ┃ ┣ 📜StockValuationChart.vue
┃ ┃ ┃ ┃ ┣ 📜StockValuationSingleChart.vue
┃ ┃ ┃ ┃ ┗ 📜ValuationBackgroundChart.vue
┃ ┃ ┃ ┗ 📜StockDrawer.vue
┃ ┃ ┣ 📂home
┃ ┃ ┃ ┣ 📜HomeNav.vue
┃ ┃ ┃ ┣ 📜Market.vue
┃ ┃ ┃ ┣ 📜MarketChart.vue
┃ ┃ ┃ ┣ 📜MarketDesc.vue
┃ ┃ ┃ ┣ 📜MarketTrend.vue
┃ ┃ ┃ ┣ 📜MarketTrendFactory.vue
┃ ┃ ┃ ┣ 📜StockRecommend.vue
┃ ┃ ┃ ┗ 📜StockRecommendContent.vue
┃ ┃ ┣ 📂rank
┃ ┃ ┃ ┣ 📜RankComponent.vue
┃ ┃ ┃ ┗ 📜RankContents.vue
┃ ┃ ┗ 📂vuetify
┃ ┃ ┃ ┣ 📜BtnBadge.vue
┃ ┃ ┃ ┗ 📜ProgressCircular.vue
┃ ┗ 📂pages
┃ ┃ ┣ 📜Detail.vue
┃ ┃ ┣ 📜Footer.vue
┃ ┃ ┣ 📜Home.vue
┃ ┃ ┣ 📜NavBar.vue
┃ ┃ ┣ 📜RankV2.vue
┃ ┃ ┣ 📜SideBar.vue
┃ ┃ ┗ 📜SnackBar.vue
┣ 📜App.vue
┣ 📜main.ts
┣ 📜shims-tsx.d.ts
┣ 📜shims-vue.d.ts
┗ 📜shims-vuetify.d.ts
📂@types - ts로 재정의한 npm 라이브러리를 담고 있습니다.
📂api - api url과 요청 타입을 담고있습니다.
📂assets - 외부 파일을 담습니다.
📂components - 페이지에 그려질 컴포넌트들을 담고 있습니다.
📂mixins - Vue의 mixins과 각종 유틸 함수들을 담고 있습니다.
📂models - 각종 데이터 모델을 정의합니다.
📂pages - 페이지를 담고 있습니다.
📂plugins - Vue의 각종 plugins을 정의합니다.
📂routes - 라우트 설정을 정의합니다.
📂store - vuex store들을 정의합니다.
📂components
┣ 📂detail - 디테일 페이지에 필요한 컴포넌트들을 담고 있습니다.
┣ 📂home - 홈 페이지에 필요한 컴포넌트들을 담고 있습니다.
┣ 📂rank - 랭크 페이지에 필요한 컴포넌트들을 담고 있습니다.
돈다 웹 뷰에서 API 요청은 📦src/📂store 에서 Vuex의 @Action 데코레이터로써 정의됩니다.
종목 하나의 정보 를 가져오는 getStock 함수를 예시를 통해 알아봅시다.
📦src/📂store/📜StockStoreV2.ts
@Action
public async getStock(name: string): Promise<void> {
try {
this.context.commit('updateState', {
stockLoaded: true
})
const res = await axios.get(`/stock/${name}`, HEADER)
this.context.commit('updateState', {
stock: res.data,
stockLoaded: false
})
} catch(e) {
console.log(e)
}
} this.context.commit('updateState', {
stockLoaded: true
})먼저, context* 객체의 commit* 함수를 호출합니다. 첫번째 인자로는 Mutation* 이름, 두번째 인자는 첫번째 인자에 명시된 Mutation 의 인자로써 사용됩니다. 여기서는 updateState의 인자로써 { stockLoaded: true } 를 보내어 호출합니다.
context* : 현재 store의 메소드와 객체들을 가지고 있는 객체입니다.
commit* : 현재 store의 Mutation 을 호출합니다.
Mutation* : vuex의 store의 state* 를 변경하는 동기적 함수들을 의미합니다.
state* : 접근이 허용된 컴포넌트에서 공통적으로 사용 가능한 store의 변수들을 의미합니다.
@Mutation
public updateState(payload: IUpdateStateModel) {
Object.entries(payload).forEach(state => {
this[state[0]] = state[1]
})
}updateState Mutation은 다음과 같이 정의되어 있습니다. 인자로받은 payload의 key값에 해당하는 state를 value값으로 대체합니다.
this.context.commit('updateState', {
stockLoaded: true
})따라서, 해당 구문은 stockLoaded* 라는 state값을 true로 변경한다는 의미가 됩니다.
stockLoaded* : 종목 하나의 정보를 가져오는 중임을 의미하는 로딩 변수입니다. true면 종목을 정보를 로딩하는중, false면 정보를 로딩 완료했다는 뜻입니다. 이 state는 로딩 화면을 시각화 할때 사용됩니다.
const res = await axios.get(`/stock/${name}`, HEADER)로딩 변수를 true로 변경한 후, axios get 요청을 실행합니다. axios의 get 함수에서 첫번째 인자는 요청할 url을 의미합니다. 두번째 인자는 http 헤더를 의미합니다.
돈다 에서 사용되는 전체 API 요청은 해당 링크에서 확인하실 수 있습니다.
this.context.commit('updateState', {
stock: res.data,
stockLoaded: false
})그 후, 다시 context 객체의 commit 함수를 호출합니다. 호출할 Mutation은 updateState입니다.
차트는 돈다 에서 가장 중요한 요소 중 하나입니다.
돈다 에서 차트는 chart.js 라이브러리와 CSS를 사용하여 구현되었습니다.