[To-Do 앱]Vue.js/Node.js Bootstrap-vue를 이용한 UI 구현

이번 포스트에서는 Bootstrap-vue를 이용해 UI를 구현 해 보도록 하겠다.

예상독자

• IntelliJ, Webstorm, Atom 등 자바스크립트 IDE중 하나를 설치했다.
• 자바스크립트를 좀 안다.
• 백엔드는 알아서 구현할 수 있거나 아래의 튜토리얼들을 마쳤다.
• [To-Do 앱]스프링부트(SpringBoot) 웹 어플리케이션)
• [To-Do 앱] 스프링 부트(Spring Boot) RESTful API - GET
• [To-Do 앱] 스프링 부트(Spring Boot) RESTful API - POST 
• [To-Do 앱]vue.js와 node.js를 이용해 웹 앱 만들기
• [To-Do 앱]Vue.js/Node.js 앱 에서 API Call 하기 (Axios)
• 도커에 스프링 앱을 올리고 싶다면: 스프링 부트 도커에 올리기 (Dockerizing Spring Boot App) 참고

목표

• bootstrap-vue
• bootstrap-vue 패키지 설치
• bootstrap-vue Vue.js 프로젝트에 추가
• bootstrap-vue 사용

bootstrap-vue

bootstrap-vue는 Bootstrap을  Vue.js에서 사용 할 수 있도록 만든 패키지이다. 더 자세항 사항은 bootstrap-vue 사이트에서 확인 해 보도록 하자.

bootstrap-vue 패키지 설치

bootstrap-vue 패키지를 설치하기 위해 터미널을 이용해 to-do-frontend프로젝트 디렉토리로 들어간다. 들어갔다면 아래와 같은 명령어로 bootstrap-vue를 설치한다. 설치가 되면 npm run dev를 이용해 웹 앱을, Spring Boot앱을 5000포트에 실행시키자. 그리고 저번 포스트에서 한 것처럼 To Do Item 몇개를 임의로 생성하라.

npm install bootstrap-vue bootstrap --save

...

+ bootstrap-vue@2.0.0-rc.13
+ bootstrap@4.3.1
added 7 packages from 14 contributors and audited 9268 packages in 8.63s
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details

bootstrap-vue Vue.js 프로젝트에 추가

main.js에 다음과 같은 자바스크립트 라인을 추가하자.

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

참고를 위해 전체 소스코드를 올린다.

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  render: h => h(App)
})

이렇게 하면 앞으로 .vue파일에서 bootstrap-vue를 사용 할 수 있다.

bootstrap-vue 사용

<bootstrap-vue를 이용해 UI를 디자인 해 보았다>

이제 위와 같은 To Do 리스트 박스를 만들기 위해 아래처럼 Hello.vue 코드를 수정 해 보자.

Hello.vue

<template>
  <div class="hello">
    <b-card
    header="오늘 해야 할 일"
    style="max-width: 40rem; margin: auto; margin-top: 10vh;"
    class="mb-2"
    border-variant="info"
    align="left">

      <b-form-group id="to-do-input">
        <b-container fluid>
          <b-row class="my-1">
            <b-col sm="10">
              <b-form-input v-model="title" type="text" placeholder="새 할 일을 적으세요." />
            </b-col>
            <b-col sm="2">
              <b-button variant="outline-primary">추가</b-button>
            </b-col>
          </b-row>
        </b-container>
      </b-form-group>

      <b-list-group v-if="toDoItems && toDoItems.length">
         <b-list-group-item
          v-for="toDoItem of toDoItems"
          v-bind:data="toDoItem.title"
          v-bind:key="toDoItem.id">
          <b-form-checkbox
             v-model="toDoItem.done">
              {{toDoItem.title}}
           </b-form-checkbox>
         </b-list-group-item>
      </b-list-group>
  </b-card>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'hello',
  data: () => {
    return {
      toDoItems: []
    }
  },
  created () {
    axios.get('http://127.0.0.1:5000/todo/')
      .then(response => {
        this.toDoItems = response.data.map(r => r.data)
      })
      .catch(e => {
        console.log('error : ', e)
      })
  }
}
</script>

b- 로 시작하는 태그들이 바로 bootstrap-vue에 해당하는 태그들이다. bootstrap-vue의 공식 문서에서 예제를 확인 할 수 있다. 이 부분은 해당 태그의 문서를 포함하는 것으로 대신하겠다. HTML에 어느정도 익숙하다면 문제 없이 넘어 갈 수 있을 것이다.

• <b-card></b-card> : 카드 부분 문서 및 예제
• <b-form-group></b-form-group> : formgroup 문서 및 예제
• <b-form-input></b-form-input> : form input 문서 및 예제
• <b-form-checkbox></b-form-checkbox> : form checkbox 문서 및 예제

끝

다음 포스트인 vue.js 메서드 구현과 이번 부분을 합치기가 애매 일단 여기서 끊도록 하겠다. 다음 포스트에서는 To Do 리스트에서 '추가'를 누르면 실제로 리스트에 추가 되도록 하고, 또 체크를 누르면 리스트에서 사라지도록 하는 기능을 구현 해 보도록 하겠다.

다음 포스트: [To-Do 앱]Vue.js/Node.js To Do Item 추가 기능 만들기