Skip to content

Commit 456d973

Browse files
devjin0617devjin0617
authored
Merge pull request #2 from vuejs-kr/master
get origin branch
2 parents dcd9c39 + c6a7e64 commit 456d973

13 files changed

+566
-53
lines changed

‎_config.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ text:
8686
hackernews: 'Share on Hacker News'
8787
post:
8888
updated: '업데이트 됨'
89-
minute_read: '분 정도의 길이'
89+
minute_read: ''
9090
related_posts: '연관 포스트'
9191
index:
9292
coming_soon: 'Coming soon...'

‎_layouts/post.html

+49-51
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,16 @@
22
layout: default
33
---
44

5-
{% assign minutes = content | strip_html | number_of_words | divided_by: 180 %}
6-
{% if minutes == 0 %}
7-
{% assign minutes = 1 %}
8-
{% endif %}
9-
105
<div class="post-header mb2">
116
<h1>{{ page.title }}</h1>
127
<span class="post-meta">{{ page.date | date: site.date_format }}</span> <br>
138
<span class="post-meta">
149
{% if page.author %}
1510
작성자 : {{page.author}} <br>
1611
{% endif %}
17-
</span>
18-
19-
{% if page.update_date %}
20-
<span class="post-meta">{{ site.text.post.updated }}: {{ page.update_date | date: site.date_format }}</span><br>
21-
{% endif %}
12+
</span> {% if page.update_date %}
13+
<span class="post-meta">{{ site.text.post.updated }}: {{ page.update_date | date: site.date_format }}</span><br> {% endif
14+
%}
2215
<span class="post-meta small">
2316
{% if page.minutes %}
2417
{{ page.minutes }} {{ site.text.post.minute_read }}
@@ -32,48 +25,53 @@ <h1>{{ page.title }}</h1>
3225
{{ content }}
3326
<br>
3427
<div class="">
35-
<script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script><script type ='text/javascript'>kofiwidget2.init('Buy Me a Coffee', '#46b798', 'A316F4N');kofiwidget2.draw();</script>
36-
<br>
37-
위 링크를 통해 후원을 받고 있습니다. 모든 후원금은 글을 올려주신 분께 돌아갑니다.
38-
</div>
28+
<script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script>
29+
<script type='text/javascript'>kofiwidget2.init('Buy Me a Coffee', '#46b798', 'A316F4N'); kofiwidget2.draw();</script>
30+
<br> 위 링크를 통해 후원을 받고 있습니다. 모든 후원금은 Vue.js 한국 커뮤니티 운영에 사용됩니다.
31+
</div>
3932
</article>
4033

41-
{% if site.show_sharing_icons %}
42-
{% include share_buttons.html %}
43-
{% endif %}
34+
{% if site.show_sharing_icons %} {% include share_buttons.html %} {% endif %} {% if site.show_post_footers %} {% include
35+
post_footer.html %} {% endif %} {% if site.disqus_shortname %}
36+
<div id="disqus_thread"></div>
37+
<script type="text/javascript">
38+
var disqus_shortname = '{{ site.disqus_shortname }}';
39+
var disqus_identifier = '{{ page.id }}';
40+
var disqus_title = {{ page.title | jsonify }};
4441

45-
{% if site.show_post_footers %}
46-
{% include post_footer.html %}
47-
{% endif %}
48-
49-
{% if site.disqus_shortname %}
50-
<div id="disqus_thread"></div>
51-
<script type="text/javascript">
52-
var disqus_shortname = '{{ site.disqus_shortname }}';
53-
var disqus_identifier = '{{ page.id }}';
54-
var disqus_title = {{ page.title | jsonify }};
55-
56-
(function() {
57-
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
58-
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
59-
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
60-
})();
61-
</script>
62-
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
63-
{% endif %}
64-
65-
{% if site.facebook_comments %}
66-
<div class="fb-comments" data-href="{{ site.url }}{{ page.url }}" data-width="100%" data-numposts="{{ site.facebook_comments_number }}"></div>
67-
{% endif %}
42+
(function () {
43+
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
44+
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
45+
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
46+
})();
47+
</script>
48+
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
49+
{% endif %} {% if site.facebook_comments %}
50+
<div class="fb-comments" data-href="{{ site.url }}{{ page.url }}" data-width="100%" data-numposts="{{ site.facebook_comments_number }}"></div>
51+
{% endif %} {% if site.show_related_posts %}
52+
<h3 class="related-post-title">{{ site.text.post.related_posts }}</h3>
53+
{% for post in site.related_posts %}
54+
<div class="post ml2">
55+
<a href="{{ post.url | prepend: site.baseurl }}" class="post-link">
56+
<h4 class="post-title">{{ post.title }}</h4>
57+
<p class="post-summary">{{ post.summary }}</p>
58+
</a>
59+
</div>
60+
{% endfor %} {% endif %}
61+
<div id="overlay"></div>
62+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
63+
<script type="text/javascript">
64+
$overlay = $('#overlay');
6865

69-
{% if site.show_related_posts %}
70-
<h3 class="related-post-title">{{ site.text.post.related_posts }}</h3>
71-
{% for post in site.related_posts %}
72-
<div class="post ml2">
73-
<a href="{{ post.url | prepend: site.baseurl }}" class="post-link">
74-
<h4 class="post-title">{{ post.title }}</h4>
75-
<p class="post-summary">{{ post.summary }}</p>
76-
</a>
77-
</div>
78-
{% endfor %}
79-
{% endif %}
66+
$('img').click(function(){
67+
$overlay.fadeTo(200, 1).css({
68+
backgroundImage: 'url('+this.src+')',
69+
backgroundSize: 'contain'
70+
});
71+
});
72+
$overlay.click(function(){
73+
$(this).stop().fadeTo(200,0,function(){
74+
$(this).hide();
75+
});
76+
});
77+
</script>

