Vue.js 사용하기 -3 ( 시작하기 )

Vue.js 시작 !! 

 일단 프로젝트 구성을 어떻게 해야 할지 생각해야한다. 쉽게 생각할수 있는 구성은  Vue.js 를 그대로 사용할건지 아니면 서버사이드 랜더링을 이용할것 인지다. 

충분히 서버사이드에서 랜더링을 거지지 않아도 제대로 동작을 했고 구현이 가능했다. 난 서버 사이드 랜더링을 사용할 예정이다. 한국 Vue.js 커뮤니티에서 확인하다보니 

Vue.js 를 사용할때 서버사이드 랜더링이 필요한 이유에 대해서 작성해 놓은것이 있었다. 내용은 아래와 같다. 

1. 장점

 -검색 엔진 크롤러가 완전히 댄러링 페이지를 보기 쉽다 , 검색엔진 최적화 (SEO ) 

 - 인터넷속도가 느리거나 느린 장치에서 콘텐츠 도착 시간이 단축, 서버렌더링된 마크업은 js 가 다운로드되고 실행하는것 까지 기다릴 필요가 없기 떄문. 

2. 단점 

 - 브라우저의 특정 코드는 특정 라이프 사이클 후크 내에서만 사용 가능할수 있음 , 개발제약이 생김

 - 설치 및 배포 가 복잡해짐. 

 - 서버에 부하가 몰릴수 있음. 

이런 이유들 때문에 서버사이드 랜더링을 선택할땐 앱의 콘텐츠가 중요도나 초기 로드성능이 중요한지 등의 여러 조건들을 판단하고 적용하라고 가이드 되어있다. 

