beomy

[Svelte] 스벨트 입문 A부터 Z까지

버미노트 — Fri, 7 Aug 2020 16:48:13 +0900

스벨트 입문 강의를 출시했습니다.

블로그의 내용과 공식 문서를 토대로 인프런에 스벨트 입문 A부터 Z까지 강의를 출시했습니다. 공식 문서의 내용을 모두 담아 다른 강의나 다른 블로그를 찾아볼 필요 없이 이 강의 하나면 한 번에 해결하실 수 있습니다.

왜 스벨트를 배워야 할까요?

스벨트는 2019년에 등장해 무럭무럭 자라나고 있는 새로운 프론트엔트 프레임워크입니다. 가상돔을 사용하지 않아서 React, Vue와 다른 페러다임을 제시한 프레임워크입니다. 스벨트를 배워두면 좋은 이유를 이야기해 볼께요.

2019년 관심도 1위!

스벨트는 리엑트, 뷰, 앵귤러 프론트엔트 3대장 자리를 위협하며 2019년 관심도 1위를 기록했습니다.

스벨트는 많은 개발자의 관심을 끌게 한 강력한 무기를 가지고 있겠죠?

장점 하나: 낮은 러닝 커브, 코드량 감소

React를 처음 접할 때 헉! 하는 부분은 큰 러닝 커브라고 생각됩니다. 스벨트는 러닝 커브가 높지 않아서 입문자분들도 쉽게 코드를 읽어 내려가실 수 있습니다. 낮은 러닝 커브는 스벨트가 프론트엔트에서 차지하는 파이를 빠르게 높일 수 있는 장점이 아닐까 싶습니다.

장점 둘: 작은 크기의 번들

스벨트는 화면이 변경되었을 때, 변경되는 부분을 정확히 알 수 있어서 가상돔을 사용하지 않습니다. 변경된 부분을 찾기 위한 오버헤드도 발생하지 않고, 런타임도 없어서 번들 크기가 작아 렌더링 속도를 높일 수 있습니다.

장점 셋: 스벨트의 빠른 속도

번들의 크기가 작고, 코드량이 줄고 이런저런 장점들이 있지만 제가 생각하는 가장 눈에 띄는 장점은 속도입니다.

스벨트는 리엑트, 뷰, 앵귤러보다도 빠릅니다. 심지어 속도가 개선됐다고 하는 뷰 3.0보다 더 빠르다고 합니다.

미리미리 배워두어요

이런 추세라면 스벨트가 리엑트, 뷰, 앵귤러 만큼 많은 곳에서 찾는 프레임워크로 성장하는 것은 시간문제로 보입니다. 더 유명해 지기 전에 스벨트 입문강의로 스벨트를 공부해봅시다!

부록: 스벨트를 포스팅 했습니다.

beomy.github.io에 스벨트에 관한 내용을 포스팅했습니다. 공식 문서를 토대로 스벨트 사용방법을 이야기하였습니다.

[Browser] 렌더링 최적화

버미노트 — Mon, 9 Dec 2019 16:22:20 +0900

beomy.github.io에 브라우저에 관한 포스팅을 하였습니다.

주된 내용은 브라우저 구조, 초기 렌더링 최적화, 렌더링 업데이트 최적화에 관련된 내용입니다.

1. 자바스크립트 런타임이란?

자바스크립트 런타임이란, 간단하게 이야기 하자면 자바스크립트를 실행시키는 환경을 이야기 합니다. 브라우저 역시 자바스크립트를 실행시킬 수 있는 환경이기 때문에 브라우저도 자바스크립트 런타임이라고 이야기 할 수 있습니다.

[JavaScript] 자바스크립트 런타임에서 자바스크립트 런타임이 무엇인지 이야기 합니다.

2. 브라우저가 화면을 렌더링 하는 방법

브라우저의 구조는 어떻게 되고, 브라우저가 HTML, CSS, JavaScript를 어떻게 화면에 렌더링 하는지 [Browser] 브라우저 렌더링에서 이야기 합니다.

3. 초기 렌더링 최적화 방법

Critical Rendering Path란 브라우저가 페이지를 처음 렌더링 할 때, HTML과 CSS, JavaScript가 실행되는 순서를 말합니다.
HTML과 CSS, JavaScript가 실행되는 순서를 최적화 한다면 사용자에게 좀 더 빠른 초기 화면을 제공할 수 있습니다.

[Browser] Critical Rendering Path 최적화에서 초기 렌더링을 최적화 하는 방법에 대해 이야기 합니다.

4. 렌더링 업데이트 최적화 방법

요즘 웹페이지는 사용자 행동에 따라 변화무쌍하게 화면이 그려집니다. 렌더링을 업데이트 하는 과정인 reflow와 repaint, reflow를 최적화 하는 방법에 대해 [Browser] Reflow와 Repaint에서 이야기 합니다.

5. 기타: 렌더링 최적화 이해에 도움이 될 수 있는 포스팅

1~4번 까지 포스팅을 하면서 가볍게 이야기 한 내용들을 좀더 자세히 이야기하는 포스팅 들입니다.

[Browser] 리소스 우선순위 - preload, preconnect, prefetch에서는 브라우저에게 리소스 우선순위를 알려줘서 빠르게 렌더링 할 수 있는 힌트를 제공하는 방법에 대해 이야기 합니다.

브라우저는 <script>를 만나게 되면 파싱을 중단하고 스크립트를 다운받고 실행합니다. 파싱이 중단되고 스크립트를 실행하기 때문에 렌더링 속도는 당연히 느려지게 되고 사용성은 떨어집니다. [Browser] async와 defer에서 파싱을 중단하지 않고 스크립트를 다운 받을 수 있는 방법에 대해 이야기 합니다.

포스팅들...

[Vue.JS] Vue.JS 소스코드 분석

버미노트 — Thu, 5 Sep 2019 00:17:22 +0900

github 페이지에 Vue.JS 소스 코드 분석 포스팅을 올렸습니다.
2019년 말에는 Vue 3.0 버전을 출시한다고 해, 이 포스트 시리즈는 곧 outdate 될 것 같습니다.. (공들여 작성했는데...)

[Inside Vue] 1. Introduction - Vue Code 분석
[Inside Vue] 2. Initialize - Vue 코어 함수
[Inside Vue] 3. Initialize - Mixin Layer
[Inside Vue] 4. Initialize - init 함수
[Inside Vue] 5. Reactive - Observer, Dep and Watcher
[Inside Vue] 6. Reactive - Watcher가 업데이트 하는 3가지 방법(Lazy, Sync, Queue)
[Inside Vue] 7. View Render - 컴파일러
[Inside Vue] 8. View Render - baseCompile 함수
[Inside Vue] 9. View Render - Patch

포스팅 내용들이 Vue를 사용하는데 도움이 되길 희망합니다.

[vuex] Testing

버미노트 — Fri, 19 Jul 2019 01:33:06 +0900

Vuex에서 단위 테스트를 하고자 하는 주된 부분은 mutation과 action입니다.

1. Mutation Testing

mutation은 전달인자에 완전히 의존하는 함수이기 때문에, mutation을 테스트 하는 것은 매우 간단합니다.

const state = { ... }

// 변이를 이름을 가지는 내보내기를 이용하여 내보냅니다.
export const mutations = { ... }

export default new Vuex.Store({
  state,
  mutations
})

위의 코드와 같이 mutation과 store를 모두 ES2015의 export를 사용하여 내보내기 하여 테스트 할 때 사용할 수 있습니다.

// store.js
export const mutations = {
  increment: state => state.count++
}

// mutations.spec.js
import { expect } from 'chai'
import { mutations } from './store'

// 변이 가져오기
const { increment } = mutations

describe('mutations', () => {
  it('INCREMENT', () => {
    // mock 상태
    const state = { count: 0 }
    // 변이 적용
    increment(state)
    // 결과 확인
    expect(state.count).to.equal(1)
  })
})

위의 코드는 Mocha + Chai를 사용하여 mutation을 테스팅 하는 예제입니다.

2. Action Testing

action은 보통 외부 API를 호출하기 때문에, 테스트하기 좀 더 까다로울 수 있습니다. action을 테스트 하기 위해서는 몇가지 조작이 필요합니다. 예를 들어 API 호출을 가상의 서비스로 만들고, mock 데이터(테스트 데이터)로 가상의 서비스를 조작해야 합니다. webpack과 inject-loader를 사용하여 테스트 파일을 묶을 수 있습니다.

// actions.js
import shop from '../api/shop'

export const getAllProducts = ({ commit }) => {
  commit('REQUEST_PRODUCTS')
  shop.getProducts(products => {
    commit('RECEIVE_PRODUCTS', products)
  })
}

// actions.spec.js

// 인라인 로더에는 require 구문을 사용하십시오.
// inject-loader를 사용하면 조작된 의존성을
// 주입 할 수있는 모듈 팩토리가 반환됩니다.
import { expect } from 'chai'
const actionsInjector = require('inject-loader!./actions')

// 조작된 모의 응답과 함께 모듈 생성
const actions = actionsInjector({
  '../api/shop': {
    getProducts (cb) {
      setTimeout(() => {
        cb([ /* 모의 응답 */ ])
      }, 100)
    }
  }
})

// 예상되는 변이와 함께 테스팅 액션을 도와주는 헬퍼
const testAction = (action, payload, state, expectedMutations, done) => {
  let count = 0

  // 모의 커밋
  const commit = (type, payload) => {
    const mutation = expectedMutations[count]

    try {
      expect(type).to.equal(mutation.type)
      if (payload) {
        expect(payload).to.deep.equal(mutation.payload)
      }
    } catch (error) {
      done(error)
    }

    count++
    if (count >= expectedMutations.length) {
      done()
    }
  }

  // 모의 저장소와 전달인자로 액션을 부릅니다.
  action({ commit, state }, payload)

  // 디스패치된 변이가 없는지 확인
  if (expectedMutations.length === 0) {
    expect(count).to.equal(0)
    done()
  }
}

describe('actions', () => {
  it('getAllProducts', done => {
    testAction(actions.getAllProducts, null, {}, [
      { type: 'REQUEST_PRODUCTS' },
      { type: 'RECEIVE_PRODUCTS', payload: { /* 모의 응답 */ } }
    ], done)
  })
})

사용하는 테스트 환경에서 Sinon.JS과 같은 스파이를 사용 할 수 있다면,

describe('actions', () => {
  it('getAllProducts', () => {
    const commit = sinon.spy()
    const state = {}

    actions.getAllProducts({ commit, state })

    expect(commit.args).to.deep.equal([
      ['REQUEST_PRODUCTS'],
      ['RECEIVE_PRODUCTS', { /* 모의 응답 */ }]
    ])
  })
})

위의 코드와 같이 testAction 헬퍼 대신에 스파이를 사용하여 코드가 더 간결해 질 수 있습니다.

3. Getters Testing

getter는 mutation과 같이 테스트하는 것이 매우 간단합니다.

// getters.js
export const getters = {
  filteredProducts (state, { filterCategory }) {
    return state.products.filter(product => {
      return product.category === filterCategory
    })
  }
}

// getters.spec.js
import { expect } from 'chai'
import { getters } from './getters'

describe('getters', () => {
  it('filteredProducts', () => {
    // mock state
    const state = {
      products: [
        { id: 1, title: 'Apple', category: 'fruit' },
        { id: 2, title: 'Orange', category: 'fruit' },
        { id: 3, title: 'Carrot', category: 'vegetable' }
      ]
    }
    // 모의 getter
    const filterCategory = 'fruit'

    // getter로 부터 결과를 받습니다
    const result = getters.filteredProducts(state, { filterCategory })

    // 결과 테스트
    expect(result).to.deep.equal([
      { id: 1, title: 'Apple', category: 'fruit' },
      { id: 2, title: 'Orange', category: 'fruit' }
    ])
  })
})

4. 테스트 실행

제대로 작성된 mutation과 action은 브라우저 API와 의존성이 없어야 합니다.

Node에서 테스트

webpack를 사용하여 테스트를 번들로 묶어 Node를 사용하여 직접 실행 할 수 있습니다.

// webpack.config.js
module.exports = {
  entry: './test.js',
  output: {
    path: __dirname,
    filename: 'test-bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
}

webpack
mocha test-bundle.js

위의 방법으로 webpack을 설정하여 테스트 할 수 있습니다. (.babelrc 도 필요합니다.)

브라우저에서 테스트

mocha-loader를 설치합니다.
webpak 설정에서 entry를 'mocha!babel!./test.js'로 변경합니다.
webpack-dev-server를 시작합니다.
localhost:8080/webpack-dev-server/test-bundle로 이동합니다.

Karma + karma-webpack를 사용한 테스트는 vue-loader 참고 바랍니다.

참고

https://vuex.vuejs.org/kr/guide/testing.html

[vuex] Strict Mode와 Form Handling

버미노트 — Tue, 16 Jul 2019 23:43:50 +0900

1. Strict Mode

strict 모드를 사용하기 위해서는 strict: true를 Vuex의 store를 만들 때 추가만 하면 됩니다.

const store = new Vuex.Store({
  // ...
  strict: true
})

strict 모드에서는 state가 mutation 핸들러 외부에서 변경 될 때 마다 오류를 발생 시킵니다.

배포시 strict 모드를 꺼야 합니다. strict 모드는 부적절한 state의 변경을 감지하기 위해 state 트리를 관찰하기 때문에, 성능 저하가 발생합니다. 성능 이슈를 해결하기 위해서는 배포 버전에서는 strict 모드를 꺼야 합니다.

const store = new Vuex.Store({
  // ...
  strict: process.env.NODE_ENV !== 'production'
})

2. Form Handling

strict 모드로 Vuex를 사용하는 경우 v-model을 사용하는 것이 까다로울 수 있습니다.

<input v-model="obj.message">

obj가 store에서 객체를 반환하는 computed 속성이라면 v-model은 사용자의 입력이 있을 때, obj.message를 직접 변경하려고 합니다. 하지만 strict 모드에서는 state의 변경이 mutation 핸들러 내부에서 수행되지 않기 때문에 오류를 발생시킵니다. 이러한 문제점을 해결하는 2가지 방법에 대해 이야기 하도록 하겠습니다.

`value`와 `input`(`change`) 사용하기

첫번째 방법은 value 속성과 input 혹은 change 등의 이벤트를 이용하는 방법입니다.

<input :value="message" @input="updateMessage">

// ...
computed: {
  ...mapState({
    message: state => state.obj.message
  })
},
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}

// ...
mutations: {
  updateMessage (state, message) {
    state.obj.message = message
  }
}

setter와 getter 사용하기

두번째 방법은 computed 속성에 setter와 getter를 정의하는 방법입니다.

<input v-model="message">

// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

참고

https://vuex.vuejs.org/kr/guide/forms.html

[vuex] Plugins

버미노트 — Tue, 16 Jul 2019 22:09:31 +0900

Vuex store는 변이에 대한 훅을 노출하는 plugins 옵션을 제공합니다. 플러그인은 store를 유일한 전달인자로 받는 함수입니다.

const myPlugin = store => {
  // 저장소가 초기화 될 때 불립니다.
  store.subscribe((mutation, state) => {
    // 매 변이시마다 불립니다.
    // 변이는 { type, payload } 포맷으로 제공됩니다.
  })
}

const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})

1. 플러그인 내부에서 변이 커밋하기

변이를 커밋한다는 말은 commit 메소드를 사용하여 mutations의 핸들러를 호출한다는 말로 사용할 것입니다. 플러그인은 state를 직접 변경 할 수 없습니다. 컴포넌트와 마찬가지로 변이를 커밋하여 핸들러를 호출해야 합니다.
플러그인에서 변이를 커밋하여 데이터를 store에 동기화 할 수 있습니다. 예를 들어,

export default function createWebSocketPlugin (socket) {
  return store => {
    socket.on('data', data => {
      store.commit('receiveData', data)
    })
    store.subscribe(mutation => {
      if (mutation.type === 'UPDATE_DATA') {
        socket.emit('update', mutation.payload)
      }
    })
  }
}

const plugin = createWebSocketPlugin(socket)

const store = new Vuex.Store({
  state,
  mutations,
  plugins: [plugin]
})

위의 코드와 같이 websocket를 사용하여 플러그인이 있다면, socket이 data를 전송 받게 되면 커밋하여 store를 동기화 하고, 변이가 커밋 된다면, socket.emit('update', mutation.payload)를 사용하여 socket에 변경된 데이터를 전송 할 수 있습니다.

2. state 스냅샷 가져오기

변이 이전의 state와 변이 이후의 state를 비교해야 할 필요가 있을 수 있습니다. 그러기 위하여, 플러그인의 상태의 스냅샷을 얻어야 합니다. 여기서 스냅샷이란, state가 변경되기 전의 값을 저장하는 객체를 이야기 합니다. 스냅샷을 만들기 위해서는 깊은 복사를 수행해야 합니다.

const myPluginWithSnapshot = store => {
  let prevState = _.cloneDeep(store.state)
  store.subscribe((mutation, state) => {
    let nextState = _.cloneDeep(state)

    // prevState와 nextState를 비교하십시오.

    // 다음 변이를 위한 상태 저장
    prevState = nextState
  })
}

state 스탭샷을 사용하는 플러그인은 개발 모드에서만 사용해야 합니다.

const store = new Vuex.Store({
  // ...
  plugins: process.env.NODE_ENV !== 'production'
    ? [myPluginWithSnapshot]
    : []
})

webpack 또는 Browserify를 사용하는 경우 위의 코드와 같이 작성 할 수 있습니다.

3. 내장 Logger 플러그인

vue-devtools를 사용하면 필요 없을 수 있습니다.

Vuex는 디버깅을 위한 Logger 플로그인을 제공합니다.

import createLogger from 'vuex/dist/logger'

const store = new Vuex.Store({
  plugins: [createLogger()]
})

createLogger 함수는 몇가지 옵션을 가집니다.

const logger = createLogger({
  collapsed: false, // 로그를 가지는 변이 자동 확장
  filter (mutation, stateBefore, stateAfter) {
    // 변이시 항상 로깅해야 한다면 true 를 반환하십시오.
    // 변이는 { type, payload }의 포맷입니다.
    return mutation.type !== "aBlacklistedMutation"
  },
  transformer (state) {
    // 로깅하기전 상태를 변이 하십시오.
    // 예를 들어 특정 하위 트리만 반환합니다.
    return state.subTree
  },
  mutationTransformer (mutation) {
    // 변이는 { type, payload }의 포맷으로 기록됩니다.
    // 원하는 포맷으로 변경할 수 있습니다.
    return mutation.type
  },
  logger: console, // `console` API의 구현체, default `console`
})

Logger 파일은 <script> 태그를 통해 직접 포함 할 수 있습니다. 태그를 통해 직접 포함하였다면, createVuexLogger 함수가 전역으로 노출됩니다. Logger 플로그인은 개발용으로만 사용되어야 합니다.

참고

https://vuex.vuejs.org/kr/guide/plugins.html

[vuex] Modules

버미노트 — Tue, 16 Jul 2019 01:05:56 +0900

하나의 state 트리를 사용하기 때문에 어플리케이션의 모든 state는 하나의 큰 객체 안에 포함됩니다. 프로젝트의 규모가 커질 수록 store의 크기도 커지게 됩니다. Vuex는 이 문제를 해결하기 위해 store를 모듈로 나눌 수 있는 기능을 제공합니다. 각 모듈은 state, mutation, action, getter, 중첩된 모듈을 포함 할 수 있습니다.

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA'의 상태
store.state.b // -> moduleB'의 상태

1. Module Local State

모듈의 mutation과 getter의 핸들러의 첫 번째 전달인자는 모듈의 로컬 state가 됩니다.

const moduleA = {
  state: { count: 0 },
  mutations: {
    increment (state) {
      // state는 지역 모듈 상태 입니다
      state.count++
    }
  },

  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

action의 핸들러의 첫번째 인자는 context입니다. 내부 모듈에서는 context.state는 로컬 state를 나타내고, 루트 state는 context.rootState로 노출됩니다.

const moduleA = {
  // ...
  actions: {
    incrementIfOddOnRootSum ({ state, commit, rootState }) {
      if ((state.count + rootState.count) % 2 === 1) {
        commit('increment')
      }
    }
  }
}

getter의 핸들러에서도 루트 state를 접근할 수 있습니다. getter의 핸들러의 세번째 인자는 루트 state가 됩니다.

const moduleA = {
  // ...
  getters: {
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
}

2. Namespace

기본적으로 모듈 내의 action, mutation, getter는 전역 네임스페이스 아래에 등록됩니다. 여러 모듈의 mutation, action의 핸들러를 동일한 이름으로 만들었다면, 여러 모듈이 동일한 mutation 혹은 action에 반응하게 됩니다.
만약 모듈이 독립적으로 재사용되기 원한다면, namespaced: true를 사용하면 됩니다. 모듈이 등록 될 때, 해당 모듈의 모든 getter, action, mutation은 자동으로 모듈의 경로를 기반으로 네임스페이스가 지정됩니다.

const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true,

      // 모듈 자산
      state: { ... }, // 모듈 상태는 이미 중첩되어 있고, 네임스페이스 옵션의 영향을 받지 않음
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },

      // 중첩 모듈
      modules: {
        // 부모 모듈로부터 네임스페이스를 상속받음
        myPage: {
          state: { ... },
          getters: {
            profile () { ... } // -> getters['account/profile']
          }
        },

        // 네임스페이스를 더 중첩
        posts: {
          namespaced: true,

          state: { ... },
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})

네임스페이스의 getter, action은 로컬의 getters, dispatch, commit을 전달 받습니다. 즉 동일한 모듈 안에서는 접두어 없이 모듈의 자산(actions, mutations, getters, state)들을 사용할 수 있습니다.

네임스페이스 모듈에서 전역 접근

모듈에서 전역의 state나 getter를 사용해야 한다면, rootState와 rootGetters가 getter의 핸들러 함수의 3번째, 4번째 인자로 전달 됩니다. 또한 action의 핸들러 함수의 context 객체의 속성으로도 전역에 접근할 수 있습니다.
전역의 action을 dispatch 하거나, mutation을 commit 하려면, dispatch와 commit의 3번째 전달인자로 { root: true }를 전달하면 됩니다.

modules: {
  foo: {
    namespaced: true,

    getters: {
      // `getters`는 해당 모듈의 지역화된 getters
      // getters의 4번째 인자를 통해서 rootGetters 사용 가능
      someGetter (state, getters, rootState, rootGetters) {
        getters.someOtherGetter // -> 'foo/someOtherGetter'
        rootGetters.someOtherGetter // -> 'someOtherGetter'
      },
      someOtherGetter: state => { ... }
    },

    actions: {
      // 디스패치와 커밋도 해당 모듈의 지역화된 것
      // 전역 디스패치/커밋을 위한 `root` 옵션 설정 가능
      someAction ({ dispatch, commit, getters, rootGetters }) {
        getters.someGetter // -> 'foo/someGetter'
        rootGetters.someGetter // -> 'someGetter'

        dispatch('someOtherAction') // -> 'foo/someOtherAction'
        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'

        commit('someMutation') // -> 'foo/someMutation'
        commit('someMutation', null, { root: true }) // -> 'someMutation'
      },
      someOtherAction (ctx, payload) { ... }
    }
  }
}

네임스페이스 모듈에서 전역 action 등록

네임스페이스 모듈에서 전역 action을 등록하려면, root: true를 표시하고 handler 함수에 action을 정의 하면 됩니다.

{
  actions: {
    someOtherAction ({dispatch}) {
      dispatch('someAction')
    }
  },
  modules: {
    foo: {
      namespaced: true,

      actions: {
        someAction: {
          root: true,
          handler (namespacedContext, payload) { ... } // -> 'someAction'
        }
      }
    }
  }
}

헬퍼에서 네임스페이스 바인딩

헬퍼(mapState, mapGetters, mapActions, mapMutations)를 사용하여 컴포넌트에 네임스페이스 모듈을 바인딩하려고 하면 조금 장황해 질 수 있습니다.

computed: {
  ...mapState({
    a: state => state.some.nested.module.a,
    b: state => state.some.nested.module.b
  })
},
methods: {
  ...mapActions([
    'some/nested/module/foo', // -> this['some/nested/module/foo']()
    'some/nested/module/bar' // -> this['some/nested/module/bar']()
  ])
}

위의 코드를 보면 중복된 문자열들을 볼 수 있습니다. 이렇게 코드가 장황해 지는 것을 최소화 하기 위해 헬퍼의 첫 번째 인자에 네임스페이스 경로를 전달 하여 코드를 단순화 할 수 있습니다.

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

또한 createNamespacedHelpers를 사용하여 네임스페이스 헬퍼를 생성할 수도 있습니다. createNamespaceHelper는 전달된 네임스페이스 값으로 바인딩된 새로운 헬퍼를 반환합니다.

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

export default {
  computed: {
    // `some/nested/module`에서 찾음
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // `some/nested/module`에서 찾음
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}

플러그인 개발자를 위한 주의사항

개발자가 특정 모듈을 위한 플로그인을 만들고, 사용자가 이 플로그인을 사용한다고 가정했을 때, 개발자가 지정한 네임스페이스와 사용자가 기존에 사용하고 있던 네임스페이스와의 충돌이 발생할 수 있습니다. 이러한 상황을 피하기 위해서 플로그인 옵션을 통해 네임스페이스 값을 전달 받는 것이 좋습니다.

// 플러그인 옵션을 통해 네임스페이스 값 전달
// 그리고 Vuex 플러그인 함수를 반환
export function createPlugin (options = {}) {
  return function (store) {
    // add namespace to plugin module's types
    const namespace = options.namespace || ''
    store.dispatch(namespace + 'pluginAction')
  }
}

3. 동적 모듈 등록

store.registerModule 메소드를 사용하여 store가 생성된 후에 모듈을 등록 할 수 있습니다.

store.registerModule('myModule', {
  // ...
})

// `nested/myModule` 중첩 모듈 등록
store.registerModule(['nested', 'myModule'], {
  // ...
})

위의 코드는 store.state.myModule과 store.state.nested.myModule로 노출됩니다.

동적 모듈 등록을 사용하면 다른 Vue 플로그인도 어플리케이션의 store에 모듈을 연결하여 상태 관리에 Vuex를 활용할 수 있습니다. 쉽게, 동적 모듈을 사용하면 Vue 플로그인에서도 Vuex를 사용할 수 있게 된다고 이야기 할 수 있습니다, 예를 들어 vuex-router-sync 라이브러리는 vue-router와 vuex를 사용한 라이브러리입니다.

store.unregisterModule(moduleName)을 사용하여 동적으로 등록 된 모듈을 제거할 수도 있습니다. 하지만 이 방법으로는 정적으로 생성된 모듈(store 생성시 선언 되는 모듈)은 제거 할 수 없습니다.

`registerModule` 사용 할 때, state 보존하기

새 모듈을 등록할 때, 이전 state를 유지해야 한다면, store에 이미 해당 모듈의 state가 포함되어 있어 덮어 쓰지 않아야 한다면, preserveState 옵션을 사용하면 됩니다.
store.registerModule('a', module, { preserveState: true })와 같이 prserveState: true를 하면 모듈이 등록 되고, action, mutation, getter가 store에 추가 되지만, state는 변경 되지 않습니다.

4. 모듈 재사용

동일 모듈을 사용하는 여러 store를 생성하거나, 동일한 모듈을 동일한 store에 여러번 등록 하는 등. 한 모듈에서 여러 인스턴스를 생성해서 사용해야 할 때가 있습니다. state에 일반 객체(예를 들어, state: { ... })를 사용하여 모듈의 state를 선언하면 state 객체가 참조에 의해 공유되기 때문에 state의 오염을 일으킵니다.
예를 들어, A 모듈을 2번 store에 등록 할 경우 (첫번째 A 모듈을 A1으로 두번째 모듈을 A2로 이야기 하겠습니다.) store에 등록한 A1 모듈의 state와 A2 모듈의 state는 완전히 다른 객체인 것 같지만 참조에 의해 공유 됩니다. 즉 어떤 부분(Object, Array...)은 공유하는 객체입니다.
이 문제는 Vue 컴포넌트의 data를 함수로 만들어 객체를 리턴해야 하는 이슈와 완전히 동일한 이슈입니다. 동일한 이슈이기 때문에 역시 해결 방법도 동일합니다. 함수를 사용하여 모듈 state를 선언합니다. (2.3.0+)

const MyReusableModule = {
  state () {
    return {
      foo: 'bar'
    }
  },
  // 변이, 액션, getters...
}

참고

https://vuex.vuejs.org/guide/modules.html

[vuex] Actions

버미노트 — Thu, 11 Jul 2019 00:40:08 +0900

Action은 Mutation과 비슷하지만, 몇가지 차이점이 있습니다.

state를 변경하지 않고 Mutation의 핸들러 함수를 호출합니다.
비동기 작업을 수행할 수 있습니다.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

위의 코드와 같이 action을 등록 할 수 있습니다. action의 핸들러는 context 객체를 전달인자로 받습니다. context 객체는 store의 메소드와 속성들을 가지고 있는 객체입니다. 그래서 context.commit를 호출하여 Mutation의 핸들러를 호출하거나, context.state와 context.getters를 통해 state와 getter에 접근 할 수 있습니다.

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

코드를 단순화하기 위해서 ES6에 추가된 구조분해할당를 사용할 수 있습니다.

1. Dispatch

action의 핸들러는 store.dispatch 메소드를 사용하여 호출 할 수 있습니다.

store.dispatch('increment')

store.commit('increment')를 직접 호출하지 않는 이유는 비동기에 있습니다. Mutation은 반드시 동기적으로 작성되어야 한다고 이전 포스트([vuex] Mutations 참고)에서 이야기 했습니다.

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

action의 핸들러에서는 위의 코드와 같이 비동기 작업을 수행 할 수 있습니다.

객체 스타일 payload

Mutation과 동일하게 객체 스타일 payload 기능을 제공합니다.

// 페이로드와 함께 디스패치
store.dispatch('incrementAsync', {
  amount: 10
})

// 객체와 함께 디스패치
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

비동기 Back-End API 호출

action의 실용적인 사용법은 비동기 Back-End API를 호출 하는 것입니다.

actions: {
  checkout ({ commit, state }, products) {
    // 장바구니에 현재있는 항목을 저장하십시오.
    const savedCartItems = [...state.cart.added]

    // 결제 요청을 보낸 후 장바구니를 비웁니다.
    commit(types.CHECKOUT_REQUEST)

    // 상점 API는 성공 콜백 및 실패 콜백을 받습니다.
    shop.buyProducts(
      products,
      // 요청 성공 핸들러
      () => commit(types.CHECKOUT_SUCCESS),
      // 요청 실패 핸들러
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

위의 예제 코드와 같이 action의 효율적인 사용방법은 Back-End 비동기 API를 호출하고, 응답을 받은 후 Mutation의 핸들러를 호출하여 state를 변경하는 것입니다.

2. `mapActions`

this.$store.dispatch('xxx')를 사용하여 컴포넌트에서 action의 핸들러 함수를 호출할 수 있습니다. 또 다른 방법으로 mapActions를 사용할 수 있습니다.

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment' // this.increment()을 this.$store.dispatch('increment')에 매핑
    ]),
    ...mapActions({
      add: 'increment' // this.add()을 this.$store.dispatch('increment')에 매핑
    })
  }
}

3. Action 사용하기

이제는 Action을 어떻게 사용할 수 있는지 이야기 해 보도록 하겠습니다. action은 종종 비동기적으로 작성됩니다. action의 비동기처리는 어떻게 할 수 있는지 이야기 할 것입니다.
store.dispatch의 반환 값은 Promise입니다. store.dispatch로 호출한 action의 핸들러 함수의 Promise 반환 값을 처리 할 수 있습니다.

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

action의 핸들러 함수가 위의 코드와 같이 작성되었다면,

store.dispatch('actionA').then(() => {
  // ...
})

위의 코드와 같이 Promise의 비동기처리를 사용할 수 있습니다.

// getData() 및 getOtherData()가 Promise를 반환한다고 가정합니다.
actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // actionA가 끝나기를 기다립니다.
    commit('gotOtherData', await getOtherData())
  }
}

