Merge pull request #7 from vuejs-kr/master

코드 갱신

_posts/2017-02-13-vuejs-eventbus.markdown

@@ -31,7 +31,7 @@ EventBus.$emit('message', 'hello world');
 ```javascript
 // 이벤트 구독
 EventBus.$on('message', function(text) {
-	console.log(text);
+    console.log(text);
 });
 ```
 
@@ -43,23 +43,23 @@ EventBus.$on('message', function(text) {
 
 ```xml
 <div id="sender-app">
-	<input v-model="text">
-	<button @click="sender">sender</button>
+    <input v-model="text">
+    <button @click="sender">sender</button>
     <div v-if="receiveText">#sender-app: I sent a message a {{ receiveText }}</div>
 </div>
 <div id="receiver-app">
-	<div v-if="text">#receiver-app: {{ text }}</div>
+    <div v-if="text">#receiver-app: {{ text }}</div>
 </div>
 ```
 
 ```javascript
 var EventBus = new Vue();
 
 var SenderApp = new Vue({
-	el: '#sender-app',
+    el: '#sender-app',
     data() {
     	return {
-        	text: '',
+            text: '',
             receiveText: ''
         }
     },
@@ -68,28 +68,28 @@ var SenderApp = new Vue({
     },
     methods: {
     	sender() {
-        	EventBus.$emit('message', this.text);
+            EventBus.$emit('message', this.text);
             this.text = '';
         },
         onReceive(text) {
-        	this.receiveText = text;
+            this.receiveText = text;
         }
     }
 });
 
 var ReceiverApp = new Vue({
-	el: '#receiver-app',
+    el: '#receiver-app',
     data() {
     	return {
-        	text: ''
+            text: ''
         }
     },
-	created() {
+    created() {
     	EventBus.$on('message', this.onReceive);
     },
     methods: {
     	onReceive(text) {
-        	this.text = text;
+            this.text = text;
         }
     }
 });
@@ -102,7 +102,7 @@ var ReceiverApp = new Vue({
 ```javascript
 (function() {
 
-	var EventBus = Vue();
+    var EventBus = Vue();
 
     Object.defineProperties(Vue.prototype, {
         $eventBus: {
@@ -121,4 +121,4 @@ var ReceiverApp = new Vue({
 - [vue.js 공식홈페이지 - 비-부모-자식간-통신](https://kr.vuejs.org/v2/guide/components.html#비-부모-자식간-통신)
 - [Building a Simple Event Bus in Vue.js - Arvid Kahl](https://devblog.digimondo.io/building-a-simple-eventbus-in-vue-js-64b70fb90834#.ksf302nhz)
 - [vue.js 한국어 사용자 모임](https://vuejs-kr.github.io/)
-- [진블로그 - Vuejs EventBus](http://blog.puding.kr/179)
+- [진블로그 - Vuejs EventBus](http://blog.puding.kr/179)

_posts/2017-02-21-vscode-vue-development-settings.markdown

@@ -0,0 +1,143 @@
+---
+layout: post
+title:  "VSCODE Sass, Vue, Vue Snippet 세팅하기"
+date:   2017-02-21 22:17:00 +0900
+categories: jekyll update
+author: "jinhan"
+excerpt: "VSCODE에서 Vue개발환경 세팅을 해봅시다."
+---
+
+[원본 글](http://hjh5488.tistory.com/39)
+
+# VSCode Sass, Vue 세팅하기
+
+항상 `Vue.js korea`에서 많은 분들의 도움을 받고 있습니다. 감사합니다~
+
+어제 `vscode`를 처음 써보면서 세팅하면서 겪었던 시행착오들을 한번 정리해봤습니다.
+
+`vscode`를 처음 쓰시고자 하는분들한테 도움이 되길 바랍니다.
+
+## Sass
+vscode를 맨 처음 설치하고 단일 파일 `*.vue`로 된 파일을 열었을때 `scss`가 있으면 아래와 같이 에러가 발생합니다.
+
+![](https://s3.ap-northeast-2.amazonaws.com/leoheo-resource/Pasted+image+at+2017_02_17+03_54+PM.png)
+
+이 에러가 발생하는 이유는 기본적으로 vscode가 `sass`를 지원하지 않기 때문입니다.
+
+그래서 `sass를 사용하기 위해서는 extension설치와 설정을 해주어야 합니다.`
+
+`설치 후 설정 중요!!`
+
+먼저 vscode에서 `vue`파일을 사용하기 위해서 제가 사용한 extension은 [Vue Components](https://marketplace.visualstudio.com/items?itemName=seanwash.vue) 입니다.
+
+vscode에서 extension를 쉽게 설치하기 위해서 제공되는 편의 기능 중에 `F1`를 누르고 나오는 입력창에서 아래와 같이 입력하면 됩니다.
+
+![](https://s3.ap-northeast-2.amazonaws.com/leoheo-resource/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA+2017-02-18+%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE+1.51.51.png)
+
+그러고 나서 `Vue Components`를 설치해줍니다.
+
+![](https://s3.ap-northeast-2.amazonaws.com/leoheo-resource/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA+2017-02-18+%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE+1.54.29.png)
+
+여기까지 설치가 다 되어서 다시 파일을 가보면 vscode는 여전히 에러를 뱉어내고 있습니다.
+
+여기서 아까 말한 `설정`이 필요합니다.
+
+`README`를 보면 아래와 같이 설정하라고 나옵니다.
+
+![](https://s3.ap-northeast-2.amazonaws.com/leoheo-resource/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA+2017-02-18+%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE+1.58.36.png)
+
+> 그러면 이 설정을 어떻게 하느냐?!에서 많은 분들이 궁금증을 가지실수 있습니다.
+
+그래서 vscode는 이러한 세팅을 `settings.json`라는 파일로 세팅을 관리합니다.
+
+프로젝트의 root에 `.vscode`라는 디렉토리를 찾으실 수 있을겁니다.
+
+![](https://s3.ap-northeast-2.amazonaws.com/leoheo-resource/Pasted+image+at+2017_02_17+03_58+PM.png)
+
+그래서 `settings.json`파일을 열고 아까 본 설정을 적어줍니다.
+
+```json
+"files.associations": {
+  "*.vue": "vue"
+}
+```
+
+이렇게 적용을 하면 인제부터 `.vue`파일에서 `scss`를 사용할 수 있습니다.
+
+![](https://s3.ap-northeast-2.amazonaws.com/leoheo-resource/Pasted+image+at+2017_02_17+03_55+PM.png)
+
+## Vue
+vscode에서 `eslint`를 적용하기 위해서 저는 `vscode-eslint`를 설치하였습니다.
+
+이 가이드는 javasript lint중에 `standard`를 기준으로 설명하겠습니다.
+
+[vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)를 설치 하고 아무런 세팅을 안해주면
+
+`js에서는 잘 되는데 vue파일에서는 linting이 작동하지 않았습니다.`
+
+그래서 `vscode-eslint` 이슈를 살펴보던 중에 해결방법을 찾았습니다.
+
+`vscode-eslint`를 설치하고 나면 기본적인 세팅은 2가지만 되어있습니다.
+
+```json
+// An array of language ids which should be validated by ESLint
+"eslint.validate": [
+  "javascript",
+  "javascriptreact"
+],
+```
+
+그래서 작업하시는 프로젝트의 `settings.json`에 아래와 같이 적용해줍니다.
+
+```json
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "html",
+    "vue"     
+  ]
+```
+
+이 방법은 [vscode-eslint의 ISSUE #42](https://github.com/Microsoft/vscode-eslint/issues/42#issuecomment-264836417)를 참고하였습니다.
+
+이렇게 세팅을 하고 나면 인제 `.vue`파일에서도 linting이 되는걸 확인하실 수 있습니다.
+
+![](https://s3.ap-northeast-2.amazonaws.com/leoheo-resource/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA+2017-02-18+%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE+2.30.46.png)
+
+지금까지 vscode에서 `sass, vue세팅하기`에 대해서 알아봤습니다.
+
+## 부록
+저처럼 `귀차니즘이 심한 개발자`라서 어떻게 하면 좀 더 자동화를 해볼까? 라고 생각하시는 분이 있다면 `vue snippet`를 등록해보세요.
+
+![](https://s3.ap-northeast-2.amazonaws.com/leoheo-resource/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA+2017-02-22+%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB+12.23.09.png)
+
+![](https://s3.ap-northeast-2.amazonaws.com/leoheo-resource/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA+2017-02-22+%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB+12.23.19.png)
+
+위와같은 절차로 들어가게 되면 `vue.json`파일이 나옵니다. 거기에 아래 `snippet`를 추가해주세요.
+
+```json
+"init template": {
+  "prefix": "tpl",
+  "body": [
+    "<template lang='$1'>",
+    "",
+    "</template>",
+    "<script>",
+    "export default {",
+    "",
+    "}",
+    "</script>",
+    "<style lang='$2'>",
+    "",
+    "</style>",
+    ""
+  ],
+  "description": "single vue file initial template"
+}
+```
+
+그러면 아래와 같이 사용할 수 있습니다.
+
+![](https://s3.ap-northeast-2.amazonaws.com/leoheo-resource/ezgif.com-video-to-gif+(3).gif)
+
+마지막으로 틀린 점이나 조금 더 나은 방법이 있으신 분은 언제나 지적해주시면 감사하겠습니다 ^^

_posts/2017-02-25-vue-chrome-debugging.markdown

@@ -0,0 +1,54 @@
+---
+layout: post
+title:  "크롬 브라우저에서 Vue 앱 디버깅하기"
+date:   2017-02-25 17:53:00 +0900
+categories: vue
+author: "ChangJoo Park"
+excerpt: "vue 컴포넌트를 크롬 개발자도구로 디버깅합니다"
+---
+
+
+vue.js는 훌륭한 개발자 도구인 **vue-devtools**를 제공합니다. 현재 크롬 브라우저만 지원하고 있으며 [여기](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)에서 받으실 수 있습니다.
+
+![vue-devtools](https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/demo.gif)
+
+
+
+설치하신 후 vue.js 를 사용하는 웹페이지에 들어가면 **vue-devtools**를 사용할 수 있습니다
+
+![vue-devtools](http://i.imgur.com/KWxhmSK.png)
+
+vue-devtools를 이용해 컴포넌트간 관계와 데이터의 변화를 추적할 수 있지만 특정 메소드의 흐름을 깊이 추적할 수는 없습니다.
+
+이번에는  _vue-cli의 webpack 템플릿을 사용하는 경우_  크롬 브라우저에서 vue 앱을 디버깅하는 방법을 알아봅니다.
+
+
+
+```
+vue init webpack my-vue-app
+```
+
+위 명령어와 같이 vue-cli를 이용해 앱을 만드는 경우 크롬 개발자도구에서 브레이크포인트를 걸어도 반응이 없습니다.
+
+
+
+![break-point-not-working](http://i.imgur.com/AGnJl7P.png)
+
+
+
+크롬을 이용해 vue 컴포넌트를 디버깅하기 위해서 _webpack_ 설정을 변경해야 합니다.
+
+기본적으로 vue-cli의 webpack 템플릿은 _webpack.base.conf.js_를 webpack 셋팅의 기준이 되는 파일로 사용하고 개발환경과 배포환경별로 파일을 따로 제공합니다. 각각의 파일명은 _webpack.dev.conf.js_와  _webpack.prod.conf.js_ 입니다.
+
+![setting](http://i.imgur.com/QhfZKVq.png)
+
+수정해야하는 부분은 `devtool` 속성입니다. 값을 `'source-map'`으로 변경합니다. 그리고 서버를 재시작합니다
+
+다시 크롬 브라우저에서 개발자도구의 `Sources`탭을 선택하고 디버깅할 **vue**파일을 엽니다. 스크립트 태그만 브레이크포인트를 걸 수 있습니다. 필요한 부분에 브레이크포인트를 걸고 UI에서 필요한 이벤트를 실행합니다.
+
+![break-point-working](http://i.imgur.com/e5QriGU.png)
+
+**참고자료**
+
+- [웹팩 설정#devtool](https://webpack.github.io/docs/configuration.html#devtool)
+- [vue-webpack-boilerplate](https://github.com/vuejs-templates/webpack)

_posts/2017-02-26-changes-2.2.0.markdown

@@ -0,0 +1,85 @@
+---
+layout: post
+title:  "Vue.js 2.2.0 버전 가이드/API 업데이트 요약"
+date:   2017-02-26 12:00:00 +0900
+categories: vue
+author: "ChangJoo Park"
+excerpt: "vue.js 2.2.0 업데이트에 따른 홈페이지 가이드/API를 다룹니다"
+---
+
+## API
+
+### errorHandler 변경
+
+Vue의 라이프사이클에서 에러가 발생한 경우 앱을 멈추지 않고 에러 메시지를 출력합니다.
+
+[문서](http://kr.vuejs.org/v2/api/#errorHandler)
+
+### Vue.delete 전달인자 변경
+
+Vue.delete의 전달인자가 `object, key`에서 `target, key` 로 변경되었습니다.
+사용할 수 있는 타입이 Object와 Array 두가지가 되었습니다.
+키는 string 이외에 number가 추가되었습니다.
+
+[문서](http://kr.vuejs.org/v2/api/#Vue-delete)
+
+### render 변경
+
+render 함수의 타입이 함수에서 `(createElement: () => VNode) => VNode`로 변경되었습니다.
+
+[문서](http://kr.vuejs.org/v2/api/#render)
+
+### renderError 함수 추가
+
+ `render`함수 사용시 에러가 발생하면 `renderError` 함수를 사용해서 렌더링합니다. **개발 모드에서만** 사용할 수 있습니다
+
+[문서](http://kr.vuejs.org/v2/api/#renderError)
+
+### 옵션 / 컴포지션 항목 추가
+
+ [문서](http://kr.vuejs.org/v2/api/#옵션-컴포지션)
+
+### `provide` / `inject` 추가
+
+ 플러그인과 라이브러리에서 사용을 권장하는 의존성 주입 용 `provide` / `inject`가 추가되었습니다.
+
+[문서](http://kr.vuejs.org/v2/api/#provide-inject)
+
+### `vm.$props` 추가
+
+컴포넌트가 전달받은 속성에 접근할 수 있는 프록시가 추가 되었습니다
+
+[문서](http://kr.vuejs.org/v2/api/#vm-props)
+
+### `vm.$on` 변경
+
+문자열 외에 배열을 사용할 수 있습니다.
+[문서](http://kr.vuejs.org/v2/api/#vm-on)
+
+### `v-on` 마우스 관련 수식어 추가
+
+마우스 버튼 이벤트 핸들러가 추가되었습니다.
+
+[문서](http://kr.vuejs.org/v2/api/#v-on)
+
+### `keep-alive` 변경
+
+`<keep-alive>` 트리 안의 모든 중첩 컴포넌트에서 `activated`, `deactivated`가 실행됩니다.
+
+[문서](http://kr.vuejs.org/v2/api/#keep-alive)
+
+
+## 가이드
+
+### 컴포넌트 `v-model` 사용자 정의 추가
+
+[문서](http://kr.vuejs.org/v2/guide/components.html#컴포넌트의-v-model-사용자-정의)
+
+### 마우스 버튼 수식어 추가
+
+[문서](http://kr.vuejs.org/v2/guide/events.html#마우스-버튼-수식어)
+
+### 명시적 전환 지속 시간 설정 추가
+
+[문서](http://kr.vuejs.org/v2/guide/transitions.html#명시적-전환-지속-시간)
+

snippets.md

@@ -31,3 +31,7 @@ Vue가 포함된 [JsFiddle](https://jsfiddle.net/changjoo_park/bs3Lx0Lq/)에서
 - [동적 컴포넌트 예제](https://jsfiddle.net/kciter/zfkyn2wf/) - [@kciter](https://github.com/kciter/)
 - [Semantic-UI로 admin 시작하기](https://jsfiddle.net/gongzza/unm2u7oe/) - [@gongzza](https://github.com/gongzza/)
 - [KeyEvent를 이용하여 DIV 이동하기](https://jsfiddle.net/cd2p7zzz/) - [@devjin0617](https://github.com/devjin0617)
+- [Vue 디렉티브를 이용한 스크롤 락](https://jsfiddle.net/changjoo_park/e9s2vga3/) - [@changjoo-park](https://github.com/changjoo-park)
+- [Vue Mixin을 이용한 스크롤 락](https://jsfiddle.net/changjoo_park/8vbppbaf/) - [@changjoo-park](https://github.com/changjoo-park)
+- [Vue-Router 페이지 트랜지션](https://jsfiddle.net/changjoo_park/tf8p8jve/) - [@changjoo-park](https://github.com/changjoo-park)
+- [v-cloak 예제](https://jsfiddle.net/kciter/eqqgcsww/1/) - [@kciter](https://github.com/kciter/)