VueJS | Stock-Trader Project Tutorial (1)

VueJS
components, tutorial, vue, vue-router, vuejs, vuex

이 포스팅은 Max의 Vuejs 강좌 내용을 정리한 것이고, VueJS의 개념을 익히고 연습해보기 위한 튜토리얼을 다룬 글 입니다.

프로젝트 소개

이 프로젝트는 아래의 영상과 같이 VueJS를 활용해서 간단한 모의 주식 시스템을 만들어보는것 입니다.
주식 리스트들이 있고 End Day 버튼을 누르면 시세가 랜덤하게 변경되고 시세에 따라 사고 팔고하는 리스트가 저장되도록 만들어 보는것 입니다.
vue-router, vue-resource, vuex를 활용해서 간단한 VueJS 프로젝트를 구성해보고 개념을 익히는 것이 목적입니다.
개인적으로 학습을 하면서 느꼈던 것이 이렇게 전체적으로 프로젝트를 구성하는 튜토리얼을 따라해보는 것이 많은 도움이되었던것 같아 본인의 개념도 좀 더 다지고 공부한 내용을 공유하고자 이 포스팅을 시작하게 되었습니다. 심도 있는 내용은 아니기 때문에 초보자 분들에게 도움이 되었으면 합니다.

이번 포스팅에서는 프로젝트에 사용될 컴포넌트 파일들과 폴더 구조를 생성하고 vue-router 로 라우팅 설정을 하여 페이지 이동이 가능한 내비게이션까지 만들고자 합니다.

1. 프로젝트 세팅

  • 프로젝트 기본 세팅은 아래의 git 주소를 통해서 해도 되고 vue-cli를 통해서 기본 세팅을 하셔도 괜찮습니다.
  1. 프로젝트 기본 소스 복사 - git clone https://github.com/hanwong/vue-stock-trader.git
  2. 의존모듈 설치 - npm install
  3. 로컬 서버 실행 - npm run dev

2. 컴포넌트 파일 생성하기

  • 먼저 아래의 파일 구조와 같이 src 폴더 아래에 화면을 구성할 컴포넌트 폴더와 파일을 생성합니다.
  • 그리고 아래에 예제 코드를 각각의 .vue 파일에 추가하고 <h1> ... </h1>의 내용을 각 파일에 맞게 수정해주면 됩니다.
src/components/Home.vue
1
2
3
4
5
<template>
  <div>
    <h1>Home</h1>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
src
└── components
   ├── Header.vue
   ├── Home.vue
   ├── portfolio
   │   ├── Portfolio.vue
   │   └── Stock.vue
   └── stocks
       ├── Stock.vue
       └── Stocks.vue

3. vue-router 세팅하기

vue-router는 다들 아시다시피 VueJS에서 페이지 라우팅을 도와주는 고마운 모듈입니다. 이번 프로젝트에서는 페이지나 세팅할 내용이 많지 않아서 초기 세팅 이후에 별도로 추가할 내용이 없어 아주 간단한 라우팅 구성만 해주면 됩니다.

1. 가장 먼저 vue-router 모듈을 설치해줍니다.

npm install --save vue-router

2. 라우트 설정들을 입력할 routes.js 파일을 src폴더 안에 생성합니다.

  • 이 프로젝트에서 보여지는 페이지는 Home.vue, Stocks.vue, Portfolio.vue 입니다. 그래서 각 파일들을 각각의 url로 호출 할 수 있도록 라우팅을 구성합니다.
  • Home.vue는 메인 화면이므로 url을 / 로 Stocks.vue는 /stocks, Portfolio.vue는 /portfolio 로 설정하였습니다.
  • 코드의 내용은 각각의 컴포넌트들을 import 해주고 main.js 전체 설정에 추가 할 수 있도록 routes 배열 객체 안에 설정하여 export 합니다.
  • 설정 내용은 아래의 코드와 같습니다.
src/routes.js
1
2
3
4
5
6
7
8
9
import Home from './components/Home.vue';
import Portfolio from './components/portfolio/Portfolio.vue';
import Stocks from './components/stocks/Stocks.vue';

export const routes = [
  { path: '/', component: Home },
  { path: '/portfolio', component: Portfolio },
  { path: '/stocks', component: Stocks },
];

3. routes.js 의 설정이 끝났으면 이 프로젝트의 전체 설정을 하는 main.js에 라우팅 설정을 추가해줍니다.

  • 아래 코드에서 주석이 달려 있는 부분들의 코드를 main.js에 추가합니다.