Promise를 사용할 수 있다면, 당연히 ES8에 추가된 async/await 문법([자바스크립트] ES8(ECMA Script 8) - async, await 참고)도 사용 할 수 있습니다.

actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

또, 위의 코드와 같이 action의 핸들러 안에서 다른 action의 핸들러를 호출 할 수도 있습니다.

참고

https://vuex.vuejs.org/guide/actions.html

[vuex] Mutations

버미노트 — Wed, 10 Jul 2019 23:23:40 +0900

Vuex의 store에서 실제로 state를 변경할 수 있는 유일한 방법은 변이(Mutation) 하는 것입니다. Vuex의 Mutation은 이벤트와 유사합니다. 각 Mutation에서는 문자열 타입과 핸들러가 있습니다. 핸들러 함수는 실제 state를 수정하는 곳이고, 첫번째 전달인자로 state를 받습니다.

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 상태 변이
      state.count++
    }
  }
})

Mutation의 핸들러를 직접 호출 할 수는 없습니다. mutation 옵션은 이벤트 등록과 비슷합니다. 타입이 increment인 Mutation가 발생하면 핸들러를 호출합니다.

store.commit('increment')

Mutation 핸들러를 호출하려면 위의 코드처럼 store.commit을 사용해야 합니다.

1. Commit with payload

Matation을 커밋한다는 말은 Mutation 핸들러를 실행 시킨다는 말로 사용할 것입니다. Commit with payload란 Mutation 핸들러에 payload를 전달하는 의미입니다. store.commit에 payload라고 하는 추가 전달인자를 사용할 수 있습니다.

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}

store.commit('increment', 10)

대부분의 경우 payload는 여러 필드를 포함 할 수 있는 객체를 사용하는 것이 좋습니다.

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

store.commit('increment', {
  amount: 10
})

객체 스타일 payload 커밋

Mutation를 커밋하는 또 다른 방법은 type 속성을 가진 객체를 사용하는 것입니다.

store.commit({
  type: 'increment',
  amount: 10
})

객체 스타일 커밋을 사용할 때 사용 된 객체는 Mutation 핸들러에 payload로 전달 되기 때문에 핸들러는 동일하게 사용 하면 됩니다.

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

2. 변이(Mutation)는 Vue의 반응성 규칙을 따릅니다.

Vuex의 state를 관찰 하고 있는 컴포넌트가 Vuex의 state 변경을 감지하고 자동으로 화면을 업데이트 해줍니다. 자동으로 화면을 업데이트 하기 위해서는 2가지를 지켜야 합니다.

사용하는 모든 필드를 store에 초기화 하는 것이 좋습니다.
객체에 새 속성을 추가 할 때, Vue.set(obj, 'newProp', 123)을 사용하거나, 객체를 새로운 객체로 교체해야 합니다.

state.obj = { ...state.obj, newProp: 123 }

위의 코드와 같이 객체 전개 연산자를 사용하여 새로운 객체로 교체 할 수 있습니다.

3. Mutation Type 상수

Flux 구현에서 mutation type 상수를 사용하는 것이 일반적입니다. 상수들을 하나의 파일에 저장하면 여러 작업자들이 전체 어플리케이션이 어떤 Mutation이 있는지 한 눈에 파악 할 수 있습니다.

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // ES2015에서 계산 된 프로퍼티 이름 기능을 사용하여
    // 상수를 함수 이름으로 사용할 수 있습니다
    [SOME_MUTATION] (state) {
      // 변이 상태
    }
  }
})

Mutation Type 상수를 따로 관리할지 결정하는 것은 온전히 개발자의 선택에 달려있습니다.

4. Mutation의 핸들러 함수는 반드시 동기적이어야 합니다.

Mutation의 핸들러 함수는 반드시 동기적으로 작성되어야 합니다.

mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count++
    })
  }
}

예를 들면, 위의 코드와 같이 비동기로 동작하는 코드가 있습니다. 디버깅 하기 위해 devtool를 이용하여 mutation 로그를 보고 있다고 가정합시다. devtool은 state의 이전과 이후를 스냅샷으로 캡처해야 합니다. 그러나 Mutation이 비동기적으로 동작한다면, 핸들러 함수가 종료되었지만 state가 변경되지 않는 상태가 발생합니다. devtool 입장에서는 핸들러 함수 속에 있는 콜백함수가 실제로 호출되었는지 알 수 있는 방법이 없습니다. 이러한 이유로 Mutation의 핸들러 함수는 반드시 동기적이어야 합니다.

5. `mapMutations`

this.$store.commit('xxx')를 사용하여 컴포넌트에서 Mutation의 핸들러 함수를 호출할 수 있습니다. store.commit와 동일한 역할을 하는 헬퍼는 mapMutations 입니다.

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment' // this.increment()를 this.$store.commit('increment')에 매핑합니다.
    ]),
    ...mapMutations({
      add: 'increment' // this.add()를 this.$store.commit('increment')에 매핑합니다.
    })
  }
}

위의 코드와 같이 mapMutations를 사용할 수 있습니다.

참고

https://vuex.vuejs.org/kr/guide/mutations.html

[vuex] Getters

버미노트 — Tue, 2 Jul 2019 23:06:21 +0900

state를 계산한 값을 사용해야 할 때가 있습니다.

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

todos라는 state에서 done 상태인 리스트를 가져오고 싶을 때 위의 코드와 같이 작성할 수 있습니다. 하지만 여러 컴포넌트에서 이 코드를 사용해야 한다면, 위의 코드를 복사해야 한다는 단점이 있습니다. 동일한 코드를 복사하여 사용하게 된다면 당연히 유지보수는 힘들어지겠죠.
이 단점을 해결하기 하기 위해서 Vuex는 Getter 기능을 제공합니다. store에서 사용하는 컴포넌트의 computed 속성과 비슷하다고 생각하면 이해하기 쉽습니다. computed 속성 처럼 종속성에 따라 결과를 캐시하고, 종속성이 변경된 경우에만 다시 계산합니다. 여기서 말한 종속성이란 결과를 계산하기 위해 사용된 원천 자료(source of truth)을 이야기 합니다.

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

getter의 첫번째 인자값은 state 입니다.

1. Property 스타일

getter는 store.getters 객체를 통해 사용할 수 있습니다. property 값처럼 사용할 수 있습니다.

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

getter는 두번째 전달인자로 getters를 전달 받습니다. getters를 사용하여 다른 getter를 사용할 수 있습니다.

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

위의 코드와 같이 컴포넌트에서 getter를 사용할 수 있습니다.

2. Method 스타일

함수를 반환하여 getter에 전달인자를 넘겨줄 수도 있습니다.

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

getter를 메소드처럼 사용할 경우 결과를 캐시하지 않기 때문에, 호출할 때마다 값을 다시 계산하게 됩니다.

3. `mapGetters`

mapGetters는 store의 getter를 computed 속성에 매핑합니다.

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    // getter를 객체 전개 연산자(Object Spread Operator)로 계산하여 추가합니다.
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

mapGetters 사용방법은 이전 포스트에서 이야기한 mapState와 사용방법이 동일합니다.

...mapGetters({
  // this.doneCount를 store.getters.doneTodosCount에 매핑하십시오.
  doneCount: 'doneTodosCount'
})

객체를 사용하면 getter를 다른 이름으로 매핑할 수 있습니다.

참고

https://vuex.vuejs.org/kr/guide/getters.html

[vuex] State

버미노트 — Fri, 28 Jun 2019 17:52:03 +0900

1. 단일 상태 트리 (Single State Tree)

Vuex는 단일 상태 트리(single state tree)를 사용합니다. 즉 이말은, 하나의 객체가 모든 어플리케이션의 state를 포함하고 이 객체가 하나의 원본 소스(single source of truth)입니다. 하나의 어플리케이션은 하나의 store만 가진다는 것을 의미합니다. 단일 상태 트리는 특정 state를 바로 찾을 수 있게 만들고, 현재 앱의 state의 스냅샷을 가져올 수 있어 디버깅을 간편하게 만듭니다.

2. Vuex의 state를 Vue 컴포넌트에 가져오기

Vuex의 store를 Vue 컴포넌트에서 사용할 수 있는 가장 간단한 방법은 computed 속성을 사용하는 것입니다.

// Counter 컴포넌트를 만듭니다
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

store.state.count가 변경 되면, computed 속성이 다시 평가되고, DOM이 업데이트 됩니다. 그러나 이 패턴은 전역 store 싱글톤에 의존적이게 됩니다. 컴포넌트에서 사용하기 위해서는 store를 사용하는 모든 컴포넌트에서 store를 import해야 합니다.
Vuex는 store 옵션(Vue.use(Vuex)에 인해 가능)으로 루트 컴포넌트의 모든 자식 컴포넌트에 store를 주입하는 메커니즘을 제공합니다.

const app = new Vue({
  el: '#app',
  // "store" 옵션을 사용하여 저장소를 제공하십시오.
  // 그러면 모든 하위 컴포넌트에 저장소 인스턴스가 삽입됩니다.
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

루트 인스턴스에 store 옵션을 제공함으로써, 루트 컴포넌트의 모든 자식 컴포넌트에서는 this.$store를 사용할 수 있게 됩니다.

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

위의 코드와 같이 store.state.count에서 this.$store.state.count로 store를 this.$store로 대체 할 수 있게 됩니다.

3. `mapState`

컴포넌트에서 여러개의 state나 getter를 사용해야 할 때가 있습니다. 그럴 때 모두 computed 속성에 정의하면 코드가 장황해 질 수 있습니다. mapState를 사용하면 이러한 문제를 해결 할 수 있습니다.

// 독립 실행 형 빌드에서 헬퍼가 Vuex.mapState로 노출됩니다.
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 화살표 함수는 코드를 매우 간결하게 만들어 줍니다!
    count: state => state.count,

    // 문자열 값 'count'를 전달하는 것은 `state => state.count`와 같습니다.
    countAlias: 'count',

    // `this`를 사용하여 로컬 상태에 액세스하려면 일반적인 함수를 사용해야합니다
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

computed 속성에 매핑된 이름과 state의 하위 트리 이름이 같을 때 (예를 들면, store.state.count를 computed 속성의 count에 매핑하려고 할 때 count 이름이 동일합니다.) mapState에 string 배열을 넘길 수도 있습니다.

computed: mapState([
  // this.count를 store.state.count에 매핑 합니다.
  'count'
])

위의 코드와 같이 더욱 간단하게 코딩 할 수 있게 됩니다.

객체 전개 연산자

mapState는 객체를 반환합니다. mapState의 반환값을 computed 속성에 할당하기 때문에, 이제까지 이야기한 방법으로는 다른 computed 속성을 사용할 수 없습니다. 다른 computed 값들과 store의 값들을 computed에 정의하여 함께 사용하고 싶을 때, 객체 전개 연산자 (Object Spread Operator)를 사용하면 됩니다.

computed: {
  localComputed () { /* ... */ },
  // 이것을 객체 전개 연산자(Object Spread Operator)를 사용하여 외부 객체에 추가 하십시오.
  ...mapState({
    // ...
  })
}

4. 컴포넌트는 여전히 로컬 state를 가질 수 있습니다.

(여기서 state는 어플리케이션의 정보를 담고 있는 무언가..라는 의미로 사용하였습니다.)
Vuex를 사용한다고 해서 모든 state를 Vuex의 store에 저장해야 하는 것은 아닙니다. state가 단일 컴포넌트에만 사용하는 경우나 다른 컴포넌트에서 사용하지 않는 state의 경우에는 로컬 state를 사용할 수 있습니다.

참고

https://vuex.vuejs.org/kr/guide/state.html

[vuex] Vuex 시작하기

버미노트 — Wed, 26 Jun 2019 15:48:07 +0900

모든 Vuex 어플리케이션의 중심에는 store가 있습니다. store는 어플리케이션의 상태를 저장하는 컨테이너입니다. Vuex의 store와 전역객체와 두가지 차이점이 있습니다.

Vuex store는 반응형입니다. Vuex store가 변경되면 컴포넌트는 변경된 store를 감지하여 화면을 업데이트합니다.
store의 state를 직접 변경 할 수 없습니다. store의 상태를 변경할 수 있는 유일한 방법은 commit을 통해 mutations를 이용하는 방법입니다. 이렇게 하면 state 변화를 추척할 수 있고, 디버깅도 용이해 집니다.

1. Vuex 예시

state와 mutations를 사용한 간단한 Vuex 예제입니다.

// 모듈 시스템(npm 혹은 yarn)을 사용하는 경우 Vue.use(Vuex)를 먼저 호출해야합니다.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

위의 예제와 같이 Vuex를 설정하면, store.state를 사용하여 state객체에 접근 할 수 있습니다.

store.commit('increment')

console.log(store.state.count) // -> 1

store.commit을 이용하여 mutations의 메소드에 접근 할 수 있고, 이 메소드를 이용하여 state를 변경 할 수 있습니다.
store.state.count를 직접 변경하지 않고 mutations를 통해 변경하는 이유는 state 변화를 추척하기 위해서 입니다. state 변화를 추척할 수 있기 때문에 디버깅이 편해집니다.
컴포넌트 안에서 store의 state를 사용한다는 말은, 쉽게 말해서 컴포넌트의 computed 속성에 store의 state를 리턴하는 함수를 정의한다는 말입니다.
Vuex 카운터 앱에서 코드를 확인 할 수 있습니다.

2. Vuex 어플리케이션 구조

이제는 Vuex를 사용하는 어플리케이션의 구조에 대해 이야기 할 것입니다. 이번 내용은 Vuex의 모듈 내용을 아주 약간 포함하고 있지만, 그냥 그런것이 있구나 정도로 이해하고 넘어가셔도 무방할 것 같습니다.

├── index.html
├── main.js
├── api
│   └── ... # API 요청을 위한 추상화를 포함합니다.
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 모듈을 조합하고 저장소를 내보내는 곳 입니다.
    ├── actions.js        # 루트 액션
    ├── mutations.js      # 루트 변이
    └── modules
        ├── cart.js       # cart 모듈
        └── products.js   # products 모듈

위의 프로젝트 구조는 단순한 예제로 Vuex는 코드 구조를 제한하지 않습니다. 다만 3가지 원칙은 반드시 지켜야 합니다.

Application-level state는 중앙 집중식 store입니다.
state를 변경하는 유일한 방법은 commit을 통한 mutations를 이용하는 것입니다.
비동기 로직은 캡슐화 되어야 하며, actions에서 비동기 로직이 사용되어야 합니다.

위의 3가지 원칙만 지킨다면 프로젝트 구조화 하는 것은 사용자에게 달려 있습니다.

참고

[vuex] Vuex란

버미노트 — Wed, 26 Jun 2019 01:17:21 +0900

Vuex는 Vue.js 어플리케이션을 위한 상태 관리 패턴 + 라이브러리 입니다. 어플리케이션의 모든 컴포넌트를 위한 중앙 집중식 저장소 역할을 합니다. 상태 변화를 예측하기 쉽도록 도와 줍니다 Vue에서 devtools 확장 프로그램을 지원하여 디버깅이 매우 편합니다.

1. 상태 관리 패턴

Vue.js로 작성한 간단한 카운터 앱을 예제로 이야기 하도록 하겠습니다.

new Vue({
  // 상태
  data () {
    return {
      count: 0
    }
  },
  // 뷰
  template: `
    <div>{{ count }}</div>
  `,
  // 액션
  methods: {
    increment () {
      this.count++
    }
  }
})

상태: 앱을 작동하는 진실의 근원(source of truch)입니다.
뷰: 상태의 선언적 매핑입니다.
액션: 뷰에서 사용자 입력에 따라 반응적으로 상태를 바꾸는 방법입니다.

사용하는 단어가 어려워서 그렇지 간단히 이야기 하면, 상태는 화면을 나타내는 데이터의 근원이고, 뷰는 상태를 화면에 그리는 역할을 하고, 액션은 상태를 바꾸는 역할을 합니다. 상태 관리 패턴이랑, 위의 3가지 중 상태를 관리하는 패턴을 말합니다.

2. 단반향 데이터 흐름

상태, 뷰, 액션은 위의 그림과 같이 단방향 데이터 흐름으로 동작합니다. 단방향 데이터 흐름 데이터 흐름이 단순하여 상태 변화를 예측가능한 수준으로 만듭니다 하지만 동일한 상태를 공유해야 하는 여러 컴포넌트가 있는 경우 단반향 데이터 흐름의 단순함은 급격히 저하됩니다.

- 단방향 데이터 흐름의 문제점

같은 상태를 여러 컴포넌트가 공유해야 할 경우 크게 두가지를 신경써야 합니다.

여러 뷰가 같은 상태에 의존할 때

간단히 말하면, 여러개의 뷰가 하나의 상태에 따라 화면이 그려질 때입니다. 여러개가 중첩된 컴포넌트에 데이터를 흘려 보내줘야 할 경우, 컴포넌트의 props가 장황해 질 수 있습니다. 또한 형제 컴포넌트에는 props로 데이터를 넘겨줄 수 없기 때문에 형제 컴포넌트에서는 동작하지 않는 문제점이 있습니다.

서로 다른 뷰의 작업이 동일한 상태에 반영해야 할 때

여러개의 뷰가 하나의 상태를 변경해야 할 경우를 말합니다. 직접 부모/자식 인스턴스를 참조하거나 이벤트를 통해 상태의 복사본을 만들어 변경하고 동기화 하는 해결 방법을 사용해야 합니다.

3. Vuex의 필요성

위의 2가지 문제는 유지보수가 어려운 코드를 만들어 냅니다. 이 문제를 해결하기 위해서는 컴포넌트에서 공유해야 하는 상태를 추출하고 이를 전역 싱글톤으로 관리해야 합니다. 이 방법을 통해서 컴포넌트 트리는 단순히 커다란 뷰가 되고, 모든 컴포넌트는 트리에 상관없이 상태에 엑세스 하거나 상태를 변경할 수 있게 하는 동작을 트리거 할 수 있게 됩니다.

이런 개념이 Flux, Redux, The Elm Architecture에서 영감을 받은 Vuex의 기본 아이디어입니다.

4. Vuex 구조

컴포넌트는 Dispatch를 통해 Actions을 접근합니다.
Action에서는 보통 Backend API를 호출하여 값을 가져온 후에, Commit을 통해 Mutations에 접근합니다.
Mutations에서는 크롬 확장 프로그램인 Devtools와 통신을 하여 디버깅이 쉽도록 기능을 제공하는 역할을 할 뿐 이니라, Mutate 를 통해 State를 변경 합니다.
State가 변경되면 컴포넌트는 다시 렌더링 되어 화면에 나타냅니다.

위의 그림은 Vuex의 구조를 간략히 나타내는 큰 그림입니다. 일반적으로 위의 4가지의 순서로 Vuex가 동작합니다.

참고

[vuex] Vuex 설치하기

버미노트 — Sun, 23 Jun 2019 23:45:27 +0900

1. 직접 다운로드 / CDN

https://unpkg.com/vuex
위의 링크는 NPM 기반의 CDN 링크를 제공합니다. 항상 최신 NPM 릴리즈 버전을 가르킵니다. https://unpkg.com/vuex@2.0.0과 같이 특정 버전/태그를 사용할 수 있습니다.
vue 선언 뒤에 vuex를 추가하면 자동으로 설치됩니다.

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

2. NPM / Yarn

npm install vuex --save # NPM
yarn add vuex # Yarn

위의 코드와 같이 npm과 yarn을 사용하여 설치할 수 있습니다. 위의 방법으로 설치하기 위해서는 Vue.use()를 사용해야 합니다.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

3. 주의 사항

Vuex는 사용하기 위해서는 Promise 기능이 필요합니다. 만약 대상 브라우저가 Promise를 지원하지 않는다면, es6-promise 등을 사용하여 Promise를 polyfill 해야 합니다.

CDN으로 추가

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

위의 코드와 같이 <script>를 선언하면 window.Promise를 사용할 수 있습니다.

NPM / Yarn으로 추가

npm install es6-promise --save # NPM
yarn add es6-promise # Yarn

위의 코드를 사용하여 패키지를 설치 한 후에,

import 'es6-promise/auto'

Vuex를 사용하기 전에 위의 코드를 아무 곳에나 추가하면 됩니다.

참고

https://vuex.vuejs.org/kr/installation.html

[vue-router] Lazy Loading Routes

버미노트 — Wed, 19 Jun 2019 00:24:23 +0900

번들러를 사용하여 앱을 빌드할 때, JavaScript 번들이 커지게 되면 페이지 로드하는데 걸리는 시간이 길어지게 됩니다. 각각 라우트 컴포넌트 단위로 나누고 그 라우트에 방문하게 될 때 파일을 로드하는 것이 더 효율적입니다.

1. Vue의 비동기 컴포넌트 + Webpack의 코드 분할

Vue의 비동기 컴포넌트([Vue.JS] 컴포넌트 (고급:Dynamic & Async Components) 참고)와 Webpack의 코드 분할(Code Splitting 참고)을 결합하여 Lazy Loading Route를 쉽게 구현 할 수 있습니다.

Vue의 비동기 컴포넌트

비동기 컴포넌트는 Promise를 반환하는 팩터리 함수를 이용하여 만들 수 있씁니다. 컴포넌트 정의는 resolve 함수의 인자로 전달 되어야 합니다.

const Foo = () => Promise.resolve({ /* 컴포넌트 정의 */ })

Webpack의 코드 분할

Webpack 2의 Dynamic Import를 사용하여 코드를 분할 할 수 있습니다. (Lazy Loading Route는 비동기 컴포넌트를 사용하기 때문에 Promise를 반환하는 Dynamic Import를 사용해야 합니다.)

import('./Foo.vue') // returns a Promise

위의 문법을 사용하기 위해서는, Babel을 사용하고 있는 경우에는 syntax-dynamic-import 플러그인을 추가해야 올바른 구문 분석을 할 수 있습니다.

Vue의 비동기 컴포넌트 + Webpack의 코드 분할

위의 두가지 방법을 결합하여 Webpack에 의해 자동으로 코드를 분할하는 비동기 컴포넌트를 정의 할 수 있습니다.

const Foo = () => import('./Foo.vue')

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

라우트 설정은 아무것도 바꿀 필요가 없습니다. 위에서 이야기 한 방법으로 Lazy loading Route를 구현 할 수 있습니다.

2. 같은 Chunk로 컴포넌트 묶기

동일한 라우트에 사용되는 모든 컴포넌트를 하나의 비동기 Chunk로 묶을 수 있습니다. 이를 위해 특별한 주석 문법을 사용하고, Chunk 이름만 주석에 제공해 주면 됩니다.

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

이렇게 하면, Webpack은 동일한 Chunk 이름을 가지는 비동기 모듈을 동일한 Chunk로 그룹화 합니다.

참고

https://router.vuejs.org/guide/advanced/lazy-loading.html

[vue-router] Scroll Behavior

버미노트 — Mon, 17 Jun 2019 23:51:27 +0900

client-side 라우팅을 할 때, 새로운 라우트로 이동 할 때 스크롤을 맨 위로 위치하게 하거나, 페이지를 다시 로드 했을 때 스크롤 위치를 유지하게 할 수 있습니다. 심지어 스크롤 위치를 원하는데로 커스터 마이징 할 수도 있습니다.

이 기능은 브라우저가 history.pushState를 제공 해야 동작합니다.

1. `scrollBehavior` 함수

vue-router 인스턴스를 생성할 때 scrollBehavior 함수를 정의하면 됩니다.

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return desired position
  }
})

전달 인자

scrollBehavior 함수는 to와 from, savedPosition을 전달인자로 받습니다. savedPosition은 브라우저의 앞으로 가기 혹은 뒤로 가기 동작인 popstate 네비게이션에만 사용할 수 있습니다.

리턴값

scrollBehavior 함수는, { x: number, y: number } 또는 { selector: string, offset? : { x: number, y: number }} 두가지의 객체를 리턴해야 합니다. falsy 값(거짓으로 판단되는 값들.. 0, 공백 등..) 혹은 빈 객체를 리턴할 경우 스크롤이 일어나지 않습니다.

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

위의 예제는 네이게이션이 될 때마다 스크롤이 최상단으로 이동하는 예제입니다.

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

앞으로 가기/뒤로 가기 버튼을 눌렀을 때, 위의 코드와 같이 savedPosition을 리턴 할 경우 native와 유사한 동작을 하게 됩니다.

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
      // , offset: { x: 0, y: 10 }
    }
  }
}

위크 코드와 같이 라우트 메타 필드를 이용하면 좀더 세분화 된 스크롤 동작을 조작할 수 있습니다.

2. Async Scrolling

2.8.0에 새롭게 추가된 기능입니다.

scrollBehavior 함수가 Promise를 리턴할 수도 있습니다. 스크롤 되기 원하는 위치를 resolve 함수의 인자값으로 전달 하면 됩니다.

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0 })
    }, 500)
  })
}

좀 더 다양한 구현이 가능하여, 페이지가 전환될 때 스크롤 동작을 좀 더 멋있게 나타낼 수 있습니다.

참고

https://router.vuejs.org/guide/advanced/scroll-behavior.html

[vue-router] Data Fetching

버미노트 — Mon, 17 Jun 2019 22:23:07 +0900

이번 포스트에서는 라우트가 활성화 될 때 서버에서 데이터를 가져오는 2가지 방법에 대해 이야기 할 것입니다.

첫번째 방법은, 네비게이션이 된 후 데이터를 가져오는 방법 입니다.
네비게이션을 먼저 동작하고, 활성화 된 라우트 컴포넌트의 라이프 사이클 훅에서 데이터를 가져오는 방법입니다. 데이터를 가져오는 동안에 로딩 상태를 표시합니다.

두번째 방법은, 네비게이션이 되기 전 데이터를 가져오는 방법입니다.
컴포넌트 내부 가드를 사용하여 네비게이션 되기 전에 데이터를 가져오는 방법입니다. 데이터를 가져오는 것이 끝나면 네비게이션이 동작합니다.

1. 네비게이션이 된 후 데이터 가져오기

이 방법은 즉시 네비게이션이 된 후, 컴포넌트가 렌더링 되어 컴포넌트의 라이프 사이클 훅인, created 훅에서 데이터를 가져오는 방식입니다. 이 방법은 네트워크를 통해 데이터를 가져오는 동안 로딩 상태를 나타낼 수 있는 기회를 제공합니다. 또한 각각의 view에서 다른 로딩 처리를 할 수도 있습니다.

$route.params.id를 사용하여 데이터를 가져오는 Post 컴포넌트 예제를 만들어 보겠습니다.

<template>
  <div class="post">
    <div v-if="loading" class="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // fetch the data when the view is created and the data is
    // already being observed
    this.fetchData()
  },
  watch: {
    // call again the method if the route changes
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // replace `getPost` with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

위의 예제는 컴포넌트가 렌더링 되어, created 훅에서 $route.params.id를 이용하여 데이터를 가져오는 예제입니다. watch 옵션에 $route를 등록하여, 라우트가 변경 되었을 때 다시 데이터를 가져올 수 있도록 만들었습니다. 데이터를 가져오는 동안에는 this.loading이 true가 되고, 데이터 가져오는 것이 완료되면 false가 됩니다.

2. 네이게이션이 되기 전에 데이터 가져오기

이 방법은 새로운 라우트가 활성화 되기 전에 데이터를 가져오는 방법입니다. 컴포넌트 내부 가드인 beforeRouteEnter 가드에서 데이터를 가져옵니다. 데이터 가져오기가 완료 된 후에는 next 함수를 호출해야 합니다.

export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  // when route changes and this component is already rendered,
  // the logic will be slightly different.
  beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },
  methods: {
    setData (err, post) {
      if (err) {
        this.error = err.toString()
      } else {
        this.post = post
      }
    }
  }
}

데이터 가져오기가 완료 되어 next 함수가 호출되기 전 까지는 이전 view가 유지 됩니다. 그렇기 때문에 데이터를 가져오는 동안에 프로그래스 바나 인디케이터 등, 로딩 상태를 화면에 나타내는 것이 좋습니다. 데이터 가져오기가 실패한 경우에도 실패 메시지를 화면에 출력하는 것이 좋습니다.

참고

https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-before-navigation

[vue-router] 트랜지션

버미노트 — Sun, 16 Jun 2019 23:15:44 +0900

<route-view>는 사실 동적인 컴포넌트이기 때문에 <transition> 컴포넌트를 사용하는 것과 동일한 방식으로 트랜지션 효과를 적용 할 수 있습니다.

<transition>
  <router-view></router-view>
</transition>

1. 라우트 별 트랜지션

위의 코드와 같이 작성하게 되면 모든 라우트에 동일한 트랜지션을 적용하게 됩니다. 각 라우트 컴포넌트가 서로 다른 트랜지션을 갖도록 하기 위해서는, 각각의 라우트 컴포넌트 내에서 다른 이름으로 <transition>을 사용하면 됩니다.

const Foo = {
  template: `
    <transition name="slide">
      <div class="foo">...</div>
    </transition>
  `
}

const Bar = {
  template: `
    <transition name="fade">
      <div class="bar">...</div>
    </transition>
  `
}

2. 라우트 기반 동적 트랜지션

이동할 라우트와 현재 라우트 간의 관계를 기반으로 동적으로 트랜지션을 결정할 수 있는 방법도 있습니다.

<!-- 동적 트랜지션을 위한 name을 지정합니다. -->
<transition :name="transitionName">
  <router-view></router-view>
</transition>

// 그런 다음 부모 구성 요소에서 `$route`를 보고 사용할 트랜지션을 결정합니다
watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

[vue-router] 라우터 메타 필드

버미노트 — Sun, 16 Jun 2019 23:07:22 +0900

라우터를 정의할 대 meta 필드를 포함할 수 있습니다.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // 메타 필드
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

routes 설정의 각각의 라우터 객체를 라우트 레코드라고 합니다. 라우트 레코드는 중첩 될 수 있기 때문에, 라우터가 일치하면 2개 이상의 라우트 레코드와 일치 할 수 있습니다.
예를 들어, 위의 코드와 같이 라우트를 설정하면, /foo/bar라는 URL로 접속 하였을 때, 상위 레코드와 하위 레코드 2개가 일치하게 됩니다.
라우트와 일치하는 모든 라우트 레코드는 $route.matched 배열에 저장됩니다.$route.matched 배열을 뒤져서 라우트 레코드의 메타 필드에 접근 할 수 있습니다.

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 이 라우트는 인증이 필요하며 로그인 한 경우 확인하십시오.
    // 그렇지 않은 경우 로그인 페이지로 리디렉션하십시오.
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 반드시 next()를 호출하십시오!
  }
})

위의 코드와 같이 라우트에 매칭된 값이 저장되는 to.matched(to는 이동할 라우터 객체를 나타냅니다.) 배열 중 각각의 객체에 저장된 meta 필드를 사용하여 라우트 설정의 메타 필드에 접근 할 수 있습니다.

참고

https://router.vuejs.org/kr/guide/advanced/transitions.html

[vue-router] 네비게이션 가드

버미노트 — Sat, 15 Jun 2019 00:49:16 +0900

