Skip to content

Commit d43b464

Browse files
devjin0617devjin0617
authored
Merge pull request #7 from vuejs-kr/master
코드 갱신
2 parents 1f28aa0 + 2545eb9 commit d43b464

5 files changed

+300
-14
lines changed

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

+14-14
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ EventBus.$emit('message', 'hello world');
3131
```javascript
3232
// 이벤트 구독
3333
EventBus.$on('message', function(text) {
34-
console.log(text);
34+
console.log(text);
3535
});
3636
```
3737

@@ -43,23 +43,23 @@ EventBus.$on('message', function(text) {
4343

4444
```xml
4545
<div id="sender-app">
46-
<input v-model="text">
47-
<button @click="sender">sender</button>
46+
<input v-model="text">
47+
<button @click="sender">sender</button>
4848
<div v-if="receiveText">#sender-app: I sent a message a {{ receiveText }}</div>
4949
</div>
5050
<div id="receiver-app">
51-
<div v-if="text">#receiver-app: {{ text }}</div>
51+
<div v-if="text">#receiver-app: {{ text }}</div>
5252
</div>
5353
```
5454

5555
```javascript
5656
var EventBus = new Vue();
5757

5858
var SenderApp = new Vue({
59-
el: '#sender-app',
59+
el: '#sender-app',
6060
data() {
6161
return {
62-
text: '',
62+
text: '',
6363
receiveText: ''
6464
}
6565
},
@@ -68,28 +68,28 @@ var SenderApp = new Vue({
6868
},
6969
methods: {
7070
sender() {
71-
EventBus.$emit('message', this.text);
71+
EventBus.$emit('message', this.text);
7272
this.text = '';
7373
},
7474
onReceive(text) {
75-
this.receiveText = text;
75+
this.receiveText = text;
7676
}
7777
}
7878
});
7979

8080
var ReceiverApp = new Vue({
81-
el: '#receiver-app',
81+
el: '#receiver-app',
8282
data() {
8383
return {
84-
text: ''
84+
text: ''
8585
}
8686
},
87-
created() {
87+
created() {
8888
EventBus.$on('message', this.onReceive);
8989
},
9090
methods: {
9191
onReceive(text) {
92-
this.text = text;
92+
this.text = text;
9393
}
9494
}
9595
});
@@ -102,7 +102,7 @@ var ReceiverApp = new Vue({
102102
```javascript
103103
(function() {
104104

105-
var EventBus = Vue();
105+
var EventBus = Vue();
106106

107107
Object.defineProperties(Vue.prototype, {
108108
$eventBus: {
@@ -121,4 +121,4 @@ var ReceiverApp = new Vue({
121121
- [vue.js 공식홈페이지 - 비-부모-자식간-통신](https://kr.vuejs.org/v2/guide/components.html#비-부모-자식간-통신)
122122
- [Building a Simple Event Bus in Vue.js - Arvid Kahl](https://devblog.digimondo.io/building-a-simple-eventbus-in-vue-js-64b70fb90834#.ksf302nhz)
123123
- [vue.js 한국어 사용자 모임](https://vuejs-kr.github.io/)
124-
- [진블로그 - Vuejs EventBus](http://blog.puding.kr/179)
124+
- [진블로그 - Vuejs EventBus](http://blog.puding.kr/179)

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

+143
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
---
2+
layout: post
3+
title: "VSCODE Sass, Vue, Vue Snippet 세팅하기"
4+
date: 2017-02-21 22:17:00 +0900
5+
categories: jekyll update
6+
author: "jinhan"
7+
excerpt: "VSCODE에서 Vue개발환경 세팅을 해봅시다."
8+
---
9+
10+
[원본 글](http://hjh5488.tistory.com/39)
11+
12+
# VSCode Sass, Vue 세팅하기
13+
14+
항상 `Vue.js korea`에서 많은 분들의 도움을 받고 있습니다. 감사합니다~
15+
16+
어제 `vscode`를 처음 써보면서 세팅하면서 겪었던 시행착오들을 한번 정리해봤습니다.
17+
18+
`vscode`를 처음 쓰시고자 하는분들한테 도움이 되길 바랍니다.
19+
20+
## Sass
21+
vscode를 맨 처음 설치하고 단일 파일 `*.vue`로 된 파일을 열었을때 `scss`가 있으면 아래와 같이 에러가 발생합니다.
22+
23+
![](https://s3.ap-northeast-2.amazonaws.com/leoheo-resource/Pasted+image+at+2017_02_17+03_54+PM.png)
24+
25+
이 에러가 발생하는 이유는 기본적으로 vscode가 `sass`를 지원하지 않기 때문입니다.
26+
27+
그래서 `sass를 사용하기 위해서는 extension설치와 설정을 해주어야 합니다.`
28+
29+
`설치 후 설정 중요!!`
30+
31+
먼저 vscode에서 `vue`파일을 사용하기 위해서 제가 사용한 extension은 [Vue Components](https://marketplace.visualstudio.com/items?itemName=seanwash.vue) 입니다.
32+
33+
vscode에서 extension를 쉽게 설치하기 위해서 제공되는 편의 기능 중에 `F1`를 누르고 나오는 입력창에서 아래와 같이 입력하면 됩니다.
34+
35+
![](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)
36+
37+
그러고 나서 `Vue Components`를 설치해줍니다.
38+
39+
![](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)
40+
41+
여기까지 설치가 다 되어서 다시 파일을 가보면 vscode는 여전히 에러를 뱉어내고 있습니다.
42+
43+
여기서 아까 말한 `설정`이 필요합니다.
44+
45+
`README`를 보면 아래와 같이 설정하라고 나옵니다.
46+
47+
![](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)
48+
49+
> 그러면 이 설정을 어떻게 하느냐?!에서 많은 분들이 궁금증을 가지실수 있습니다.
50+
51+
그래서 vscode는 이러한 세팅을 `settings.json`라는 파일로 세팅을 관리합니다.
52+
53+
프로젝트의 root에 `.vscode`라는 디렉토리를 찾으실 수 있을겁니다.
54+
55+
![](https://s3.ap-northeast-2.amazonaws.com/leoheo-resource/Pasted+image+at+2017_02_17+03_58+PM.png)
56+
57+
그래서 `settings.json`파일을 열고 아까 본 설정을 적어줍니다.
58+
59+
```json
60+
"files.associations": {
61+
"*.vue": "vue"
62+
}
63+
```
64+
65+
이렇게 적용을 하면 인제부터 `.vue`파일에서 `scss`를 사용할 수 있습니다.
66+
67+
![](https://s3.ap-northeast-2.amazonaws.com/leoheo-resource/Pasted+image+at+2017_02_17+03_55+PM.png)
68+
69+
## Vue
70+
vscode에서 `eslint`를 적용하기 위해서 저는 `vscode-eslint`를 설치하였습니다.
71+
72+
이 가이드는 javasript lint중에 `standard`를 기준으로 설명하겠습니다.
73+
74+
[vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)를 설치 하고 아무런 세팅을 안해주면
75+
76+
`js에서는 잘 되는데 vue파일에서는 linting이 작동하지 않았습니다.`
77+
78+
그래서 `vscode-eslint` 이슈를 살펴보던 중에 해결방법을 찾았습니다.
79+
80+
`vscode-eslint`를 설치하고 나면 기본적인 세팅은 2가지만 되어있습니다.
81+
82+
```json
83+
// An array of language ids which should be validated by ESLint
84+
"eslint.validate": [
85+
"javascript",
86+
"javascriptreact"
87+
],
88+
```
89+
90+
그래서 작업하시는 프로젝트의 `settings.json`에 아래와 같이 적용해줍니다.
91+
92+
```json
93+
"eslint.validate": [
94+
"javascript",
95+
"javascriptreact",
96+
"html",
97+
"vue"
98+
]
99+
```
100+
101+
이 방법은 [vscode-eslint의 ISSUE #42](https://github.com/Microsoft/vscode-eslint/issues/42#issuecomment-264836417)를 참고하였습니다.
102+
103+
이렇게 세팅을 하고 나면 인제 `.vue`파일에서도 linting이 되는걸 확인하실 수 있습니다.
104+
105+
![](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)
106+
107+
지금까지 vscode에서 `sass, vue세팅하기`에 대해서 알아봤습니다.
108+
109+
## 부록
110+
저처럼 `귀차니즘이 심한 개발자`라서 어떻게 하면 좀 더 자동화를 해볼까? 라고 생각하시는 분이 있다면 `vue snippet`를 등록해보세요.
111+
112+
![](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)
113+
114+
![](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)
115+
116+
위와같은 절차로 들어가게 되면 `vue.json`파일이 나옵니다. 거기에 아래 `snippet`를 추가해주세요.
117+
118+
```json
119+
"init template": {
120+
"prefix": "tpl",
121+
"body": [
122+
"<template lang='$1'>",
123+
"",
124+
"</template>",
125+
"<script>",
126+
"export default {",
127+
"",
128+
"}",
129+
"</script>",
130+
"<style lang='$2'>",
131+
"",
132+
"</style>",
133+
""
134+
],
135+
"description": "single vue file initial template"
136+
}
137+
```
138+
139+
그러면 아래와 같이 사용할 수 있습니다.
140+
141+
![](https://s3.ap-northeast-2.amazonaws.com/leoheo-resource/ezgif.com-video-to-gif+(3).gif)
142+
143+
마지막으로 틀린 점이나 조금 더 나은 방법이 있으신 분은 언제나 지적해주시면 감사하겠습니다 ^^

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

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

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

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
layout: post
3+
title: "Vue.js 2.2.0 버전 가이드/API 업데이트 요약"
4+
date: 2017-02-26 12:00:00 +0900
5+
categories: vue
6+
author: "ChangJoo Park"
7+
excerpt: "vue.js 2.2.0 업데이트에 따른 홈페이지 가이드/API를 다룹니다"
8+
---
9+
10+
## API
11+
12+
### errorHandler 변경
13+
14+
Vue의 라이프사이클에서 에러가 발생한 경우 앱을 멈추지 않고 에러 메시지를 출력합니다.
15+
16+
[문서](http://kr.vuejs.org/v2/api/#errorHandler)
17+
18+
### Vue.delete 전달인자 변경
19+
20+
Vue.delete의 전달인자가 `object, key`에서 `target, key` 로 변경되었습니다.
21+
사용할 수 있는 타입이 Object와 Array 두가지가 되었습니다.
22+
키는 string 이외에 number가 추가되었습니다.
23+
24+
[문서](http://kr.vuejs.org/v2/api/#Vue-delete)
25+
26+
### render 변경
27+
28+
render 함수의 타입이 함수에서 `(createElement: () => VNode) => VNode`로 변경되었습니다.
29+
30+
[문서](http://kr.vuejs.org/v2/api/#render)
31+
32+
### renderError 함수 추가
33+
34+
`render`함수 사용시 에러가 발생하면 `renderError` 함수를 사용해서 렌더링합니다. **개발 모드에서만** 사용할 수 있습니다
35+
36+
[문서](http://kr.vuejs.org/v2/api/#renderError)
37+
38+
### 옵션 / 컴포지션 항목 추가
39+
40+
[문서](http://kr.vuejs.org/v2/api/#옵션-컴포지션)
41+
42+
### `provide` / `inject` 추가
43+
44+
플러그인과 라이브러리에서 사용을 권장하는 의존성 주입 용 `provide` / `inject`가 추가되었습니다.
45+
46+
[문서](http://kr.vuejs.org/v2/api/#provide-inject)
47+
48+
### `vm.$props` 추가
49+
50+
컴포넌트가 전달받은 속성에 접근할 수 있는 프록시가 추가 되었습니다
51+
52+
[문서](http://kr.vuejs.org/v2/api/#vm-props)
53+
54+
### `vm.$on` 변경
55+
56+
문자열 외에 배열을 사용할 수 있습니다.
57+
[문서](http://kr.vuejs.org/v2/api/#vm-on)
58+
59+
### `v-on` 마우스 관련 수식어 추가
60+
61+
마우스 버튼 이벤트 핸들러가 추가되었습니다.
62+
63+
[문서](http://kr.vuejs.org/v2/api/#v-on)
64+
65+
### `keep-alive` 변경
66+
67+
`<keep-alive>` 트리 안의 모든 중첩 컴포넌트에서 `activated`, `deactivated`가 실행됩니다.
68+
69+
[문서](http://kr.vuejs.org/v2/api/#keep-alive)
70+
71+
72+
## 가이드
73+
74+
### 컴포넌트 `v-model` 사용자 정의 추가
75+
76+
[문서](http://kr.vuejs.org/v2/guide/components.html#컴포넌트의-v-model-사용자-정의)
77+
78+
### 마우스 버튼 수식어 추가
79+
80+
[문서](http://kr.vuejs.org/v2/guide/events.html#마우스-버튼-수식어)
81+
82+
### 명시적 전환 지속 시간 설정 추가
83+
84+
[문서](http://kr.vuejs.org/v2/guide/transitions.html#명시적-전환-지속-시간)
85+

‎snippets.md

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

0 commit comments

Comments
 (0)