src/main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import Vue from 'vue';
import VueRouter from 'vue-router'; // importing vue-router 

import App from './App.vue';
import { routes } from './routes'; // importing routes  

Vue.use(VueRouter); // vue-router 플러그인 사용

const router = new VueRouter({ // vue-router 설정
  mode: 'history', // hashbang 사용하지 않는 모드 설정
  routes // 라우팅 설정
});

new Vue({
  el: '#app',
  router,  // vue-router 설정을 Vue 인스턴스에 추가
  render: h => h(App)
});

4. 마지막으로 App.vue 파일에 라우팅의 시작점 설정을 해줍니다.

  • 라우팅 시작점을 설정하는 태그 <router-view></router-view> 를 가장 상위 컴포넌트인 App.vue 에 추가해줍니다.
src/App.vue
1
2
3
4
5
6
<template>
  <div class="container">
    <router-view></router-view> <!-- 라우팅 시작점 -->
  </div>
</template>
...

여기까지 완료가 되면 라우팅 설정이 완료된것 입니다. 여기까지 에러 없이 동작이 된다고 하면 로컬 url 뒤에 /stocks나 /portfolio를 입력해서 페이지가 변환되는 것을 확인 할 수 있습니다.

4. 내비게이션을 만들기

1. 마지막 단계로 설정된 url을 통해서 페이지를 이동하는 내비게이션을 만듭니다.

  • Header.vue 파일에 아래의 코드를 추가합니다. 이 코드는 bootstrap ui 를 참고하여 제작되었습니다.
  • url 링크를 설정하는 디렉티브는 <router-link></router-link> 이고, 이 디렉티브 안에 to="/stocks"와 같이 속성을 추가해주면 해당 url로 이동 가능하게 됩니다.
src/components/Header.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <router-link to="/" class="navbar-brand">Stock Trader</router-link>
      </div>

      <div class="collapse navbar-collapse" >
        <ul class="nav navbar-nav">
          <router-link to="/portfolio" activeClass="active" tag="li"><a>Portfolio</a></router-link>
          <router-link to="/stocks" activeClass="active" tag="li"><a>Stocks</a></router-link>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">End Day</a></li>
          <li class="dropdown">
            <a
                href="#"
                class="dropdown-toggle"
                data-toggle="dropdown"
                role="button"
                aria-haspopup="true"
                aria-expanded="false">Save&amp;Load<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Save Data</a></li>
              <li><a href="#">Load Data</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
</template>

2. 내비게이션으로 활용하기 위해 App.vue 에 Header.vue 컴포넌트를 추가하여 모든 페이지에서 보이도록 합니다.

  • .vue 파일들은 한 파일안에 template, script, style 을 모두 설정할 수 있습니다.

  • 먼저 <script> 영역에 Header.vue 객체로 사용할 수 있도록 import 해줍니다.

    • 그리고 components 옵션 안에 디렉티브로 사용할 이름과 import한 객체를 설정해줍니다.

  • 그 다음 <template> 영역에 router-view 부분은 Home, Stock, Portpolio 페이지가 보여지는 부분이므로 분리를 해주고,

    • <script> 영역에서 설정한 디렉티브를 추가합니다.
    • 컴포넌트의 이름 설정은 <script> 영역에서 camelCase로 설정하면 <template> 영역에서는 kebab-case 형태로 사용하여야 합니다.

  • 그리고 간단하게 <style> 영역에는 패딩을 추가하여 맨 윗부분에 조금 간격을 두었습니다.

src/App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div class="container">
    <app-header></app-header>
    <div class="row">
      <div class="col-md-12">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from './components/Header.vue';
  export default {
    components: {
      'appHeader': Header
    }
  }
</script>

<style>
  body {
    padding: 30px;
  }
</style>

모두 완료되었다면 아래와 같은 화면이 출력될 것이고 내비게이션 버튼을 통해 페이지 이동이 가능할 것입니다.
git clone 으로 프로젝트를 시작하셨다면 git checkout step02 로 이번 포스팅의 마지막 결과물을 확인 하실 수 있습니다.
다음 편에서는 컴포넌트에 기능을 추가하고 데이터 상태 관리를 할 수 있는 vuex까지 다뤄보도록 하겠습니다.
필요하신 부분이나 보완할 점이 있다면 댓글로 의견 남겨주시기 바랍니다. 감사합니다.

STEP02


- 끝 -

Share Comments