네비게이션 가드는 이름에서 알 수 있듯이 리다이렉션하거나 취소하여 네비게이션을 보호하는데 사용됩니다. 전역, 라우트별, 컴포넌트별로 네비게이션 가드를 등록하여 사용할 수 있습니다. 이번 포스트에서는 전역, 라우트별, 컴포넌트 각각의 방법으로 네비게이션 가드를 등록하는 방법을 이야기 하도록 하겠습니다.
params나 query가 변경되어도 네비게이션 가드는 실행되지 않습니다. 변경되는 시점을 알고 싶다면, vue 옵션 중 watch 옵션에 $router 객체를 등록하거나 컴포넌트 가드인 beforeRouteUpdate(2.2 버전에서 추가 됨)를 사용해야 합니다.

1. Global Before 가드

router.beforeEach를 사용하여 Gobal Before 가드를 사용할 수 있습니다.

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

Gobal Before 가드는 모든 네비게이션의 생성된 순서에 따라 호출 됩니다. 이 가드는 비동기적으로 종료(resolved) 될 수 있습니다. 모든 훅들이 종료(resolved)되기 전까지 네비게이션은 중지된 상태가 됩니다.

Global Before 가드의 전달인자

to: Route : 이동할 타켓의 Route 객체입니다.
from: Route : 현재의 Route 객체(네비게이션 이동하기 전의 Route 객체)입니다.
next: Function : 이 함수를 호출해야 훅이 종료(resolved) 됩니다. 어떠한 동작을 할 것인지는 next 함수어 어떤 인자값이 전달되는지에 따라 결정됩니다.
- next() : 다음 훅으로 이동됩니다. 다른 훅으로 이동할 수 있도록 승인을 하는 동작입니다.
- next(false) : 현재 네비게이션을 종료합니다.
- next('/') 또는 next({ path: '/' }) : 인자로 전달된 경로로 이동합니다. 현재의 네비게이션은 중단되고 새로운 네비게이션이 시작됩니다. next 함수에는 replace: true나 name: 'home', <router-link>의 to에 전달되어야 하는 prop나 router.push 함수에 전달되어야 하는 값들 모두 인자값으로 사용 가능합니다.
- next(error) : (2.4.0 이후) next 함수에 전달된 값이 Error 인스턴스이면, 네비게이션이 중지되고, 에러는 router.onError()의 콜백에 전달됩니다.

next 함수는 항상 호출되어야 합니다. 호출되지 않으면 훅은 종료되지 않습니다.

2. Global Resolve 가드

router.beforeResolve를 사용하여 Global 가드를 등록할 수 있습니다. router.beforeEach와 유사합니다. 차이점은 모든 in-component 가드와 비동기 라우터 컴포넌트가 종료 된 후, 네비게이션이 승인되기 바로 전에 호출된다는 것입니다.

3. Global After 훅

router.afterEach를 사용하여 Global 훅을 등록할 수 있습니다. 가드라고 이야기하지 않고 훅이라고 이야기 한 이유는 네비게이션을 보호하는 가드의 역할을 하는 next 함수가 인자로 전달되지 않기 때문입니다.

router.afterEach((to, from) => {
  // ...
})

4. Route 별 가드

beforeEnter 가드는 route 설정 객체에 직접 정의하여 사용합니다.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

5. 컴포넌트 내부 가드

라우트 컴포넌트 내부의 네비게이션 가드를 정의 할 수 있습니다. 컴포넌트 내부 가드는 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave 3가지가 있습니다.

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // called before the route that renders this component is confirmed.
    // does NOT have access to `this` component instance,
    // because it has not been created yet when this guard is called!
  },
  beforeRouteUpdate (to, from, next) {
    // called when the route that renders this component has changed,
    // but this component is reused in the new route.
    // For example, for a route with dynamic params `/foo/:id`, when we
    // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
    // will be reused, and this hook will be called when that happens.
    // has access to `this` component instance.
  },
  beforeRouteLeave (to, from, next) {
    // called when the route that renders this component is about to
    // be navigated away from.
    // has access to `this` component instance.
  }
}

`beforeRouteEnter` 가드

beforeRouteEnter 가드는 네비게이션이 승인된기 전(새로 진입하는 컴포넌트가 생성되기 전)에 호출되기 때문에 this를 사용할 수 없습니다. 하지만 next 함수의 콜백은 네비게이션이 승인 된후 호출 되기 때문에 이 콜백을 사용하여 컴포넌트 인스턴스에 접근할 수 있습니다.

beforeRouteEnter (to, from, next) {
  next(vm => {
    // access to component instance via `vm`
  })
}

beforeRouteEnter에서만 next 함수의 콜백함수를 지원합니다.

`beforeRouteUpdate` 가드

beforeRouteUpdate 가드에서는 this를 사용할 수 있습니다. next의 콜백함수를 지원할 필요가 없어 next의 콜백함수를 지원하지 않습니다.

beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}

`beforeRouteLeave` 가드

beforeRouteLeave 가드는 에디터가 값을 저장하지 않고 페이지를 벗어나는 것을 방지하는데 유용한 가드입니다. next(false)를 호출하면 네비게이션이 중단됩니다.

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

6. 전체 네비게이션 시나리오

네비게이션이 트리거 됨.
비활성되 된 컴포넌트에서 Leave 가드가 호출 됨.
전역 가드인 beforeEach 가드가 호출 됨.
재사용 된느 컴포넌트에서 beforeRouteUpdate 가드가 호출 됨.
route 설정에 정의 된 beforeEnter 가드가 호출 됨.
비동기 라우터 컴포넌트가 해결 됨.
활성화 되는 컴포넌트의 beforeRouteEnter 가드가 호출 됨.
전역 가드인 beforeResolve 가드가 호출 됨.
네비게이션이 완료 됨.
전역 훅인 afterEach 훅이 호출 됨.
DOM 업데이트가 트리거 됨.
beforeRouteEnter 가드의 next 함수에 전달된 콜백 함수가 호출 됨.

참고

https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards

[vue-router] HTML5 히스토리 모드

버미노트 — Fri, 14 Jun 2019 00:04:23 +0900

vue-router의 기본 설정은 hash 모드입니다. URL 해시를 사용하기 때문에 URL이 변경될 때 페이지가 다시 로드되지 않습니다.
해시를 제거하기 위해 vue-router는 history 모드도 지원합니다. history.pushState API를 사용하여 페이지를 다시 로드하지 않고 URL을 변경 할 수 있습니다.

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

위의 코드와 같이 history 모드로 설정 할 수 있습니다. history 모드를 사용할 때, 처음 경로 부터 쭉~ 사용한다면 문제없이 정상적으로 동작합니다. 하지만 중간 경로로 직접 접속하면 404 오류가 발생합니다. http://서버주소/user/1와 같은 URL로 바로 접속하면 404 오류가 발생합니다. (hash 모드를 사용하면 이런 오류가 없긴 합니다.) 이런 문제를 해결하려면 서버에서 어떠한 경로로 접근하더라도 index.html 페이지를 제공해야 합니다.

1. 서버 설정

Apache


  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]

nginx

location / {
  try_files $uri $uri/ /index.html;
}

Native Node.js

const http = require("http")
const fs = require("fs")
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile("index.htm", "utf-8", (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      "Content-Type": "text/html; charset=utf-8"
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log("Server listening on: http://localhost:%s", httpPort)
})

IIS

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

IIS UrlRewrite를 설치한 후, 위의 코드와 같이 web.config에 설정합니다.

Caddy

rewrite {
    regexp .*
    to {path} /
}

Firebase hosting

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

firebase.json에 위의 코드와 같이 설정합니다.

2. 주의 사항

위의 이야기 했던 것과 같이 서버를 설정하였다면, 모든 경로가 index.html를 제공하기 때문에 이제는 404 오류를 확인 할 수 없습니다.

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

이 문제를 해결하기 위해서는 위의 코드와 같이 catch-all 라우터를 구현하여 404 페이지를 만들어야 합니다. 자세한 내용은 [vue-router] 동적 라우트 매칭을 참고 바랍니다.

참고

https://router.vuejs.org/guide/essentials/history-mode.html

[vue-router] 라우터 컴포넌트에 props 전달

버미노트 — Thu, 13 Jun 2019 00:27:48 +0900

컴포넌트에서 $route를 사용하게 되면, 컴포넌트가 URL에 의족적이게 되어 재사용성이 떨어지게 됩니다. 이 의존성을 제거하기 위해서는 props 옵션을 사용하면 됩니다,

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

위의 코드는 $route를 사용한 예제입니다. URL에 의존적이기 때문에 다른 URL를 가지는 컴포넌트에서 재사용하기 어렵습니다.

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // for routes with named views, you have to define the `props` option for each named view:
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

위의 코드는 props 옵션을 사용한 예제입니다. URL대한 의존성이 제거되기 때문에 코드 재사용이나 테스트하기 쉽습니다.
Named views를 사용할 때는 각각의 named view에 props 옵션을 설정해 주어야 합니다.

1. Boolean mode

props에 true를 설정하면, route.params가 컴포넌트의 props에 설정됩니다.

2. Object mode

props가 object가 될 수 있습니다. props에 설정된 값은 컴포넌트의 props가 됩니다.

const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})

이 모드는 정적인 props를 설정할 때 유용합니다.

3. Function mode

props를 함수로 작성 할 수도 있습니다. route의 값을 임의대로 컴포넌트의 props로 설정 할 수 있습니다.

const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
  ]
})

위의 코드를 예로 들어 이야기 하면, /search?q=vue 라는 URL로 접속하게 되면, SearchUser 컴포넌트의 props는 { query: 'vue' }가 됩니다.
props를 함수로 만들 때 유의 사항 중 한가지는 route가 변경되었을 때 호출 되는 함수이기 때문에 이 함수에서 state를 저장하면 안된다는 것입니다.

참고

https://router.vuejs.org/guide/essentials/passing-props.html#object-mode

[vue-router] Redirect 와 Alias

버미노트 — Wed, 12 Jun 2019 23:58:26 +0900

1. Redirect

리다이렉션은 vue-router를 설정할 때 정의 할 수 있습니다. 예를 들어 /a라는 URL로 접속할 때, /b라는 URL로 리다이렉션을 시켜주고 싶다면,

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

위의 코드와 같이 vue-router를 설정 할 수 있습니다.

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

위의 코드와 같이 Named router를 사용할 수도 있습니다.

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 함수는 인수로 대상 라우트를 받습니다.
      // 여기서 path/location 반환합니다.
    }}
  ]
})

또한 동적으로 리다이렉션을 해주기 위해 함수를 사용할 수도 있습니다.

2. Alias

Redirect는 사용자가 /a라는 URL에 방문 한다면, /b라는 URL로 변경하여 /b URL의 화면을 보여주는 것을 말합니다.
Alias는 사용자가 /a라는 URL에 방문 한다면, URL에는 /b라고 표시되시만, 화면에는 /a URL의 화면을 보여주는 것을 말합니다.

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

위의 코드와 같이 Alias를 사용할 수 있습니다.

참고

https://router.vuejs.org/kr/guide/essentials/redirect-and-alias.html

[vue-router] Named Routes & Views

버미노트 — Mon, 10 Jun 2019 23:39:25 +0900

1. Named Routes

vue-router를 사용할 때, 이름이 있는 라우트를 사용하는 것이 더 편리할 때가 있습니다.

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

위의 코드와 같이 라우트를 설정하였다면,

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

혹은,

router.push({ name: 'user', params: { userId: 123 }})

를 이용하여 라우터를 변경 할 수 있습니다. 위의 두가지 모두 /user/123으로 경로를 이동합니다.

2. Named Views

여러개의 view를 중첩하지 않고 동시에 표시해야 할 경우, 이름을 갖는 view를 사용하면 편리합니다. 예를 들어,

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

위의 코드와 같이 어플리케이션이 구성되어 있다면, 첫번째 <router-view> 부터 차례로, Foo 컴포넌트, Bar 컴포넌트, Baz 컴포넌트가 렌더링됩니다. 이 때 반드시 vue-router의 components 옵션을 사용하여야 합니다.

중첩된 Named Views

물론 Named Views는 중첩되어 사용할 수 있습니다. 중첩하여 사용하기 위해서는 간단히 <router-view>를 중첩하여 사용하면 됩니다.

/settings/emails                                       /settings/profile
+-----------------------------------+                  +------------------------------+
| UserSettings                      |                  | UserSettings                 |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | |  +------------>  | | Nav | UserProfile        | |
| |     +-------------------------+ |                  | |     +--------------------+ |
| |     |                         | |                  | |     | UserProfilePreview | |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
+-----------------------------------+                  +------------------------------+

위의 그림의 구조를 보면, UserSettings 컴포넌트가 있고, UserSettings 컴포넌트는 Nav 컴포넌트를 항상 가지고 있고, UserEmailSubscriptions 컴포넌트 혹은 UserProfile 컴포넌트, UserProfilePreview 컴포넌트를 선택적으로 렌더링 해야 하는 구조입니다. 즉 UserEmailSubscriptions와 UserProfile, UserProfilePreview는 중첩된 view 컴포넌트 구조입니다.

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>

{
  path: '/settings',
  // You could also have named views at the top
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

위의 코드와 같이 컴포넌트와 vue-router 설정을 하면 중첩된 Named View를 구현 할 수 있습니다.

참고

[vue-router] 프로그래밍 방식 네비게이션

버미노트 — Sun, 9 Jun 2019 23:50:00 +0900

<router-link>를 사용하여 선언적 네이게이션용 앵커(anchor) 태그를 만드는 것 외에도 vue-router의 인스턴스 메소드를 사용하여 프로그래밍으로 네비게이션을 수행할 수 있습니다.

1. `router.push(location, onComplete?, onAbort?)`

Vue 인스턴스 내부의 $router를 사용하여 this.$router.push와 같이 사용할 수도 있습니다.
router.push는 다른 URL로 이동할 때 사용됩니다. 이 메소드는 새로운 URL을 히스토리 스택에 넣기 때문에 사용자가 브라우저의 뒤로가기 버튼을 클릭하면 이전 URL로 이동하게 됩니다.
<router-link :to="...">를 클릭하면 router.push(...)를 호출하는 것과 같습니다.

전달 인자

전달인자는 문자열 또는 객체가 될 수 있습니다.

// 리터럴 string
router.push('home')

// object
router.push({ path: 'home' })

// 이름을 가지는 라우트
router.push({ name: 'user', params: { userId: 123 }})

// 쿼리와 함께 사용, 결과는 /register?plan=private 입니다.
router.push({ path: 'register', query: { plan: 'private' }})

2.2.0 버전 이후 router.push와 router.replace 메소드는 두번째와 세번째 전달인자로 onComplete와 onAbort 콜백을 제공합니다. 이 콜백은 탐색이 성공적으로 완료되었거나 중단 될 때 호출 됩니다.

2. `router.replace(location)`

router.push와 같은 역할을 하지만 차이점은 새로운 URL을 히스토리 스택에 추가하지 않습니다. 이름에서 알 수 있듯이 현재 URL을 대체합니다.
<route-link :to="..." replace>를 클릭하면 router.replace(...)를 호출하는 것과 같습니다.

3. `router.go(n)`

이 메소드는 window.history.go(n)과 비슷하게 히스토리 스택에서 n 만큼 앞, 뒤로 이동하는 메소드입니다.

// 한 단계 앞으로 갑니다. history.forward()와 같습니다. history.forward()와 같습니다.
router.go(1)

// 한 단계 뒤로 갑니다. history.back()와 같습니다.
router.go(-1)

// 3 단계 앞으로 갑니다.
router.go(3)

// 지정한 만큼의 기록이 없으면 자동으로 실패 합니다.
router.go(-100)
router.go(100)

4. History 조작

router.push, router.replace, router.go는 각각 window.history.pushState, window.history.replaceState, window.history.go에 매칭됩니다.
vue-router의 네비게이션 메소드(push, replace, go)는 모든 라우터 모드(history, hash, abstract)에서 동일하게 동작합니다.

참고

https://router.vuejs.org/kr/guide/essentials/navigation.html

[vue-router] 중첩된 라우트

버미노트 — Sun, 9 Jun 2019 23:17:03 +0900

실제 앱 UI는 일반적으로 여러 단계의 중첩 된 컴포넌트로 이루어져 있습니다. URL의 세그먼트(/로 구분 되는 각각의 문자열)는 중첩된 컴포넌트의 특정 구조와 일치하는 경우가 매우 많습니다. 예를 들면,

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

vue-router의 중첩된 라우트를 사용하면 위의 관계를 표현하는 것이 간단해 집니다. 위의 구조(중첩 라우트)대로 vue-router를 사용하여 컴포넌트를 만든다면,

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

위의 코드와 같이 컴포넌트를 만들 수 있습니다. 그 후 vue-router의 VueRouter 생성자 옵션은,

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // /user/:id/profile 과 일치 할 때
          // UserProfile은 User의 <router-view> 내에 렌더링 됩니다.
          path: 'profile',
          component: UserProfile
        },
        {
          // /user/:id/posts 과 일치 할 때
          // UserPosts가 User의 <router-view> 내에 렌더링 됩니다.
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

위의 코드와 같이 설정해야 합니다. children 옵션은 routes와 같은 라우트 설정 객체의 또 다른 배열 입니다. 필요한 만큰 중첩된 뷰를 사용할 수 있습니다.

참고

https://router.vuejs.org/kr/guide/essentials/nested-routes.html

[vue-router] 동적 라우트 매칭

버미노트 — Sun, 9 Jun 2019 00:30:03 +0900

패턴을 가진 라우트를 동일한 컴포넌트에 매칭시켜야 할 경우가 종종 있습니다. 예를 들면, User 컴포넌트가 있고, /user/1 혹은 /user/2와 같은 라우트에 접근할 때, 라우트에 매칭된 ID에 해당하는 유저 정보를 User 컴포넌트에 나타내야 한다면,

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 동적 세그먼트는 콜론으로 시작합니다.
    { path: '/user/:id', component: User }
  ]
})

위의 코드와 같이 vue-router 설정을 할 수 있습니다.
/user/1와 /user/2는 모두 동일한 컴포넌트에 매칭됩니다. 동적 세그먼트는 콜론(:)으로 표시됩니다. 동적 세그먼크 값은 모두 this.$route.params에 표시됩니다.

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

위의 코드와 같이 사용자 ID를 표시할 수 있습니다. 여러개의 동적 세그먼트를 가질 수 있습니다. 모든 세그먼트는 this.$route.params에 매칭됩니다.
this.$route는 this.$route.params 뿐만 아니라, this.$route.query(URL 안에 쿼리가 있다면), this.$route.hash 등의 정보를 제공합니다.

1. Params 변화 감지

/user/1와 user/2로 라우터가 변경되었을 때, 동일한 컴포넌트는 재사용됩니다. 이런 동작 방식은 이전 컴포넌트를 삭제한 후 다시 렌더링 하는 것 보다 효욜적입니다. 컴포넌트가 재사용 되기 때문에, 컴포넌트의 라이프 사이클 훅은 호출되지 않습니다.

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 경로 변경에 반응하여...
    }
  }
}

params이 변경 되었을 때, 어떠한 코드 동작을 해야 한다면 $route를 watch에 등록하거나,

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

위의 코드와 같이 vue-router의 beforeRouteUpdate 콜백 메소드를 사용하면 됩니다.

2. Catch all / 404 Not Found 라우팅

어떠한 url 문자열에도 라우터를 매칭시키고 싶다면 *를 사용할 수 있습니다.

{
  // will match everything
  path: '*'
}
{
  // will match anything starting with `/user-`
  path: '/user-*'
}

라우터 설정 마지막에 { path '*' }를 추가한다면 이 라우터는 404 페이지로 사용할 수 있습니다.

// Given a route { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'

// Given a route { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

/user-admin url은 user-* 라우터에 매칭됩니다. /non-existing url은 *라우터에 매칭됩니다. *을 이용해 매칭된 param 값은 this.$route.params.pathMatch에 저장됩니다.

3. 고급 매칭 패턴

vue-router은 라우트 매칭 앤진으로 path-to-regexp을 사용합니다. 더 자세한 라우팅 매칭을 사용하길 원한다면 위의 문서를 참고 바랍니다.

4. 매칭 우선순위

동일한 url이 여러 라우트와 매칭 되는 경우가 있을 수 있습니다. 이 경우에는 먼저 정의 된 라우트가 높은 우선 순위를 가집니다.

참고

https://router.vuejs.org/kr/guide/essentials/dynamic-matching.html

[vue-router] 시작하기

버미노트 — Thu, 6 Jun 2019 18:21:51 +0900

vue-router는 Vue.JS의 공식 라우터입니다. vue-router를 사용하면 싱글 페이지 어플리케이션을 쉽게 만들 수 있습니다. 이번 포스트에서는 vue-router를 프로젝트에 추가할 때 HTML단과 JavaScript단에서 추가하는 방법에 대해 이야기 할 것입니다.

1. HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 네비게이션을 위해 router-link 컴포넌트를 사용합니다. -->
    <!-- 구체적인 속성은 `to` prop을 이용합니다. -->
    <!-- 기본적으로 `<router-link>`는 `<a>` 태그로 렌더링됩니다.-->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 라우트 아울렛 -->
  <!-- 현재 라우트에 맞는 컴포넌트가 렌더링됩니다. -->
  <router-view></router-view>
</div>

<router-link>는 현재 라우트와 일치할 때 자동으로 .router-link-active 클래스가 추가됩니다.

2. JavaScript

// 0. 모듈 시스템 (예: vue-cli)을 이용하고 있다면, Vue와 Vue 라우터를 import 하세요
// 그리고 `Vue.use(VueRouter)`를 호출하세요


// 1. 라우트 컴포넌트를 정의하세요.
// 아래 내용들은 다른 파일로부터 가져올 수 있습니다.
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 라우트를 정의하세요.
// Each route should map to a component. The "component" can
// 각 라우트는 반드시 컴포넌트와 매핑되어야 합니다.
// "component"는 `Vue.extend()`를 통해 만들어진
// 실제 컴포넌트 생성자이거나 컴포넌트 옵션 객체입니다.
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. `routes` 옵션과 함께 router 인스턴스를 만드세요.
// 추가 옵션을 여기서 전달해야합니다.
// 지금은 간단하게 유지하겠습니다.
const router = new VueRouter({
  routes // `routes: routes`의 줄임
})

// 4. 루트 인스턴스를 만들고 mount 하세요.
// router와 router 옵션을 전체 앱에 주입합니다.
const app = new Vue({
  router
}).$mount('#app')

// 이제 앱이 시작됩니다!

위의 코드와 같이 vue-router을 vue에 주입하게 되면, 각각의 컴포넌트에서는 this.$router와 this.$route를 사용하여 vue-router를 사용할 수 있게 됩니다. 위의 예제는 CodePen에서 확인 할 수 있습니다.
this.$router는 vue-router의 메소드(push, replace 등.. 라우터 이동와 같은..)를 담고 있는 객체입니다.
this.$route는 현재의 라우터 정보(params, path 등..)를 담고 있는 객체입니다.

참고

https://router.vuejs.org/kr/guide/#javascript

[Vue.JS] 반응형 시스템

버미노트 — Wed, 20 Feb 2019 00:33:47 +0900

Vue의 가장 두드러지는 특징 중 하나는 눈에 띄지 않는 반응형 시스템입니다. 모델은 단순한 JavaScript 객체입니다. 모델이 수정되면 화면이 갱신됩니다. 이번 포스트에서 이러한 반응형 시스템을 좀 더 자세히 알아보려고 합니다.

1. MVVM 패턴

Vue는 MVVM 패턴에 영감을 받은 프레임워크입니다.

MVVM 패턴

위의 그림은 MVVM 패턴을 나타내는 그림입니다. 더 자세한 설명은 [디자인패턴] MVC, MVP, MVVM 비교를 참고 바랍니다.

View는 DOM, View Model은 Vue, Model은 단순한 JavaScript 객체 입니다. View Model은 View와 데이터 바인딩되어 View Model이 변경 되 었을 때 View가 업데이트 됩니다.

2. 변경 내용을 추적하는 방법

Vue 인스턴스에 data 옵션을 포함하는 JavaScript 객체를 전달하면 Vue는 모든 속성에 Object.defineProperty를 사용하여 getter/setter로 변환합니다. 이것이 Vue는 ES5를 사용할 수 없는 IE8 이하를 지원하지 않는 이유입니다.

getter/setter는 사용자에게는 보이지 않지만 속성에 접근하거나 수정할 때 Vue가 종속성 추적 및 변경 알림을 수행할 수 있습니다.

모든 컴포넌트 인스턴스에는 해당 watcher 인스턴스가 있으며, 이 인스턴스는 컴포넌트가 종속적으로 렌더링되는 동안 수정된 모든 속성을 기록합니다. 또한 종속적인 setter가 트리거 되면 watcher에 알리고 컴포넌트가 다시 랜더링됩니다.

watcher의 역할

3. 변경 감지 경고

최신 JavaScript의 한계(Object.observe의 포기)로 인해 Vue는 속성의 추가 체거를 감지 할 수 없습니다. Vue는 인스턴스 초기화 할 때 getter/setter 변환 과정을 수행하기 때문에 data 객체에 속성이 있어서 Vue가 변경사항을 감지할 수 있습니다.

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 은 이제 반응적입니다.

vm.b = 2
// `vm.b` 은 이제 반응적이지 않습니다.

이미 만들어진 인스턴스에 반응 속성을 동적으로 추가하는 것을 허용하지 않지만, Vue.set(object, key, value) 메소드를 사용하여 중첩 된 객체에 반응성 속성을 추가 할 수 있습니다.

Vue.set(vm.someObject, 'b', 2)

위의 코드와 같이 루트 수준의 중첩 된 객체에 반응성 속성을 추가할 수 있습니다.

this.$set(this.someObject, 'b', 2)

위의 코드는 Vue.set에 별칭으로 this.$set을 사용한 코드입니다.

4. 반응형 속성 선언하기

Vue는 반응성 속성을 동적으로 추가 할 수 없기 때문에 반응성 테이터 속성을 빈 값으로라도 초기에 선언하여 Vue 인스턴스를 초기화 해야 합니다.

var vm = new Vue({
  data: {
    // 빈 값으로 메시지를 선언 합니다.
    message: ''
  },
  template: '{{ message }}'
})
// 나중에 `message`를 설정합니다.
vm.message = 'Hello!'

data 옵션에 message를 선언하지 않으면 Vue의 render 함수는 존재하지 않는 속성에 접근하려고 한다는 경고를 발생시킵니다. 모든 반응 속성을 미리 선언하면 나중에 다른 개발자가 코드를 분석 할 때 코드를 더 쉽게 이해 할 수 있습니다.

5. 비동기 갱신 큐

Vue는 DOM 업데이트를 비동기로 동작합니다. 모든 데이터 변경 사항은 버퍼링됩니다. 즉 동일한 watcher가 여러번 트리거 되더라고 한번만 큐에 푸시 됩니다. 이 버퍼링은 중복된 변경 사항의 불필요한 계산을 줄이고, DOM 조작을 최소화하기 때문에 중요합니다. 그 후에는 이벤트 루프 tick에서 Vue는 큐를 비우고 실제 DOM에 작업(버퍼링으로 중복이 제거된 작업)을 수행합니다.

예를 들어, vm,someDate = 'new value'를 설정하면, 컴포넌트는 즉시 재 랜더링하지 않습니다. 다음 tick에서 업데이트 됩니다. 대부분의 경우에는 이 작업을 신경 쓸 필요는 없지만, 업데이트 된 후 DOM 상태에 의존적인 작업을 하기 위해서는 까다로울 수 있습니다. Vue는 일반적으로 개발자가 데이터 중심적으로 개발하고 DOM을 직접 수정하지 않는 것을 권장하지만 때로는 직접 DOM을 수정해야 필요도 있습니다.

Vue가 DOM을 업데이트 된 후의 DOM을 보장하기 위해서는 Vue.nextTick(callback) 을 사용하면 됩니다. 이 callback은 DOM이 업데이트 된 후에 호출 되기 때문에 DOM이 업데이트 된 이후임을 보장할 수 있습니다.

<div id="example">{{ message }}</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 데이터  변경
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

또한 this.$nextTick() 메소드를 제공합니다. 이 메소드는 컴포넌트 인스턴스에서 사용할 때 유용합니다.

Vue.component('example', {
  template: '{{ message }}',
  data: function () {
    return {
      message: '갱신 안됨'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '갱신됨'
      console.log(this.$el.textContent) // => '갱신 안됨'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '갱신됨'
      })
    }
  }
})

참고

https://kr.vuejs.org/v2/guide/reactivity.html

[Vue.JS] 필터

버미노트 — Tue, 19 Feb 2019 00:15:23 +0900

1. 필터 사용방법

Vue는 텍스트 형식화 할 수 있는 필터 기능을 제공합니다. 필터는 중괄호 보간법, v-bind 표현법(2.1.0+ 부터)에서 사용 할 수 있습니다. 필터는 JavaScript 표현식 마지막의 파이프(|) 기호와 함께 사용해야 합니다.

<!-- in mustaches -->
{{ message | capitalize }}

<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

2. 로컬 필터 정의

컴포넌트의 옵션으로 로컬 필터를 정의할 수 있습니다.

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

3. 전역 필터 정의

Vue 인스턴스 생성 전(new Vue() 전)에 전역으로 필터를 정의할 수 있습니다.

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

4. 필터 체이닝

필터 함수의 첫번째 전달인자는 JavaScript의 표현식의 값입니다. 위의 예제의 capitalize 필터 함수의 첫번째 전달인자의 값은 message의 값입니다. 필터는 연결될 수 있습니다.

{{ message | filterA | filterB }}

위의 코드의 경우에 filterA의 전달인자는 message이고, filterB의 전달인자는 filterA의 결과 값(filterA 함수가 message의 전달인자로 계산되어진 값)이 됩니다.

5. 필터 함수 전달인자

필터 함수는 일반적인 JavaScript 함수이기 때문에 두개 이상의 전달 인자를 가질 수 있습니다.

{{ message | filterA('arg1', arg2) }}

위의 코드의 filterA 필터 함수는 3개의 전달 인자를 가지는 함수 입니다. 첫번째 전달인자는 message의 값이고, 두번째 전달인자는 'arg1'이라는 문자열입니다. 세번째 전달인자는 arg2 변수의 값을 전달인자로 가집니다.

참고

https://kr.vuejs.org/v2/guide/filters.html

[Vue.JS] 플러그인

버미노트 — Mon, 18 Feb 2019 00:31:07 +0900

플러그인은 일반적으로 전역으로 기능을 Vue에 추가합니다. 플러그인은 엄격하게 규정된 범위는 없으며, 여러 유형의 플러그인이 있습니다.

일부 전역 메소드또는 속성 추가 : vue-coustom-element
하나 이상의 전역 자산 추가 : 디렉티브 / 필터 / 트랜지션 등.. vue-touch
글로벌 mixin으로 일부 컴포넌트 옵션을 추가 : vue-router
일부 Vue 인스턴스 메소드를 Vue.prototype에 추가
자체 API를 제공하는 동시에 위의 일부 조합을 주입하는 라이브러리 : vue-router

1. 플러그인 사용하기

Vue.use() 전역 메소드를 호출하여 플러그인을 사용할 수 있습니다.

// calls `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  //... options
})

위의 코드와 같이 new Vue()를 호출하여 앱을 시작하기 전에 Vue.use()를 사용해야 합니다.

Vue.use(MyPlugin, { someOption: true })

위의 코드와 같이 선택적으로 옵션을 전달 할 수 있습니다. Vue.use는 자동으로 같은 플로그인을 두 번 이상 사용하지 못하게 합니다. 동일한 플로그인을 여러번 호출하면 해당 플로그인은 한 번만 설치 됩니다.

