├── Assets ├── survey.png ├── why-vue.png ├── beginner.jpg ├── cover-vue.jpg ├── yarn-build.png ├── monthly-wiki.jpg ├── jquery-calendar.jpg ├── src-sass-mixins.jpg ├── dist-static-fonts.jpg ├── src-assets-spoqa.jpg ├── table-of-contents.png └── webpack-base-conf.jpg ├── README.md ├── Document ├── vuex-promise-polyfill.md ├── setting-vue-full-external-resources.md ├── vuex.md ├── vue-jsx.md └── vue-jquery.md └── .gitignore /Assets/survey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yamoo9/Vue-CAMP/HEAD/Assets/survey.png -------------------------------------------------------------------------------- /Assets/why-vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yamoo9/Vue-CAMP/HEAD/Assets/why-vue.png -------------------------------------------------------------------------------- /Assets/beginner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yamoo9/Vue-CAMP/HEAD/Assets/beginner.jpg -------------------------------------------------------------------------------- /Assets/cover-vue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yamoo9/Vue-CAMP/HEAD/Assets/cover-vue.jpg -------------------------------------------------------------------------------- /Assets/yarn-build.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yamoo9/Vue-CAMP/HEAD/Assets/yarn-build.png -------------------------------------------------------------------------------- /Assets/monthly-wiki.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yamoo9/Vue-CAMP/HEAD/Assets/monthly-wiki.jpg -------------------------------------------------------------------------------- /Assets/jquery-calendar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yamoo9/Vue-CAMP/HEAD/Assets/jquery-calendar.jpg -------------------------------------------------------------------------------- /Assets/src-sass-mixins.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yamoo9/Vue-CAMP/HEAD/Assets/src-sass-mixins.jpg -------------------------------------------------------------------------------- /Assets/dist-static-fonts.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yamoo9/Vue-CAMP/HEAD/Assets/dist-static-fonts.jpg -------------------------------------------------------------------------------- /Assets/src-assets-spoqa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yamoo9/Vue-CAMP/HEAD/Assets/src-assets-spoqa.jpg -------------------------------------------------------------------------------- /Assets/table-of-contents.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yamoo9/Vue-CAMP/HEAD/Assets/table-of-contents.png -------------------------------------------------------------------------------- /Assets/webpack-base-conf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yamoo9/Vue-CAMP/HEAD/Assets/webpack-base-conf.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ###### VueJS 2 | 3 | Vue.js 의 모든걸 가져갈 강의 — 탄탄한 기본기를 갖춘 프론트엔드 개발자로 거듭납시다. 4 | 5 | Vue.js의 장점을 제대로 활용하기 위해서는 ES6 나 Babel, Webpack, SPA 등의 개념을 체득하고 있어야 합니다. 6 | 하지만 이 개념들을 익히다보면 정작 Vue 를 본격적으로 시작해보지도 못하고 금세 지쳐버리고 말죠. 7 | 또한 웹 프론트엔드 기술일지라도 백엔드에 대한 이해가 없다면 웹 환경에 대한 확장된 지식을 쌓기가 어렵습니다. 8 | 9 | 우리는 약 60시간 동안 Vue.js로 SPA를 개발하는 기술은 물론 아키텍쳐, 객체지향 프로그래밍, 모던 웹 개발 패러다임 등 백엔드에 대한 이해까지 체득해봅니다. 10 | 단순 프론트엔드 지식만 갖고 있는 것이 아닌, 백엔드 까지 고려한 탄탄한 기본기를 가진 프론트엔드 개발자로 거듭나세요! 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Document/vuex-promise-polyfill.md: -------------------------------------------------------------------------------- 1 | # Vuex Promise 폴리필(Polyfill) 2 | 3 | [es6-promise 모듈](https://github.com/stefanpenner/es6-promise)을 설치합니다. 4 | 5 | ```sh 6 | npm install es6-promise 7 | ``` 8 | 9 | 자동으로 폴리필을 적용하려면 다음과 같이 사용합니다. 10 | 11 | ```js 12 | import Primise from 'es6-promise'; 13 | Primise.polyfill(); 14 | ``` 15 | 16 | 또는 아래와 같이 단축 사용도 가능합니다. 17 | 18 | ```js 19 | import 'es6-promise/auto'; 20 | ``` 21 | 22 | 설정 방법은 다음을 참고하세요. 23 | 24 | ```js 25 | // src/main.js 26 | import 'es6-promise/auto'; 27 | 28 | import Vue from 'vue'; 29 | import App from './App'; 30 | import router from './router'; 31 | import store from './store'; 32 | import { sync } from 'vuex-router-sync'; 33 | import VueHead from 'vue-head'; 34 | 35 | sync(store, router); 36 | Vue.use(VueHead); 37 | 38 | /* eslint-disable no-new */ 39 | new Vue({ 40 | el: '#app', 41 | router, 42 | store, 43 | render: h => h(App) 44 | }) 45 | ``` 46 | 47 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | __ 2 | 3 | ###OSX### 4 | 5 | .DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | 9 | # Icon must end with two \r 10 | Icon 11 | 12 | # Thumbnails 13 | ._* 14 | 15 | # Files that might appear on external disk 16 | .Spotlight-V100 17 | .Trashes 18 | 19 | # Directories potentially created on remote AFP share 20 | .AppleDB 21 | .AppleDesktop 22 | Network Trash Folder 23 | Temporary Items 24 | .apdisk 25 | 26 | 27 | ###SublimeText### 28 | 29 | # cache files for sublime text 30 | *.tmlanguage.cache 31 | *.tmPreferences.cache 32 | *.stTheme.cache 33 | 34 | # workspace files are user-specific 35 | *.sublime-workspace 36 | 37 | # project files should be checked into the repository, unless a significant 38 | # proportion of contributors will probably not be using SublimeText 39 | # *.sublime-project 40 | 41 | # sftp configuration file 42 | sftp-config.json 43 | 44 | 45 | ###Node### 46 | 47 | # Logs 48 | logs 49 | *.log 50 | 51 | # Runtime data 52 | pids 53 | *.pid 54 | *.seed 55 | 56 | # Directory for instrumented libs generated by jscoverage/JSCover 57 | lib-cov 58 | 59 | # Coverage directory used by tools like istanbul 60 | coverage 61 | 62 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 63 | .grunt 64 | 65 | # Compiled binary addons (http://nodejs.org/api/addons.html) 66 | build/Release 67 | 68 | # Dependency directory 69 | # Commenting this out is preferred by some people, see 70 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- 71 | node_modules 72 | 73 | # Users Environment Variables 74 | .lock-wscript 75 | 76 | 77 | ###SASS### 78 | 79 | .sass-cache 80 | *.css.map -------------------------------------------------------------------------------- /Document/setting-vue-full-external-resources.md: -------------------------------------------------------------------------------- 1 | # Vue CLI 템플릿 `yamoo9/vue-full` 외부 리소스 설정 2 | 3 | ## 1. 별칭(Alias) 등록 4 | 5 | 외부 Sass 라이브러리 및 직접 작성한 리소스를 제공할 디렉토리를 생성한 후, 별칭 `sass`로 등록합니다. 6 | 7 | ```js 8 | // build/webpack.base.conf.js 9 | module.exports = { 10 | ... 11 | resolve: { 12 | alias: { 13 | 'vue$' : 'vue/dist/vue.esm.js', 14 | '@' : resolve('src'), 15 | // src 디렉토리 내부에 sass 디렉토리를 생성한 후, 별칭(alias)을 등록합니다. 16 | 'sass' : path.resolve(__dirname, './src/sass'), 17 | } 18 | } 19 | } 20 | ``` 21 | 22 | ![](../Assets/webpack-base-conf.jpg) 23 | 24 | 25 | 26 | ## 2. Sass 라이브러리(설정,믹스인 등) 추가 27 | 28 | `sass` 디렉토리를 별칭으로 등록했기 때문에 내부에 라이브러리를 추가하고 사용할 수 있습니다. 29 | 확실한 사용 방법을 익히기 위해 웹폰트 **Spoqa Han Sans**를 사용하는 예제를 다뤄보겠습니다. 30 | 31 | 먼저 `src/assets` 디렉토리 내부에 Spoqa 폰트를 담은 디렉토리를 추가합니다. 32 | 33 | ![](../Assets/src-assets-spoqa.jpg) 34 | 35 | 이어서 등록된 `sass` 별칭 디렉토리 내부에 `mixins.sass` 파일을 생성합니다. 36 | 37 | ![](../Assets/src-sass-mixins.jpg) 38 | 39 | 생성된 `mixins.sass` 파일 내부에 **Spoqa Han Sans** 웹폰트를 설정하는 믹스인을 작성합니다. 40 | 41 | ```sass 42 | // src/sass/mixins.sass 43 | @mixin spoqa( $path ) 44 | @font-face 45 | font-family: 'Spoqa Han Sans' 46 | font-weight: 700 47 | src: local("Spoqa Han Sans Bold"), url("#{$path}/SpoqaHanSansBold.woff2") format("woff2"), url("#{$path}/SpoqaHanSansBold.woff") format("woff"), url("#{$path}/SpoqaHanSansBold.ttf") format("truetype") 48 | 49 | @font-face 50 | font-family: 'Spoqa Han Sans' 51 | font-weight: 400 52 | src: local("Spoqa Han Sans Regular"), url("#{$path}/SpoqaHanSansRegular.woff2") format("woff2"), url("#{$path}/SpoqaHanSansRegular.woff") format("woff"), url("#{$path}/SpoqaHanSansRegular.ttf") format("truetype") 53 | 54 | @font-face 55 | font-family: 'Spoqa Han Sans' 56 | font-weight: 300 57 | src: local("Spoqa Han Sans Light"), url("#{$path}/SpoqaHanSansLight.woff2") format("woff2"), url("#{$path}/SpoqaHanSansLight.woff") format("woff"), url("#{$path}/SpoqaHanSansLight.ttf") format("truetype") 58 | 59 | @font-face 60 | font-family: 'Spoqa Han Sans' 61 | font-weight: 100 62 | src: local("Spoqa Han Sans Thin"), url("#{$path}/SpoqaHanSansThin.woff2") format("woff2"), url("#{$path}/SpoqaHanSansThin.woff") format("woff"), url("#{$path}/SpoqaHanSansThin.ttf") format("truetype") 63 | ``` 64 | 65 | ## 3. `App.vue` 파일 내부에서 웹폰트 사용 설정 66 | 67 | `src/App.vue` 파일을 연 후, 스타일 코드 작성 영역 상단에 `@import 'sass/mixins'` 코드를 추가한 후, `+spoqa('./assets/SpoqaHanSans')` 믹스인 호출 코드를 추가합니다. 68 | 69 | 마무리로 body 영역에서 `font-family: 'Spoqa Han Sans'` 웹폰트를 사용하는 코드를 작성합니다. 70 | 71 | ```sass 72 | // src/App.vue 73 |