( https://ssr.vuejs.org/#why-ssr ) 

 일반적으로 vue.js 를 찾아서 서버사이드를 같이 구글링 해보면 보통 vue.js + node.js 로 이루어진 구성의 내용들이 많이 나온다. vue.js 를 개발하려면 기본적으로 npm 을 써야 하기도 하고 node.js 가 단순한 api 를 만들기에는 생산성면에서는 참 좋기 때문이 아닐까 싶다. 그리고 javascript 를 하던 개발자라면 node.js 가 훨씬 친숙할거 같다. 

 난 spring 개발자 이다. 그렇기 때문에 node.js 는 사용하지 않고 spring boot 에 붙여서 서버사이드 랜더링을 할 예정이다. 

이 구성을 하기위해 구글링을 해보니 node.js 비해 srping boot 쪽은 vue.js 와 관련 자료가 상대적으로 너무 없었다. 아직 spring 진영은 jsp 관련자료가 더 많았다 ( 아마 예전부터 누적된 자료들도 같이 검색이되니 이전 데이터들 때문에 더그런거 같다. ) 

 여러가지로 가능한지 여부를 찾아보다 보니 내가 너무 어렵게 생각했단 생각이 들었다 spring boot 는 언젠가부터 thymeleaf 를 열심히 밀고 있다. spring boot 2 부터는 대놓고 thymeleaf 는 별다른 설정이 없이 사용이 가능하게 되있다 ( JSP 는 사용하려면 라이브러리를 추가 해야 하고 약간의 제약이 있다. ) 

 spring boot 에 thymeleaf 를 사용하면 vue.js 를 아주 간단하게 붙일수 있다. html 파일 형식을 가지고 있는 형태기 때문에 thymeleaf 와의 궁합은 아주 좋은거 같다. 

 결론적으로 화면은 vue.js 로 구성할것이며 html 호출은 spring boot 통해 특정 컨트롤러를 호출하면 thymeleaf 로 해당 html 을 내려주는 구조로 만들 것이다. 

 spring boot 는 철저히 api 서버 역할을 하고 랜더링을 담당, vue.js 는 화면 구성을 담당

Vue 만들기 ! 

일단 spring boot 프로젝트를 생성하고 webapp 폴더를 만든뒤 src 폴더를 생성하여 그안에 vue 파일을 생성한다. 

componets 폴더 안에서 작을 할것이다. 폴더 구성은 메인 서비스명 밑에 화면별로 정의하면된다. 빨간색으로 가려진곳이 서비스 명이 되면 된다. 

화면 폴더를 생성했으면 그 화면폴더 명은 추후 webpack 으로 번들링할때 번들링된 파일의 이름중 한부분으로 들어가기 때문에 주의 해야한다. 

폴더안에는 vue , js 파일 두가지가 들어가게 된다.  vue 파일은 실제 vue 로직이 들어가는 파일로 가장 많이 손을 대는 곳이 된다. 

index.js 는 html과의 연결 및 사용할 플러그인등을 선언을 해놓은곳이다. 

index.js 

import Vue from 'vue';
import VueI18n from 'vue-i18n'
import ChargeMng from './ChargeMng.vue'

Vue.use(VueI18n)


//현재 js 에 연관된 모든 컴포넌트에서  이벤트 버스 사용가능 , 모든 컴포넌트에서 발생 및 응답이 가능함.
Vue.prototype.$Bus = new Vue();

const i18n = new VueI18n({
  locale: 'ko',
  fallbackLocale: 'en'
})

var vm = new Vue({
  i18n,
  el: "#charge_main",
  render: h => h(ChargeMng)

})

 이곳에서 사용할 것들을 미리 정의 해놓고 실제 구현할 Vue 파일과 노출시킬 html 을 연결을 해놓는다. el 부분이 html 에 선언된 div id 를 선언해놓은것이고 h=>h() 안이 실제 로직이 있는 vue 파일 정보이다. 

 이외에 이벤트 버스를 선언해서 사용도 가능 하고 최상단에 import 를 하여 여러가지 플러그인 혹은 컴포넌트들을 선언이 가능하다.

index.js  파일을 다 만들었다면 vue 파일을 만든다. 

<template>
  <div>

  </div>
</template>

<script>

  import axios from "axios"
  import TagValueTableBody from '../common/TagValueTableBody'
  import TagValueSpanTableBody from '../common/TagValueSpanTableBody'
  import SpanTableHeader from '../common/SpanTableHeader'
  import Vue from 'vue'
  import VueI18n from 'vue-i18n'
  import { BasicAlert } from 'puetify'

  export default {
    components : {
      TagValueTableBody, SpanTableHeader,TagValueSpanTableBody
    },
    name: "ChargeMng",
    created() {
  
    },
    mounted() {

    },
    methods : {    

      search: function(e) {
      

      },
      complete: function(e) {
       
      }
    },

    data()  {
      return {
        mainUrl : "",
        stDate : "",
        edDate : "",     
        defalutUserBody : [
         
        ]

      }
    }
  }
</script>

<style scoped>

</style>

 

구성은 총 3부분이다 화면레이아웃 구성, 로직구성, CSS 구성 으로 나눌수 있다. 

 화면 레이아웃구성은 template 안에 작성하면된다 html 사용하여 구성하면 되기 때문에 html 을 사용할수 있다면 간단한 테이블이나 버튼정도는 뚝딱뚝딱 만들어서 배치가 가능하다. 

 로직 구성은 script 안애 구성하면 된다. 여기서는 첫부분에 import 를 통해서 컴포넌트들을 호출해서 등록할수 있고 index.js 에서 import 하던것들을 동일하게 import가 가능하다 현재 작성하는 곳에서만 사용하는 컴포넌트라면 이곳에 선언해서 사용해도 상관없다. 

 export default 부분은 실제 fucntion 들과 화면에서 필요한 데이터변수  그리고 lifeCycle 을 이용한 훅 처리가 가능한 곳이다. 이곳에서 조작되는 로직들을 작성하면 된다. 중요한건 name 인데 이 부분이 index.js 에 선언한 name 과 일치하여야만 정상적으로 연결이 가능하다. 

 CSS 는 style 안에다 정의 하면된다. 이곳에 선언하고 template  안에서 class로 가져다 사용하면된다. 

여기서 잘 알고 넘어가야하는건 vue.js 라이프 사이클이다.  라이프 사이클을 알고 있어야 개발 시작하기전에 로직 설계 하기가 쉽다. 

Vue.js 한국 커뮤니티에 있는것을 그대로 가져와봤다.(https://kr.vuejs.org/v2/guide/instance.html) 

여기서 중요한건 created , updated, monuted  이다.  각 명칭을 보면 명확하게 각각 어떤 상태인지가 보인다. 난 created 와 mounted 를 주로 사용한다. updated 는 굳이 쓸 경우를 아직 보지 못했다. ( select box 를 최초 로딩시 셀렉트 하도록할경우 updated 에 넣어두면 무한으로 반복해서 선택하는것을 볼수 있다.  주의해서 사양해야할듯 하다.) 

 created 부분에서 화면구성을 위한 값들을 세팅하고 화면을 구성하는 내용들을 넣어두고 mounted 에서 그 세팅된것들을 초기화하거나 화면로딩시 자동으로 호출되야 하는 부분들을 정의 한다. mounted 상태는 모든 화면이 구성이 된다음의 시점이기 때문에 데이터 변경이나 특정 액션을 취하는데 좋은 시점이라고 본다. 

라이프사이클을 이용해서 필요한 설정과 이벤트를 적절히 사용하고 구성만 잘 맞춰두면 vue 화면 을 만들어내는데 걸리는 시간은 얼마 걸리지 않는다. 개발하는것 보다 오히려 npm 과 webpack , babel 설정하는게 더 어려운거 같다.  

CSS 는 bootstrap 을 사용하면 쉽게 적용이 가능하다 자신이 직접만들지 bootstrap 을 사용할지는 선택에 따라 다르게 사용 하면 될거 같다.