// Browserify 또는 Webpack을 통해 CommonJS를 사용할 때
var Vue = require('vue')
var VueRouter = require('vue-router')

// 잊지 마세요
Vue.use(VueRouter)

vue-router와 같이 Vue.JS에서 공식적으로 제공하는 플러그인은 Vue가 전역으로 선언되어 있다면, 자동으로 Vue.use()를 호출합니다. 하지만 Common.JS와 같이 모듈러를 사용할 경우 항상 Vue.use()를 선언하여 사용해야 합니다.

2. 플로그인 작성하기

Vue.JS 플로그인은 install 메소드를 노출해야 합니다. install 함수는 전달인자로 첫번째 전달인자는 Vue 생성자, 두번째 전달인자로 옵션을 가집니다.

MyPlugin.install = function (Vue, options) {
  // 1. 전역 메소드 또는 속성 추가
  Vue.myGlobalMethod = function () {
    // 필요한 로직 ...
  }

  // 2. 전역 에셋 추가
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 필요한 로직 ...
    }
    ...
  })

  // 3. 컴포넌트 옵션 주입
  Vue.mixin({
    created: function () {
      // 필요한 로직 ...
    }
    ...
  })

  // 4. 인스턴스 메소드 추가
  Vue.prototype.$myMethod = function (options) {
    // 필요한 로직 ...
  }
}

참고

[Vue.JS] Render Functions & JSX

버미노트 — Thu, 14 Feb 2019 00:07:47 +0900

1. 기본

대부분의 경우 Vue는 템플릿을 사용하여 HTML을 작성하는 것을 권장합니다. 하지만 때로는 JavaScript를 사용하여 HTML을 작성을 해야 할 때가 있습니다. 이럴 때 render 함수를 사용하면 됩니다.

<h1>
  <a name="hello-world" href="#hello-world">
    Hello world!
  </a>
</h1>

위의 코드와 같이 작성된 HTML이 있을 때,

<anchored-heading :level="1">Hello world!</anchored-heading>

위의 코드와 같이 컴포넌트를 작성하여 사용할 수 있습니다. 이 때 level 속성으로 h 태그의 종류를 바꿀 수 있는 컴포넌트를 작성한다면,

<script type="text/x-template" id="anchored-heading-template">
  <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
  <h4 v-else-if="level === 4">
    <slot></slot>
  </h4>
  <h5 v-else-if="level === 5">
    <slot></slot>
  </h5>
  <h6 v-else-if="level === 6">
    <slot></slot>
  </h6>
</script>

Vue.component('anchored-heading', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

위의 코드와 같은 컴포넌트가 작성될 수 있습니다. 하지만 위의 예제는 코드 중복이 많아 장황하게 보입니다. render 함수를 사용하여 다시 작성해 보면,

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 태그 이름
      this.$slots.default // 자식의 배열
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

위의 코드와 같이 될 수 있습니다. 코드 중복이 없기 때문에 템플릿으로 작성된 코드보다 간단하게 보일 수 있습니다. 이 때, <anchored-heading> 컴포넌트 안에 있는 Hello wold!는 slot 속성이 정의 되어 있지 않기 때문에, $slots.default에 배열로 저장됩니다.

2. Node, Tree, Virtual DOM

render 함수에 대해 이야기하기 전에 브라우저 작동 방식을 먼저 이야기 해 보도록 하겠습니다.

<div>
  <h1>My title</h1>
  Some text content
  <!-- TODO: Add tagline  -->
</div>

브라우저가 위의 코드를 읽게 되면, 아래 그림과 같이 DOM 노드 트리를 만듭니다.

DOM 노트 트리

모든 엘리먼트와 텍스트, 심지어 주석도 노드입니다. 노드는 페이지의 조각입니다. 위의 트리에서 볼 수 있듯이 각 녿는 자식을 가질 수 있습니다. 노드를 효율적으로 업데이트 하는 것은 어렵습니다. 하지만 다행이도 수동으로 업데이트 할 필요는 없습니다.

<h1>{{ blogTitle }}</h1>

템플릿에서 위의 코드와 같이 작성하거나,

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

위의 코드와 같이 render 함수를 사용하면, Vue는 자동으로 페이지를 업데이트 합니다.

1) Virtual DOM

Vue는 실제 DOM에 필요한 변경사항을 추적하기 위해 virtual DOM을 만듭니다.

return createElement('h1', this.blogTitle)

createElement는 Virtual Node(VNode)를 리턴합니다. Virtual Node는 실제 DOM 엘리먼트와 정확하게 일치하지는 않습니다. Virtual DOM은 컴포넌트 트리로 만들어진 VNode 트리입니다.

3. `createElement` 전달인자

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // HTML 태그 이름, 컴포넌트 옵션 또는 함수 중
  // 하나를 반환하는 함수입니다. 필수 사항.
  'div',

  // {Object}
  // 템플릿에서 사용할 속성에 해당하는 데이터 객체입니다
  // 데이터 객체입니다. 선택 사항.
  {
    // (아래 다음 섹션에 자세히 설명되어 있습니다.)
  },

  // {String | Array}
  // VNode 자식들. `createElement()`를 사용해 만들거나,
  // 간단히 문자열을 사용해 'text VNodes'를 얻을 수 있습니다. 선택사항
  [
    'Some text comes first.',
    createElement('h1', 'A headline'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

1) 데이터 객체 깊이 알아보기

createElement의 두번째 전달인자인 데이터 객체를 좀 더 자세히 이야기 해보도록 하겠습니다.

v-bind:class와 v-bind:style이 템플릿에서 특별하게 처리되는 것과 비슷하게 VNode 데이터 객체의 최상위 필드에 class와 style이 있습니다. 또한 일반적인 HTML 속성 뿐만 아니라 innerHTML과 같은 DOM 속성도 가지고 있습니다.

{
  // `v-bind:class` 와 같음
  'class': {
    foo: true,
    bar: false
  },
  // `v-bind:style` 와 같음
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 일반 HTML 속성
  attrs: {
    id: 'foo'
  },
  // 컴포넌트 props
  props: {
    myProp: 'bar'
  },
  // DOM 속성
  domProps: {
    innerHTML: 'baz'
  },
  // `v-on:keyup.enter`와 같은 수식어가 지원되지 않으나
  // 이벤트 핸들러는 `on` 아래에 중첩됩니다.
  // 수동으로 핸들러에서 keyCode를 확인해야 합니다.
  on: {
    click: this.clickHandler
  },
  // 컴포넌트 전용.
  // `vm.$emit`를 사용하여 컴포넌트에서 발생하는 이벤트가 아닌
  // 기본 이벤트를 받을 수 있게 합니다.
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 사용자 지정 디렉티브.
  // Vue는 이를 관리하기 때문에 바인딩의 oldValue는 설정할 수 없습니다.
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 범위 지정 슬롯. 형식은
  // { name: props => VNode | Array<VNode> } 입니다.
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 이 컴포넌트가 다른 컴포넌트의 자식인 경우, 슬롯의 이름입니다.
  slot: 'name-of-slot',
  // 기타 최고 레벨 속성
  key: 'myKey',
  ref: 'myRef'
}

2) 전체 예제

var getChildrenTextContent = function (children) {
  return children.map(function (node) {
    return node.children
      ? getChildrenTextContent(node.children)
      : node.text
  }).join('')
}

Vue.component('anchored-heading', {
  render: function (createElement) {
    // kebabCase id를 만듭니다.
    var headingId = getChildrenTextContent(this.$slots.default)
      .toLowerCase()
      .replace(/\W+/g, '-')
      .replace(/(^\-|\-$)/g, '')

    return createElement(
      'h' + this.level,
      [
        createElement('a', {
          attrs: {
            name: headingId,
            href: '#' + headingId
          }
        }, this.$slots.default)
      ]
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

3) 제약사항

컴포넌트 토리의 모든 VNode는 고유해야 합니다.

render: function (createElement) {
  var myParagraphVNode = createElement('p', 'hi')
  return createElement('div', [
    // 이런 - Vnode가 중복입니다!
    myParagraphVNode, myParagraphVNode
  ])
}

위의 코드는 VNode가 중복되었기 때문에 잘못 작성된 코드입니다.

render: function (createElement) {
  return createElement('div',
    Array.apply(null, { length: 20 }).map(function () {
      return createElement('p', 'hi')
    })
  )
}

같은 엘리먼트 혹은 컴포넌트를 여러번 사용해야 할 경우 위의 코드와 같이 복제하여 사용해야 합니다.

4. 템플릿 기능을 일반 JavaScript로 변경하기

1) `v-if`와 `v-for`

<ul v-if="items.length">
  <li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>

위의 코드와 같이 v-if와 v-for을 사용한 코드는

render: function (createElement) {
  if (this.items.length) {
    return createElement('ul', this.items.map(function (item) {
      return createElement('li', item.name)
    }))
  } else {
    return createElement('p', 'No items found.')
  }
}

위의 코드와 같이 render 함수로 작성될 수 있습니다.

2) `v-model`

render 함수에는 v-model과 대응되는 기능이 없어, 직접 구현해야 합니다.

render: function (createElement) {
  var self = this
  return createElement('input', {
    domProps: {
      value: self.value
    },
    on: {
      input: function (event) {
        self.value = event.target.value
        self.$emit('input', event.target.value)
      }
    }
  })
}

위의 코드와 같이 더 깊은 수준으로 코드를 작성해야 하지만 v-model에 비해 세부 사항까지 더 많은 제어가 가능합니다.

3) 이벤트 및 키 수식어

수식어	접두어
`.passive`	&
`.capture`	!
`.once`	~
`.capture.once` 또는 `.once.capture`	~!

.pssive, .capture, .once 이벤트 수식어는 위의 테이블과 같이 접두어를 제공합니다.

on: {
  '!click': this.doThisInCapturingMode,
  '~keyup': this.doThisOnce,
  `~!mouseover`: this.doThisOnceInCapturingMode
}

위의 코드와 같이 .pssive, .capture, .once 이벤트 수식어를 사용할 수 있습니다. 다른 이벤트 수식어 및 키 수식어의 경우, 이벤트의 메소드를 사용할 수 있어 고유한 접두사가 필요하지 않습니다.

수식어	동등한 핸들러
`.stop`	`event.stopPropagation()`
`.prevent`	`event.preventDefault()`
`.self`	`if (event.target !== event.currentTarget) return`
키 : `.enter`, `.13`	`if (event.keyCode !== 13) return` (13는 키 코드로 다른 키 코드 사용이 가능합니다.)
Modifiers Keys : `.ctrl`, `.alt`, `.shift`, `.meta`	`if (!event.ctrlKey) return` (`ctrlKey`를 `altKey`, `shiftKey` 또는 `metaKey`로 각각 변경하십시오.)

on: {
  keyup: function (event) {
    // 이벤트를 내보내는 요소가 이벤트가 바인딩 된 요소가 아닌 경우
    // 중단합니다.
    if (event.target !== event.currentTarget) return
    // 키보드에서 뗀 키가 Enter키 (13)이 아니며
    // Shift키가 동시에 눌러지지 않은 경우
    // 중단합니다.
    if (!event.shiftKey || event.keyCode !== 13) return
    // 전파를 멈춥니다.
    event.stopPropagation()
    // 엘리먼트 기본 동작을 방지합니다.
    event.preventDefault()
    // ...
  }
}

4) Slots

render: function (createElement) {
  return createElement('div', this.$slots.default)
}

위의 코드와 같이 this.$slots를 사용하여 정적 슬롯 내용을 구현 할 수 있습니다.

render: function (createElement) {
  return createElement('div', [
    this.$scopedSlots.default({
      text: this.msg
    })
  ])
}

특정 범위를 가지는 슬롯을 또한 위의 코드와 같이 this.$scopedSlots에서 VNode를 리턴하는 함수를 사용하여 구현 할 수 있습니다.

render (createElement) {
  return createElement('div', [
    createElement('child', {
      // 데이터 객체의 `scopedSlots`를 다음 형식으로 전달합니다
      // { name: props => VNode | Array }
      scopedSlots: {
        default: function (props) {
          return createElement('span', props.text)
        }
      }
    })
  ])
}

위의 코드와 같이 scopedSlots를 사용하여 자식 컴포넌트로 특정 범위를 가지는 슬롯을 넘겨 줄 수 있습니다.

5. JSX

createElement(
  'anchored-heading', {
    props: {
      level: 1
    }
  }, [
    createElement('span', 'Hello'),
    ' world!'
  ]
)

render 함수를 많이 사용하면 위의 코드와 같이 고통스러워 질 수 있습니다... Vue와 JSX를 함께 사용할 수 있는 Babel plugin를 이용할 수 있습니다.

import AnchoredHeading from './AnchoredHeading.vue'

new Vue({
  el: '#demo',
  render (h) {
    return (
      <AnchoredHeading level={1}>
        <span>Hello</span> world!
      </AnchoredHeading>
    )
  }
})

render 함수의 전달인자를 보면, createElement를 h라는 별칭으로 사용하는 것을 볼 수 있습니다. Vue 생태계에서 주로 사용되는 별칭입니다. render 함수에서 JSX를 사용할 때, h가 항상 전달인자로 선언되어 있어야 합니다.

6. 함수형 컴포넌트

앞에서 이야기 한 <anchored-heading> 컴포넌트는 단순한 컴포넌트 입니다. 어떤 상태도 없고 상태를 감시할 필요도, 라이프 사이클 관련 메소드도 없습니다. 단지 props를 가지는 기능만 있습니다. 이런 컴포넌트로 함수형 컴포넌트로 만들 수 있습니다. 즉 컴포넌트의 상태(data)가 없고, 인스턴스화 (this 컨텍스트가 없음)할 필요가 없을 때 함수형 컴포넌트를 사용할 수 있습니다.

Vue.component('my-component', {
  functional: true,
  // 인스턴스의 부족함을 보완하기 위해
  // 이제 2번째에 컨텍스트 인수가 제공됩니다.
  render: function (createElement, context) {
    // ...
  },
  // Props는 선택사항입니다.
  props: {
    // ...
  }
})

2.3.0 이전의 버전에서는 함수형 컴포넌트에서 props를 사용하려면 props 옵션을 정의해야 했지만, 2.3.0 이상에서는 props 옵션을 생략할 수 있습니다. 컴포넌트 노드에서 발견된 모든 속성은 암시적으로 props로 추출됩니다.

<template functional>
</template>

2.5.0+ 이후에서는 싱글 파일 컴포넌트(.vue 파일)를 사용할 경우, 위의 코드와 같이 템플릿 기반의 함수형 컴포넌트를 정의할 수 있습니다.

props: 전달받은 props 객체
children: VNode 자식의 배열
slots: 슬롯 객체를 반환하는 함수
data: 컴포넌트에 전달된 전체 데이터 객체
parent: 상위 컴포넌트에 대한 참조
listeners: (2.3.0+) 부모에게 등록된 이벤트 리스너 객체 data.on의 별칭입니다.
injections: (2.3.0+) inject 옵션을 사용하면 resolved injection을 가집니다.

함수형 컴포넌트의 render 함수의 전달인자인 context는 객체로 위의 값들을 가집니다.

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 태그 이름
      this.$slots.default // 자식의 배열
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

앞 부분에서 <achored-heading> 컴포넌트를 위의 코드와 같이 render 함수로 구현하였습니다. 위의 컴포넌트를 함수형 컴포넌트로 변경하는 것은 단순합니다.

Vue.component('anchored-heading', {
  functional: true,
  render: function (createElement, context) {
    return createElement(
      'h' + context.props.level,   // 태그 이름
      context.children // 자식의 배열
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

functional: true 를 추가합니다.
render 함수의 전달인자에 context를 추가합니다.
this.$slots.default를 context.children으로 변경합니다.
this.level을 context.props.level로 변경합니다.

위의 코드와 같이 함수형 컴포넌트로 변경 할 수 있습니다.

함수형 컴포넌트는 단순한 함수이기 때문에 랜더링에 들어가는 비용이 작습니다. 그러나 Vue 크롬 개발자 도구의 컴포넌트 트리에서 함수형 컴포넌트를 볼 수는 없습니다.

var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }

Vue.component('smart-list', {
  functional: true,
  render: function (createElement, context) {
    function appropriateListComponent () {
      var items = context.props.items

      if (items.length === 0)           return EmptyList
      if (typeof items[0] === 'object') return TableList
      if (context.props.isOrdered)      return OrderedList

      return UnorderedList
    }

    return createElement(
      appropriateListComponent(),
      context.data,
      context.children
    )
  },
  props: {
    items: {
      type: Array,
      required: true
    },
    isOrdered: Boolean
  }
})

또한 함수형 컴포넌트는 래퍼 컴포넌트로도 유용하게 사용할 수 있습니다.

1) `slots()` VS `children`

slots().default와 children은 유사하지만 다릅니다.

<my-functional-component>
  <p slot="foo">
    first
  </p>
  <p>second</p>
</my-functional-component>

위의 코드와 같이 함수형 컴포넌트에 두개의 자식 엘리먼트들이 있을 때, children은 두개의 단란을 반환하고, slots().default는 두번째 단락을 반환합니다.

참고

https://kr.vuejs.org/v2/guide/render-function.html

[Vue.JS] 사용자 정의 디렉티브

버미노트 — Thu, 7 Feb 2019 23:07:09 +0900

1. 시작

기본 디렉티브 (v-model, v-show 등..) 외에도 사용자가 직접 정의한 디렉티브를 등록 할 수 있습니다. 기본적으로 Vue 2.0의 코드 재사용 및 추상화의 기본 형식은 컴포넌트 입니다. 하지만 일반 엘리먼트의 DOM에 접근이 필요한 경우 사용자 정의 디렉티브가 유용하게 사용 될 수 있습니다.

// 전역 사용자 정의 디렉티브 v-focus 등록
Vue.directive('focus', {
  // 바인딩 된 엘리먼트가 DOM에 삽입되었을 때...
  inserted: function (el) {
    // 엘리먼트에 포커스를 줍니다
    el.focus()
  }
})

위의 코드는 페이지가 로드되면 해달 엘리먼트에 포커스를 주는 디렉티브 입니다. (참고, 모바일 사파리에서도는 동작하지 않습니다.)

directives: {
  focus: {
    // 디렉티브 정의
    inserted: function (el) {
      el.focus()
    }
  }
}

디렉티브를 로컬로 등록하기 위해서는 컴포넌트의 옵션에 directives 옵션을 사용해야 합니다.

<input v-focus>

이렇게 정의 된 focus 디렉티브는 위의 코드와 같이 v-focus로 사용할 수 있습니다.

2. 훅 함수

디렉티브를 정의 할 때, 여러가지 훅 함수를 제공합니다. 훅 함수는 모두 선택사항입니다.

bind: 디렉티브가 처음 엘리먼트에 바인딩 될 때 한번만 호출됩니다. 이 훅 함수는 일회성 설정을 하는데 유용합니다.
inserted: 바인딩 된 엘리먼트가 부모 노드에 삽일 되었을 때 호출됩니다. 부모 노드 존재를 보장하며, 반드시 document 내에 있는 것은 아닙니다.
update: 디렉티브를 포함하는 컴포넌트의 VNode가 업데이트 되었을 때 호출됩니다. 그러나 자식이 업데이트 전일 가능성이 있습니다. 이 훅이 실행 되었을 때는 디렉티브의 값이 변경되었을 수도 변경되지 않았을 수도 있습니다. 디렉티브의 현재 값과 이전 값을 비교하여 불필요한 업데이트를 건너 뛸 수 있습니다. (VNode에 대해서는 다음 포스팅 할 render functions에서 이야기 할 것입니다.)
componentUpdated: 포함하고 있는 컴포넌트의 VNode, 그것들의 자식의 VNode가 업데이트 되었을 때 호출됩니다.
unbind: 디렉티브가 엘리먼트로부터 언바인딩 된 경우에만 한번 호출됩니다.

3. 디렉티브 훅 전달인자

디렉티브 훅은 전달 인자을 가집니다.

el: 디렉티브가 바인딩 되는 엘리먼트입니다. 이 인자를 통해 DOM을 조작할 수 있습니다.
binding: 아래의 속성들을 가진 객체입니다.
- name: 디렉티브 이름, prefix(v-)가 없습니다.
- value: 디렉티브에서 전달 받은 값, 예를 들면 v-my-directive="1+1"인 경우 value는 2입니다.
- oldValue: 이전 값, update와 componentUpdated에서만 사용할 수 있습니다. 이 값을 통해 디렉티브로 전달 받은 값이 변경 되었는지 확인 할 수 있습니다.
- expression: 표현식 문자열, 예를 들면 v-my-directive="1+1"인 경우 expression은 "1+1"입니다.
- arg: 디렉티브의 전달인자, 전달인자가 있는 경우에만 존재합니다. 예를 들면, v-my-directive:foo이면 "foo"가 됩니다.
- modifiers: 디렉티브의 수식어 객체, 수식어가 있는 경우에만 존재합니다. 예를 들면, v-my-directive.foo.bar이면, 수식어 객체는 {foo: true, bar: true} 입니다.
vnode: Vue 컴파일러가 만든 가상 노드
oldVnode: 이전 가상 노드, update와 componentUpdated에서만 사용할 수 있습니다.

el 뿐만 아니라 모든 전달인자는 readonly로 사용해야 합니다. 절대 변경하면 안됩니다. 훅을 통해 이 정보들을 전달해야 하는 경우 dataset를 사용하면 됩니다.

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>

Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

new Vue({
  el: '#hook-arguments-example',
  data: {
    message: 'hello!'
  }
})

디렉티브 사용 예제

4. 함수 약어

대부분의 경우 bind와 update에서 같은 동작을 할 때가 있습니다. 다른 훅은 신경쓰지 않고, bind와 update에서만 동작을 하는 약어를 제공합니다.

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

함수 약어 사용 예제

5. 객체 리터럴

디렉티브에 여러 값이 필요한 경우, JavaScript 객체를 전달 할 수 있습니다. 디렉티브에 JavaScript 표현식을 사용할 수 있습니다.

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

참고

https://kr.vuejs.org/v2/guide/custom-directive.html

[Vue.JS] Mixins

버미노트 — Tue, 5 Feb 2019 00:23:55 +0900

1. 기초

Minxins는 컴포넌트에 재사용 가능한 기능을 배포하는 방법입니다. mixins 객체는 컴포넌트의 옵션에 정의됩니다. mixins를 사용하면 해당 mixin의 모든 옵션과 컴포넌트의 옵션들이 'Mixed' 됩니다.

// define a mixin object
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// define a component that uses this mixin
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

2. 옵션 병합

mixin과 컴포넌트의 옵션이 중첩이 된다면, 두 옵션은 'Merged' 됩니다.

`data`

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

data 객체는 재귀적 병합을 하며, mixin과 컴포넌트의 data가 충돌 될 경우, 컴포넌트의 data가 우선 순위를 갖습니다.

라이프 사이클 훅

var mixin = {
  created: function () {
    console.log('mixin hook called')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('component hook called')
  }
})

// => "mixin hook called"
// => "component hook called"

동일한 이름을 가진 라이프 사이클 훅 함수는 배열로 합쳐져 모두 호출됩니다. mixin의 훅 함수가 먼저 호출 되고, 그 후 컴포넌트의 훅 함수가 호출 됩니다.

`methods`, `components`, `directives`

methods와 components, directives 옵션들은 하나의 객체로 머지 됩니다. mixin와 컴포넌트의 옵션이 충돌 된다면 컴포넌트의 옵션이 더 높은 우선순위를 가집니다.

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

3. 전역 Mixin

mixin을 global 하도록 정의할 수 있습니다. mixin을 global로 정의하면, 모든 Vue 인스턴스에 mixin이 적용되어 영향을 미치기 때문에, 주의해서 사용해야 합니다.

// inject a handler for `myOption` custom option
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

위의 코드와 같이 전역 Mixin은 사용자 정의 옵션을 처리하는데 유용하게 사용 될 수 있습니다. 전역 Mixin은 모든 Vue 인스턴스에 영향을 주기 때문에 신중하게 사용되어야 합니다. 위의 예제와 같이 사용자 지정 옵션 처리에만 사용하는 것이 좋습니다. 중복 적용을 피하기 위해 앞으로 이야기 할 Plugins을 사용하는 것도 좋은 방법입니다.

4. 사용자 정의 옵션 병합 전략

사용자 지정 옵션을 병합하면, 기본값으로 기존 값을 덮어 쓰게 됩니다.

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // return mergedVal
}

위의 코드와 같이 Vue.config.optionMergeStrategies를 사용하면, 사용자 정의에 따라 병합됩니다.

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods

위의 코드와 같이 대부분의 경우 object-based 옵션은, methods를 사용하여 전략을 간당하게 적용할 수 있습니다.

const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
  if (!toVal) return fromVal
  if (!fromVal) return toVal
  return {
    getters: merge(toVal.getters, fromVal.getters),
    state: merge(toVal.state, fromVal.state),
    actions: merge(toVal.actions, fromVal.actions)
  }
}

위의 예제 코드는 Vuex의 1.x 버전의 병합 전략을 나타낸 예제입니다.

참고

https://vuejs.org/v2/guide/mixins.html

[Vue.JS] 컴포넌트 (고급:Handling Edge Cases)

버미노트 — Sat, 2 Feb 2019 22:46:41 +0900

1. Element & Component Access

대부분의 경우 다른 컴포넌트의 인스턴스에 접근하거나 DOM을 직접 조작하는 것은 피해야 합니다. 그러나 때로는 다른 컴포넌트의 인스턴스에 접근하거나 DOM을 직접 조작해야 할 때가 있습니다.

1) 루트 인스턴스 접근

$root를 사용하면 루트 인스턴스에 접근 가능합니다.

// The root Vue instance
new Vue({
  data: {
    foo: 1
  },
  computed: {
    bar: function () { /* ... */ }
  },
  methods: {
    baz: function () { /* ... */ }
  }
})

위의 코드와 같이 루트 인스턴스가 있을 때,

// Get root data
this.$root.foo

// Set root data
this.$root.foo = 2

// Access root computed properties
this.$root.bar

// Call root methods
this.$root.baz()

모든 자식 컴포넌트는 위의 코드와 같이 루트 엘리먼트에 접근하여 루트 인스턴스의 값들을 사용할 수 있습니다.

2) 부모 컴포넌트 인스턴스 접근

$root와 유사하게 $parent를 사용하면 부모 인스턴스에 접근 가능합니다. $parent를 사용하여 부모 컴포넌트의 데이터를 변경할 경우, 어플리케이션이 커진다면, 어느 자식 컴포넌트에서 데이터를 변경하였는지 알 수 없어 디버깅하기 더 어려워 질 수 있습니다. 하지만 몇몇의 라이브러리들을 사용할 때 부모 인스턴스를 접근하는 것이 유용할 때가 있습니다.

<google-map>
  <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
</google-map>

예를 들어, 위의 코드와 같이 Google Maps 라이브러리를 사용하여 컴포넌트를 만든다고 할 때, <google-map> 컴포넌트는 map 프로퍼티로 맵 정보를 가지고 있고, 자식 컴포넌트인 <google-map-markers> 컴포넌트가 부모 컴포넌트인 <google-map> 컴포넌트의 맵 정보를 가져와야 할 때, this.$parent.getMap 을 이용하여 맵 정보를 가져 올 수 있습니다.

<google-map>
  <google-map-region v-bind:shape="cityBoundaries">
    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
  </google-map-region>
</google-map>

위의 예제와 같이 <google-map-region> 이라는 컴포넌트가 <google-map>과 <google-map-markers> 사이에 사용될 수도 있다고 했을 때(선택적으로 사용되지 않을 수도 있음), <google-map-markers> 컴포넌트는 <google-map> 컴포넌트의 맵 정보를,

var map = this.$parent.map || this.$parent.$parent.map

위의 코드와 같이 사용할 수 있습니다.

3) 자식 컴포넌트 인스턴스, 자식 엘리먼트 접근

때로, 직접 자식 컴포넌트에 직접 접근해야 할 때가 있습니다. ref를 사용하면 자식 컴포넌트에 접근이 가능합니다.

<base-input ref="usernameInput"></base-input>

위의 코드와 같이 부모 컴포넌트에서 자식 컴포넌트를 선언하여 사용한 후 ref를 정의 했다면,

this.$refs.usernameInput

위의 코드와 같이 자식 컴포넌트에 직접 접근이 가능합니다.

<input ref="input">

또한 위의 코드와 같이, ref를 사용하여 기본 엘리먼트에 접근도 가능합니다.

Vue.component('base-input', {
  template: '<input ref="input">',
  methods: {
    // Used to focus the input from the parent
    focus: function () {
      this.$refs.input.focus()
    }
  }
})

자식 컴포넌트가 위의 코드과 같이 작성되었다면,

this.$refs.usernameInput.focus()

부모 컴포넌트에서는 위의 코드를 사용하여 자식 컴포넌트의 특정 엘리먼트에 접근도 가능해 집니다.

<ul>
  <li v-for="num of len" :key="num" ref="refArray">{{ num }}</li>
</ul>

ref는 v-for와 같이 사용할 수 있습니다. 위의 코드와 같이 ref와 v-for을 함께 사용한다면,

{refArray: Array(...)}

this.$refs의 값은 위의 코드와 같이 key는 refArray이고 value는 Array가 됩니다.

참고 - `$refs` 사용시 유의 사항

$refs는 랜더링 됭 후 값이 채워집니다. 또한 $refs는 반응적이지 않습니다.($refs가 변경 되어도 watch, computed 등으로 감지 하지 못함) 그렇기 때문에 template에서나 computed에서 $refs를 사용하는 것은 피해야 합니다.

4) 의존성 주입

<google-map>
  <google-map-region v-bind:shape="cityBoundaries">
    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
  </google-map-region>
</google-map>

위의 코드는 부모 컴포넌트 인스턴스 접근에서 다루었던 코드입니다. <google-map> 컴포넌트의 하위 컴포넌트에서 <google-map> 컴포넌트의 getMap 메소드를 접근하려면 $parent를 사용했습니다. provide와 inject를 사용한 의존성 주입을 통해 위의 방법을 구현 할 수 있습니다.

provide: function () {
  return {
    getMap: this.getMap
  }
}

<google-map> 컴포넌트에서는 하위 컴포넌트에서 사용할 수 있게 의존성을 주입할 메소드를 위의 코드와 깉이 정의해야 합니다. 위의 예제에서는 getMap을 하위 컴포넌트에서 사용할 수 있도록 할 것입니다.

inject: ['getMap']

하위 컴포넌트에서는 위의 코드와 같이 의정성 주입을 한 메소드를 사용할 수 있습니다. 위의 예제는 Fiddle에서 확인 할 수 있습니다.

위의 코드와 같이 의존성 주입을 사용하면 $parent를 사용하지 않고 모든 하위 컴포넌트에서 의존성 주입한 메소드를 사용할 수 있습니다. (위의 코드에서는 getMap 메소드) 의존성 주입을 사용하면 몇가지 장점이 있습니다.

부모 컴포넌트는 어떤 하위 컴포넌트에서 의존성 주입한 메소드를 사용하는지 알 필요가 없습니다.
하위 컴포넌트는 어떤 부모 컴포넌트에서 메소드를 의전송 주입을 하였는지 알 필요가 없습니다.
$parent는 전체 인스턴스를 노출시키지만, 의존성 주입을 사용하면 전체 인스턴스를 노출하지 않을 수 있습니다.

2. Programmatic Event Listeners

