+
+
+ 위 링크를 통해 후원을 받고 있습니다. 모든 후원금은 글을 올려주신 분께 돌아갑니다.
+
{% if site.show_sharing_icons %}
diff --git a/_posts/2017-01-03-about-vuejs-korea.markdown b/_posts/2017-01-03-about-vuejs-korea.markdown
index 33bd044..f9d373b 100644
--- a/_posts/2017-01-03-about-vuejs-korea.markdown
+++ b/_posts/2017-01-03-about-vuejs-korea.markdown
@@ -37,7 +37,7 @@ Vue.js 를 익히면서, 항상 공식 [gitter](https://gitter.im/vuejs/vue?utm_
-번역 이후 많은 변화가 있었습니다 [한국어 사용자 채팅방](https://gitter.im/vuejs-kr/vuejs-kr?utm_source=share-link&utm_medium=link&utm_campaign=share-link)에도 30여분이 넘게 들어오셨습니다. 처음 혼자 아둥바둥할 때의 30배가 넘는 발전입니다.
+번역 이후 많은 변화가 있었습니다 [한국어 사용자 채팅방](https://vuejs-korea.slack.com/shared_invite/MTI2MzI1ODQ4NTYwLTE0ODQyNzI4MDQtMjQ5ZTE2NDVmMw)에도 30여분이 넘게 들어오셨습니다. 처음 혼자 아둥바둥할 때의 30배가 넘는 발전입니다.
diff --git a/_posts/2017-01-17-vuejs-external-css-library.markdown b/_posts/2017-01-17-vuejs-external-css-library.markdown
new file mode 100644
index 0000000..5ba406e
--- /dev/null
+++ b/_posts/2017-01-17-vuejs-external-css-library.markdown
@@ -0,0 +1,129 @@
+---
+layout: post
+title: "Vue.js 외부 CSS 라이브러리 추가하기"
+date: 2017-01-17 15:35:31 +0900
+categories: jekyll update
+author: "Lee Sun-Hyoup"
+excerpt: "Vue.js에서 SCSS, LESS, PostCSS와 같은 외부 라이브러리를 추가하는 방법에 대해서 알아봅시다."
+---
+
+Vue.js는 `vue-loader`를 통해서 다른 Webpack 로더를 불러와서 Vue 컴포넌트를 처리 할 수 있습니다. 그 방법을 통해서 유용하게 쓰이는 것 중 하나가 CSS를 처리하는 방법인데요, 이번 포스팅에서는 **SCSS, LESS, Stylus**와 같은 전처리기와 **PostCSS**와 같은 후처리기를 Vue.js에서 불러오는 방법에 대해서 알아보겠습니다.
+
+## 전처리기(Pre-Processer)
+CSS에서 **전처리기**란 이름 그대로 CSS를 **먼저 처리하는** 도구입니다. CSS보다 더 간단하고 구조적으로 작성할 수 있는 문법을 제공하고 그 문법에 맞춰서 스타일을 작성하면 자동으로 CSS 파일을 만들어줍니다. 이러한 전처리기에는 **SCSS, LESS, Stylus** 등이 있습니다. 간단한 예제 코드를 통해 차이점을 알아봅시다. 이 예제는 SCSS를 통해 작성되었습니다.
+
+### CSS
+```css
+body {
+ font-size: 12pt;
+ color: #012345;
+}
+
+body a {
+ color: #555555;
+}
+```
+
+### LESS
+```scss
+$body-color: #012345;
+$anchor-color: #555555;
+body {
+ font-size: 12pt;
+ color: $body-color;
+
+ a {
+ color: $anchor-color;
+ }
+}
+```
+
+보시다시피 전처리기는 **변수**와 **중첩** 문법을 사용할 수 있습니다.
+
+## 후처리기(Post-Processor)
+**후처리기**는 마찬가지로 이름 처럼 CSS를 작성한 **후에 처리하는** 도구입니다. 주로 후처리기는 `PostCSS`라는 것을 사용합니다. `PostCSS`의 주요한 플러그인 중 하나인 Autoprefixer에 대해서 소개해드리겠습니다. 흔히 CSS를 작성할 때에는 크로스 브라우징을 염두해두고 작성합니다.
+
+```css
+.flexbox {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+}
+```
+
+이러한 작업은 SASS, LESS와 같은 전처리기가 등장하면서 조금 더 편해졌습니다.
+
+```scss
+@mixin flexbox() {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.flexbox {
+ @include flexbox;
+}
+```
+
+위 처럼 미리 Mixin을 만들어 둔 후 include하는 방식을 통해 중복된 작업을 줄일 수 있었습니다. 이렇게 작성하면 기존 CSS를 작성하는 것보다 간단하지만 두 가지 신경써야할 점이 있습니다. 첫 번째는 브라우저의 지원 상황을 개발자가 알고 있어야합나다. 두 번째는 개발자의 실수로 빼먹을 수 있다는 점입니다. 만약 후처리기를 사용한다면 이런 문제를 쉽게 해결 할 수 있습니다.
+
+```css
+/* input.css */
+.flexbox {
+ display: flex;
+}
+
+/* output.css */
+.flexbox {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+}
+```
+
+보시다시피 후처리기를 사용하면 별다른 작업없이 알아서 vender prefix를 더해줍니다.
+
+## `vue-loader`를 통해 가져오기
+만약 CSS 전처리기와 후처리기를 사용한다면 개발자의 생산성을 대폭 증가시킬 수 있을겁니다. 이제 우리는 Vue 컴포넌트에도 이 도구들을 적용시키고 싶습니다. 어떻게 해야할까요? 생각보다 매우 간단합니다. 여기서는 `vue-cli`를 통해 시작하겠습니다.
+
+### 전처리기 추가하기
+먼저 전처리기를 추가해봅시다. Vue에서 전처리기를 사용하는 방법은 매우 간단합니다. `*.vue` 파일의 스타일 블럭에 `lang='scss'` 속성을 추가헤주세요. 그 후에 노드 서버를 실행시켜봅시다.
+
+```
+ERROR in ./src/App.vue
+Module not found: Error: Cannot resolve module 'sass-loader' in /path/src
+ @ ./src/App.vue 5:0-170
+```
+
+그렇다면 위와 같은 에러를 볼 수 있습니다. 전처리기를 사용하기 위해서는 적절한 Webpack 로더를 설치해야합니다. 여기서는 SCSS를 사용하기 위해 `sass-loader`와 `node-sass`를 설치하겠습니다.
+
+```bash
+$ npm install sass-loader node-sass --save-dev
+```
+
+설치가 완료된 후 새로고침을 통해 확인해보면 (혹은 핫 리로딩에 의해) 적용이 완료된 화면을 볼 수 있습니다!
+
+### 후처리기 추가하기
+후처리기를 추가하는 방법은 전처리기를 추가하는 방법보다 아주 조금 더 복잡합니다. 왜냐하면 Webpack 설정을 수정해야하기 때문입니다. 먼저 Webpack 설정을 확인해봅시다. 만약 `vue-cli`로 `webpack` 템플릿을 불러왔을 경우 build 디렉토리에 `webpack.base.conf.js` 파일을 확인해봅시다.
+
+```js
+vue: {
+ loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
+ postcss: [ // 이 리스트에 추가하면 됩니다.
+ require('autoprefixer')({
+ browsers: ['last 2 versions']
+ })
+ ]
+}
+```
+
+사실 `vue-cli`를 이용해서 `webpack` 템플릿을 불러오면 이미 `autoprefixer` 플러그인이 붙어있습니다. 다음 [링크](https://vue-loader.vuejs.org/kr/features/postcss.html)를 확인하시면 PostCSS 플러그인을 불러오는 방법에 대해서 더 자세히 알 수 있습니다.
+
+## 마지막으로...
+`vue-loader`를 이용하면 Vue를 위한 모듈 중 CSS 뿐만 아닌 더 다양한 모듈을 불러올 수 있습니다! 예를 들어 `CoffeeScript`나 `TypeScript`를 사용한다던가 `Linting` 등을 할 수도 있습니다. 혹은 `e2e Test`, `Unit Test`도 가능합니다. 더 좋은 개발 환경을 위하여 `vue-loader`에 대해서 알고 싶다면 Reference 항목의 링크를 참고해주세요!
+
+## Reference
+* [vue-loader 문서](https://vue-loader.vuejs.org)
diff --git a/snippets.md b/snippets.md
index 6b61f31..5d88ff2 100644
--- a/snippets.md
+++ b/snippets.md
@@ -4,14 +4,24 @@ title: 코드조각
permalink: /snippets/
tags: about
---
-## 이 곳은..
+### 이 곳은..
코드 조각을 모으는 곳 입니다. 보통 반복적으로 같은 질문을 하게 됩니다. 이를 해결하는 시간과 노력을 줄이기 위해 만들었습니다.
실제 동작하는 최소 단위의 코드 조각을 보관하고 있습니다.
-## 목록
+### 참여 방법
+Vue가 포함된 [JsFiddle](https://jsfiddle.net/changjoo_park/bs3Lx0Lq/)에서 작은 예제를 만들면 됩니다. 그리고 [Github 이슈](https://github.com/vuejs-kr/vuejs-kr.github.io/issues/14)에 남겨주시거나 풀리퀘스트를 남겨주시면 추가하겠습니다.
+
+
+### 목록
- [vuex mutations 변수 대입 문제](https://jsfiddle.net/gongzza/hhb248bx/) - [@gongzza](https://github.com/gongzza/)
- [v-model의 한글 사용 문제을 v-on을 사용한 해결법](https://jsfiddle.net/kciter/tLz9gt4o/) - [@kciter](https://github.com/kciter/)
- [v-model 사용시 한글 사용 문제](https://jsfiddle.net/kciter/b5qhxbfh/) - [@kciter](https://github.com/kciter/)
- [vue-router 중첩 라우팅 예제](https://jsfiddle.net/changjoo_park/z4ja4wtx/) - [@changjoo-park](https://github.com/ChangJoo-Park/)
+- [vuejs에서 이미지적용시 비동기로 inline style 적용 예제](https://jsfiddle.net/devjin0617/fxyyr1fx/) - [@devjin0617](https://github.com/devjin0617)
+- [조건에 따라 다르게 출력되는 레이아웃](https://jsfiddle.net/changjoo_park/L9L0ogpt/) - [@changjoo-park](https://github.com/ChangJoo-Park/)
+- [빈 Vue 인스턴스를 이벤트버스로 사용하기](https://jsfiddle.net/changjoo_park/d8qdz3za/) - [@changjoo-park](https://github.com/ChangJoo-Park/)
+- [Vue.set과 this.$set 사용 예제](https://jsfiddle.net/changjoo_park/9r01601h/) - [@changjoo-park](https://github.com/ChangJoo-Park/)
+- [Vue.$nextTick을 이용한 UI갱신 예제](https://jsfiddle.net/devjin0617/pgscu4q3/) - [@devjin0617](https://github.com/devjin0617)
+- [글로벌 / 로컬 컴포넌트 사용 방법](https://jsfiddle.net/changjoo_park/dh2u3bye/) - [@changjoo-park](https://github.com/ChangJoo-Park/)