├── 4_component-design ├── 2_slots │ ├── vue.config.js │ ├── babel.config.js │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── AppHeader.vue │ │ │ └── LoginForm.vue │ │ ├── main.js │ │ └── App.vue │ ├── README.md │ └── package.json ├── 3_controlled │ ├── vue.config.js │ ├── babel.config.js │ ├── src │ │ ├── components │ │ │ ├── AppHeader.vue │ │ │ ├── LoginForm.vue │ │ │ └── RememberMe.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── main.js │ │ └── App.vue │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── .gitignore │ ├── README.md │ └── package.json ├── 1_common │ ├── vue.config.js │ ├── babel.config.js │ ├── src │ │ ├── components │ │ │ ├── AppFooter.vue │ │ │ ├── AppHeader.vue │ │ │ └── LoginForm.vue │ │ ├── main.js │ │ └── App.vue │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── README.md │ └── package.json ├── 5_mixins │ ├── vue.config.js │ ├── babel.config.js │ ├── src │ │ ├── mixins │ │ │ ├── LoggingMixin.js │ │ │ └── FetchListMixin.js │ │ ├── assets │ │ │ └── logo.png │ │ ├── main.js │ │ ├── App.vue │ │ ├── components │ │ │ ├── UserList.vue │ │ │ └── TodoList.vue │ │ └── routes │ │ │ └── index.js │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── .gitignore │ ├── README.md │ └── package.json ├── 4_renderless │ ├── vue.config.js │ ├── babel.config.js │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── contacts.json │ ├── src │ │ ├── assets │ │ │ └── logo.png │ │ ├── main.js │ │ ├── components │ │ │ └── DataProvider.vue │ │ └── App.vue │ ├── .gitignore │ ├── README.md │ └── package.json └── 6_high-order │ ├── vue.config.js │ ├── babel.config.js │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── assets │ │ └── logo.png │ ├── main.js │ ├── App.vue │ ├── components │ │ ├── createHoc.js │ │ ├── UserList.vue │ │ └── TodoList.vue │ └── routes │ │ └── index.js │ ├── .gitignore │ ├── README.md │ └── package.json ├── 3_ajax-patterns ├── lifecycle │ ├── vue.config.js │ ├── babel.config.js │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── assets │ │ │ └── logo.png │ │ ├── main.js │ │ ├── App.vue │ │ ├── views │ │ │ ├── JobsView.vue │ │ │ └── NewsView.vue │ │ └── routes │ │ │ └── index.js │ ├── .gitignore │ ├── README.md │ └── package.json └── navigation-guard │ ├── vue.config.js │ ├── src │ ├── utils │ │ └── bus.js │ ├── assets │ │ ├── css │ │ │ └── reset.css │ │ └── logo.png │ ├── views │ │ ├── JobsView.vue │ │ └── NewsView.vue │ ├── main.js │ ├── api │ │ └── index.js │ ├── components │ │ └── LoadingBar.vue │ ├── store │ │ └── index.js │ ├── routes │ │ └── index.js │ └── App.vue │ ├── babel.config.js │ ├── public │ ├── favicon.ico │ └── index.html │ ├── .gitignore │ ├── README.md │ └── package.json ├── slides ├── 1_vue-introduction.pdf ├── 3_vue-ajax-patterns.pdf ├── 2_vue-practical-syntax.pdf └── 4_vue-component-design-patterns.pdf ├── 1_reactivity ├── reactivity.html ├── vanilla.html └── vue.html ├── 2_practical-syntax ├── render-function.html └── form.html ├── LICENSE ├── .gitignore └── README.md /4_component-design/2_slots/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false 3 | } -------------------------------------------------------------------------------- /4_component-design/3_controlled/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false 3 | } -------------------------------------------------------------------------------- /3_ajax-patterns/lifecycle/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false, 3 | }; 4 | -------------------------------------------------------------------------------- /4_component-design/1_common/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false, 3 | }; 4 | -------------------------------------------------------------------------------- /4_component-design/5_mixins/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false, 3 | }; 4 | -------------------------------------------------------------------------------- /3_ajax-patterns/navigation-guard/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false, 3 | }; 4 | -------------------------------------------------------------------------------- /4_component-design/4_renderless/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false, 3 | }; 4 | -------------------------------------------------------------------------------- /4_component-design/6_high-order/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false, 3 | }; 4 | -------------------------------------------------------------------------------- /3_ajax-patterns/navigation-guard/src/utils/bus.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | export default new Vue(); 4 | -------------------------------------------------------------------------------- /3_ajax-patterns/lifecycle/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /3_ajax-patterns/navigation-guard/src/assets/css/reset.css: -------------------------------------------------------------------------------- 1 | body, 2 | h1 { 3 | padding: 0; 4 | margin: 0; 5 | } 6 | -------------------------------------------------------------------------------- /4_component-design/1_common/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /4_component-design/2_slots/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /4_component-design/5_mixins/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /slides/1_vue-introduction.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/naver-vue/HEAD/slides/1_vue-introduction.pdf -------------------------------------------------------------------------------- /slides/3_vue-ajax-patterns.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/naver-vue/HEAD/slides/3_vue-ajax-patterns.pdf -------------------------------------------------------------------------------- /3_ajax-patterns/navigation-guard/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /4_component-design/3_controlled/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /4_component-design/4_renderless/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /4_component-design/5_mixins/src/mixins/LoggingMixin.js: -------------------------------------------------------------------------------- 1 | // TODO: 컴포넌트가 화면에 부착되자마자 'dom mounted' 라는 콘솔을 찍는 믹스인을 만들어보세요. 2 | -------------------------------------------------------------------------------- /4_component-design/6_high-order/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /slides/2_vue-practical-syntax.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/naver-vue/HEAD/slides/2_vue-practical-syntax.pdf -------------------------------------------------------------------------------- /4_component-design/1_common/src/components/AppFooter.vue: -------------------------------------------------------------------------------- 1 | TODO: ``를 표현하는 컴포넌트를 등록하고 화면에 표현해보세요. -------------------------------------------------------------------------------- /slides/4_vue-component-design-patterns.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/naver-vue/HEAD/slides/4_vue-component-design-patterns.pdf -------------------------------------------------------------------------------- /3_ajax-patterns/lifecycle/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/naver-vue/HEAD/3_ajax-patterns/lifecycle/public/favicon.ico -------------------------------------------------------------------------------- /3_ajax-patterns/lifecycle/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/naver-vue/HEAD/3_ajax-patterns/lifecycle/src/assets/logo.png -------------------------------------------------------------------------------- /4_component-design/1_common/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/naver-vue/HEAD/4_component-design/1_common/public/favicon.ico -------------------------------------------------------------------------------- /4_component-design/1_common/src/components/AppHeader.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /4_component-design/2_slots/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/naver-vue/HEAD/4_component-design/2_slots/public/favicon.ico -------------------------------------------------------------------------------- /4_component-design/2_slots/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/naver-vue/HEAD/4_component-design/2_slots/src/assets/logo.png -------------------------------------------------------------------------------- /4_component-design/2_slots/src/components/AppHeader.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /4_component-design/5_mixins/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/naver-vue/HEAD/4_component-design/5_mixins/public/favicon.ico -------------------------------------------------------------------------------- /4_component-design/3_controlled/src/components/AppHeader.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /4_component-design/5_mixins/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/naver-vue/HEAD/4_component-design/5_mixins/src/assets/logo.png -------------------------------------------------------------------------------- /3_ajax-patterns/navigation-guard/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/naver-vue/HEAD/3_ajax-patterns/navigation-guard/public/favicon.ico -------------------------------------------------------------------------------- /4_component-design/3_controlled/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/naver-vue/HEAD/4_component-design/3_controlled/public/favicon.ico -------------------------------------------------------------------------------- /4_component-design/3_controlled/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/naver-vue/HEAD/4_component-design/3_controlled/src/assets/logo.png -------------------------------------------------------------------------------- /4_component-design/4_renderless/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/naver-vue/HEAD/4_component-design/4_renderless/public/favicon.ico -------------------------------------------------------------------------------- /4_component-design/4_renderless/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/naver-vue/HEAD/4_component-design/4_renderless/src/assets/logo.png -------------------------------------------------------------------------------- /4_component-design/6_high-order/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/naver-vue/HEAD/4_component-design/6_high-order/public/favicon.ico -------------------------------------------------------------------------------- /4_component-design/6_high-order/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/naver-vue/HEAD/4_component-design/6_high-order/src/assets/logo.png -------------------------------------------------------------------------------- /3_ajax-patterns/navigation-guard/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/naver-vue/HEAD/3_ajax-patterns/navigation-guard/src/assets/logo.png -------------------------------------------------------------------------------- /4_component-design/1_common/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /4_component-design/2_slots/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /4_component-design/3_controlled/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /4_component-design/4_renderless/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App) 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /3_ajax-patterns/navigation-guard/src/views/JobsView.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /3_ajax-patterns/navigation-guard/src/views/NewsView.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /4_component-design/5_mixins/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import router from './routes'; 4 | 5 | Vue.config.productionTip = false; 6 | 7 | new Vue({ 8 | render: h => h(App), 9 | router, 10 | }).$mount('#app'); 11 | -------------------------------------------------------------------------------- /4_component-design/6_high-order/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './routes'; 4 | 5 | Vue.config.productionTip = false 6 | 7 | new Vue({ 8 | render: h => h(App), 9 | router, 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /3_ajax-patterns/lifecycle/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './routes/index.js'; 4 | 5 | Vue.config.productionTip = false 6 | 7 | new Vue({ 8 | router, 9 | render: h => h(App), 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /3_ajax-patterns/navigation-guard/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import router from './routes/index.js'; 4 | import store from './store'; 5 | 6 | Vue.config.productionTip = false; 7 | 8 | new Vue({ 9 | router, 10 | store, 11 | render: h => h(App), 12 | }).$mount('#app'); 13 | -------------------------------------------------------------------------------- /3_ajax-patterns/lifecycle/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /4_component-design/5_mixins/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /3_ajax-patterns/navigation-guard/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /4_component-design/3_controlled/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /4_component-design/4_renderless/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /4_component-design/5_mixins/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /4_component-design/6_high-order/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /4_component-design/6_high-order/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /4_component-design/4_renderless/README.md: -------------------------------------------------------------------------------- 1 | # data-provider 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | npm run lint 21 | ``` 22 | -------------------------------------------------------------------------------- /1_reactivity/reactivity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Reactivity 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /3_ajax-patterns/navigation-guard/src/api/index.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | var instance = axios.create({ 4 | baseURL: 'https://api.hnpwa.com/v0/', 5 | }); 6 | 7 | function fetchNews() { 8 | return instance.get('news/1.json'); 9 | } 10 | 11 | function fetchJobs() { 12 | return instance.get('jobs/1.json'); 13 | } 14 | 15 | export { fetchNews, fetchJobs }; 16 | -------------------------------------------------------------------------------- /4_component-design/5_mixins/src/components/UserList.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /4_component-design/5_mixins/src/components/TodoList.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /1_reactivity/vanilla.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Traditional DOM Manipulation 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /3_ajax-patterns/lifecycle/src/App.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /4_component-design/1_common/src/components/LoginForm.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /3_ajax-patterns/lifecycle/src/views/JobsView.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | 20 | 22 | -------------------------------------------------------------------------------- /4_component-design/2_slots/src/components/LoginForm.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /4_component-design/1_common/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 20 | -------------------------------------------------------------------------------- /4_component-design/3_controlled/src/components/LoginForm.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /3_ajax-patterns/lifecycle/README.md: -------------------------------------------------------------------------------- 1 | # lifecycle 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /4_component-design/2_slots/README.md: -------------------------------------------------------------------------------- 1 | # 2_slots 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /4_component-design/1_common/README.md: -------------------------------------------------------------------------------- 1 | # 1_common 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /4_component-design/5_mixins/README.md: -------------------------------------------------------------------------------- 1 | # 5_mixins 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /4_component-design/3_controlled/README.md: -------------------------------------------------------------------------------- 1 | # 3_controlled 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /4_component-design/6_high-order/README.md: -------------------------------------------------------------------------------- 1 | # 4_high-order 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /3_ajax-patterns/navigation-guard/README.md: -------------------------------------------------------------------------------- 1 | # navigation-guard 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /4_component-design/3_controlled/src/components/RememberMe.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | -------------------------------------------------------------------------------- /3_ajax-patterns/lifecycle/src/routes/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Router from 'vue-router'; 3 | import NewsView from '../views/NewsView.vue'; 4 | import JobsView from '../views/JobsView.vue'; 5 | 6 | Vue.use(Router); 7 | 8 | export default new Router({ 9 | mode: 'history', 10 | routes: [ 11 | { 12 | path: '/', 13 | redirect: '/news' 14 | }, 15 | { 16 | path: '/news', 17 | component: NewsView, 18 | }, 19 | { 20 | path: '/jobs', 21 | component: JobsView, 22 | }, 23 | ] 24 | }) -------------------------------------------------------------------------------- /4_component-design/6_high-order/src/components/createHoc.js: -------------------------------------------------------------------------------- 1 | export default function(component, url) { 2 | return { 3 | name: 'hoc', 4 | data() { 5 | return { 6 | items: [], 7 | }; 8 | }, 9 | created() { 10 | fetch(url) 11 | .then(res => res.json()) 12 | .then(data => (this.items = data)) 13 | .catch(error => console.log(error)); 14 | }, 15 | render(h) { 16 | return h(component, { 17 | props: { 18 | items: this.items, 19 | }, 20 | }); 21 | }, 22 | }; 23 | } 24 | -------------------------------------------------------------------------------- /1_reactivity/vue.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hello Vue.js 8 | 9 | 10 |
11 | {{ str }} 12 |
13 | 14 | 15 | 23 | 24 | -------------------------------------------------------------------------------- /4_component-design/2_slots/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /4_component-design/5_mixins/src/routes/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueRouter from 'vue-router'; 3 | // components 4 | import UserList from '../components/UserList.vue'; 5 | import TodoList from '../components/TodoList.vue'; 6 | 7 | Vue.use(VueRouter); 8 | 9 | export default new VueRouter({ 10 | mode: 'history', 11 | routes: [ 12 | { 13 | path: '/', 14 | redirect: '/users', 15 | }, 16 | { 17 | path: '/users', 18 | name: 'users', 19 | component: UserList, 20 | }, 21 | { 22 | path: '/todos', 23 | name: 'todos', 24 | component: TodoList, 25 | }, 26 | ], 27 | }); 28 | -------------------------------------------------------------------------------- /3_ajax-patterns/lifecycle/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | lifecycle 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /4_component-design/1_common/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 1_common 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /4_component-design/5_mixins/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 5_mixins 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /4_component-design/3_controlled/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 3_controlled 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /4_component-design/4_renderless/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | data-provider 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /4_component-design/5_mixins/src/mixins/FetchListMixin.js: -------------------------------------------------------------------------------- 1 | export default { 2 | data: function() { 3 | return { 4 | items: [], 5 | }; 6 | }, 7 | methods: { 8 | fetchData(url) { 9 | var vm = this; 10 | fetch(url) 11 | .then(function(res) { 12 | return res.json(); 13 | }) 14 | .then(function(data) { 15 | vm.items = data; 16 | }) 17 | .catch(function(error) { 18 | console.log(error); 19 | }); 20 | }, 21 | }, 22 | created: function() { 23 | var url = 'https://jsonplaceholder.typicode.com/' + this.$route.name; 24 | this.fetchData(url); 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /4_component-design/6_high-order/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 4_high-order 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /4_component-design/6_high-order/src/components/UserList.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 30 | 31 | 33 | -------------------------------------------------------------------------------- /3_ajax-patterns/navigation-guard/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | navigation-guard 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /4_component-design/2_slots/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 2_slots 9 | 10 | 11 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /4_component-design/6_high-order/src/components/TodoList.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 32 | 33 | 35 | -------------------------------------------------------------------------------- /2_practical-syntax/render-function.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Render Function 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /3_ajax-patterns/navigation-guard/src/components/LoadingBar.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 46 | -------------------------------------------------------------------------------- /3_ajax-patterns/navigation-guard/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | import { fetchNews } from '../api/index.js'; 4 | 5 | Vue.use(Vuex); 6 | 7 | export default new Vuex.Store({ 8 | state: { 9 | news: [], 10 | }, 11 | mutations: { 12 | setNews(state, news) { 13 | state.news = news; 14 | }, 15 | }, 16 | actions: { 17 | FETCH_NEWS(context) { 18 | return fetchNews() 19 | .then(function(response) { 20 | var data = response.data; 21 | context.commit('setNews', data); 22 | return response; 23 | }) 24 | .catch(function(error) { 25 | console.log(error); 26 | return error; 27 | }); 28 | }, 29 | // TODO: fetchJobs() API 함수로 구직 정보를 호출하는 액션 함수를 구현해보세요. 30 | FETCH_JOBS() {} 31 | }, 32 | }); 33 | -------------------------------------------------------------------------------- /4_component-design/3_controlled/src/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /4_component-design/4_renderless/src/components/DataProvider.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /4_component-design/6_high-order/src/routes/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueRouter from 'vue-router'; 3 | // components 4 | import UserList from '../components/UserList.vue'; 5 | import TodoList from '../components/TodoList.vue'; 6 | // high order component 7 | import createHoc from '../components/createHoc.js'; 8 | 9 | Vue.use(VueRouter); 10 | 11 | const userUrl = 'https://jsonplaceholder.typicode.com/users/'; 12 | const todoUrl = 'https://jsonplaceholder.typicode.com/todos/'; 13 | 14 | export default new VueRouter({ 15 | mode: 'history', 16 | routes: [ 17 | { 18 | path: '/', 19 | redirect: '/users', 20 | }, 21 | { 22 | path: '/users', 23 | component: UserList, 24 | // component: createHoc(UserList, userUrl), 25 | }, 26 | { 27 | path: '/todos', 28 | component: TodoList, 29 | // TODO: hoc로 TodoList의 로직을 재활용해보세요. 30 | }, 31 | ], 32 | }); 33 | -------------------------------------------------------------------------------- /3_ajax-patterns/lifecycle/src/views/NewsView.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 43 | 44 | 46 | -------------------------------------------------------------------------------- /4_component-design/4_renderless/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "data-provider", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "axios": "^0.18.0", 12 | "vue": "^2.5.17" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.0.1", 16 | "@vue/cli-plugin-eslint": "^3.0.1", 17 | "@vue/cli-service": "^3.0.1", 18 | "vue-template-compiler": "^2.5.17" 19 | }, 20 | "eslintConfig": { 21 | "root": true, 22 | "env": { 23 | "node": true 24 | }, 25 | "extends": [ 26 | "plugin:vue/essential", 27 | "eslint:recommended" 28 | ], 29 | "rules": {}, 30 | "parserOptions": { 31 | "parser": "babel-eslint" 32 | } 33 | }, 34 | "postcss": { 35 | "plugins": { 36 | "autoprefixer": {} 37 | } 38 | }, 39 | "browserslist": [ 40 | "> 1%", 41 | "last 2 versions", 42 | "not ie <= 8" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /4_component-design/2_slots/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "2_slots", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.5.22" 12 | }, 13 | "devDependencies": { 14 | "@vue/cli-plugin-babel": "^3.4.0", 15 | "@vue/cli-plugin-eslint": "^3.4.0", 16 | "@vue/cli-service": "^3.4.0", 17 | "babel-eslint": "^10.0.1", 18 | "eslint": "^5.8.0", 19 | "eslint-plugin-vue": "^5.0.0", 20 | "vue-template-compiler": "^2.5.21" 21 | }, 22 | "eslintConfig": { 23 | "root": true, 24 | "env": { 25 | "node": true 26 | }, 27 | "extends": [ 28 | "plugin:vue/essential", 29 | "eslint:recommended" 30 | ], 31 | "rules": {}, 32 | "parserOptions": { 33 | "parser": "babel-eslint" 34 | } 35 | }, 36 | "postcss": { 37 | "plugins": { 38 | "autoprefixer": {} 39 | } 40 | }, 41 | "browserslist": [ 42 | "> 1%", 43 | "last 2 versions", 44 | "not ie <= 8" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /4_component-design/1_common/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "1_common", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.5.22" 12 | }, 13 | "devDependencies": { 14 | "@vue/cli-plugin-babel": "^3.4.0", 15 | "@vue/cli-plugin-eslint": "^3.4.0", 16 | "@vue/cli-service": "^3.4.0", 17 | "babel-eslint": "^10.0.1", 18 | "eslint": "^5.8.0", 19 | "eslint-plugin-vue": "^5.0.0", 20 | "vue-template-compiler": "^2.5.21" 21 | }, 22 | "eslintConfig": { 23 | "root": true, 24 | "env": { 25 | "node": true 26 | }, 27 | "extends": [ 28 | "plugin:vue/essential", 29 | "eslint:recommended" 30 | ], 31 | "rules": {}, 32 | "parserOptions": { 33 | "parser": "babel-eslint" 34 | } 35 | }, 36 | "postcss": { 37 | "plugins": { 38 | "autoprefixer": {} 39 | } 40 | }, 41 | "browserslist": [ 42 | "> 1%", 43 | "last 2 versions", 44 | "not ie <= 8" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /4_component-design/3_controlled/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "3_controlled", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.5.22" 12 | }, 13 | "devDependencies": { 14 | "@vue/cli-plugin-babel": "^3.4.0", 15 | "@vue/cli-plugin-eslint": "^3.4.0", 16 | "@vue/cli-service": "^3.4.0", 17 | "babel-eslint": "^10.0.1", 18 | "eslint": "^5.8.0", 19 | "eslint-plugin-vue": "^5.0.0", 20 | "vue-template-compiler": "^2.5.21" 21 | }, 22 | "eslintConfig": { 23 | "root": true, 24 | "env": { 25 | "node": true 26 | }, 27 | "extends": [ 28 | "plugin:vue/essential", 29 | "eslint:recommended" 30 | ], 31 | "rules": {}, 32 | "parserOptions": { 33 | "parser": "babel-eslint" 34 | } 35 | }, 36 | "postcss": { 37 | "plugins": { 38 | "autoprefixer": {} 39 | } 40 | }, 41 | "browserslist": [ 42 | "> 1%", 43 | "last 2 versions", 44 | "not ie <= 8" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Captain Pangyo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /4_component-design/5_mixins/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "5_mixins", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.5.22", 12 | "vue-router": "^3.0.2" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.4.0", 16 | "@vue/cli-plugin-eslint": "^3.4.0", 17 | "@vue/cli-service": "^3.4.0", 18 | "babel-eslint": "^10.0.1", 19 | "eslint": "^5.8.0", 20 | "eslint-plugin-vue": "^5.0.0", 21 | "vue-template-compiler": "^2.5.21" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/essential", 30 | "eslint:recommended" 31 | ], 32 | "rules": {}, 33 | "parserOptions": { 34 | "parser": "babel-eslint" 35 | } 36 | }, 37 | "postcss": { 38 | "plugins": { 39 | "autoprefixer": {} 40 | } 41 | }, 42 | "browserslist": [ 43 | "> 1%", 44 | "last 2 versions", 45 | "not ie <= 8" 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /4_component-design/6_high-order/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "4_high-order", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.5.22", 12 | "vue-router": "^3.0.2" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.4.0", 16 | "@vue/cli-plugin-eslint": "^3.4.0", 17 | "@vue/cli-service": "^3.4.0", 18 | "babel-eslint": "^10.0.1", 19 | "eslint": "^5.8.0", 20 | "eslint-plugin-vue": "^5.0.0", 21 | "vue-template-compiler": "^2.5.21" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/essential", 30 | "eslint:recommended" 31 | ], 32 | "rules": {}, 33 | "parserOptions": { 34 | "parser": "babel-eslint" 35 | } 36 | }, 37 | "postcss": { 38 | "plugins": { 39 | "autoprefixer": {} 40 | } 41 | }, 42 | "browserslist": [ 43 | "> 1%", 44 | "last 2 versions", 45 | "not ie <= 8" 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | -------------------------------------------------------------------------------- /3_ajax-patterns/lifecycle/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lifecycle", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "axios": "^0.18.0", 12 | "core-js": "^2.6.5", 13 | "vue": "^2.6.10", 14 | "vue-router": "^3.0.6" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-babel": "^3.7.0", 18 | "@vue/cli-plugin-eslint": "^3.7.0", 19 | "@vue/cli-service": "^3.7.0", 20 | "babel-eslint": "^10.0.1", 21 | "eslint": "^5.16.0", 22 | "eslint-plugin-vue": "^5.0.0", 23 | "vue-template-compiler": "^2.5.21" 24 | }, 25 | "eslintConfig": { 26 | "root": true, 27 | "env": { 28 | "node": true 29 | }, 30 | "extends": [ 31 | "plugin:vue/essential", 32 | "eslint:recommended" 33 | ], 34 | "rules": {}, 35 | "parserOptions": { 36 | "parser": "babel-eslint" 37 | } 38 | }, 39 | "postcss": { 40 | "plugins": { 41 | "autoprefixer": {} 42 | } 43 | }, 44 | "browserslist": [ 45 | "> 1%", 46 | "last 2 versions" 47 | ] 48 | } 49 | -------------------------------------------------------------------------------- /3_ajax-patterns/navigation-guard/src/routes/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Router from 'vue-router'; 3 | import store from '../store/index.js'; 4 | import bus from '../utils/bus.js'; 5 | 6 | Vue.use(Router); 7 | 8 | export default new Router({ 9 | mode: 'history', 10 | routes: [ 11 | { 12 | path: '/', 13 | redirect: '/news', 14 | }, 15 | { 16 | path: '/news', 17 | component: () => import('../views/NewsView.vue'), 18 | beforeEnter: function(to, from, next) { 19 | bus.$emit('on:loading-bar'); 20 | store 21 | .dispatch('FETCH_NEWS') 22 | .then(function(response) { 23 | console.log(response); 24 | next(); 25 | }) 26 | .catch(function(error) { 27 | console.log(error); 28 | }) 29 | .finally(function() { 30 | bus.$emit('off:loading-bar'); 31 | }); 32 | }, 33 | }, 34 | { 35 | path: '/jobs', 36 | component: () => import('../views/JobsView.vue'), 37 | beforeEnter: function() { 38 | // TODO: 페이지에 진입하기 전에 'FETCH_JOBS' API 함수를 호출하여 데이터를 스토어에 저장해보세요. 39 | }, 40 | }, 41 | ], 42 | }); 43 | -------------------------------------------------------------------------------- /3_ajax-patterns/navigation-guard/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "navigation-guard", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "axios": "^0.18.0", 12 | "core-js": "^2.6.5", 13 | "vue": "^2.6.10", 14 | "vue-router": "^3.0.3", 15 | "vuex": "^3.0.1" 16 | }, 17 | "devDependencies": { 18 | "@vue/cli-plugin-babel": "^3.7.0", 19 | "@vue/cli-plugin-eslint": "^3.7.0", 20 | "@vue/cli-service": "^3.7.0", 21 | "babel-eslint": "^10.0.1", 22 | "eslint": "^5.16.0", 23 | "eslint-plugin-vue": "^5.0.0", 24 | "vue-template-compiler": "^2.5.21" 25 | }, 26 | "eslintConfig": { 27 | "root": true, 28 | "env": { 29 | "node": true 30 | }, 31 | "extends": [ 32 | "plugin:vue/essential", 33 | "eslint:recommended" 34 | ], 35 | "rules": {}, 36 | "parserOptions": { 37 | "parser": "babel-eslint" 38 | } 39 | }, 40 | "postcss": { 41 | "plugins": { 42 | "autoprefixer": {} 43 | } 44 | }, 45 | "browserslist": [ 46 | "> 1%", 47 | "last 2 versions" 48 | ] 49 | } 50 | -------------------------------------------------------------------------------- /3_ajax-patterns/navigation-guard/src/App.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 46 | 47 | 57 | -------------------------------------------------------------------------------- /4_component-design/4_renderless/src/App.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 36 | 37 | 20 | 21 | 22 |
23 |
24 |
25 | 26 | 27 |

28 | username must be an email 29 |

30 |
31 |
32 | 33 | 34 |
35 | 38 |
39 |
40 | 41 | 42 | 43 | 95 | 96 | 97 | --------------------------------------------------------------------------------