쏘니의 개발블로그

프론트에서 개발하다보면 api 중에 시간소요가 1초 이상 소요되어 화면에 랜더링 되기 전에 어떤 구성된 화면이 나왔으면 하는 순간이 있습니다.

왜냐하면 api 로 데이터를 받아올 때 까지 로딩되는 화면에는 아무런 리스트 화면도 보여주지 않으면, 사용자 입장에서 어색한 느낌이 있습니다.

이럴때 쓰는 로딩 방식보고 skeleton 로딩이라고 합니다.

vue 에 라이브러리가 있나 찾아보았는데, 라이브러리 보다 css 만으로도 처리가 가능한 리소스를 찾아 내용 정리합니다.

1. vue skeletonBox 소스

<template>
  <span
    :style="{ height, width: computedWidth }"
    class="SkeletonBox"
  />
</template>

<script>
export default {
  name: `SkeletonBox`,
  props: {
    maxWidth: {
      default: 100,
      type: Number
    },
    minWidth: {
      default: 80,
      type: Number
    },
    height: {
      default: `1em`,
      type: String
    },
    width: {
      default: null,
      type: String
    }
  },
  computed: {
    computedWidth () {
      return this.width || `${Math.floor((0.9 * (this.maxWidth - this.minWidth)) + this.minWidth)}%`
    }
  }
}
</script>

<style lang="scss">
.SkeletonBox {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  overflow: hidden;
  background-color: #DDDBDD;
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
      90deg,
      rgba(#fff, 0) 0,
      rgba(#fff, 0.2) 20%,
      rgba(#fff, 0.5) 60%,
      rgba(#fff, 0)
    );
    animation: shimmer 5s infinite;
    content: '';
  }
  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }
}
</style>

2. 사용예시

<template>
<table summary="샘플">
  <colgroup>
    <col style="width:200px"/>
    <col style="width:340px"/>
    <col style="width:150px"/>
    <col/>
  </colgroup>
<tbody>
  <template v-if="isFirstLoading">
    <tr>
      <th><skeleton-box/></th>
      <td colspan="3"> <skeleton-box /><skeleton-box/><skeleton-box/></td>
    </tr>
    <tr>
        <th><skeleton-box/></th>
        <td colspan="3"> <skeleton-box/><skeleton-box/><skeleton-box/></td>
    </tr>
    <tr>
        <th><skeleton-box/></th>
        <td colspan="3"> <skeleton-box/><skeleton-box/><skeleton-box/></td>
    </tr>
    <tr>
        <th><skeleton-box/></th>
        <td colspan="3"> <skeleton-box/><skeleton-box/><skeleton-box/></td>
    </tr>
  </template>
  <template v-for="listItem in list">
   <!-- list 내용 -->
  </template>
</tbody>
</template>

<script>
import SkeletonBox from '@/components/common/SkeletonBox'

export default {
  name: 'ModalAttribute',
  components: {
    SkeletonBox
  },
  data () {
    return {
      isFirstLoading: true,
      list: []
    }
  },
}

위 소스코드가 예시로 짠 소스코드입니다.

간단히 설명하자면, isFirstLoading 이 true 이면, skelecton 박스가 보이게 되는 처리입니다.

아래 참고문헌의 코드를 그대로 구현 한 내용이고 다른 위의 예시 소스와 다른 내용은 라인 넓이를 랜덤함수로 구현된 내용은 수정했습니다.

넓이와 세로 px 값을 넣어줄 수 있어, 별다른 npm 다운 없이 위 소스코드만 복붙해서 사용가능합니다.

참고

https://markus.oberlehner.net/blog/skeleton-loading-animation-with-vue/  [skeleton 화면 구성]

eventLister 제거시 같은 메소드를 사용해야 함.
콜백 메소드로
window.addEventListener('keyup', function(event) {
//~
})
다음 처럼 사용시 이벤트 제거가 안됨.
event 는 vue beforeDestroy 생성주기에 작성을 해야함. 안그러면 event 가 계속 살아 있음.

 mounted () {
    // let context = this
    window.addEventListener('keyup', this.doStuff) // enter 클릭시 alert 창 닫기
  },
  beforeDestroy () {
    window.removeEventListener('keyup', this.doStuff)
  },
  methods: {
    doStuff (event) {
      if (event.keyCode === 13) {
        this.callEvent()
      }
    },
    callEvent () {
      this.$emit('close')
    }
  }

Vue EventBus

// 이벤트버스 생성
var EventBus = new Vue()
// 이벤트 발행
EventBus.$emit('message', 'hello world');
// 이벤트 구독
EventBus.$on('message', function(text) {
    console.log(text);
});

EventBus 를 전역으로 사용한다면 $off 도 등록을 해야함.
안하면 이벤트 구독이 계속 생겨나서 계속 이벤트가 발생됨.

참고문헌

http://vuejs.kr/jekyll/update/2017/02/13/vuejs-eventbus/

import Vue from 'vue'
import Router from 'vue-router'
import ExampleRouter from './modules/example'

import Login from '@/components/common/Login'

import store from '@/vuex/store'

const requireAuth = () => (from, to, next) => {
  let auth = store.getters.getIsAuth
  if (auth) {
    return next() // isAuth === true면 페이지 이동
  }
  next('/') // isAuth === false면 다시 로그인 화면으로 이동
}
const loginDup = () => (from, to, next) => {
  let auth = store.getters.getIsAuth
  if (auth) {
    return location = '/main'
  }
  next()
}

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [{
    path: '/',
    name: 'login',
    beforeEnter: loginDup(), // 로그인 이후 '/' path 접근 redirect
    component: Login
    },
    ExampleRouter 
  ]
})