지금까지는 $emit으로 이벤트를 발생시키고 v-on으로 발생시킨 이벤트를 감지하는 형태를 사용하였습니다. Vue는 또 다른 이벤트 인터페이스를 제공합니다. 이 방법을 programmatic event listener라 이야기 하도록 하겠습니다.

$on(eventName, eventHandler) : eventName이라는 이벤트를 감지하여 이벤트가 발생할 경우 eventHandler를 실행합니다.
$once(eventName, eventHandler) : eventName이라는 이벤트를 한번만 감지하여 eventHandler를 실행합니다.
$off(eventName, eventHandler) : eventName이라는 이벤트 감지를 해제하여 eventHandler를 실행합니다.

위의 이벤트 리스너들은 일반적인 경우 사용할 필요는 없지만 컴포넌트의 인스턴스에서 수동으로 이벤트를 감지해야 할 때 주로 사용됩니다. 다른 서드 파트 라이브러리를 사용할 때 유용하게 사용할 수 있습니다.

// Attach the datepicker to an input once
// it's mounted to the DOM.
mounted: function () {
  // Pikaday is a 3rd-party datepicker library
  this.picker = new Pikaday({
    field: this.$refs.input,
    format: 'YYYY-MM-DD'
  })
},
// Right before the component is destroyed,
// also destroy the datepicker.
beforeDestroy: function () {
  this.picker.destroy()
}

위의 코드는 2가지 잠제적인 이슈가 있습니다.

라이프 사이클 훅에서 picker를 사용해야 할 경우, picker를 컴포넌트 인스턴스에 저장해야 합니다.
초기화 코드와, 해제 코드가 분리되어 있어, 코드 분석이 어려울 수 있습니다.

위의 2가지 이슈를 programmatic event listener를 사용하여 해결 할 수 있습니다.

mounted: function () {
  var picker = new Pikaday({
    field: this.$refs.input,
    format: 'YYYY-MM-DD'
  })

  this.$once('hook:beforeDestroy', function () {
    picker.destroy()
  })
}

위와 같은 방법을 사용하면 pikaday를 간편하게 여러번 사용할 수 있게 됩니다.

mounted: function () {
  this.attachDatepicker('startDateInput')
  this.attachDatepicker('endDateInput')
},
methods: {
  attachDatepicker: function (refName) {
    var picker = new Pikaday({
      field: this.$refs[refName],
      format: 'YYYY-MM-DD'
    })

    this.$once('hook:beforeDestroy', function () {
      picker.destroy()
    })
  }
}

위의 전체 예제 코드는 Fiddle에서 확인 할 수 있습니다.

3. 순환 참조

1) 재귀 컴포넌트

컴포넌트는 자신의 template에서 자신을 반복적으로 호출 할 수 있습니다.

name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'

주의하지 않으면 재귀 컴포넌트는 무한 루프를 만들 수도 있습니다. 그렇기 때문에 재귀 컴포넌트를 사용할 때 v-if 등을 사용하는 조건부 재귀 컴포넌트 인지 살펴보아야 합니다.

2) 컴포넌트간의 순환 참조

파일 탐색기와 같이 파일 디렉토리 드리를 작성해 보도록 하겠습니다.

<p>
  <span>{{ folder.name }}</span>
  <tree-folder-contents :children="folder.children"/>
</p>

위의 코드와 같이 tree-folder라는 컴포넌트를 만듭니다.

<ul>
  <li v-for="child in children">
    <tree-folder v-if="child.children" :folder="child"/>
    <span v-else>{{ child.name }}</span>
  </li>
</ul>

tree-folder-contents 컴포넌트는 위의 코드와 같습니다.

위의 코드를 살펴보면, 두 컴포넌트는 서로가 서로의 자식 컴포넌트이지 부모 컴포넌트입니다. 여기서 역설이 발생합니다. tree-folder 컴포넌트가 랜더링 되기 위해서는 tree-folder-contents 컴포넌트가 필요하고, tree-folder-contents 컴포넌트가 랜더링 되기 위해서는 tree-folder 컴포넌트가 필요합니다.

- 전역으로 컴포넌트 선언하여 순환 참조하기

이 역설은 Vue.component를 사용하여 전역으로 컴포넌트를 등록하면 해결 됩니다.

그러나 Webpack이나 Browserify등의 모듈러를 통해 지역으로 컴포넌트를 등록할 경우,

Failed to mount component: template or render function not defined.

위의 에러가 발생합니다. 위 에러를 해결하기 위한 방법으로 2가지가 있습니다.

- 지역으로 컴포넌트 선언하여 순환 참조하기

첫번째 방법은 tree-folder 컴포넌트를 시작점으로 잡고,

beforeCreate: function () {
  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}

위의 코드와 같이 beforeCreate 라이프 사이클 훅을 사용하여 동적으로 컴포넌트를 등록하는 방법이 있습니다.

두번째 방법은 비동기 컴포넌트를 사용하는 방법이 있습니다.

components: {
  TreeFolderContents: () => import('./tree-folder-contents.vue')
}

위의 코드와 같이 비동기 컴포넌트를 사용하여 위에서 말한 에러를 해결 할 수 있습니다.

4. Alternate Template Definitions

1) Inline Templates

하위 컴포넌트에 inline-template 속성을 사용 할 때, 컴포넌트의 내용은 그 하위 컴포넌트의 내용이 됩니다. 보다 유연한 템플릿 작성을 가능하게 합니다.

<my-component inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>
</my-component>

inline-template는 템플릿의 범위를 알아보기 힘들게 만듭니다. 그렇기 때문에 보통은 template 옵션을 사용하거나 .vue 파일의 template 엘리먼트를 사용하는 것이 좋습니다.

2) X-Templates

<script type=text/x-template">를 사용하여 템플릿을 정의하는 방법도 있습니다.

<script type="text/x-template" id="hello-world-template">
  <p>Hello hello hello</p>
</script>

Vue.component('hello-world', {
  template: '#hello-world-template'
})

위의 코드와 같은 방법으로 사용할 수 있습니다.

5. Controlling Updates

Vue의 반응형 시스템의 도움으로 언제 업데이트 되는지 알 수 있습니다. 그러나 반응형 데이터가 변경되지 않았음에도 불구하고 업데이트를 해야 할 경우나, 불필요한 업데이트를 막을 수 있는 방법도 있습니다.

1) 강제 업데이트

대부분의 경우 강제 업데이트 할 필요가 없습니다. 하지만 Array 데이터 주의 사항이나 Object 데이터 주의 사항을 지키지 않았을 경우 강제 업데이트를 해야 할 때가 있습니다. 이 경우 수동으로 업데이트를 해야 하는데 $forceUpdate를 사용하여 강제 업데이트를 진행 할 수 있습니다.

2) `v-once`

이름에도 알 수 있듯이 한번만 랜더링 되는 컴포넌트를 만들 때 사용됩니다. v-once를 사용하면 업데이트 되지 않는 정적인 컴포넌트를 랜더링 할 수 있습니다. v-once를 사용하여 업데이트 하지 않아도 되는 엘리먼트들을 정적으로 랜더링 한다면 더 나은 성능을 보일 수 있습니다.

참고

https://vuejs.org/v2/guide/components-edge-cases.html

https://kr.vuejs.org/v2/guide/components.html

[Vue.JS] 컴포넌트 (고급:Dynamic & Async Components)

버미노트 — Tue, 29 Jan 2019 00:11:12 +0900

1. 동적(Dynamic) 컴포넌트와 keep-alive

[Vue.JS] 컴포넌트 (기본) 에서 동적 컴포넌트에 관한 이야기를 하였습니다.

<component v-bind:is="currentTabComponent"></component>

위의 코드와 같이 is를 사용하여 동적으로 컴포넌트를 랜더링 할 수 있습니다,

탭 이동시 새로운 컴포넌트가 그려지기 때문에 이전의 tab의 상태를 기억하지 못합니다,

is를 사용한 동적 컴포넌트 랜더링을 사용하여 위의 그림와 같이 탭 뷰를 만들 수 있습니다. 하지만 탭을 이동 할 때마다, 새로운 컴포넌트가 그려지기 때문에, 이전의 tab의 상태를 기억하지 못합니다. 위의 예제에서는 Posts 탭에서 Hipster Ipsum을 클릭 했지만, Archive 탭으로 변경하고 다시 Posts 탭으로 돌아오면 이전에 클릭했던 Hipster Ipsum이 보이는 상태가 아니게 됩니다.

탭을 변경 할 때, 이전 탭의 상태를 유지하는 것이 성능 상 좋을 수 있습니다.

<!-- Inactive components will be cached! -->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

위의 코드와 같이 <keep-alive>를 사용하면 인스턴스를 캐시로 저장 할 수 있습니다.

<keep-alive>를 사용하면 생성된 탭의 인스턴스를 캐시에 저장 하고 있기 때문에, 탭을 변경 후 돌아 왔을 때 탭을 새로 그리지 않고 이전 탭을 보이게 됩니다.

keep-alive는 이전 상태를 기억합니다,

위의 그림과 같이 Posts 탭에서 Hipster Ipsum을 클릭한 후 Archive 탭을 클릭하고 Posts 탭으로 돌아온 경우 Posts 탭을 캐시에 저장하고 있기 때문에 다시 돌아왔을 때, 이전에 클릭한 Hipster Ipsum이 보이게 됩니다.

위의 예제는 Fiddle에서 확인 할 수 있습니다.

2. 비동기(Async) 컴포넌트

어플리케이션이 커지면, 작은 부분으로 나누고 필요할 때에 가져와 사용하는 구조를 구현해야 할 때가 있습니다. 비동기 컴포넌트를 사용하여 필요할 때 비동기적으로 컴포넌트를 불러와 사용할 수 있습니다.

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // Pass the component definition to the resolve callback
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

위의 코드와 같이 팩토리 함수를 사용하여 비동기 컴포넌트를 구현 할 수 있습니다. 컴포넌트를 가져오는 것이 성공하면 resolve 콜백을 실행 해야 하고, 실패할 경우 reject 콜백을 실행해야 합니다. resolve와 reject의 인자는 컴포넌트를 생성 할 때의 옵션 값과 동일 합니다.

Vue.component('async-webpack-example', function (resolve) {
  // This special require syntax will instruct Webpack to
  // automatically split your built code into bundles which
  // are loaded over Ajax requests.
  require(['./my-async-component'], resolve)
})

위의 코드와 같이 Webpack을 사용하여 다른 파일로 구분된 컴포넌트를 비동기 컴포넌트로 만들 수 있습니다.

Vue.component(
  'async-webpack-example',
  // The `import` function returns a Promise.
  () => import('./my-async-component')
)

위의 코드와 같이 Webpack 2와 ES2015 문법을 사용하여 비동기 컴포넌트를 만들 수도 있습니다.

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})

지역적으로 컴포넌트를 등록할때는 위의 코드와 같이 사용해야 합니다.

1) Handling Loading State

2.3.0 이상의 Vue 버전에서 사용할 수 있는 기능입니다. 비동기 컴포넌트를 좀 더 간결하고, 직관적으로 사용할 수 있게 되었습니다.

const AsyncComponent = () => ({
  // The component to load (should be a Promise)
  component: import('./MyComponent.vue'),
  // A component to use while the async component is loading
  loading: LoadingComponent,
  // A component to use if the load fails
  error: ErrorComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})

2.3.0 이상 부터 지원하는 간결한 비동기 컴포넌트 구현 방법

참고

https://vuejs.org/v2/guide/components-dynamic-async.html

[Vue.JS] 컴포넌트 (고급:slot)

버미노트 — Sat, 26 Jan 2019 20:55:02 +0900

1. Slot Content

<navigation-link url="/profile">
  Your Profile
</navigation-link>

부모 컴포넌트에서 자식 컴포넌트를 위의 코드와 같이 사용하여 자식 컴포넌트의 하위 엘리먼트의 값들을 보여주고 싶다면,

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

위의 코드와 같이 자식 컴포넌트가 작성되어야 합니다. 위의 코드들이 랜더링 되면 <slot> 엘리먼트는 Your Profile이라는 문구로 대체됩니다. <slot>은 문자열 뿐만 아니라 모든 HTML과 대체 될 수 있습니다.

<navigation-link url="/profile">
  <!-- Add a Font Awesome icon -->
  <span class="fa fa-user"></span>
  Your Profile
</navigation-link>

위의 코드와 같은 기본 HTML 태그 뿐만 아니라,

<navigation-link url="/profile">
  <!-- Use a component to add an icon -->
  <font-awesome-icon name="user"></font-awesome-icon>
  Your Profile
</navigation-link>

위의 코드와 같은 사용자 정의 컴포넌트도 <slot>과 대체 될 수 있습니다. 자식 컴포넌트에서 <slot>을 사용하지 않았다면, 부모 컴포넌트에서 자식 컴포넌트의 하위 엘리먼트로 넘겨 준 값들은 모두 무시 됩니다.

2. Named Slots

부모 컴포넌트에서 자식 컴포넌트로 여러개의 하위 엘리먼트를 넘겨줄 때 이름이 있는 <slot>을 사용한다면 특정 위치를 지정할 수 있습니다.

<div class="container">
  <header>
    <!-- We want header content here -->
  </header>
  <main>
    <!-- We want main content here -->
  </main>
  <footer>
    <!-- We want footer content here -->
  </footer>
</div>

예를 들면, 위의 코드와 같이 <base-layout>이라는 컴포넌트가 있습니다. 하당 컴포넌트에는 <header>와 <main>, <footer> 3개의 정보가 채워져야 합니다.

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

이 경우에 위의 코드와 같이 이름이 있는 <slot>을 사용할 수 있습니다.

<base-layout>
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template slot="footer">
    <p>Here's some contact info</p>
  </template>
</base-layout>

부모 컴포넌트에서는 자식 컴포넌트인 <base-loyout> 컴포넌트를 위의 코드와 같이 사용할 수 있습니다.

<base-layout>
  <h1 slot="header">Here might be a page title</h1>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <p slot="footer">Here's some contact info</p>
</base-layout>

위의 코드와 같이 <template>를 사용하지 않고 직접 엘리먼트에 slot 속성을 사용할 수도 있습니다. 이름이 없는 기본 <slot>은 항상 하나만 존재해야 합니다.

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

<base-layout> 컴포넌트 예제는 결국 위의 코드와 같이 랜더링됩니다.

3. Default Slot Content

slot은 기본값을 제공합니다.

<button type="submit">
  <slot>Submit</slot>
</button>

위의 코드와 같이 <submit-button> 컴포넌트가 있을 때, <submit-button> 컴포넌트의 하위 엘리먼트가 제공되지 않는다면, 기본값으로 Submit이 화면에 보이게 됩니다. <submit-button> 컴포넌트의 하위 엘리먼트가 존재한다면, Submit이 아닌 <submit-button> 컴포넌트의 하위 엘리먼트가 화면에 나타나게 됩니다.

4. Compilation Scope

slot에 data를 사용하고 싶을 때,

<navigation-link url="/profile">
  Logged in as {{ user.name }}
</navigation-link>

위의 코드와 같이 사용할 수 있습니다. 이 때 사용한 user.name 은 <navigation-link> 컴포넌트의 스코프에 있는 값이 아닌, <navigation-link> 컴포넌트를 사용한 부모 컴포넌트의 스코프에 있는 값입니다.

5. Scoped Slots

이 기능은 2.1.0 이상의 Vue 버전에서 제공하는 기능입니다.

slot을 사용할 때 하위 컴포넌트의 데이터를 부모 컴포넌트에서 사용해야 할 때가 있습니다. 예를 들어,

<ul>
  <li
    v-for="todo in todos"
    v-bind:key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

위의 코드와 같이 <todo-list>라는 컴포넌트가 있을 때, 위의 컴포넌트는 <toto-list> 컴포넌트 스코프 안에 있는 todos의 값을 나타냅니다. 부모 컴포넌트에서 자식 컴포넌트의 data를 사용하기 위해서는,

<ul>
  <li
    v-for="todo in todos"
    v-bind:key="todo.id"
  >
    <!-- We have a slot for each todo, passing it the -->
    <!-- `todo` object as a slot prop.                -->
    <slot v-bind:todo="todo">
      <!-- Fallback content -->
      {{ todo.text }}
    </slot>
  </li>
</ul>

자식 컴포넌트인 <todo-list> 컴포넌트에서는 위의 코드와 같이 작성되어야 합니다.

<todo-list v-bind:todos="todos">
  <!-- Define `slotProps` as the name of our slot scope -->
  <template slot-scope="slotProps">
    <!-- Define a custom template for todo items, using -->
    <!-- `slotProps` to customize each todo.            -->
    <span v-if="slotProps.todo.isComplete">✓</span>
    {{ slotProps.todo.text }}
  </template>
</todo-list>

부모 컴포넌트에서는 위의 코드와 같이 작성하여 자식 컴포넌트의 data를 사용할 수 있습니다. 이 때 slot-scope는 <template>에서 사용 되었지만 2.5.0 이상의 버전에서는 일반 엘리먼트에서도 사용 가능해 졌습니다.

1) Destructuring `slot-scope`

slot-scope에 구조분해 문법 사용이 가능합니다.

<todo-list v-bind:todos="todos">
  <template slot-scope="{ todo }">
    <span v-if="todo.isComplete">✓</span>
    {{ todo.text }}
  </template>
</todo-list>

위의 코드와 같이 구조분해 문법을 사용하면 좀 더 간결한 코드가 될 수 있습니다.

참고

https://vuejs.org/v2/guide/components-slots.html

[Vue.JS] 컴포넌트 (고급:Custrom Events)

버미노트 — Thu, 24 Jan 2019 01:12:54 +0900

1. 이벤트 이름

$emit을 이용하여 커스텀 이벤트를 만들 때, 이벤트 이름은 kebab-case를 사용하는 것이 좋습니다.

컴포넌트의 이름이나 prop의 이름과 달리 이벤트 이름은 자동으로 변환(camelCase <-> kebab-case)되지 않습니다. 이벤트 이름은 정확히 일치하는 이벤트 리스너와 매칭됩니다. 예를 들어,

this.$emit('myEvent')

위의 코드와 같이 myEvent 이벤트를 발생 시킨다고 할 때, 부모 컴포넌트는

<my-component v-on:my-event="doSomething"></my-component>

위의 코드와 같이 myEvent를 받기 위해 v-on:my-event를 사용한다면, my-event는 myEvent가 발생 했다는 것을 감지 할 수 없습니다. 컴포넌트의 이름이나 prop의 이름과 다르게 이벤트 이름은 자바스크립트의 변수나, 속성으로 사용되지 않기 때문에 이벤트 이름은 camelCase나 PascalCase로 작성될 이유가 없습니다.

HTML에서는 모든 글자를 소문자로 인식하기 때문에 v-on:myEvent는 결국 v-on:myevnet와 동일하게 인식됩니다. 결국 this.$emit('myEvent')로 myEvent를 발생 시켜도 이벤트를 감지하기 못하게 됩니다.

결론만 간단히 이야기 하자면, 커스텀 이벤트의 이름은 kebab-case를 사용해야 합니다.

2. 컴포넌트에서 `v-model` 사용하기

2.2.0 이상의 Vue 버전에서 추가된 기능입니다.

v-model은 value 속성과 input 이벤트를 함께 사용하는 것과 같습니다. 즉. v-model을 사용한다는 것은 input 이벤트가 발생 했을 때, value 값을 변경하는 것과 동일합니다. 하지만 체크박스나 라디오 버튼의 경우 이벤트가 발생 했을 때, value값을 변경하는 것이 아닌 checked의 값을 바꿈으로 동작합니다. 체크박스와 라이오 버튼에서 value는 다른 목적으로 사용됩니다. 이 때 model 옵션을 사용하면, 위에서 이야기한 문제를 해결 할 수 있습니다.

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'custom-change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <label>
      <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('custom-change', $event.target.checked)"
      >{{ checked }}
    </label>
  `
})

위의 코드와 같이 작성된 컴포넌트가 있다면 부모 컴포넌트에서 v-model은,

<base-checkbox v-model="lovingVue"></base-checkbox>

위의 코드와 같이 사용할 수 있습니다.

lovingVue의 값은 props의 checked로 값이 전달 됩니다. 그리고 자식 컴포넌트에서 change 이벤트가 발생되면, $emit('custom-change')가 실행되고, $emit의 두번째 인자로 전달된 값으로 lovingVue의 값이 업데이트 됩니다. 자식 컴포넌트에서 model 옵션의 prop로 정의 된 checked는 컴포넌트의 props에 동일한 이름으로 정의 되어야 합니다.

위의 예제는 CodePen에서 확인 할 수 있습니다.

3. 컴포넌트에 네이티브 이벤트 바인딩하기

컴포넌트의 루트 엘리먼트에서 네이티브 이벤트를 받기 위해서는 v-on 이벤트 리스너에 .native 수식어를 사용하면 됩니다.

<base-input v-on:focus.native="onFocus"></base-input>

위의 코드와 같이 루트 엘리먼트에 네이티브 이벤트 리스너를 등록하면, 유용할 수 있지만, 특정 엘리먼트에는 좋은 방법이 아닐 수 아닙니다.

<label>
  {{ label }}
  <input
    v-bind="$attrs"
    v-bind:value="value"
    v-on:input="$emit('input', $event.target.value)"
  >
</label>

예를 들어, <base-input> 컴포넌트의 위의 코드와 같을 경우, <base-input> 컴포넌트의 루트 엘리먼트는 <label>이 되고, <label>은 focus 이벤트를 핸들링하지 못하기 때문에, 에러는 발생하지 않지만, v-on:focus.native="onFocus"은 동작하지 않습니다.

이 문제를 해결하려면 $listeners 속성을 사용하는 것이 좋습니다.

{
  focus: function (event) { /* ... */ }
  input: function (value) { /* ... */ },
}

$listeners는 위의 코드와 같이 이벤트 리스너를 담고 있는 Object 입니다. $listeners 속성을 사용하면 모든 이벤트 리스너를 특정 자식 엘리먼트로 전달 할 수 있습니다.

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` merges objects together to form a new object
      return Object.assign({},
        // We add all the listeners from the parent
        this.$listeners,
        // Then we can add custom listeners or override the
        // behavior of some listeners.
        {
          // This ensures that the component works with v-model
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
})

4. `.sync` 수식어

.sync 수식어는 2.3.0 이상의 Vue 버전에서 사용할 수 있습니다.

때때로 부모 컴포넌트와 자식 컴포넌트가 양방향 데이터 통신을 해야 할 때가 있습니다. 하지만 양방향 데이터 통신은 유지보수를 어렵게 만들 수 있습니다. 자식 컴포넌트에서 부모 컴포넌트의 값을 수정하기 때문에, 부모 컴포넌트에서는 어떠한 자식 컴포넌트가 값을 수정한 것인지 파악하기 어렵게 될 수 있습니다. 그렇기 때문에 자식 컴포넌트에서 update:myPropName을 이용하여 이벤트를 부모 컴포넌트로 전달하는 방법으로 양방향 데이터 통신을 구현할 것입니다.

자식 컴포넌트에서 title prop를 업데이트 하려고 할 때,

this.$emit('update:title', newTitle)

위의 코드와 같이 $emit을 사용하여 부모 컴포넌트로 데이터를 전달 합니다. 그러면 부모 컴포넌트는,

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

위의 코드와 같이 :update:title를 사용하여 자식 컴포넌트로 부터 데이터를 전달 받습니다. 이와 같은 동작을 .sync 수식어를 통하여,

<text-document v-bind:title.sync="doc.title"></text-document>

위의 코드와 같이 간편하게 구현 할 수 있습니다.

* 참고 - `v-bind`와 `.sync`를 이용하여 양방향 데이터 통신을 할 때 유의사항

v-bind:title.sync="doc.title + '!'" 와 같은 표현식은 정상 동작하지 않습니다. v-model와 유사하게 property 이름만 전달 되어야 합니다.

.sync도 v-bind를 사용하여 객체를 통째로 props로 전달 하는 것이 가능합니다.

<text-document v-bind.sync="doc"></text-document>

위의 코드와 같이 사용하면 v-bind에 객체를 넘기는 것과 동일한 동작을 합니다. 즉 v-bind.sync에 객체를 넘기면 객체에 있는 모든 값들이 prop로 인식됩니다.

* 참고 - `v-bind.sync`를 사용할 때 주의 사항

v-bind.sync="{ title: doc.title }" 과 같이 사용할 수 없습니다. 파싱을 할 때 너무 많은 예외 케이스들이 발생하여 이와 같은 표현식은 사용할 수 없습니다.

참고

https://vuejs.org/v2/guide/components-custom-events.html

[Vue.JS] 컴포넌트 (고급:props)

버미노트 — Mon, 21 Jan 2019 01:23:21 +0900

1. prop 표기법 (camelCase VS kebab-case)

HTML 속성은 대소문자를 구별하지 않습니다. 모든 대문자를 소문자로 인식합니다. Vue에서 HTML을 표현 할 때 보통 kebal-case로 표현하고, JavaScript에서 prop를 받아 사용할 때는 camelCase를 사용합니다.

<!-- kebab-case in HTML -->
<blog-post post-title="hello!"></blog-post>

HTML에서는 kebal-case(post-title)를 사용합니다.

Vue.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

JavaScript에서는 camelCase(postTitle)를 사용합니다.

2. prop 타입

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

위의 코드와 같이 props는 string 배열로 정의 할 수 있습니다.

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

또한 위의 코드와 같이 prop에 특정 객체 타입을 지정할 수 있습니다. 이렇게 사용하면 prop를 좀 더 구체적으로 문서화 하여 다른 사람이 코드를 보았을 때, 좀 더 이해하기 쉬운 코드가 될 수 있습니다. 뿐만 아니라, 지정된 타입 이외의 타입이 지정되면 콘솔에 경고 메시지가 출력 되기 때문에, 정상적이지 않은 prop가 넘겨진 것을 단번에 알 수도 있습니다.

3. prop에 정적, 동적 데이터 넘겨주기

<blog-post title="My journey with Vue"></blog-post>

위의 코드와 같이 prop를 통해 정적인 데이터를 넘겨 줄 수 있습니다.

<!-- Dynamically assign the value of a variable -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- Dynamically assign the value of a complex expression -->
<blog-post
  v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>

또한 위의 코드와 같이 v-bind를 사용하여 동적인 데이터를 넘겨 줄 수도 있습니다. prop로 모든 값들은 전달이 가능합니다.

1) `Number`

<!-- Even though `42` is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.       -->
<blog-post v-bind:likes="42"></blog-post>

<!-- Dynamically assign to the value of a variable. -->
<blog-post v-bind:likes="post.likes"></blog-post>

prop로 Number 타입을 넘겨 줄 때 v-bind를 통해 직접 숫자를 넘겨 줄 경우(v-bind:likes="42" 와 같이) v-bind를 사용할 경우 자바스크립트 표현식으로 사용되기 때문에 넘겨진 숫자는 문자열이 아닌 숫자로 인식됩니다.

2) `Boolean`

<!-- Including the prop with no value will imply `true`. -->
<blog-post is-published></blog-post>

<!-- Even though `false` is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.          -->
<blog-post v-bind:is-published="false"></blog-post>

<!-- Dynamically assign to the value of a variable. -->
<blog-post v-bind:is-published="post.isPublished"></blog-post>

<blog-post is-published></blog-post>와 같이 prop를 정의하고 값을 넘겨주지 않는다면 true 값이 전달 된 것으로 인식됩니다.

3) `Array`

<!-- Even though the array is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.            -->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>

<!-- Dynamically assign to the value of a variable. -->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

4) `Object`

<!-- Even though the object is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.             -->
<blog-post
  v-bind:author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
></blog-post>

<!-- Dynamically assign to the value of a variable. -->
<blog-post v-bind:author="post.author"></blog-post>

5) 한꺼번에 넘겨주기

v-bind:props-name을 사용하지 않고 v-bind로 값을 props로 통째로 넘겨줄 수도 있습니다.

post: {
  id: 1,
  title: 'My Journey with Vue'
}

<blog-post v-bind="post"></blog-post>

위의 코드와 값이 v-bind로 값이 통째로 넘겨 주었다면,

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

위의 코드와 같은 동작을 하게 됩니다.

4. 단방향 데이터 흐름

컴포넌트는 부모 컴포넌트에서 자식 컴포넌트를 데이터를 보내는 단방향 데이터 흐름을 가지게 됩니다. 단방향 데이터 흐름은 자식 컴포넌트에서 부모 컴포넌트의 데이터가 변경되는 것을 막기 때문에, 어플리케이션의 데이터 흐름을 단순하게 만들 수 있습니다.

부모 컴포넌트가 업데이트 되면, 자식 컴포넌트로 넘겨주는 props 또한 업데이트 되기 때문에, 자식 컴포넌트도 부모 컴포넌트 따라 업데이트 됩니다. 그리고, 자식 컴포넌트에서 props를 수정하려고 시도 할 때 콜솔 경고를 출력 하게 됩니다.

참고 - `Object`와 `Array` 타입의 prop를 사용 할 경우 유의사항

Object와 Array를 자식 컴포넌트로 넘겨줄 때는 Object와 Array는 reference로 넘겨주기 때문에 Object, Array 형태의 prop를 자식 컴포넌트에서 변경 할 때, 부모 컴포넌트도 변경 됩니다.

자식 컴포넌트에서 부모 컴포넌트로 전달 받은 prop 값을 수정해야 할 필요가 있을 때가 있습니다.

1) prop는 초기 값으로 사용되고 이후 로컬 데이터로 사용하고 싶은 경우

위의 경우에는 prop 값을 초기 값으로 사용하는 로컬 data를 선언해야 합니다.

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

prop를 초기 값으로 사용해야 할 경우에는 로컬 데이터를 만들고 prop를 초기 값으로 사용합니다.

2) prop를 가공해서 사용해야 할 경우

위의 경우에는 computed 속성을 사용하여 해결 할 수 있습니다.

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

prop를 가공해서 사용해야 하는 경우, computed 속성을 사용합니다.

5. prop 유효성 체크

prop를 정의 할 때, 몇가지의 요구사항을 체크 할 수 있습니다. 정의 한 요구사항이 만족하지 않을 경우 콘솔 경고를 출력하게 됩니다. 코드를 만든 당사자가 아닌 다른 사람이 컴포넌트를 수정해야 할 때, prop의 요구사항을 정의한다면 코드를 이해하는데 도움이 될 수 있습니다.