‎_layouts/search.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
layout: default
3+
---
4+
5+
<div class="search">
6+
{{ content }}
7+
</div>
8+
9+
<script src="../js/vendors/lunr.js"></script>
10+
<script src="../js/search.js"></script>

‎_posts/2016-12-20-starting-vue.markdown

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ JSFiddle을 사용하다 `vue-cli`를 사용하기 시작하면 많은 디렉터
6767
- [vue.js 공식 홈페이지](https://vuejs.org/)
6868
- [vue.js 한국어 홈페이지](https://kr.vuejs.org/)
6969
- [vue.js 공식 채팅](https://gitter.im/vuejs/vue?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
70-
- [vue.js 한국어 사용자 채팅](https://gitter.im/vuejs-kr/vuejs-kr?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
70+
- [vue.js 한국어 사용자 채팅](https://vuejs-korea.signup.team/)
7171
- [vue.js 공식 조직](https://github.com/vuejs)
7272
- [vue.js 한국어 조직](https://github.com/vuejs-kr)
7373
- [awesome vue](https://github.com/vuejs/awesome-vue)

‎_posts/2017-01-19-vuejs-nexttick-example.markdown

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
layout: post
3+
title: "Vue.js에서 nextTick 사용하기"
4+
date: 2017-01-19 21:36:00 +0900
5+
categories: jekyll update
6+
author: "developerjin"
7+
excerpt: "Vue.js에서 데이터 갱신 후 UI조작시 생기는 문제와 해결방법을 알아봅시다."
8+
---
9+
10+
### Vue.$nextTick
11+
12+
`Vue.js`를 어느정도 사용하고 있다가 데이터와 UI를 건드리는 상황에서 간헐적으로 DOM을 못찾는 상황을 겪어보셨을지 모르겠습니다. 겪지 않으셨더라도 언제가는 겪게 될 일이죠. (저는 이미 이 일을 겪게 되었습니다.)
13+
14+
네트워크 요청을 하던가, 어떤 데이터를 `vue._data`에 삽입하자마자 삽입 후에 갱신될 UI의 대해서 DOM을 탐색하여 처리할려고 하면 해당 DOM을 못찾아서 콘솔화면에 빨간색의 글자로 오류들을 내뿜게 됩니다.
15+
이는 `vue._data`에 값들을 대입하게 되면 `Vue.js`에서 데이터갱신을 감지하고 UI를 갱신하게 되는데, 모든 데이터처리가 비동기로 처리되는 JavaScript의 특성때문에 UI가 갱신도 되기전에 DOM들을 탐색하는 상황이 나오게 됩니다.
16+
17+
18+
```html
19+
<!-- 오류 예제 -->
20+
<div id="app">
21+
<div v-for="item in list">
22+
<div v-bind:id="bindId(item)">{{item}}</div> <!-- 2 -->
23+
</div>
24+
</div>
25+
26+
<script>
27+
new Vue({
28+
el: '#app',
29+
data: function() {
30+
return {
31+
list: []
32+
};
33+
},
34+
created: function() {
35+
var self = this;
36+
37+
for(var i=0; i<100; i++) {
38+
this._data.list.push(i); // 1
39+
}
40+
41+
var dom = document.getElementById('item-0'); // 4
42+
dom.style.backgroundColor = 'red'; // 5
43+
},
44+
methods: {
45+
bindId: function(item) {
46+
return 'item-' + item; // 3
47+
}
48+
}
49+
})
50+
</script>
51+
```
52+
위와 같은 상황으로 작성하게 되면 오류가 나게 됩니다.
53+
간단하게 설명을 드리면 `1`에서 list에 데이터들을 넣게 됩니다. Vue.js는 이를 감지하여 `2`, `3`을 통해 UI들을 갱신하게 되는데, UI를 갱신하기전에 `1`의 다음 라인인 `4`,`5`를 수행하게 됩니다. 아직 그리지도 않은 UI를 호출하려하니 당연히 오류가 나겠죠? Vue.js에서는 이런 일이 일어날 것을 예측하고, callback함수를 제공하고 있습니다.
54+
55+
```js
56+
created: function() {
57+
58+
// ...
59+
60+
this.$nextTick(function() {
61+
var dom = document.getElementById('item-0');
62+
dom.style.backgroundColor = 'red';
63+
});
64+
}
65+
```
66+
67+
`nextTick`으로 감싼뒤 callback을 통해 DOM을 조작하게 되면 `Vue.js`에서 데이터갱신 후 UI까지 완료한 뒤에 `nextTick`에 있는 함수를 최종적으로 수행하게 됩니다.
68+
69+
`nextTick`이 자주사용되기는 하는데 예제를 만들기가 애매한 부분이 있는 것 같습니다. 최대한 간단하게 설명하려다보니 위 코드대로 알려드리게 되었습니다. 더 좋은 의견이 있거나 좋은 예제가 있으면 언제든지 말씀해주시면 감사하겠습니다.
70+
71+
### 관련자료
72+
- [Vue.nextTick 공식API문서](https://kr.vuejs.org/v2/api/#Vue-nextTick)
73+
- [Vue.js 한국어 사용자 모임](https://vuejs-kr.github.io/)
74+
- [jsfiddle 예제](https://jsfiddle.net/devjin0617/pgscu4q3/)

0 commit comments

Comments
 (0)