ExampleRouter 코드

/** When your routing table is too long, you can split it into small modules **/

import List from '@/components/List'
import Create from '@/components/Create'
import Detail from '@/components/Detail'

import store from '@/vuex/store'

const exampleRouter = {
  path: '/exam',
  component: User,
  redirect: '/exam/list',
  name: 'exam',
  children: [{
    path: 'list',
    component: List,
    name: 'list'
  },
  {
    path: 'create',
    component: Create,
    name: 'create'
  },
  {
    path: 'detail/:no',
    component: Detail,
    name: 'detail'
  }

  ]
}

export default exampleRouter

하나의 체크박스는 단일 boolean 값을 가짐
하지만, true false 외 다른값 가지도록 설정 가능

true 및 false 값 설정

:true-value="1" :false-value="0"

일반 예제

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> 
<input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> 
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> 
<br> 
<span>체크한 이름: {{ checkedNames }}</span> 
//checkedNames -> ["Jack", "Mike", "John"]
new Vue(
  { 
    el: '...', 
    data: { 
      checkedNames: [] 
      } 
    }
  )

참고문헌

https://takeuu.tistory.com/39

스프링부트 프로젝트 일단 생성

vue 프로젝트 생성

스프링부트 제일 상위 루트 terminal 에서 명령어 작성

vue-cli 2.X

vue init webpack frontend

vuecli-2.X시작하기

프로젝트 구조

├── src/ # Spring 소스코드 디렉터리
│ └── main/ │
│            ├── java/  
│            └── resources/  
│               ├── static/
│               ├── templates/
│               └── application.properties
├── target/ # Spring 빌드 디렉터리
│ └── ...
├── frontend/ # Vue.js 루트 디렉터리
│ ├── src/
│ └── ...
└── pom.xml

빌드

vue 빌드 파일 설정

파일명
frontend/config/index.js

build: {
  // Template for index.html
  index: path.resolve(__dirname, '../../src/main/resources/static/index.html'),
  // Assets Paths
  assetsRoot: path.resolve(__dirname, '../../src/main/resources/static'), }

cd frontend
npm run build

빌드를 하게되면 index.js 에서 설정해준 경로로 빌드된 파일이 떨어지고, 스프링부트를 실행해서 해당 static 파일 경로로 접속하면 화면이 뜬다.

3.X configure

vue.config.js 파일을 제일 상위 폴더 frontend 아래에 만든다.
assetsDir 폴더명이 outputDir 과 같아 static 이면 build 할때마다 해당 dir 파일 다 지우고 다시 만든다.
outputDir 가 root dir 이고, assetsDir 이 outputDir 하위에 생성되는 vue 에서 생성되는 build dir 이다.

//vue.config.js
module.exports = {
   assetsDir: "vuestatic",
  outputDir: "../src/main/resources/static",
  indexPath: "../templates/index.html",
  devServer: {
    proxy: "http://localhost"
  },
  chainWebpack: config => {
    const svgRule = config.module.rule("svg");

    svgRule.uses.clear();

    svgRule.use("vue-svg-loader").loader("vue-svg-loader");
  }
};

참고문헌

https://itstory.tk/entry/Spring-Boot-Vuejs-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0

vue cli 2.X

// vue-cli 전역 설치
npm install -g vue-cli

프로젝트 생성

// vue init <template-name> <project-name>
vue init webpack my-project

//실행
npm install
npm run dev 로 실행

vue-cli 에서는 미리 세팅된 몇가지 템플릿을 제공한다.
제공되는 템플릿은 vuejs-templates 에 각각의 레퍼로 저장되어 있다.
vue list 명령어를 통해서 제공되는 템플릿 리스트를 확인할 수 있다.

vue cli 3.X

//설치
npm install -g @vue/cli

버젼으로 설치

npm install -g @vue/cli@^3.1.0
npm r -g vue-cli --지우고 다시 설치 

//시작하기
vue create my-project

//실행
npm run serve

//관리자 vue 페이지
vue ui

참고문헌

http://vuejs.kr/vue/vue-cli/2018/01/27/vue-cli-3/