Vue.component('my-component', {
  props: {
    // Basic type check (`null` matches any type)
    propA: Number,
    // Multiple possible types
    propB: [String, Number],
    // Required string
    propC: {
      type: String,
      required: true
    },
    // Number with a default value
    propD: {
      type: Number,
      default: 100
    },
    // Object with a default value
    propE: {
      type: Object,
      // Object or array defaults must be returned from
      // a factory function
      default: function () {
        return { message: 'hello' }
      }
    },
    // Custom validator function
    propF: {
      validator: function (value) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

prop에 몇가지 유효성 검사를 체크할 수 있습니다.

참고 - prop의 `default`, `validator`를 사용할 때 유의 사항

prop의 유효성 검사에서 사용되는 default와 validator 함수는 Vue의 인스턴스가 생성되기 전에 실행 되기 때문에, default와 validator 함수에서는 data, computed, method 등.. 을 사용할 수 없습니다.

1) Type 체크

prop의 type 옵션으로 사용할 수 있는 몇가지 기본 타입을 제공합니다.

String
Number
Boolean
Array
Object
Date
Function
Symbol

위의 8가지 타입 이외의 커스텀 타입의 유효성 체크도 가능합니다. instanceof 를 통해 타입의 유효성을 체크 합니다.

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

Vue.component('blog-post', {
  props: {
    author: Person
  }
})

prop의 author를 사용하여 커스텀 타입의 유효성 체크가 가능합니다. 위의 예제는 new Person으로 prop가 만들어졌는지 체크하게 됩니다.

6. Non-Prop 속성

non-prop 속성은 attribute로 전달 되었지만, 컴포넌트에서 props로 정의 되지 않은 속성을 이야기 합니다. 컴포넌트에서는 props로 정의 된 값 뿐만 아니라 임의의 attribute를 정의 해서 사용할 수 있습니다. 이 기능을 허용하면서 HTML 태그에 커스텀 속성을 추가하는 기타 다른 라이브러리와 함께 사용이 가능해 집니다.

1) 기본 속성과 바꾸기/병합하기

<input type="date" class="form-control">

bootstrap-date-input 이라는 컴포넌트가 위의 코드와 같이 정의 되어 있다고 할 때,

<bootstrap-date-input
  data-date-picker="activated"
  class="date-picker-theme-dark"
></bootstrap-date-input>

bootstrap-date-input 컴포넌트를 위의 코드와 같이 사용된다면,

class 속성의 form-control와 date-picker-theme-dark는 병합되어, class="form-control date-picker-theme-dark"가 됩니다.
data-date-picker 속성은 추가 됩니다.

<input type="date" class="form-control date-picker-theme-dark" data-date-picker="activated">

위의 코드와 같이 랜더링됩니다.

class 속성와 style 속성은 부모 컴포넌트에서 자식 컴포넌트를 선언 할 때 사용된 속성와 자식 컴포넌트에서 정의 된 속성이 병합이 됩니다. 하지만 그 외의 속성은 부모 컴포넌트에서 자식 컴포넌트를 선언 할 때 사용된 값으로 대체됩니다.

<bootstrap-date-input
  type="text"
  data-date-picker="activated"
  class="date-picker-theme-dark"
></bootstrap-date-input>

예를 들어, 위의 코드와 같이 컴포넌트를 사용한다면 실제로는,

<input type="text" class="form-control date-picker-theme-dark" data-date-picker="activated">

위의 코드와 같이 랜더링 됩니다.

2) Attribute 상속 받지 않기

inheritAttrs: false로 설정한다면, 부모 컴포넌트로부터 전달 받은 Attribute가 자식 컴포넌트의 Attribute로 설정되지 않습니다.

<base-input placeholder="inherit"></base-input>

즉 위의 코드와 같이 작성된다고 해도,

Vue.component('base-input', {
  inheritAttrs: false,
  template: '<input />'
})

위의 코드와 같이 inheritAttrs: false로 정의 되어 있다면 실제 랜더링은,

<input />

위의 코드와 같이 랜더링 됩니다. 위의 코드는 CodePen에서 확인 할 수 있습니다.

inheritAttrs: false와 $attrs를 함께 사용한다면 선택적으로 필요한 속성만 자식 컴포넌트에 랜더링 할 수 있게 됩니다.

<div id="app">
  <base-input
    v-model="username"
    class="username-input"
    placeholder="Enter your username"
  ></base-input>
</div>

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})

new Vue({
  el: '#app'
});

위의 코드는 CodePen에서 확인 할 수 있습니다.

참고

https://vuejs.org/v2/guide/components-props.html

[Vue.JS] 컴포넌트 (기본)

버미노트 — Wed, 16 Jan 2019 22:56:30 +0900

이번 포스트에서는 SPA에서 가장 중요하다 이야기 되는 컴포넌트에 관해 이야기 할 것입니다.

1. 기본 예제

// Define a new component called button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button @click="count++">You clicked me {{ count }} times.</button>'
});

위의 예제는 <button-counter> 라는 이름으로 재사용이 가능한 컴포넌트입니다.

<div id="app">
  <button-counter><button-counter/>
</div>

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button @click="count++">You clicked me {{ count }} times.</button>'
});

new Vue({
  el: '#app'
});

위의 예제와 같이 컴포넌트를 사용할 수 있습니다. 컴포넌트를 생성할 때 사용되는 옵션은 new Vue에 사용되는 옵션(data, computed, watch, methods ...)과 동일 합니다. 단 하나의 예외는 컴포넌트에는 el 옵션을 사용할 수 없다는 것입니다.

위의 코드의 결과는 CodePen에서 확인 할 수 있습니다.

2. 컴포넌트 재사용

<div id="app">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: 'You clicked me {{ count }} times.'
});

new Vue({
  el: '#app'
});

컴포넌트는 원하는 만큼 여러번 재사용이 가능합니다. 위의 예제의 버튼들은 클릭 될 때 각각의 count 값을 나타냅니다. 컴포넌트를 사용할 때 마다 컴포넌트의 인스턴스가 생성되기 때문에 컴포넌트 마다 서로 다른 count를 가지게 되는 것입니다.

위의 예제 결과는 CodePen에서 확인 할 수 있습니다.

* 참고 - 컴포넌트의 `data` 옵션은 반드시 함수형이어야 합니다.

new Vue에서 옵션으로 넘겨주는 data는 객체형, 함수형 모두 가능합니다. 하지만 컴포넌트에서 data는 반드시 함수형이여야 합니다.

3. 컴포넌트 구조

Vue는 흔히 컴포넌트가 트리 형태로 중첩되어 사용됩니다.

예를 들면, 헤더와 사이드바, 콘텐츠 영역으로 나뉘며, 콘텐츠 영역은 포스트 등.. 각각의 영역은 다른 컴포넌트로 구성되어 집니다.

Vue의 template에 컴포넌트가 사용되기 위해서는 Vue가 알 수 있도록 컴포넌트가 등록되어야 합니다. 전역으로 사용할 수 있는 글로벌 방식, 해당인스턴스에서만 사용할 수 있는 로컬 방식 두가지 방법으로 컴포넌트를 등록 할 수 있습니다.

Vue.component('my-component-name', {
  // ... options ...
})

위의 방법을 사용하여 글로벌 방식으로 컴포넌트를 등록할 경우, 모든 Vue 인스턴스에서 컴포넌트를 사용 할 수 있게 됩니다.

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

위의 방법을 사용하여 로컬 방식으로 컴포넌트를 등록할 경우, 컴포넌트를 등록한 Vue 인스턴스에서만 컴포넌트를 사용할 수 있습니다.

4. `props` 사용하기

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해 흔히 사용 됩니다. props는 data와 유사하게 사용 가능한 속성입니다.

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

위의 예제와 같이 props를 정의하면 정의한 이름으로 template에 사용 가능합니다. props로 원하는 만큼 전달하여 사용할 수 있으며, 모든 값을 props로 전달 가능합니다.

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

부모 컴포넌트에서는 위의 예제와 같이 자식 컴포넌트로 데이터 전달을 할 수 있습니다.

<div id="app">
  <blog-post
    v-for="post in posts"
    v-bind:key="post.id"
    v-bind:title="post.title"
  ></blog-post>
</div>

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

new Vue({
  el: '#app',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]    
  }
});

위의 예제와 같이 v-for와 props를 함께 사용하면 코드 중복 없이 간결하게 코딩이 가능합니다.

위의 예제는 CodePen에서 확인 할 수 있습니다.

5. 단일 루트

컴포넌트는 단일 루트로 감싸져야 합니다. 이전에 이야기 하면서 예를 들었던 <blog-post>로 이야기 하자면,

<h3>{{ title }}</h3>

<blog-post> 컴포넌트는 위의 코드와 같이 title만 나타내는 하나의 엘리먼트만 가지고 있습니다.

<h3>{{ title }}</h3>
<div v-html="content"></div>

여기에 content를 나타내는 엘리먼트를 추가하기 위해 위의 예제와 같이 작성하면 에러가 발생하게 됩니다.

<div class="blog-post">
  <h3>{{ title }}</h3>
  <div v-html="content"></div>
</div>

컴포넌트는 위의 예제와 같이 단일 루트로 감싸져야 합니다.

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
  v-bind:content="post.content"
  v-bind:publishedAt="post.publishedAt"
  v-bind:comments="post.comments"
></blog-post>

위의 예제와 같이 컴포넌트가 커지고, 많은 데이터를 컴포넌트로 넘겨주어야 할 때 모든 데이터를 props로 넘겨주는 것은 비효율적일 수 있습니다.

<div id="app">
  <blog-post
    v-for="post in posts"
    v-bind:key="post.id"
    v-bind:post="post"
  ></blog-post>
</div>

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
})

new Vue({
  el: '#app',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue', content: '1st' },
      { id: 2, title: 'Blogging with Vue', content: '2nd' },
      { id: 3, title: 'Why Vue is so fun', content: '3th' }
    ]
  }
});

컴포넌트는 단일 루트 엘리먼트여야 합니다.

여러 데이터를 자식 컴포넌트로 전달해야 할 때 전달되어야 할 모든 값을 props로 전달 하는 것이 아니라, 위의 예제와 같이 하나의 객체로 묶어 props로 넘기는 것이 효율적입니다. 나중에 추가로 값을 전달 해야 할 경우, props를 추가하는 것이 아니라 객체에 값을 추가하여 넘겨 주는 것으로 코드 변경을 최소화 할 수 있습니다.

위의 예제는 CodePen에서 확인 할 수 있습니다.

6. 부모 컴포넌트로 데이터 전달

자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달해야 할 때가 있습니다. 그 때 사용되는 것이 $emit 입니다.

예를 들어, <blog-post> 컴포넌트에서, 텍스트 확대 기능을 추가하기 위해 부모 컴포넌트로 텍스트 확대를 했다는 이벤트를 부모 컴포넌트로 전달해야 한다고 가정해 봅니다.

<div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
    ></blog-post>
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue', content: '1st' },
      { id: 2, title: 'Blogging with Vue', content: '2nd' },
      { id: 3, title: 'Why Vue is so fun', content: '3th' }
    ],
    postFontSize: 1
  }
});

부모 컴포넌트는 위의 예제와 같이 작성 될 수 있습니다. postFontSize로 텍스트의 크기가 정의 됩니다.

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button>Enlarge text</button>
      <div v-html="post.content"></div>
    </div>
  `
})

자식 컴포넌트는 위의 예제와 같이 작성하면, <button>이 눌려젔을 때 부모 컴포넌트의 postFontSize의 값이 변경 되어야 합니다.

<button @click="$emit('enlarge-text')">Enlarge text</button>

postFontSize를 변경해야 한다는 것을 부모 컴포넌트에 알려 주기 위해 위의 코드와 같이 $emit을 사용합니다.

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post"
  @enlarge-text="postFontSize += 0.1"
></blog-post>

부모 컴포넌트에서는 자식 컴포넌트에서 전달한 이벤트를 핸들링 하기 위해 위에 코드와 같이 @enlarge-text 라는 이벤트 핸들러를 정의해야 합니다.

위의 예제는 CodePen에서 확인 할 수 있습니다.

1) `$emit`으로 부모 컴포넌트에 데이터 전달하기

$emit 메소드의 두번째 파라미터를 사용하면, 부모 컴포넌트로 데이터 전달이 가능합니다.

<button @click="$emit('enlarge-text', 0.1)">Enlarge text</button>

위의 예제는 부모 컴포넌트로 enlarge-text 라는 이벤트를 통해 0.1의 값을 전달하는 예제입니다.

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post"
  @enlarge-text="postFontSize += $event"
></blog-post>

부모 컴포넌트에서는 자식 컴포넌트로 부터 전달 받은 값을 위의 예제와 같이 $event를 통해 사용 가능합니다.

<div id="app">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
      @enlarge-text="onEnlargeText"
    ></blog-post>
  </div>
</div>

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button @click="$emit('enlarge-text', 0.1)">Enlarge text</button>
      <div v-html="post.content"></div>
    </div>
  `
})

new Vue({
  el: '#app',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue', content: '1st' },
      { id: 2, title: 'Blogging with Vue', content: '2nd' },
      { id: 3, title: 'Why Vue is so fun', content: '3th' }
    ],
    postFontSize: 1
  },
  methods: {
    onEnlargeText: function (enlargeAmount) {
      this.postFontSize += enlargeAmount
    }
  }
});

일반 네이티브 이벤트와 동일하게 이벤트 핸들러를 사용할 수도 있습니다.

위의 예제는 CodePen에서 확인 할 수 있습니다.

2) 컴포넌트에서 `v-model` 사용하기

<input v-model="searchText">

input 태그에서 v-model을 위의 코드와 같이 사용할 경우,

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

위의 코드와 같은 동작을 하게 됩니다.

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

value attribute는 custom-input의 value prop와 바인딩 됩니다.
input 이벤트는 custom-input에서 $emit으로 호출되는 이벤트입니다.

위와 같이 작성이 된 코드는,

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

위와 같이 다시 작성 될 수 있습니다. 위의 코드는 또 다시,

<custom-input v-model="searchText"></custom-input>

위의 코드와 같이 작성될 수 있습니다. 컴포넌트에서 v-model을 사용하는 방법은 [Vue.JS] 컴포넌트 (고급:Custrom Events) 에서 더 자세히 이야기 하도록 하겠습니다.

7. `slot` 사용하기

<alert-box>
  Something bad happened.
</alert-box>

컴포넌트를 사용할 때, HTML 엘리먼트와 같이 위의 코드처럼 컴포넌트에 콘덴츠를 전달해야 할 때가 있습니다. 그럴 때 사용해야 하는 것이 slot 입니다.

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

alert-box 컴포넌트가 위의 코드와 같이 코딩되어 있다면,

slot 사용 예제 결과

<alert-box>Somthing bad happend.</alert-box>의 예제 결과는 위의 사진과 같습니다. 위의 예제 코드 결과는 CodePen에서 확인 할 수 있습니다. slot에 대한 좀 더 자세한 이야기는 [Vue.JS] 컴포넌트 (고급:slot) 에서 이야기 하도록 하겠습니다.

8. 동적 컴포넌트

동적으로 컴포넌트를 전환해야 할 때가 있습니다. 그럴 때 사용하기 유용한 것이 <component>와 is 입니다.

<!-- Component changes when currentTabComponent changes -->
<component v-bind:is="currentTabComponent"></component>

currentTabComponent의 리턴 값은 컴포넌트의 이름이나 컴포넌트 객체입니다. 위의 예제는 Fiddle에서 확인 할 수 있습니다. 동적 컴포넌트에 관한 좀 더 자세한 내용은 [Vue.JS] 컴포넌트 (고급:Dynamic & Async Components) 에서 이야기 하도록 하겠습니다.

9. DOM 템블릿 문법 경고 해결

<ul>, <ol>, <table>, <select> 등의 HTML 태그들의 자식 태그로는 <li>, <tr>, <option>등으로 항상 정해져 있습니다. 이러한 규칙을 어기게 되면 DOM은 경고를 뱉어내가 됩니다.

<table>
  <blog-post-row></blog-post-row>
</table>

예를 들어, 위의 코드와 같이 작성된 코드가 있다고 할 때, <table>의 자식 태그들은 <tr> 등.. 이 와야 하지만 그렇지 않기 때문에 DOM은 경고를 발생시킵니다. <blog-post-row>가 <tr> 태그로 구성되어 있다고 해도 경고를 피해 갈 수 없습니다. DOM이 발생하는 경고를 피하기 위해 is를 사용할 수 있습니다.

<table>
  <tr is="blog-post-row"></tr>
</table>

위와 같이 is를 이용하거나,

template 속성을 사용한다 (e.g. template: '...')
.vue 파일로 컴포넌트를 생성한다.
<script type="text/x-template"> 를 사용한다.

위의 3가지 방법을 사용하면 DOM의 경고를 피할 수 있는 방법이 있습니다.

참고

https://vuejs.org/v2/guide/components.html

[Vue.JS] 폼 입력 바인딩

버미노트 — Sat, 15 Dec 2018 14:01:37 +0900

이번 포스트에서는 폼 엘리먼트(input, textarea, select 엘리먼트)에 양방향 데이터 바인딩을 하는 방법을 이야기 할 것입니다.

1. `v-model` 사용법

v-model 디렉티브를 사용하여 폼 엘리먼트(input, textarea, select 엘리먼트)에 양방향 데이터 바인딩을 할 수 있습니다. v-model은 모든 폼 엘리먼트의 초기 value와 checked, selected 속성을 무시합니다. Vue 인스턴스의 데이터에 의해서만 동작합니다.

참고 - IME 사용시 유의사항

IME (중국어, 일본어, 한국어 등..)가 필요한 언어의 경우 IME 중 v-model이 업데이트 되지 않습니다. IME 중 업데이트 처리를 하기 위해서는 input 이벤트를 사용해야 합니다.

문자열

<div id="app">
  <input v-model="message">
  <p>메시지: {{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: ''
  }
});

위의 예제 결과는 CodePen에서 확인 할 수 있습니다.

여러줄을 가진 문장

<div id="app">
  <span>여러 줄을 가지는 메시지:</span>
  <p style="white-space: pre-line">{{ message }}</p>
  <br>
  <textarea v-model="message"></textarea>
</div>

new Vue({
  el: '#app',
  data: {
    message: ''
  }
});

위의 예제 결과는 CodePen에서 확인 할 수 있습니다. <textarea>{{ message }}</textarea> 는 등작하지 않습니다.

체크박스

하나의 체크박스는 boolean 값을 가집니다.

<div id="app">
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
</div>

new Vue({
  el: '#app',
  data: {
    checked: false
  }
});

위의 예제 결과는 CodePen에서 확인 할 수 있습니다.

여러개의 체크박스는 배열 값을 가집니다.

<div id="app">
  <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>
</div>

new Vue({
  el: '#app',
  data: {
    checkedNames: []
  }
});

위의 예제 결과는 CodePen에서 확인할 수 있습니다.

라디오

<div id="app">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>선택: {{ picked }}</span>
</div>

new Vue({
  el: '#app',
  data: {
    picked: ''
  }
});

위의 예제 결과는 CodePen에서 확인 할 수 있습니다.

셀렉트

하나의 셀렉트

<div id="app">
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>선택함: {{ selected }}</span>
</div>

new Vue({
  el: '#app',
  data: {
    selected: ''
  }
});

위의 예제 결과는 CodePen에서 확인 할 수 있습니다.

다중 셀렉트

<div id="app">
  <select v-model="selected" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

new Vue({
  el: '#app',
  data: {
    selected: []
  }
});

위의 예제 결과는 CodePen에서 확인 할 수 있습니다.

`v-for`을 사용한 동적 옵션 렌더링

<div id="app">
  <select v-model="selected">
    <option v-for="option in options" v-bind:value="option.value">
      {{ option.text }}
    </option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

new Vue({
  el: '#app',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
});

위의 예제 결과는 CodePen에서 확인 할 수 있습니다.

2. 값 바인딩하기

라디오, 체크박스, 셀렉트 옵션의 경우, v-model에 바인딩 되는 값은 보통 정적인 값(문자열 또는 boolean)입니다.

<!-- `picked` 는 선택시 문자열 "a" 입니다 -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 는 true 또는 false 입니다 -->
<input type="checkbox" v-model="toggle">

<!-- `selected`는 "ABC" 선택시 "abc" 입니다 -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

v-model에 동적으로 값을 바인딩 해야 할 경우가 있습니다. 이 때 v-bind를 사용하면 됩니다. v-bind를 사용하면 입력 값이 문자열이 아닌 값도 바인딩 할 수 있습니다.

체크박스

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

// 체크된 경우
vm.toggle === 'yes'
// 체크 되지 않은 경우
vm.toggle === 'no'

true-value와 false-value는 input의 value에 영향을 미치지 않기 때문에 브라우저의 form의 submit에 포함되지 않습니다.

라디오

<input type="radio" v-model="pick" v-bind:value="a">

// 체크 하면:
vm.pick === vm.a

v-model에 라디오 동적 바인딩 하기

셀렉트 옵션

<select v-model="selected">
  <!-- inline object literal -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

// 선택 하면:
typeof vm.selected // -> 'object'
vm.selected.number // -> 123

수식어

`.lazy`

v-model은 입력 이벤트 후 데이터를 동기화 합니다(IME는 제외). .lazy 수식어를 사용하여 change 이벤트 이후에 동기화 할 수 있습니다.

<!-- "input" 대신 "change" 이후에 동기화 됩니다. -->
<input v-model.lazy="msg" >

`.number`

.number 수식어는 v-model에 사용자 입력이 숫자형으로 업데이트하기 위해 사용됩니다.

<input v-model.number="age" type="number">

type="number"을 사용하더라도 사용자 입력 값이 항상 문자열로 바인딩되기 때문에 유용하게 사용할 수 있는 수식어입니다.

`.trim`

.trim 수식어는 v-model에 사용자 입력 값이 trim 된 값을 바인딩하기 위해 사용됩니다.

<input v-model.trim="msg">

참고

https://kr.vuejs.org/v2/guide/forms.html

[Vue.JS] 이벤트 핸들링

버미노트 — Thu, 6 Dec 2018 01:15:37 +0900

1. 이벤트 리스너

v-on 디렉티브는 이벤트 리스너입니다. v-on 디렉티브는 DOM 이벤트가 발행하는지 듣고 있다가 이벤트가 발생 했을 때 JavaScript를 실행합니다.

<div id="app">
  <button v-on:click="counter += 1">Add 1</button>
  <p>위 버튼을 클릭한 횟수는 {{ counter }} 번 입니다.</p>
</div>

new Vue({
  el: '#app',
  data: {
    counter: 0
  }
});

위의 예제는 v-on이라는 이벤트 리스너가 click 이벤트가 발행하는지 듣고 있다가 이벤트가 발생 되었을 때 간단한 JavaScript를 실행하는 예제입니다. CodePen에서 결과를 확인 할 수 있습니다.

2. 메소드 이벤트 핸들러

대부분의 이벤트 핸들러의 로직은 복잡하기 때문에 v-on에 JavaScript로 넘겨주기 어렵습니다. 그렇기 때문에 v-on에 methods의 함수를 넘겨주는 형태로 구현 하는 것이 좋습니다.

<div id="app">
  <button v-on:click="greet">Greet</button>
</div>

new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  // 메소드는 `methods` 객체 안에 정의합니다
  methods: {
    greet: function (event) {
      // 메소드 안에서 사용하는 `this` 는 Vue 인스턴스를 가리킵니다
      alert('Hello ' + this.name + '!')
      // `event` 는 네이티브 DOM 이벤트입니다
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
});

v-on은 click 이벤트가 발생하는지 듣고 있다가 click 이벤트가 발생하면, methods에 정의한 greet 함수를 실행하는 예제입니다. 결과는 CodePen에서 확인 할 수 있습니다.

3. 인라인 메소드 핸들러

메소드 이름을 v-on에 직접 바인딩 하는 대신 인라인 JavaScript를 사용하여 methods의 함수를 호출 할 수도 있습니다.

<div id="app">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
});

위의 코드 같이 v-on 이벤트 리스너에서 methods에 정의 된 함수를 직접 호출 할 수 있습니다. 인라인으로 methods에 정의 된 함수를 호출할 때 DOM 이벤트 객체를 사용해야 할 필요가 있을 때가 있습니다. $event라는 인자를 methods의 함수에 넘겨주어 DOM 이벤트 객체를 사용할 수 있습니다.

<div id="app">
  <button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
</div>

new Vue({
  el: '#app',
  methods: {
    warn: function (message, event) {
      // 이제 네이티브 이벤트에 액세스 할 수 있습니다
      if (event) event.preventDefault()
      alert(message)
    }
  }
});

인라인 메소드 핸들러 예제는 CodePen에서 확인 할 수 있습니다.

4. 이벤트 수식어

이벤트 핸들러 내부에서 종종 event.preventDefault() 나 event.stopPropagation() 를 호출할 때가 있습니다. Vue에서도 마찬가지로 preventDefault나 stopPropagation을 사용해야 할 때가 있습니다. 그 때에 이벤트 핸들러 내부에서 이벤트 객체를 사용할 수도 있지만 v-on 이벤트 리스너에서 사용할 수도 있습니다.

.stop
.prevent
.capture
.self
.once

v-on 뒤에 위와 같이 점(.)으로 시작하는 접미사를 사용하면 됩니다.

<!-- 클릭 이벤트 전파가 중단됩니다 -->
<a v-on:click.stop="doThis"></a>

<!-- 제출 이벤트가 페이지를 다시 로드 하지 않습니다 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 수식어는 체이닝 가능합니다 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 단순히 수식어만 사용할 수 있습니다 -->
<form v-on:submit.prevent></form>

<!-- 이벤트 리스너를 추가할 때 캡처모드를 사용합니다 -->
<!-- 즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리합니다. -->
<div v-on:click.capture="doThis">...</div>


<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다 -->
<!-- 자식 엘리먼트에서는 안됩니다 -->
<div v-on:click.self="doThat">...</div>

이벤트 수식어를 사용한 순서대로 적용되기 때문에 여러개의 수식어를 사용 할 때 수식어 사용 순서를 고려해야 합니다. 즉 @click.prevent.self를 사용하면 클릭 이벤트가 발생 했을 때 모든 엘리먼트의 기본 동작을 막을 수 있지만, @click.self.prevent는 엘리먼트 자체의 기본 동작만 막을 수 있습니다.

`.once`

2.1.4에 추가된 이벤트 수식어입니다.

<!-- 클릭 이벤트는 최대 한번만 트리거 됩니다. -->
<a v-on:click.once="doThis"></a>

네이티브 DOM 이벤트에서만 동작하는 다른 수식어와 달리 .once 수식어는 컴포넌트 이벤트(컴포넌트에서 발생하는 사용자 정의 이벤트)에서도 사용할 수 있습니다.

`.passive`

2.3.0 이후에 추가된 이벤트 수식어입니다. 모바일 환경에서 성능향상에 도움이 되는 이벤트 수식어 입니다.

<!-- 스크롤의 기본 이벤트를 취소할 수 없습니다. -->
<div v-on:scroll.passive="onScroll">...</div>

지정한 이벤트 핸들러에서 event.preventDefault()를 호출하지 않는 다는 것을 브라우저에 알리는 이벤트 수식어입니다. .passive 이벤트 수식어가 없다면 event.preventDefault()가 호출 될 수도 있기 때문에, 이벤트 핸들러가 동작이 완료 된 후 스크롤됩니다.

5. 키 수식어

키보드 이벤트를 처리할 때, 특정 키 코드를 확인 해야 할 때가 있습니다. Vue는 키 수식어를 사용하여 특정 키 코드를 처리할 수 있습니다.

<!-- keyCode가 13일 때만 `vm.submit()`을 호출합니다  -->
<input v-on:keyup.13="submit">

Vue는 자주 사용하는 키 코드의 별칭을 제공합니다.

.enter
.tab
.delete (Delete와 Backspace 키 모두 캡처합니다)
.esc
.space
.up
.down
.left
.right

위의 리스트는 키 수식어의 별칭 목록입니다. config.keyCodes 객체를 통해 사용자 지정 키 수식어 별칭을 지정할 수 있습니다.

// `v-on:keyup.f1`을 사용할 수 있습니다.
Vue.config.keyCodes.f1 = 112

오토매틱 키 수식어

이 기능은 2.5.0 이상의 Vue 버전에서 추가 된 기능입니다. KeyboardEvent.key를 통해 노출된 유효 키 이름을 수식어로 사용 할 수 있습니다.

<input @keyup.page-down="onPageDown">

위 예제에서 핸들러는 $event.key === 'PageDown' 일 때만 호출 됩니다.

참고 -

일부 키(.esc와 모든 화살토 키)는 IE9에서 일관성 없는 key 값을 가집니다. IE9를 지원해야 하는 경우 내장 별칭을 사용하는 것이 좋습니다.

6. 시스템 키 수식어

2.1.0 이상의 버전에서 추가된 기능입니다.

.ctrl
.alt
.shift
.meta

위의 수식어를 사용해 해당 수식어 키가 눌러진 경우에는 마우스 또는 키보드 이벤트 리스너를 트리거 할 수 있습니다.

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

시스템 키 수식어는 keyup 이벤트와 함께 사용되면 이벤트가 발생할 때 수식어 키가 눌려있어야 합니다. 즉, key.ctrl은 ctrl을 누른 상태에서 키를 놓으면 트리거 됩니다. ctrl 키만 놓으면 트리거 되지 않습니다.

`.exact`

2.5.0 이상의 버전에서 추가된 기능입니다.

.exact 수식어를 사용하여 다른 시스템 수식어와 조합해 그 핸들러가 실행되기 위한 정확한 조합을 만들 수 있습니다.

<!-- Alt 또는 Shift와 함께 눌린 경우에도 실행됩니다. -->
<button @click.ctrl="onClick">A</button>

<!-- Ctrl 키만 눌려있을 때만 실행됩니다. -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 아래 코드는 시스템 키가 눌리지 않은 상태인 경우에만 작동합니다. -->
<button @click.exact="onClick">A</button>

마우스 버튼 수식어

2.2.0 이상의 버전에서 추가된 기능입니다.

.left
.right
.middle

위의 수식어는 특정 마우스 버튼이 트리거 되었을 때 이벤트 핸들러를 실행합니다.

7. HTML 이벤트 리스너를 사용할까?

Vue에서 사용하는 이벤트 리스너 등록 방법은 관심사 분리(separation of concerns) 규칙에 어긋난다고 생각할 수 있습니다. (관심사 분리란 JavaScript와 HTML, CSS 분리하는 것, 즉 각각의 역할 별로 분리하는 것을 말합니다.)

v-on을 사용하여 이벤트를 핸들링하는 몇가지 장점이 있습니다.

1) 핸들러 함수를 찾는 것이 쉽습니다.

HTML 템플릿을 간단히 하여 JavaScript 코드 내에서 핸들러 함수를 찾는 것이 더 쉽습니다.

2) 순수 로직만 가질 수 있습니다.

ViewModel 코드는 순수한 로직만 가지게 됩니다. 또한 JavaScript에서 이벤트 리스너를 수동으로 연결 할 필요가 없으므로 DOM이 필요 없게 됩니다.

3) 모든 이벤트 리스너가 자동으로 제거됩니다.

ViewModel이 파기되면 모든 이벤트 리스너가 자동으로 제거됩니다. 이벤트 제거에 대한 걱정이 필요 없게 됩니다.

참고

https://kr.vuejs.org/v2/guide/events.html

[Vue.JS] 리스트 렌더링

버미노트 — Sun, 25 Nov 2018 21:42:04 +0900

이번 포스트에서는 v-for을 사용하여 리스트 렌더링 하는 방법에 대해 이야기 할 것입니다.

1. `v-for`와 배열

v-for 디렉티브를 사용하여 배열을 리스트 렌더링 할 수 있습니다. v-for 디렉티브에 item in items 형태의 문법을 넘겨줘야 합니다. items는 원본 데이터 배열이고 item은 반복되는 배열의 요소입니다.

기본 사용방법

<div id="app">
  <ul>
    <li v-for="item in items">
      {{ item.message }}
    </li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
});

위의 예제는 배열을 사용한 기본적인 리스트 렌더링 예제입니다. 또한 배열의 몇번째 인덱스인지 알 수 있는 인덱스 정보도 제공합니다.

<div id="app">
  <ul>
    <li v-for="(item, index) in items">
      {{ index }} - {{ item.message }}
    </li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
});

위의 예제와 같이 배열의 몇번째 요소를 렌더링 하고 있는지 확인 하기 위해서는 (item, index) in items 문법을 사용하면 됩니다. 또한 자바스크립트의 for .... of ... 문법과 동일하게 in 대신 of를 사용할 수도 있습니다.

<div id="app">
  <ul>
    <li v-for="item of items">
      {{ item.message }}
    </li>
  </ul>  
</div>

new Vue({
  el: '#app',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
});

