https://slides.com/hanwoongkim/vue-mvp/live

자기소개

개발과정

약간의 팁

신입 프론트엔드 개발자

어렸을 때 부터 그림 그리길 좋아하고

레고 만들길 좋아하다가

산업공학을 전공해서 HCI 석사를 하고

병특으로 3년간 잡일만 하다가

UX/UI 디자이너로 2년간 일을 하고

이 길이 나의 길이 아닌듯 하여

작년에 HTML, CSS, JS를 공부해서

이제 8개월 된

그러니 ... 가벼운 마음으로 봐 주시길 ...

나의 선생님은 ...

언젠간 써먹겠지 ...

까먹지 않으려고 ...

http://hanwong.github.io

자기소개

개발과정

약간의 팁

마케팅 데이터 시각화 서비스 MVP

운이 좋은 건지... 프론트를 처음부터 끝까지 혼자서 ...

한

프레임웍은

무조건 VueJS로 ~

VueJS Setting

npm install -g vue-cli
vue init webpack magictable-client
  • vue-router
  • vuex
  • axios
  • daisy-chart >> 사내 차트 라이브러리
  • lodash
  • moment

기본 세팅은 간단하게

주요 라이브러리

Plugins

로그인 기능은 플러그인으로 만들어 활용

var AuthPlugin = {
  setToken: function(){},
  destroyToken: function(){},
  getToken: function(){},
  loggedIn: function(){} 
}

export default function(Vue) {
  Vue.auth = AuthPlugin

  Object.defineProperties(Vue.prototype, {
    $auth: {
      get: function () {
        return Vue.auth
      }
    }
  })
}

UI 라이브러리 선정

문서 잘 되 있고

컴포넌트 많고

디자인 심플한

http://element.eleme.io/

15,697

데이터 시각화 컴포넌트

Dash.vue

Chart.vue

Daisy.vue

Table.vue

데이터 시각화 컴포넌트

Dash.vue

Chart.vue

Daisy.vue

props - data, filterList

props - filteredData, options

Table.vue

자기소개

개발과정

약간의 팁

props naming

<  :propData = "thisData"  >

<!-- Dash.vue -->
<app-chart
  :propData="getData"
</app-chart>
// Chart.vue
props: [ 'propData' ]

얘가 쟨지 쟤가 얜지 ???

완전 단방향 데이터

// Chart.vue
props: ['propData'],

data () {
    return {
        chartData: []
    }
},

created () {
    this.chartData = lodash.cloneDeep(this.propData)
},

watch: {
    propData: function () {
        this.chartData = lodash.cloneDeep(this.propData)
    }
}

나는 제본떠서 볼꺼야~

개별 데이터 한번에 받기

// vuex action
setData ({commit}, id) {
    return new Promise((resolve, reject) => {
      axios.get(`data/${id}`)
        .then((res) => {
          commit('SET_DATA', res.data.data)
          resolve(true)
        })
        .catch((error) => {
          reject(false)
        })
    })
}
// component methods
settingData (channels) {
    let fetchData = channels.map((ch) => {
        return this.$store.dispatch('setData', ch.id)
    })
    
    Promise.all(fetchData).then(() => {})
}

귀찮아~ 한번에 모아주면 좋겠지만...

될 때까지 요청하기

// vuex action
hookData ({dispatch}, channelId) {
    return new Promise((resolve, reject) => { 
      axios.get(`status/${channelId}`)
        .then((res) => {
          if (res.data.status) {
            resolve(res.data.status)
          } else {
            reject(false)
          }
        })
        .catch((error) => {
          reject(error)
        })
    })
    .then((pass) => {
      return pass
    }, (fail) => {
      return new Promise((resolve, reject) => {
         setTimeout(() => {
            resolve()
         }, 3000);
      }).then(() => {
         return dispatch('hookData', channelId)
      })
    })
}

recursion Promise??

백지장에 데이터 얹어 놓기

// Dash.vue
import store from '@/store/store' 

export default {
...
     beforeRouteEnter (to, from, next) {
        store.dispatch('setData').then( next() )
     }
...
}

데이터 요청 단계가 많을 땐 beforeRouteEnter

감사합니다.