자바스트립트와 동일하게 이터레이터(반복가능한..)에만 of를 사용 할 수 있습니다.

v-for에 배열을 사용한 예제는 CodePen에서 결과를 확인 할 수 있습니다.

2. `v-for`와 객체

v-for를 사용하여 객체의 속성을 반복 할 수도 있습니다.

<div id="app">
  <ul>
    <li v-for="value in object">
      {{ value }}
    </li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
});

배열을 사용하여 리스트 렌더링할 때와 유사하게, key에 대한 두번째 전달인자를 제공합니다.

<div id="app">
  <ul>
    <li v-for="(value, key) in object">
      {{ key }} : {{ value }}
    </li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
});

또한 인텍스도 제공합니다.

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
      {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
});

객체를 반복하는 순서는 Object.keys()의 키 나열 순서에 따라 결정됩니다. 이 순서는 JavaScript 엔진에 따라 다를 수 있습니다.

v-for에 객체를 사용한 예제는 CodePen에서 결과를 확인 할 수 있습니다.

3. `key`

key는 Vue의 각각의 노드에 고유한 ID를 지정해 줄 때 사용됩니다. v-for 뿐만 아니라 이전 포스트에서 이야기한 v-if를 사용할 때도 key가 사용됩니다.

<!-- 변경 전 -->
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<!-- 변경 후 -->
<ul>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

위의 예제는 <li>1</li> 가 제거된 간단한 예제입니다. Vue는 위의 예제의 동작을

<li>1</li>에서 <li>2</li>로 수정
<li>2</li>에서 <li>3</li>로 수정
<li>3</li>에서 <li>4</li>로 수정
<li>5</li> 제거

로 총 4번 업데이트 합니다. 이렇게 되면 가상 DOM을 쓰는 것이 무색할 정도로 효율이 좋아 보이지 않습니다. 이 때 key를 사용하여 최적화 할 수 있습니다.

<!-- 변경 전 -->
<ul>
  <li key="1">1</li>
  <li key="2">2</li>
  <li key="3">3</li>
  <li key="4">4</li>
</ul>

<!-- 변경 후 -->
<ul>
  <li key="2">2</li>
  <li key="3">3</li>
  <li key="4">4</li>
</ul>

위의 예제는 key를 사용하여 각 노드에 고유한 ID를 지정해 준 예제입니다. key를 지정해 주게 되면 가상 DOM은 key를 추적하여 key가 서로 매칭되는 노드를 업데이트 하게 됩니다. 위의 예제의 동작은

<li key="1">1</li> 제거

로 1번만 업데이트 하면 됩니다. 그렇기 때문에 v-for을 사용할 때 항상 key를 지정해 주는 것이 좋습니다. key 예제는 CodePen에서 확인 할 수 있습니다.

* 참고 - `key`는 실제로 렌더링 되지 않습니다.

key 속성은 Vue의 각각의 노드를 구별하기 위한 ID일 뿐 실제로 DOM에 렌더링 되지 않습니다. 또한 key 속성은 전역으로 고유하지 않아도 됩니다. 형제 노드끼리만 고유한 값이면 됩니다.

4. 배열 변경 감지

Vue가 배열이 변경 되었는지 감지하여 DOM을 업데이트 하게 하기 위해서는 배열의 메소드들을 사용해야 합니다.

변이 메소드

Vue가 배열의 변경을 감지 할 수 있는 배열의 메소드들은 아래와 같습니다.

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

위의 배열의 메소드를 사용할 때 Vue는 배열의 변화를 감지하여 DOM을 업데이트 할 수 있습니다.

배열 대체

변이 메소드에서 이야기 한 메소드들은 원본 배열 자체를 변형합니다.

filter()
concat()
slice()

반면 위의 메소드들은 원본 배열을 변형하지 않고 항상 새로운 배열을 반환합니다. 배열이 변형되지 않는 위의 메소드들을 사용할 때는 이전의 배열을 새로운 배열로 바꿔줘야 합니다.

<div id="app">
  <ul>
    <li v-for="value in array">{{ value }}</li>
  </ul>
  <button @click="filter">Filter</button>
</div>

new Vue({
  el: '#app',
  data: {
    array: [1, 2, 3, 4]
  },
  methods: {
    filter() {
      this.array = this.array.filter(x => x > 1);
    }
  }
});

위의 코드처럼 작성할 경우 전체 목록을 다시 렌더링 한다고 생각할 수 있지만 Vue는 가상 DOM을 사용하여 변화된 부분만 DOM에 반영하기 때문에 전체 목록을 다시 렌더링 하지 않고, 효율적으로 DOM을 업데이트 할 수 있습니다.

주의 사항

배열의 변화를 감지하지 못하는 몇몇의 방법이 있습니다. 이 방법을 사용할 때 주의가 필요합니다.

1) 인덱스로 배열에 있는 항목을 직접 설정하는 경우

this.items[indexOfItem] = newValue

인덱스로 배열에 있는 항목을 직점 설정한 경우 배열 변경을 감지할 수 없습니다.

위의 코드는 Vue가 배열의 변경을 감지 할 수 없습니다.

this.items.splice(indexOfItem, 1, newValue)

splice를 사용하여 배열 변경을 감지 할 수 있게 합니다.

배열의 변경을 감지하기 위해서는 위와 같이 splice로 구현해야 합니다.

2) 배열 길이를 수정하는 경우

this.items.length = newLength

배열 길이를 수정하는 경우 배열 변경을 감지 할 수 없습니다.

위의 코드와 같이 직접 배열 길이를 수정하는 경우 Vue는 배열의 변경을 감지 할 수 없습니다.

this.items.splice(newLength)

splice를 사용하여 배열 변경을 감지 할 수 있게 합니다.

배열의 변경을 감지하기 위해서는 위와 같이 splice로 구현해야 합니다.

5. 객체 변경 감지에 관한 주의사항

Vue는 속성 추가 및 삭제를 감지하지 못합니다.

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 는 반응형입니다.

vm.b = 2
// `vm.b` 는 반응형이 아닙니다.

동적으로 추가된 속성은 반응형이 아닙니다.

Vue는 새로운 반응형 속성을 독적으로 추가하는 것이 불가능합니다. 동적으로 반응형 속성을 추가하는 몇가지 방법이 있습니다.

`Vue.set(object, key, vale)`

Vue.set(object, key, value)를 사용하여 동적으로 반응형 속성을 추가할 수 있습니다.

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

위와 같이 userProfile 객체에 새로운 반응형 속성 age를 추가하기 위해서는

Vue.set(vm.userProfile, 'age', 27)

위와 같이 Vue.set을 사용하여 새로운 반응형 속서을 추가 할 수 있습니다. Vue 인스턴스 메소드인 $set을 사용할 수도 있습니다. (Vue.set은 전역 메소드 입니다.)

vm.$set(this.userProfile, 'age', 27)

`Object.assign()`

Object.assign()이나 _.extend()를 사용해 기존 객체에 새 속성을 추가 할 수도 있습니다.

this.userProfile = Object.assign({}, this.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

Object.assign()을 사용하면 새로운 객체를 만들어 다시 할당해 주어야 합니다.

6. 필터링 / 정렬 된 결과 표시하기

원본 데이터를 실제로 변경하지 않고 필터링 되거나 정렬 된 배열을 표시해야 할 필요가 있습니다. 이 경우 필터링 된 배열이나 정렬된 배열을 반환하는 computed 속성을 만들 수 있습니다.

<div id="app">
  <ul>
    <li v-for="n in evenNumbers">{{ n }}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    numbers: [ 1, 2, 3, 4, 5 ]
  },
  computed: {
    evenNumbers() {
      return this.numbers.filter(function (number) {
        return number % 2 === 0
      })
    }
  }
});

computed 속성을 사용할 수 없는 경우 mehods 속성을 사용할 수 있습니다.

<div id="app">
  <ul>
    <li v-for="n in evenNumbers">
      <div v-for="number in multiplex(n)">{{ number }}</div>
    </li>
  </ul>  
</div>

new Vue({
  el: '#app',
  data: {
    numbers: [ 1, 2, 3, 4, 5 ]
  },
  computed: {
    evenNumbers() {
      return this.numbers.filter(function (number) {
        return number % 2 === 0
      })
    }
  },
  methods: {
    multiplex(number) {
      return number * 2
    }
  }
});

위의 예제는 CodePen에서 결과를 확인 할 수 있습니다.

7. Range `v-for`

v-for는 숫자를 사용할 수 있습니다.

<div id="app">
  <span v-for="n in 10">{{ n }} </span>
</div>

v-for는 숫자를 사용할 수 있습니다.

위의 예제는 CodePen에서 결과를 확인 할 수 있습니다.

8. `v-for` 템플릿

<template> 태그와 함께 v-for을 사용할 수 있습니다.

<div id="app">
  <ul>
    <template v-for="number in numbers">
      <li>{{ number }}</li>
      <li>{{ number * number }}</li>
    </template>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    numbers: [1, 2, 3, 4]
  }
});

<template>와 v-for는 함께 사용 할 수 있습니다.

위 코드의 예제는 CodePen에서 확인 할 수 있습니다.

9. `v-for`와 `v-if`

v-for와 v-if도 역시 함께 사용할 수 있습니다. 동일한 노드에 v-for와 v-if가 모두 존재한다면, v-for가 더 높은 우선순위를 가집니다. 즉, 루프가 반복될 때 마다 v-if가 실행됩니다.

<div id="app">
  <ul>
      <li v-for="number in numbers" v-if="number % 2 === 0">{{ number }}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    numbers: [1, 2, 3, 4]
  }
});

v-for가 v-if 보다 우선순위가 높습니다.

v-for가 동작을 할지 동작을 하지 말아야 하는지를 결정해야 한다면, 상위 엘리먼트(또는 <template>)에서 v-if를 사용해야 합니다.

<div id="app">
  <ul v-if="numbers.length">
    <li v-for="number in numbers">{{ number }}</li>
  </ul>
  <ul>
    <template v-if="numbers.length">
      <li v-for="number in numbers">{{ number }}</li>
    </template>
  </ul>  
</div>

new Vue({
  el: '#app',
  data: {
    numbers: [1, 2, 3, 4]
  }
});

위의 코드는 CodePen에서 결과를 확인할 수 있습니다.

10. `v-for`와 컴포넌트

v-for은 사용자 정의 컴포넌트에서도 사용할 수 있습니다.

<my-component v-for="item in items" :key="item.id"></my-component>

반복할 데이터를 컴포넌트로 전달하려면 props를 사용해야 합니다.

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

사용자 정의 컴포넌트에서 데이터를 사용하기 위해 props로 데이터를 넘겨준 예제를 살펴도록 하겠습니다.

<div id="todo-list-example">
  <input
    v-model="newTodoText"
    @keyup.enter="addNewTodo"
    placeholder="Add a todo"
  >
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      :key="todo.id"
      :title="todo.title"
      @remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>

const TodoItem = {
  template: `
    <li>
      {{ title }}
      <button @click="$emit('remove')">X</button>
    </li>`,
  props: ['title']
};

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  },
  components: {
    TodoItem
  }
})

사용자 정의 컴포넌트에 v-for 사용하기

is="todo-item" : <ul> 엘리먼트 안에는 <li> 엘리먼트만 사용 가능합니다. 위의 예제에서 is="todo-item"을 사용하지 않고, <todo-item>을 사용할 수 있지만 브라우저의 구문 오류를 해결하기 위해 is="todo-item"을 사용하여 브라우저 구문 오류를 해결 하였습니다.
:title이라는 props를 사용하여 사용자 정의 컴포넌트에 데이터를 넘겨줍니다.
@romve라는 props를 사용하여 사용자 정의 컴포넌트에 이벤트 리스너를 넘겨줍니다. 사용자 정의 컴포넌트에서 $emit('remove') 호출시 @remove에 넘겨진 함수가 실행됩니다.

위의 예제는 CodePen에서 결과를 확인 할 수 있습니다.

[Vue.JS] 조건부 렌더링

버미노트 — Tue, 20 Nov 2018 00:36:05 +0900

이번 포스트는 v-if와 v-show를 이용하여 조건부 렌더링을 이야기 합니다.

1. `v-if`

v-if 디렉티브를 사용하여 조건부 렌더링을 사용할 수 있습니다.

<div id="app">
  <h1 v-if="ok">Yes</h1>
</div>

new Vue({
  el: '#app',
  data: {
    ok: true,
  },
});

`v-else`

v-if 디렉티브는 v-else 디렉티브와 함께 사용 할 수 있습니다.

<div id="app">
  <h1 v-if="ok">Yes</h1>
  <h1 v-else>No</h1>
</div>

new Vue({
  el: '#app',
  data: {
    ok: true,
  },
});

위의 예제는 CodePen에서 결과를 확인 할 수 있습니다.

`v-else-if`

v-else-if 디렉티브는 2.1.0에 추가되었습니다. 이름에서 알 수 있듯이 else if 블록 역할을 합니다.

<div id="app">
  <div v-if="type === 'A'">
    A
  </div>
  <div v-else-if="type === 'B'">
    B
  </div>
  <div v-else-if="type === 'C'">
    C
  </div>
  <div v-else>
    Not A/B/C
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    type: 'C',
  },
});

v-else-if는 v-if 또는 v-else-if 뒤에 사용할 수 있습니다. 위의 예제는 CodePen에서 결과를 확인 할 수 있습니다.

`<template>`와 `v-if`로 조건부 그룹 만들기

v-if는 디렉티브이기 때문에 하나의 엘리먼트에 추가되어야 합니다. 그렇다면 여러개의 엘리먼트에 조건부 렌더링을 추가하기 위해서는 각각의 엘리먼트에 v-if를 사용해야 할 것입니다. 하지만 HTML에 실제로 렌더링 되지 않는 태그인 <template>를 사용하면 각각의 엘리먼트에 v-if를 사용하지 않고 조건부 그룹을 만들어 조건부 렌더링을 사용 할 수 있습니다.

<div id="app">
  <template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </template>
</div>

new Vue({
  el: '#app',
  data: {
    ok: true,
  },
});

<template>에는 v-if를 사용할 수 있습니다. 또한 최종 렌더링 결과에는 <template> 엘리먼트가 포함되지 않습니다. 위의 예제는 CodePen에서 결과를 확인 할 수 있습니다.

`key`를 이용하여 재사용 가능한 엘리먼트 제어

Vue는 효율적인 렌더링을 위해 때때로는 처음부터 렌더링하지 않고 기존의 엘리먼트를 다시 사용합니다.

<div id="app">
  <div>
    <template v-if="loginType === 'username'">
      <label>사용자 이름</label>
      <input placeholder="사용자 이름을 입력하세요">
    </template>
    <template v-else>
      <label>이메일</label>
      <input placeholder="이메일 주소를 입력하세요">
    </template>
    <button @click="changeLoginType">로그인 유형 변경</button>
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    loginType: 'username',
  },
  methods: {
    changeLoginType() {
      if (this.loginType === 'username') {
        this.loginType = 'email';
      } else {
        this.loginType = 'username'
      }
    }
  }
});

위 코드에서 loginType이 바뀌어도 사용자가 입력한 내용은 지워지지 않습니다. Vue는 엘리먼트를 재사용하여 <input> 자체가 대체되지 않고 placeholder만 변경됩니다. 위의 코드는 CodePen에서 확인 할 수 있습니다.

엘리먼트를 재사용하지 않길 원한다면, key 속성을 사용하면 됩니다. 즉 key 속성을 사용하여 완전 별개의 엘리먼트인 것을 명시하면 Vue는 엘리먼트를 재사용하지 않고 완전히 대체하여 렌더링 합니다.

<div id="app">
  <div>
    <template v-if="loginType === 'username'">
      <label>사용자 이름</label>
      <input placeholder="사용자 이름을 입력하세요" key="username-input">
    </template>
    <template v-else>
      <label>이메일</label>
      <input placeholder="이메일 주소를 입력하세요" key="email-input">
    </template>
    <button @click="changeLoginType">로그인 유형 변경</button>
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    loginType: 'username',
  },
  methods: {
    changeLoginType() {
      if (this.loginType === 'username') {
        this.loginType = 'email';
      } else {
        this.loginType = 'username'
      }
    }
  }
});

<label> 엘리먼트는 key 속성이 없기 때문에 엘리먼트를 재사용합니다. <input> 엘리먼트는 속성을 사용하여 완전히 대체하여 렌더링합니다. 위의 예제는 CodePen에서 확인 할 수 있습니다.

2. `v-show`

v-show 디렉티브를 사용하여 조건부 렌더링을 사용할 수도 있습니다. 사용법은 v-if와 유사합니다.

<div id="app">
  <h1 v-show="ok">Yes</h1>
</div>

new Vue({
  el: '#app',
  data: {
    ok: true,
  },
});

v-show는 DOM에 항상 그려집니다. v-show에 false가 넘겨지면 display:none이 되어 DOM에는 있지만 화면에 나타나지 않는 상태가 됩니다. v-show는 <template>를 지원하지 않습니다.

`v-if` VS `v-show`

v-if 디렉티브를 사용한 엘리먼트의 이벤트 리스너와 자식 컴포넌트들이 DOM에 제거되거나 삽입되는 진짜 조건부 렌더링입니다. 반면 v-show는 DOM에 항상 삽입되고 display style을 통해 화면에 그려지거나 그려지지 않는 조건부 렌더링입니다.

v-if는 토글 비용(화면에 그려지거나 그려지지 않는데 사용되는 비용)이 높고, 초기 렌더링 비용이 낮습니다. 반면 v-show는 토글 비용이 낮고 초기 렌더링 비용이 높습니다. 그렇기 때문에 자주 변하는 컴포넌트에 조건부 렌더링을 사용해야 한다면 v-show를 사용하는 것이 좋습니다. 런타임 시 조건이 바뀌지 않다면 v-if를 사용하는 것이 좋습니다.

`v-if`와 `v-for`

v-for 디렉티브에 관련 내용은 이 후의 포스트에서 더 자세히 이야기 하도록 하겠습니다.

v-if와 v-for을 함께 사용한다면, v-for가 더 높은 우선순위를 가집니다. 즉 v-for로 리스트 렌더링을 하면서 각각의 리스트는 v-if 조건에 걸리게 됩니다.

참고

https://kr.vuejs.org/v2/guide/conditional.html

[Vue.JS] 클래스와 스타일 바인딩

버미노트 — Tue, 13 Nov 2018 23:41:18 +0900

이번 포스트에서는 컴포넌트에 클래스를 바인딩하는 방법과 인라인 스타일을 사용하는 방법을 이야기 하려고 합니다. 스타일을 적용할 때 클래스와 인라인 스타일이 많이 사용되기 때문에, 이번 포스트는 컴포넌트에 스타일을 적용하는 방법을 이야기 한다고 보셔도 될 것 같습니다.

1. HTML 클래스 바인딩

객체로 클래스를 바인딩 하는 방법, 배열로 클래스를 사용하는 방법, 컴포넌트와 함께 사용하는 방법 3가지를 이야기 하도록 하겠습니다.

객체 구문

클래스를 동적으로 바인딩하기 위해서는 v-bind:class(약어 :class)를 사용하면 됩니다. :class에 객체를 전달해서 클래스를 바인딩 할 수 있습니다.

<div :class="{ active: isActive }"></div>

위 예제에서 isActive가 true일 경우 active 클래스가 바인딩 됩니다. 객체를 이용하여 여러 클래스를 바인딩 할 수 있습니다. 또한 일반 class 속성과 함께 사용할 수 있습니다.

<div class="static"
     :class="{ active: isActive, 'text-danger': hasError }">
</div>

위의 예제처럼 class와 :class를 함께 사용 할 수 있으며, :class에 객체를 넘겨주어 여러 클래스를 바인딩 할 수 있습니다. :class에 넘겨준 객체의 값 중 isActive가 true, hasError가 false 일 때, <div class="static active"></div>와 같이 랜더링 됩니다.

isActive와 hasError의 값이 업데이트 되면, 바인딩 되는 클래스도 따라 업데이트 됩니다. hasError가 true가 된다면 <div class="static active text-danger"></div>가 랜더링 됩니다.

:class에 바인딩 되는 객체는 반드시 인라인일 필요는 없습니다.

<div :class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

위의 예제와 같이 data를 사용하여 클래스를 바인딩 할 수 있습니다. data 뿐만 아니라 computed를 이용하여 클래스를 바인딩 할 수도 있습니다.

<div :class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

위의 예제와 같이 computed를 사용하여 클래스를 바인딩 할 수도 있습니다.

CodePen에서 객체로 클래스 바인딩 하는 예제를 확인 할 수 있습니다.

배열 구문

:class에 배열을 전달하여 클래스를 바인딩 할 수 있습니다.

<div :class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

위의 예제는 <div class="active text-danger"></div>로 랜더링 됩니다. 배열에 있는 클래스를 조건부 랜더링을 하고 싶다면 삼항 연산자를 이용하면 됩니다.

<div :class="[isActive ? activeClass : '', errorClass]"></div>

위의 예제는 errorClass를 항상 비인딩 되며, isActive가 true일 때에만 activeClass가 바인딩 됩니다.

<div :class="[{ active: isActive }, errorClass]"></div>

위의 예제와 같이 배열 구문안에 객체 구문을 함께 사용할 수도 있습니다.

CodePen에서 배열로 클래스 바인딩 하는 예제를 확인 할 수 있습니다.

컴포넌트와 함께 사용하는 방법

사용자 정의 컴포넌트에서 class 속성을 사용하면, 컴포넌트의 루트 엘리먼트에 class가 추가 됩니다.

<div id="app">
  <Child class="baz boo"></Child>
</div>

const Child = {
  template: '<div class="foo bar">Child</div>',
}

new Vue({
  el: '#app',
  components: {
    Child
  }
});

위의 예제는 <Child />는 <div class="foo bar baz boo">Child</div>로 랜더링 됩니다. :class 바인딩도 동일하게 사용할 수 있습니다.

<div id="app">
  <Child :class="{ active: isActive }"></Child>
</div>

const Child = {
  template: '<div class="foo bar">Child</div>',
}

new Vue({
  el: '#app',
  data: {
    isActive: true
  },
  components: {
    Child
  }
});

위의 예제에서 isActive가 true 일 경우, <div class="foo bar active">Child</div>로 랜더링 됩니다.

CodePe n에서 컴포넌트와 함께 클래스 바인등 하는 예제를 확인 할 수 있습니다.

2. 인라인 스타일 바인딩

v-bind:style(약어 :style)을 사용하여 인라인 스타일을 적용 할 수 있습니다. :style에 객체 혹은 배열을 넘겨주어 사용할 수 있습니다.

객체 구문

:style에 객체를 넘겨 주어 인라인 스타일을 사용 할 수 있습니다. 넘겨주는 객체의 속성 이름으로 camalCase와 kebab-case를 사용 할 수 있습니다.

<div id="app">
  <div :style="{ color: activeColor, 'font-size': fontSize + 'px' }">인라인 스타일 바인딩</div>
</div>

new Vue({
  el: '#app',
  data: {
    activeColor: 'red',
    fontSize: 30
  }
});

위의 예제 처럼 :style에 객체를 직접 바인딩 하여 사용 할 수도 있습니다.

<div id="app">
  <div :style="styleObject">인라인 스타일 바인딩</div>
</div>

new Vue({
  el: '#app',
  data: {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
});

위의 예제와 같이 data를 사용하여 인라인 스타일을 적용 할 수도 있습니다. :class와 동일하게 computed를 사용하여 인라인 스타일을 적용 할 수도 있습니다.

<div id="app">
  <div :style="computedStyleObject">인라인 스타일 바인딩</div>
</div>

new Vue({
  el: '#app',
  data: {
    activeColor: 'red',
    fontSize: 30,
  },
  computed: {
    computedStyleObject() {
      return {
        color: this.activeColor,
        fontSize: this.fontSize + 'px'
      };
    }
  }
});

위의 예제와 같이 computed를 사용하여 인라인 스타일을 바인딩 할 수도 있습니다.

CodePen에서 객체로 인라인 스타일을 바인딩하는 예제를 확인 할 수 있습니다.

배열 구문

:style에 배열을 넘겨주어 여러개의 스타일 객체를 사용하 수 있습니다.

<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">배열 구문</div>
</div>

new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'red',
      fontSize: '13px'
    },
    overridingStyles: {
      backgroundColor: 'black'
    }
  },
});

위의 예제는 CodePen에서 결과를 확인 할 수 있습니다.

자동 접두사

:style에 브라우저 벤더 접두어가 필요한 CSS 속성을 사용하면, Vue는 자동으로 브라우저에 맞는 접두어를 감지하여 스타일을 적용합니다.

다중 값 제공

2.3.0 이상의 Vue 버전에서 지원하는 기능입니다. :style에 접두어가 있는 여러 스타일을 배열로 전달 할 수 있습니다.

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

위의 코드와 같이 :style을 사용하면, 배열에 있는 스타일 중 브라우저가 지원하는 마지막 값으로 스타일이 적용됩니다. 위의 코드는 flexbox의 접두어가 붙지 않는 버전을 지원하는 브라우저의 경우 display: flex 스타일이 적용됩니다.

참고

https://kr.vuejs.org/v2/guide/class-and-style.html

[Vue.JS] computed와 watch

버미노트 — Wed, 31 Oct 2018 00:45:27 +0900

이번 포스트에서는 Vue.JS에서 비슷한 특징을 가진 computed 속성과 watch 속성의 특징을 이야기 하려고 합니다.

1. `computed` 속성

템플릿 문법([Vue.JS] 템플릿 문법 참고)에서 JavaScript 표현식을 사용하면, 쉽게 원하는 데이터를 DOM에 그릴 수 있습니다. 하지만 복잡한 연산을 템플릿 안에서 하게 되면, 코드를 이해하고, 유지보수하기 어려워집니다.

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

위의 예제는 템플릿 문법 안에서 JavaScript를 사용하여 message를 역순으로 출력한 예제입니다. 지금은 단순해 보일 수도 있지만 좀 더 복잡한 로직을 사용한다면 computed 속성을 사용하는 것이 좋습니다.

`computed` 사용 방법

<div id="example">
  <p>원본 메시지: "{{ message }}"</p>
  <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
</div>

new Vue({
  el: '#example',
  data: {
    message: '안녕하세요'
  },
  computed: {
    // 계산된 getter
    reversedMessage: function () {
      // `this` 는 vm 인스턴스를 가리킵니다.
      return this.message.split('').reverse().join('')
    }
  }
})

위의 예제에서 computed로 reversedMessage를 선언했습니다. reversedMessage를 getter 함수로 사용할 수 있게 됩니다.

computed 속성도 템플릿에 데이터 바인딩 할 수 있습니다. reversedMessage는 message에 의존적이기 때문에, message의 값이 바뀌면 reversedMessage의 값도 따라 바뀌게 됩니다. 즉 message가 바뀔 때 reversedMessage도 변경 되며, reversedMessage와 바인딩 된 DOM이 업데이트하게 됩니다.

reversedMessage를 보면 return되는 값으로 무엇을 나타낼지 선언하는, 선언형 프로그래밍 방식입니다.(위키백과 선언형 프로그래밍 참고) 앞으로 이야기 할 watch는 명령형 프로그래밍 방식으로 computed의 선언형 프로그래밍과 차이를 보입니다.

CodePen에서 위 예제 결과를 확인 할 있습니다.

`computed`의 캐싱 VS `methods`

템플릿 문법의 JavaScript 표현식에서 methods를 사용하여 위 예제의 computed를 사용 한 결과와 동일한 결과를 얻을 수 있습니다.

<div id="example">
  <p>원본 메시지: "{{ message }}"</p>
  <p>역순으로 표시한 메시지: "{{ reversedMessage() }}"</p>
</div>

new Vue({
  el: '#example',
  data: {
    message: '안녕하세요'
  },
  methods: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

computed를 사용하는 방법과 methods를 사용하는 방법의 최종 결과는 동일합니다. computed와 methods의 차이점은 computed는 종속 대상(reversedMessage의 종속 대상은 message)을 캐싱한다는 것입니다. 그렇기 때문에 computed는 종속 대상이 변경 될 때만 함수를 호출합니다. message 값이 변하지 않는 한 reversedMessage를 여러번 호출하여도 다시 계산하지 않고 캐싱한 결과를 즉시 반환합니다.

시간이 많이 걸리는 계산을 할 때, computed을 사용하면 더 좋은 호율의 어플리케이션을 만들 수 있습니다. 캐싱을 하지 않고, 호출 할 때마다 새롭게 계산을 해야 하는 경우에는 methods를 사용해야 합니다.

<div id="example">
  <p>원본 메시지: "{{ message }}"</p>
  <p>역순으로 표시한 메시지: "{{ reversedMessageByComputed }}"</p>
  <p>역순으로 표시한 메시지: "{{ reversedMessageByComputed }}"</p>
  <p>역순으로 표시한 메시지: "{{ reversedMessageByMethods() }}"</p>
  <p>역순으로 표시한 메시지: "{{ reversedMessageByMethods() }}"</p>
</div>

new Vue({
  el: '#example',
  data: {
    message: '안녕하세요'
  },
  computed: {
    reversedMessageByComputed() {
      console.log('computed reversedMessage')
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessageByMethods: function () {
      console.log('methods reversedMessage')
      return this.message.split('').reverse().join('')
    }
  }
})

위 예제의 실행 결과를 보면 computed는 캐싱하고 있기 때문에, computed의 reversedMessageByComputed는 한 번, methods의 reversedMessageByMethods는 두 번 호출 되는 것을 확인 할 수 있습니다.

CodePen에서 위 예제 결과를 확인 할 수 있습니다.

주의사항 - `computed`의 캐싱

Date.now()와 같이 아무 곳에도 의존하지 않는 computed 속성은 절대로 업데이트 되지 않습니다.

computed: {
  now: function () {
    return Date.now()
  }
}

업데이트 되지 않습니다.

위의 예시와 같이 Date.now()를 리턴하는 computed의 경우 업데이트 되지 않기 때문에, 몇 번을 사용하던 동일한 시간을 나타냅니다. 매번 호출 할 때 마다 현재 시간을 나타내고 싶다면, computed가 아닌 methods를 이용해야 합니다.

`computed` VS `watch`

Vue.JS는 데이터가 변경 되었을 때 호출되는 콜백 함수를 정의하는 watch 속성을 제공합니다. watch는 감시할 데이터를 지정하고 그 데이터가 바뀌면 어떠한 함수를 실행하라는 방식의 명령형 프로그래밍(위키백과 명령형 프로그래밍 참고) 방식입니다. 보통은 명령형 프로그래밍인 watch 보다는 선언형 프로그래밍인 computed를 사용하는 것이 더 좋습니다.

<div id="demo">{{ fullName }}</div>

new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

위 예제는 watch를 사용한 예제입니다. CodePen에서 위 예제 결과를 확인 할 수 있습니다.

<div id="demo">{{ fullName }}</div>

new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

위 예제는 computed를 사용한 예제입니다. watch를 사용했을 때 보다 코드가 더 간결해진 것을 볼 수 있습니다. CodePen에서 위 예제 결과를 확인 할 수 있습니다.

`computed`의 setter 함수

computed는 기본적으로 getter 함수입니다. 필요한 경우 setter 함수를 정의하여 사용 할 수 있습니다.

<div id="demo">{{ fullName }}</div>

new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
})

위의 예제는 computed의 setter 함수를 정의한 예제입니다. CodePen에서 예제 결과를 확인 할 수 있습니다.

2. `watch` 속성

대부분의 경우 computed 속성을 사용하는 것이 좋습니다. 하지만 데이터 변경의 응답으로 비동기식 계산이 필요한 경우나 시간이 많이 소요되는 계산을 해야 할 때 watch를 사용하는 것이 좋습니다. (저는 개인적으로 데이터가 변경되어 API를 호출해야 할 때, watch를 사용합니다.)

<div id="watch-example">
  <p>
    yes/no 질문을 물어보세요:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

<!-- 이미 Ajax 라이브러리의 풍부한 생태계와 범용 유틸리티 메소드 컬렉션이 있기 때문에, -->
<!-- Vue 코어는 다시 만들지 않아 작게 유지됩니다. -->
<!-- 이것은 이미 익숙한 것을 선택할 수 있는 자유를 줍니다. -->
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: '질문을 하기 전까지는 대답할 수 없습니다.'
  },
  watch: {
    // 질문이 변경될 때 마다 이 기능이 실행됩니다.
    question: function (newQuestion) {
      this.answer = '입력을 기다리는 중...'
      this.getAnswer()
    }
  },
  methods: {
    // _.debounce는 lodash가 제공하는 기능으로
    // 특히 시간이 많이 소요되는 작업을 실행할 수 있는 빈도를 제한합니다.
    // 이 경우, 우리는 yesno.wtf/api 에 액세스 하는 빈도를 제한하고,
    // 사용자가 ajax요청을 하기 전에 타이핑을 완전히 마칠 때까지 기다리길 바랍니다.
    // _.debounce 함수(또는 이와 유사한 _.throttle)에 대한
    // 자세한 내용을 보려면 https://lodash.com/docs#debounce 를 방문하세요.
    getAnswer: _.debounce(
      function () {
        if (this.question.indexOf('?') === -1) {
          this.answer = '질문에는 일반적으로 물음표가 포함 됩니다. ;-)'
          return
        }
        this.answer = '생각중...'
        var vm = this
        axios.get('https://yesno.wtf/api')
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = '에러! API 요청에 오류가 있습니다. ' + error
          })
      },
      // 사용자가 입력을 기다리는 시간(밀리세컨드) 입니다.
      500
    )
  }
})
</script>

위에 예제는 Vue.JS 공식문서에서 watch의 적절한 사용 방법을 나타낸 코드입니다. CodePen에서 위의 예제 결과를 확인 할 수 있습니다.

watch를 사용하면, API롤 호출하고 그 결과에 대한 응답을 받기 전까지 중간 상태를 설정할 수있습니다. computed를 사용하면 API 호출 결과를 기다리는 동안의 중간 상태을 설정할 수 없습니다.

참고

https://kr.vuejs.org/v2/guide/computed.html

[Vue.JS] 템플릿 문법

버미노트 — Tue, 23 Oct 2018 00:35:16 +0900

Vue.JS는 렌더링 된 DOM과 Vue 인스턴스의 데이터에 바인딩 할 수 있는 HTML 기반의 문법을 제공합니다. 이 문법을 템플릿 문법이라고 하겠습니다. Vue.JS는 내부적으로 템플릿 문법을 가상 DOM을 리턴하는 render 함수로 컴파일 합니다.

Vue.JS는 가상 DOM을 사용하여 DOM을 변경할 때 최소한의 DOM을 조작하고 적용이 가능하도록 하였습니다. 템플릿 문법을 사용하지는 대신 render 함수(JSX도 지원합니다.)를 사용할 수도 있습니다. (render 함수의 사용법은 다음에 설명하도록 하겠습니다...)

Vue.JS의 템플릿 문법에 대해 알아 보도록 하겠습니다.

1. 보간법 (Interpolation)

DOM에 데이터를 바인딩 하는 방법 중에 보간법, DOM에 데이터를 나타내는 방법을 이야기 하도록 하겠습니다.

Text

Mustache 문법(이중 중괄호)을 사용해 텍스트를 나타내는 방법입니다.

<p>메시지: {{ msg }}</p>

Mustache 문법을 사용한 {{ msg }} 부분은 msg의 값으로 대체됩니다. 또한 Vue 인스턴스 data의 msg 속성이 변경될 때 마다 화면이 갱신됩니다. v-once 디렉티브를 사용하면 데이터가 변경 될 때 화면을 갱신하지 않게 됩니다.

<p v-once>다시는 변경하지 않습니다: {{ msg }}</p>

CodePen에서 위의 Mustache 문법을 사용한 예제와 v-once 디렉티브를 사용한 예제를 확인 할 수 있습니다.

Raw HTML

Mustache 문법을 사용하여 DOM을 나타내면 HTML이 아닌 일반 텍스트로 DOM에 나타납니다. HTML로 출력하려면 v-html 디렉티브를 사용해야 합니다.

<p>Mustache: {{ rawHtml }}</p>
<p>v-html: <span v-html="rawHtml"></span></p>

span의 내용은 rawHtml에 저장된 내용으로 대체됩니다. 이 때 rawHtml에 저장된 HTML에 바인딩된 데이터(보간법, 디렉티브로 바인딩 된 데이터들..)는 단순 문자열로 인식됩니다. 즉 v-html을 이용한 HTML들은 템플릿 문법을 사용할 수 없습니다.

CodePen에서 v-html을 사용한 예제를 확인 할 수 있습니다.

Attribute

Mustache 문법은 HTML 속성에 사용할 수 없습니다. HTML 속성에 Vue 데이터를 사용하기 위해서는 v-bind를 사용해야 합니다.

<div v-bind:id="dynamicId"></div>

<div id="{{ dynamicId }}"></div>를 사용한다면 Syntax Error가 발생합니다.

CodePen에서 v-bind를 사용한 예제를 확인 할 수 있습니다.

JavaScript 표현식 사용

Vue.JS의 모든 데이터 바인딩(템플릿 문법)에서는 JavaScript 표현식 사용이 가능합니다.

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

위와 같은 JavaScript 표현식 사용이 가능합니다. 하지만 하나의 표현식만 가능하기 때문에,

<!-- 아래는 구문입니다, 표현식이 아닙니다. -->
{{ var a = 1 }}

<!-- 조건문은 작동하지 않습니다. 삼항 연산자를 사용해야 합니다. -->
{{ if (ok) { return message } }}

위와 같은 JavaScript는 사용 할 수 없습니다. 또한 Math나 Date 같은 전역 객체는 사용 가능하지만, 사용자가 정의한 전역 객체는 사용 할 수 없습니다.

<div>{{ Math.round(1.2) }}</div>

<!-- 사용 불가능 합니다 -->
<div>{{ CustomGlobals.round(1.2) }}</div>
<script>
var CustomGlobals = {
  round(value) {
    return Math.round(value)
  }
}
</script>

사용자가 정의한 전역 객체는 사용 할 수 없습니다.

CodePen에서 JavaScript 사용 예제를 확인 할 수 있습니다.

2. 디렉티브 (Directive)

디렉티브는 v- 접두어가 있는 특수한 속성입니다. 디렉티브는 디렉티브의 속성 값이 변경 될 때, DOM과 바인딩 하여 DOM을 변경하는 역할을 합니다.

<p v-if="seen">이제 나를 볼 수 있어요</p>

위의 예제에서 seen은 <p>와 바인딩됩니다. seen이 변경 될 때, v-if 디렉티브로 인해 DOM에 삽입 또는 제거 되어 보이게 됩니다.

전달인자 (Argument)

일부 디렉티브(v-bind, v-on)는 콜론(:)을 사용하여 전달인자를 사용할 수 있습니다.

v-bind

v-bind는 HTML 속성을 갱신하는데 사용됩니다.

<a v-bind:href="url">LINK</a>

위의 예제에서 href는 전달인자입니다. href 속성을 url 값에 바인드하는 v-bind 디렉티브에게 알려줍니다.

v-on

v-on은 이벤트 핸들링을 하는데 사용됩니다.

<a v-on:click="doSomething">LINK</a>

위의 예제에서 click은 전달인자입니다. click 이벤트가 발생했을 때 호출되는 doSomething 함수를 v-on 디렉티브에게 알려줍니다.

CodePen에서 전달인자 예제를 확인 할 수 있습니다.

수식어 (Modifiers)

수식어는 점(.)으로 표시되는 특수 접미사 입니다. 디렉티브를 특별한 방법으로 바인딩 해야 함을 나타냅니다.

<form v-on:submit.prevent="onSubmit">
  <input type="submit" value="submit" />
</form>

위 예제의 .prevent 수식어는 실행된 이벤트 핸들러(onSubmit)에서 event.preventDefault()를 호출하도록 v-on 디렉티브에 알려줍니다.

CodePen에서 수식어 예제를 확인 할 수 있습니다.

3. 약어

가장 자주 사용되는 v-bind와 v-on은 약어가 제공됩니다.

v-bind 약어

<!-- 전체 문법 -->
<a v-bind:href="url"> ... </a>

<!-- 약어 -->
<a :href="url"> ... </a>

v-on 약어

<!-- 전체 문법 -->
<a v-on:click="doSomething"> ... </a>

<!-- 약어 -->
<a @click="doSomething"> ... </a>

참고

https://kr.vuejs.org/v2/guide/syntax.html

[Vue.JS] 라이프 사이클

버미노트 — Sun, 21 Oct 2018 02:30:31 +0900

Vue.JS의 라이프 사이클은 Vue.JS 어플리케이션을 구현할 때 빼 놓을 수 없는, 빼 놓고는 Vue.JS 어플리케이션을 개발하기 힘든, 매우 중요한 개념입니다. Vue.JS의 라이프 사이클은 크게 Create, Mount, Update, Destory로 나눌 수 있습니다.

Vue.JS의 라이프 사이클

1. Create

Vue.JS의 라이프 사이클들 중에 가장 먼저 실행됩니다. create 단계에서 실행되는 라이프 사이클 훅(hook)들은 컴포넌트가 DOM에 추가 되기 전이기 때문에, DOM에 접근하거나 this.$el을 사용할 수 없습니다. 컴포넌트가 DOM에 추가 되기 전에 호출 되기 때문에 서버 사이드 렌더링에서도 지원되는 훅입니다. Create 단계에서 호출되는 라이프 사이클 훅들은 beforeCreate와 created가 있습니다.

beforeCreate

Vue.JS의 라이프 사이클 훅 중에서 가장 먼저 실행 되는 훅입니다. data와 이벤트($on, $once, $off, $emit), 감시자($watch)등이 설정 되기 전에 호출되는 라이프 사이클 훅입니다.

export default {
  data() {
    return {
      title: 'Vue.JS'
    };
  }
  beforeCreate() {
    // data(this.title)와 이벤트($on ...) 감시자($watch)를 사용할 수 없습니다.
    console.log('beforeCreate');
  }
}

CodePen에서 beforeCreate 라이프 사이클 훅 결과를 확인 할 수 있습니다.

created

data, computed, methods, watch 등과 같은 옵션 설정이 완료된 시점이기 때문에, data 등을 사용할 수 있습니다. 하지만 아직 DOM에 컴포넌트가 마운트 되지 않았기 때문에 $el은 사용할 수 없습니다.

export default {
  data() {
    return {
      title: 'Vue.JS'
    };
  },
  computed: {
    titleComputed() {
      return 'After Computed : ' + this.title;
    }
  },
  created() {
    // data(this.title), computed(this.titleComputed), methods... 등을 사용할 수 있지만,
    // DOM이 마운팅 되기 전이기 때문에 $el은 사용할 수 없습니다.
    console.log(this.title, this.titleComputed);
  }
}

CodePen에서 created 라이프 사이클 훅 결과를 확인 할 수 있습니다.

2. Mount

컴포넌트가 DOM에 추가될 때, 실행되는 라이프 사이클 훅입니다. 서버 사이드 렌더링을 지원하지 않습니다. 렌더링이 될 때 DOM을 변경하고 싶다면 이 라이프 사이클 훅을 사용할 수 있습니다. 하지만 컴포넌트 초기에 data가 세팅되어야 한다면, created 라이프 사이클 훅을 사용하는 것이 좋습니다. Mount 단계에서 호출되는 라이프 사이클 훅들은 beforeMount와 mounted가 있습니다.

beforeMount

컴포넌트가 DOM에 추가 되기 직전에 실행되는 훅입니다. 서버 사이드 렌더링을 지원하지 않습니다. 컴포넌트 초기에 data가 세팅되어야 한다면 created 라이프 사이클 훅을, 렌더링 되고 DOM을 변경해야 한다면 mounted 라이프 사이클 훅을 사용하면 되기 때문에, 거의 사용하지 않는 라이프 사이클 훅입니다.

export default  {
  beforeMount() {
    // $el은 아직 사용할 수 없습니다.
  }
}

CodePen에서 beforeMount 라이프 사이클 훅 결과를 확인 할 수 있습니다.

mounted

컴포넌트가 DOM에 추가 된 후 호출되는 라이프 사이클 훅입니다. 서버 사이드 렌더링은 지원하지 않습니다. $el을 사용하여 DOM에 접근 할 수 있습니다. mounted 훅이 호출되었다고 모든 컴포넌트가 마운트 되었다고 보장할 수는 없습니다. 전체가 렌더링 보장된 상태에서 작업을 하기 위해서는 $nextTick을 사용해야 합니다.

export default {
  mounted() {
    // $el 을 사용할 수 있습니다.
    console.log('mounted', this.$el);
    this.$nextTick(() => {
      // 모든 화면이 렌더링된 후 호출됩니다.
    });
  }
}

CodePen에서 mounted 라이프 사이클 훅 결과를 확인 할 수 있습니다.

자식 컴포넌트의 mounted 훅이 부모 컴포넌트의 mounted 훅 보다 먼저 실행됩니다.

자식 컴포넌트의 Mounted 훅이 부모의 Mounted 훅 보다 먼저 실행됩니다.

위의 그림을 보면 쉽게 이해 하실 수 있습니다. created 훅은 부모 -> 자식 순으로 호출 되지만, mounted 훅은 자식 -> 부모 순으로 호출됩니다. 즉 부모 컴포넌트는 자식 컴포넌트가 모두 DOM에 추가 된 후에야 mounted 훅이 실행됩니다.

const Child = {
  template: '<div>Child</div>',
  mounted() {
    console.log('Child Component Mounted');
  }
}

new Vue({
  el: '#app',
  mounted() {
    console.log('Parent Component Mounted');
  },
  components: {
    Child
  }
});

CodePen에서 위 예제의 실행 결과를 확인 할 수 있습니다.

3. Update

컴포넌트에서 사용되는 속성들이 변경되는 등의.. 컴포넌트가 재 랜더링 되면 실행되는 라이프 사이클 훅입니다. 컴포넌트가 재 렌더링 될 때, 변경 된 값으로 어떠한 작업을 해야 할 때 유용하게 사용 되는 훅입니다. 서버 사이드 렌더링은 지원하지 않습니다.

beforeUpdate

DOM이 재 렌더링 되기 직전에 호출되는 라이프 사이클 훅입니다. 업데이트 된 값들을 가지고 있는 상태이기 때문에, 업데이트 된 값으로 다른 값들을 업데이트 할 수 있습니다. 이 훅에서 값이 변경되더라도 다시 beforeUpdate 훅이 호출 되지 않기 때문에, 무한 루프에 빠질 걱정은 하지 않으셔도 됩니다.

export default {
  beforeUpdate() {
    console.log('beforeUpdate');
  }
}

CodePen에서 beforeUpdate 훅 예제를 확인 할 수 있습니다.

updated

DOM이 재 렌더링 된 후 호출되는 라이프 사이클 훅입니다. DOM이 업데이트 된 후 호출 되는 훅이기 때문에 변경 된 후의 DOM을 이용해야 하는 처리를 할 때 사용하기 유용한 훅입니다. mounted 훅과 마찬가지로 재 렌더링이 끝났다는 것이 보장된 상태에서 작업하기 위해서는 $nextTick을 사용해야 합니다. beforeUpdate 훅과 다르게 updated 훅에서 data를 수정하게 되면 update 훅이 호출 되기 때문에 무한 루프에 빠질 수 있으니 유의해야 합니다.

export default {
  updated() {
    console.log('updated');
    this.$nextTick(function () {
      // 모든 화면이 렌더링된 후 실행합니다.
    });
  }
}

CodePen에서 updated 훅 예제를 확인 할 수 있습니다.

4. Destroy

컴포넌트가 제거 될 때 실행되는 라이프 사이클 훅입니다.

beforeDestroy

컴포넌트가 제거 되기 직전에 호출되는 라이프 사이클 훅입니다. 이 훅에서 컴포넌트는 본래의 기능들을 가지고 있는 온전한 상태입니다. 이 훅에서 이벤트 리스너를 해제하거나 컴포넌트에서 동작으로 할당 받은 자원들은 해제해야 할 때 사용하기 적합한 훅입니다. 서버 사이드 렌더링을 지원하지 않습니다.

export default {
  beforeDestroy() {
    console.log('beforeDestory');
  }
}

CodePen에서 beforeDestroy 훅 예제를 확인 할 수 있습니다.

destroyed

컴포넌트가 제거 된 후 호출되는 라이프 사이클 훅입니다. 컴포넌트의 모든 이벤트 리스너(@click, @change 등..)와 디렉티브(v-model, v-show 등..)의 바인딩이 해제 되고, 하위 컴포넌트도 모두 제거됩니다. 서버 사이드 렌더링을 지원하지 않습니다.

export default {
  destroyed() {
    console.log('destroyed');
  }
}

CodePen에서 destroyed 훅 예제를 확인 할 수 있습니다.

5. GitHub 소스 확인

Vue.JS 라이프 사이클 예제는 https://github.com/beomy/vue-life-cycle에서 확인 할 수 있습니다.

참고

https://medium.com/witinweb/vue-js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-7780cdd97dd4

[Vue.JS] Vue 인스턴스

버미노트 — Thu, 11 Oct 2018 00:41:23 +0900

Vue.JS 공식 문서를 따르면, Vue는 엄격하게 MVVM 패턴과 관계되어 있지 않지만, MVVM 패턴에 영감을 받았다고 합니다.([디자인패턴] MVC, MVP, MVVM 비교 참고) MVVM 패턴의 특징 중 하나가 데이터 바인딩입니다. Model이 업데이트 되면, 데이터 바인딩으로 인해 View가 업데이트 됩니다.

Vue 인스턴스 만들기

Vue 어플리케이션을 만드는 것은 Vue 인스턴스를 만드는 것에서 시작됩니다. Vue 어플리케이션의 구조는 루트 Vue 인스턴트 밑에 하위 컴포넌트가 붙는 컴포넌트 트리 구조입니다.

Root Instance
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

Vue 인스턴스를 생성 할 때, data, method, 라이프사이클 콜백(created, mounted, destoryed 등의..) 옵션들을 포함 하는 옵션 객체를 전달 해야 합니다.

new Vue({
  data() {
    // ... 화면을 그리는데 사용되는 데이터들
  },
  methods: {
    // ... 화면을 그리는데 사용되는 메소드들
  },
  created() {
    // ... 컴포넌트가 생성된 후 호출되는 라이프사이클 콜백
  },
  mounted() {
    // ... 컴포넌트가 마운트 된 후 호출되는 라이프사이클 콜백
  },
  destoryed() {
    // ... 컴포넌트가 언마운트 된 후 호출되는 라이프사이클 콜백
  },
  components: {
    // ... 화면을 그리는데 사용되는 하위 컴포넌트들
  }
});

Vue 인스턴스를 생성할 때 넘겨줘야 하는 옵션 중 몇가지를 살펴보도록 하겠습니다. 생명주기 콜백함수들도 옵션들 중에 하나인데, 생명주기 콜백함수들은 많기도하고, 중요하기 때문에 다음 포스팅에 이야기 하려고 합니다. 각각의 옵션들의 사용방법도 이후 포스팅에서 더 자세히 이야기 하도록 하고, 이번에는 간단한 선언 방법만 이야기 하겠습니다.

1) data (Object | Function)

화면을 그리는데 사용하는 데이터 객체를 리턴하는 함수이거나 혹은 데이터 객체 그 자체가 될 수 있습니다. Vue 인스턴스가 아닌 하위 컴포넌트에서 사용될 때는 반드시 함수형이여야 합니다.

{
  value1: 'this is value 1', // value1, value2를 객체의 속성이라고 이야기 하겠습니다.
  value2: 'this is value 2'
}

data 객체의 속성들이 변경 되면(함수일 경우 리턴하는 데이터 객체의 속성), 화면이 자동으로 갱신됩니다.

new Vue({
  data() {
    return {
      // 이 값들이 변경되면 화면이 자동으로 갱신됩니다.
      msg: '함수형 data 입니다.',
      desc: '하위 컴포넌트에서 data는 반드시 함수형이여 합니다.'
    };
  }
  /* 혹은
  data: {
    msg: '객체형 data 입니다.'
    desc: 'Vue 인스턴스를 생성 할 때는 객체를 사용해도 됩니다.'
  }
  */
});

2) props (Array | Object)

부모 컴포넌트로부터 전달 받은 property들의 Array 혹은 Object입니다.

<div>
  <HellowWord title="Hello Vue" desc="Vue Instance" />
</div>

부모 컴포넌트에서 하위 컴포넌트로 props 넘겨주기

위의 코드와 같이 하위 컴포넌트를 호출하면 title와 desc를 props의 Array에 추가해 주어야 하위 컴포넌트에서 title과 desc를 사용할 수 있게 됩니다. 유효성 검사 및 기본값과 같은 고급 옵션을 사용하기 위해 Object를 사용할 수도 있습니다.

{
  props:['title', 'desc'],
  /* 혹은 고급 옵션을 사용하기 위한 Object
  props: {
    title: String, // 타입 설정
    desc: {
      required: true, // 필수값 설정
      default: '설명이 없습니다.' // 기본 값 설정
    }
  } */
}

3) computed ({ [key: string]: Function | { get: Function, set: Function } })

data를 미리 계산한 값들을 나타내는 함수들을 모아둔 객체입니다. setter을 만들지 않았다면 기본적으로 getter 기능만 제공합니다.

{
  date() {
    return() {
      msg: '함수형 data 입니다.',
      desc: '하위 컴포넌트에서 data는 반드시 함수형이여 합니다.'
    }
  }
  computed: {
    print() {
      return this.msg + ' ' + this.desc
    }
  }
}

4) watch ({ [key: string]: sting | Function | Object | Array })

watch는 data와 한쌍을 이루게 됩니다. 즉, data에 표현된 key와 watch에 표현된 key의 이름은 동일해야 합니다. data의 value 값이 변경이 되면, watch의 key의 value에 할당된 콜백이 실행됩니다.

{
  data() {
    return {
      msg: '메시지입니다'
    }
  }
  watch: {
    msg() {
      console.log('data의 msg가 수정되면 호출됩니다.');
    }
  }
}

5) methods ({ [key: string]: Function })

화면을 표현하는데 사용하는 모든 메소드들이 모여 있는 곳입니다.

{
  data() {
    return {
      a: 1
    };
  }
  methods: {
    plus() {
      this.a++;
    }
  }
}

참고

https://kr.vuejs.org/v2/guide/instance.html

[자바스크립트] ES8(ECMA Script 8) - async, await

버미노트 — Sat, 29 Sep 2018 01:53:11 +0900

비동기 프로그래밍으로 발생하는 콜백지옥을 해결하는 방법으로 ES6에서 추가된 Promise를 사용하는 방법이 있습니다. ([자바스크립트] 비동기프로그래밍 - 콜백함수(Callback function) 참고) 이번 포스트에서는 비동기 프로그래밍을 처리할 수 있는 방법으로 async와 await에 대해 이야기 하려 합니다.

1. 문법

async function name([param[, param[, ... param]]]) { 
    statements 
}

name: 함수 이름
param: 함수에 전달되는 인자들의 이름
statements: 함수 본문
리턴 값: async 함수의 return 값으로 resolve 된 Promise 객체 혹은 async 함수에서 예외가 발생하였다면 발생 된 예외로 reject 된 Promise 객체

async 함수를 사용하는 방법은 기본 함수를 생성하는 것과 큰 차이가 없습니다. 그렇기 때문에 Promise를 이용하는 것보다 async, await를 사용할 때 코드가 더 간결해 질 수 있습니다. async 함수의 리턴 값은 resolve 된 Promise 객체, 혹은 reject 된 Promise 객체를 암묵적으로 리턴합니다. 암묵적으로 리턴한다는 말은, new Promise 를 사용하여 Promise 객체를 리턴하지 않아도 async 함수의 리턴 값으로 Promise 객체를 받게 된다는 뜻으로 사용하였습니다.

* 참고 - 리턴 값 확인하기

async 함수 안에서 리턴 한 값은 resolve 된 Promise 객체로 리턴 되어 집니다.

async 함수 안에서 발생한 예외는 reject 된 Promise 객체로 리턴 되어 집니다.

2. 데모

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  var result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: 'resolved'
}

asyncCall();

3. 설명

async 함수에서는 await를 사용할 수 있습니다. await는 async 함수에서만 사용 가능합니다. 일반 함수에서 await를 사용하게 되면 syntax error가 발생됩니다.

await는 Promise와 함께 사용되어야 합니다. await를 사용하면 Promise가 종료 될 때까지 함수 실행이 일시 정지 됩니다. 그후 Promise가 종료 되면 함수 실행이 다시 진행 됩니다. await 사용하면 Promise에서 resolve 된 값을 반환 받게 됩니다. await의 Promise가 reject 되면, 예외가 발생됩니다.

function awaitFunction() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('success'), 1000);
    // setTimeout(() => reject('fail'), 1000);
  });
}

async function asyncFunction() {
  try {
    const msg = await awaitFunction();
    console.log(msg); // awaitFunction에서 resolve가 호출 될 때 resolve의 인자값 'success'
  } catch (e) {
    console.log(e); // awaitFunction에서 reject가 호출 될 때 reject의 인자값 'fail'
  }
}

asyncFunction();

Promise의 사용 방법을 단순히 하기 위해서(Promise의 콜백 함수 동작을 단순히 보이기 위해서) async와 await가 사용됩니다.

var resolveAfter2Seconds = function() {
  console.log("starting slow promise");
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(20);
      console.log("slow promise is done");
    }, 2000);
  });
};

var resolveAfter1Second = function() {
  console.log("starting fast promise");
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(10);
      console.log("fast promise is done");
    }, 1000);
  });
};

var sequentialStart = async function() {
  console.log("==SEQUENTIAL START==");

  // If the value of the expression following the await operator is not a Promise, it's converted to a resolved Promise.
  const slow = await resolveAfter2Seconds();

  const fast = await resolveAfter1Second();
  console.log(slow);
  console.log(fast);
}

var concurrentStart = async function() {
  console.log("==CONCURRENT START with await==");
  const slow = resolveAfter2Seconds(); // starts timer immediately
  const fast = resolveAfter1Second();

  console.log(await slow);
  console.log(await fast); // waits for slow to finish, even though fast is already done!
}

var stillSerial = function() {
  console.log("==CONCURRENT START with Promise.all==");
  Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then(([slow, fast]) => {
    console.log(slow);
    console.log(fast);
  });
}

var parallel = function() {
  console.log("==PARALLEL with Promise.then==");
  resolveAfter2Seconds().then((message)=>console.log(message)); // in this case could be simply written as console.log(resolveAfter2Seconds());
  resolveAfter1Second().then((message)=>console.log(message));
}

sequentialStart(); // takes 2+1 seconds in total
// wait above to finish
setTimeout(concurrentStart, 4000); // takes 2 seconds in total
// wait again
setTimeout(stillSerial, 7000); // same as before
// wait again
setTimeout(parallel, 10000); // trully parallel

위의 예제는 MDN에 나와 있는 async, await 예제입니다. 코드가 길고 복잡해 보이지만 뜯어 보면 어렵지 않은 코드입니다.

resolveAfter2Seconds : 2초후 Promise.resolve로 20을 내보내는 함수입니다.
resolveAfter1Second : 1초후 Promise.resolve로 10을 내보내는 함수입니다.
sequentialStart : resolveAfter2Seconds와 resolveAfter1Second를 await를 이용하여 순차적으로 결과를 받는 함수입니다. 순차적으로 결과를 받기 때문에, 2초(resolveAfter2Seconds) + 1초(resolveAfter1Second) = 3초 후 console.log 출력 값을 확인 할 수 있습니다.
concurrentStart : resolveAfter2Seconds와 resolveAfter1Second를 동시(엄밀히 말하면 동시는 아니지만..) 실행하고 그 후 await로 결과를 받는 함수입니다. 동시에 함수들이 실행 되기 때문에 가장 마지막으로 종료 되는 2초(resolveAfter2Seconds) 후 console.log 출력 값을 확인 할 수 있습니다.
stillSerial : Promise.all을 사용하여 concurrentStart와 동일한 기능을 구현한 함수입니다.
parallel : 병렬로 resolveAfter2Seconds와 resolveAfter1Second를 실행하는 함수입니다.

참고

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

beomy

[Svelte] 스벨트 입문 A부터 Z까지

스벨트 입문 강의를 출시했습니다.

왜 스벨트를 배워야 할까요?

2019년 관심도 1위!

장점 하나: 낮은 러닝 커브, 코드량 감소

장점 둘: 작은 크기의 번들

장점 셋: 스벨트의 빠른 속도

미리미리 배워두어요

부록: 스벨트를 포스팅 했습니다.

[Browser] 렌더링 최적화

1. 자바스크립트 런타임이란?

2. 브라우저가 화면을 렌더링 하는 방법

3. 초기 렌더링 최적화 방법

4. 렌더링 업데이트 최적화 방법

5. 기타: 렌더링 최적화 이해에 도움이 될 수 있는 포스팅

포스팅들...

[Vue.JS] Vue.JS 소스코드 분석

[vuex] Testing

1. Mutation Testing

2. Action Testing

3. Getters Testing

4. 테스트 실행

Node에서 테스트

브라우저에서 테스트

참고

[vuex] Strict Mode와 Form Handling

1. Strict Mode

2. Form Handling

value와 input(change) 사용하기

setter와 getter 사용하기

참고

[vuex] Plugins

1. 플러그인 내부에서 변이 커밋하기

2. state 스냅샷 가져오기

3. 내장 Logger 플러그인

참고

[vuex] Modules

1. Module Local State

2. Namespace

네임스페이스 모듈에서 전역 접근

네임스페이스 모듈에서 전역 action 등록

헬퍼에서 네임스페이스 바인딩

플러그인 개발자를 위한 주의사항

3. 동적 모듈 등록

registerModule 사용 할 때, state 보존하기

4. 모듈 재사용

참고

[vuex] Actions

1. Dispatch

객체 스타일 payload

비동기 Back-End API 호출

2. mapActions

3. Action 사용하기

참고

[vuex] Mutations

1. Commit with payload

객체 스타일 payload 커밋

2. 변이(Mutation)는 Vue의 반응성 규칙을 따릅니다.

3. Mutation Type 상수

4. Mutation의 핸들러 함수는 반드시 동기적이어야 합니다.

5. mapMutations

참고

[vuex] Getters

1. Property 스타일

2. Method 스타일

3. mapGetters

참고

[vuex] State

1. 단일 상태 트리 (Single State Tree)

2. Vuex의 state를 Vue 컴포넌트에 가져오기

3. mapState

객체 전개 연산자

4. 컴포넌트는 여전히 로컬 state를 가질 수 있습니다.

참고

[vuex] Vuex 시작하기

1. Vuex 예시

2. Vuex 어플리케이션 구조

참고

[vuex] Vuex란

`value`와 `input`(`change`) 사용하기

`registerModule` 사용 할 때, state 보존하기

2. `mapActions`

5. `mapMutations`

3. `mapGetters`

3. `mapState`

1. `scrollBehavior` 함수

`beforeRouteEnter` 가드

`beforeRouteUpdate` 가드

`beforeRouteLeave` 가드