- ๋ชจ๋ธ: ๋๋ฉ์ธ ์์ญ ๋ด๋น. ๋ฐ์ดํฐ์ ๋น์ฆ๋์ค ๋ก์ง ๋ฑ์ ํํ
- ๋ทฐ: ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉ์๊ฐ ๋ณด๊ธฐ์ ์ ํฉํ ํํ๋ก ํ์ํ๊ณ ์ฌ์ฉ์์ ์ ๋ ฅ์ ๋ฐ์
- ๋ทฐ๋ชจ๋ธ: ๋ทฐ๋ฅผ ๊ทธ๋ฆฌ๊ธฐ ์ํ ์ํ ์ ์ง, ๋ทฐ์์ ๋ฐ์ ์
๋ ฅ์ ์ ์ ํ ํํ๋ก ๋ณํํ์ฌ ๋ชจ๋ธ์ ์ ๋ฌ
IDE | Webstorm |
ํ๋ก์ ํธ ์์ฑ | File - new project - [new project] - [Vue.js]์ ํ - Location(ํด๋ ์ด๋ฆ) - Vue CLI:npx --package @vue/cli vue |
(ํ๋ก์ ํธ ์์ฑ ๋๊ธฐ - cli ๋์ค์ ์ค์นํ๋ ค๋ฉด ๊ทธ๋ฅ empty project๋ก ํ๋ก์ ํธ ์์ฑ) | |
node.js ์ค์นํ๊ธฐ | https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd (vue.js devtools) |
vue ๊ฐ๋ฐ์ ๋๊ตฌ ์ค์นํ๊ธฐ | https://nodejs.org/ko/download/ (LTS) |
cdn |
|
vue.js devtool ํ์ดํ ํ์(๊ฐ๋ฐ์ ๋๊ตฌ) |
|
***๋ทฐ ์ธ์คํด์ค ๋ผ์ดํ ์ฌ์ดํด : ์ธ์คํด์ค์ ์ํ์ ๋ฐ๋ผ ํธ์ถํ ์ ์๋ ์์ฑ๋ค | |
beforeCreate | data, methods ์์ฑ์ด ์ธ์คํด์ค์ ๋ฏธ์ , ํ๋ฉด์์์ ์ ๊ทผx |
created | data, methods์์ฑ ์ ์, template ํ๋ฉด์์ ์ ๊ทผx |
beforeMount | render()ํจ์ ํธ์ถ๋๊ธฐ ์ง์ |
mounted | el ํ๋ฉด์์ ์ธ์คํด์ค ๋ถ์ฐฉ ํ ํธ์ถ ๋จ๊ณ, template ํ๋ฉด์์ ์ ๊ทผใ |
beforeUpdate | ๋ฐ์ดํฐ ๋ณ๊ฒฝ ์ ํ๋ฉด์ ๋ค์ ๊ทธ๋ฆฌ๊ธฐ ์ ์ ํธ์ถ๋๋ ๋จ๊ณ |
updated | ๋ฐ์ดํฐ ๋ณ๊ฒฝํ ํ๋ฉด ์์ ๋ณ๊ฒฝ ์๋ฃ๋ ์์ |
beforeDestroy | ๋ทฐ ์ธ์คํด์ค ํ๊ดด ์ง์ ํธ์ถ๋จ๊ณ |
destroyed | ๋ทฐ ์ธ์คํด์ค ํ๊ดด ํ ํธ์ถ๋จ๊ณ, ๋ทฐ ์ธ์คํด์ค์ ์ ์ํ ๋ชจ๋ ์์ฑ ์ ๊ฑฐ |
Vue CLI ๋ช ๋ น์ด |
|
***npm(Node Packaged Manager)์ด๋ ๋ฌด์์ธ๊ฐ? | |
| |
Vue CLI ํด๋, ์์ |
ใดhttp://localhost:9999/nnn/logo.png ์ด๋ฐ์์ผ๋ก ์ฃผ์ ์น๋ฉด ์ ๊ทผํ ์ ์์ |
***package.json ๊ตฌ์กฐ | |
-npm ๋ช ๋ น์ด ๋ฐ ๋ถ๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ์ํ๋ ๋ฐ ํ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ๋ณด๋ค์ ํฌํจ | |
๋ธ๋ผ์ฐ์ ์ ์ฅ์์ ์ข ๋ฅ | ๋ก์ปฌ ์คํ ๋ฆฌ์ง, ์ธ์ ์คํ ๋ฆฌ์ง, ์ธ๋ฑ์ค๋ ๋๋น |
***์ฌ๋ฌ๊ฐ์ง ๋ฌธ๋ฒ, ๊ท์น | |
(ex) [...this.currentQuestion.incorrect_answers] => [1๋ฒ์งธ๋ถํฐ ์ฐจ๋ก๋ก,2๋ฒ์ฌ,3๋ฒ์งธ,4,5,6...] |
npm install vue-cli -g(๋ทฐ CLI์ค์น) / vue init webpack-simple(ํ๋ก์ ํธ ์์ฑ)
/ npm install(ํ๋ก์ ํธ ๊ตฌ๋) / npm run dev(๊ตฌ๋)
npm init(๋
ธ๋ ํจํค์ง ์์ฑ) / npm install -g @vue/cli(์์กด์ฑ ์ฃผ์
) / vue create(cli๋ฅผ ์ด์ฉํ ํฌํ๋ฆฟ ์ค์ )
- vue cli ํ๋ก์ ํธ ๋ง๋ค๊ธฐ
- npm init : ๋
ธ๋ ํจํค์ง๋ฅผ ๋ง๋ ๋ค
- ์คํธ๋ฆฌ ํฌ์ธํธ : ๋ ธ๋ ํ๋ก์ ํธ๊ฐ ์ฒ์ ๊ตฌ๋๋ ๋ ์ด๋ค ํจํค์ง๋ฅผ ์คํ์ํฌ ๊ฒ์ด๋
- npm install -g @vue/cli : createํ๊ธฐ ์ ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ง์ด๋ฃ๋ ๋ช
๋ น์ด
- @vue/cli : npm์์ ๊ด๋ฆฌํ๋ ํจํค์ง ์ด๋ฆ
"dependencies": {
"vue": "^2.6.10"
}
//์์กด์ฑ ์ฃผ์
- (์นํฉ, ๋น๋ ์๋ต)
- vue create : vue create๋ vue cli๋ฅผ ์ด์ฉํ ํฌํ๋ฆฟ ์์ฑํ๋ ๊ฒ
- ์ธ๋ถ์ค์
(*) Babel : es6์ด์์ ๊ฒ๋ค์ es5๋ฒ์ ์ผ๋ก ๋ณํ์์ผ์ค
( ) TypeScript :es6 ์๋ฐ์คํฌ๋ฆฝํธ ์
๊ทธ๋ ์ด๋ ๋ฒ์ (์ผ์ข
์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ)
( ) Progressive Web App (PWA) Support : ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ด๋ จ
( ) Router : ๋ทฐ ๋ผ์ฐํฐ
( ) Vuex : ๋ถ๋ชจ-์์ ์ปดํฌ๋ํธ ๊ฐ ๋ฐ์ดํฐ ํ๋ฆ์ ํ๋์ ๋ณด๊ธฐ ์ด๋ ค์ / ๋ฐ์ดํฐ ์ํ ๊ด๋ฆฌ(๋ผ์ด๋ธ๋ฌ๋ฆฌ)
/ ํ์ํ ๋ฐ์ดํฐ๋ฅผ ๋ทฐ์์ค์ ๋ฑ๋กํด๋๊ณ ๊บผ๋ด์ฐ๋ ์(๋ฐ์ดํฐ๋ฒ ์ด์ค ๊ฐ์)
( ) CSS Pre-processors
(scss-๋ธ๋ผ์ฐ์ ์์ ๋ฐ๋ก ์ฝ์ง ๋ชปํ๊ธฐ ๋๋ฌธ์ css์์ ๋ณํ๊ณผ์ ๊ฑฐ์นจ, sass..) : scss,sass๋ฑ ๋ณํํด์ฃผ๋ ํ๋ก๊ทธ๋จ๋ค
(*) Linter / Formatter
: (esLint๊ฐ linter์ ์ข
๋ฅ) linter : ๊ผญ ์งํค์ง ์์๋ ์คํ๋๋ ๊ฐ๋ฐ ๋ฌธ๋ฒ์ ๋ํ ๋ฃฐ์ ์ ํจ(์ฝ๋ ์ปจ๋ฐด์
ํด)
( ) Unit Testing :ํ
์คํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
( ) E2E Testing :ํ
์คํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
-linter : prittier - save
-๋ชจ๋ ์ต์
๋ค์ ๊ฐ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ฐ์ง๊ณ ์์
ใดdedicated - ๊ฐ๊ฐ
ใดpackage.json - ์ฌ๊ธฐ ๋ค ๋ฃ์
# package.json
"dependencies": { //๊ฐ๋ฐํ ๋ ํ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
"core-js": "^3.3.2",
"vue": "^2.6.10"
},
"devDependencies": { //๊ฐ๋ฐํ ๋ ํ์ํ์ง ์์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
"@vue/cli-plugin-babel": "^4.0.0",
"@vue/cli-plugin-eslint": "^4.0.0",
"@vue/cli-service": "^4.0.0",
"@vue/eslint-config-prettier": "^5.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^5.0.0",
"prettier": "^1.18.2",
"vue-template-compiler": "^2.6.10"
}
#cli๋ ์นํฉ์ ํ๊ฒ ๋์ด ์์
public ํด๋์ ๋ด์ฉ๋ฌผ์ ์๋ ๊ฒ๋ง์ด ์ ์ผํ๊ฒ ์นํฉ์ ์ํฅ์ ๋ฐ์ง ์์
- action -> mutation -> state
- action :
- mutation :
- state :
import Home from '@/components/Home.vue'
์์ @๋src ๊ฒฝ๋ก์์ ์์ํ๋ค
๋ฅผ ๋ปํจmain.js
๋ ๋ทฐ ํ๋ก์ ํธ์ ์ค์ํต์ ์ ๊ฒฉ์$(๋ฌ๋ฌ)ํ์
: new Vue({}) ์ ์ ์๋ ๊ฒ๋ค์ $ํ์๋ฅผ ์ด ํ ์ฌ์ฉ๊ฐ๋ฅ
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
//(ex) store ์ธ ๋ $store
{}
: ๊ฐ์ฒดํํ (ex. {mapGetters} : mapGetters๋ผ๋ ๊ฐ์ฒด
- component ํ๊ทธ๋ ์๋ฌด ์ปดํฌ๋ํธ๋ฅผ ์๋ฏธํ ์ ์์ผ๋ฉฐ, :is ์์ฝ์ด๋ฅผ ํตํด ๊ตฌ๋ถํจ
<component v-bind:is="currentView">
<!-- vm.currentView๊ฐ ๋ณ๊ฒฝ๋๋ฉด ์ปดํฌ๋ํธ๊ฐ ๋ณ๊ฒฝ๋ฉ๋๋ค! -->
</component>
ui framework
reference
- https://medium.com/witinweb/vue-js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-7780cdd97dd4
- https://niceman.tistory.com/55
- https://cli.vuejs.org/config/#devserver-proxy
- https://www.youtube.com/watch?v=4deVCNJq3qc
- https://github.com/axios/axios
- https://joshua1988.github.io/web-development/vuejs/vue-structure/
- https://jamong-icetea.tistory.com/201
- https://m.blog.naver.com/magnking/220961896609
- https://seulcode.tistory.com/261
- https://blog-han.tistory.com/30
- https://imasoftwareengineer.tistory.com/41
- https://velog.io/@n2ptune/NPM%EC%97%90%EC%84%9C-save%EC%99%80-save-dev%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90
- https://eastflag.co.kr/frontend/frontend-webpack/npm_webpack/
- https://kr.vuejs.org/v2/style-guide/#%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%ED%8C%8C%EC%9D%BC-%EB%A7%A4%EC%9A%B0-%EC%B6%94%EC%B2%9C%ED%95%A8
- https://router.vuejs.org/kr/guide/advanced/navigation-guards.html
- https://joshua1988.github.io/web-development/translation/essential-es6-features-for-vuejs/
- https://cli.vuejs.org/config/#devserver-proxy
- https://www.youtube.com/watch?v=4deVCNJq3qc
- https://github.com/axios/axios
- https://www.reimaginer.me/entry/spa-and-spa-routing
- https://beomy.tistory.com/72?category=646688
- https://beomy.tistory.com/70
- https://skout90.github.io/2018/01/20/Vue/4.%EC%9D%B4%EB%B2%A4%ED%8A%B8/
- https://element.eleme.io/#/en-US/component/time-picker
- https://jsfiddle.net/adamwathan/hfs34ye4/
- https://router.vuejs.org/kr/guide/essentials/history-mode.html#%EC%84%9C%EB%B2%84-%EC%84%A4%EC%A0%95-%EC%98%88%EC%A0%9C
- https://jeong-pro.tistory.com/151
- https://jeong-pro.tistory.com/181
- https://gmlwjd9405.github.io/2019/01/28/http-header-types.html
- https://www.zerocho.com/category/HTTP/post/5b4c4e3efc5052001b4f519b
- https://joshua1988.github.io/vue-camp/vuex/concept.html#%EB%B7%B0%EC%97%91%EC%8A%A4-%EA%B5%AC%EC%A1%B0%EB%8F%84
- https://vuex.vuejs.org/kr/
- https://joshua1988.github.io/web-development/vuejs/vuex-start/
- https://joshua1988.github.io/es6-online-book/guide.html
- https://velog.io/@ki_blank/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98Arrow-function
- https://opentutorials.org/course/743/6548
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
- https://codepen.io/mygumi/pen/gXZXBr
- http://labs.brandi.co.kr/2018/12/13/kangww.html
- https://library.gabia.com/contents/infrahosting/3864
- https://futurecreator.github.io/2018/11/09/it-infrastructure-basics/
- https://miiingo.tistory.com/87
- https://ithub.tistory.com/249
- https://kr.vuejs.org/v2/guide/state-management.html
- https://router.vuejs.org/kr/guide/essentials/navigation.html
- https://velopert.com/category/dev-log/tech-log/vue-js
- https://lessipe.com/course/30
- https://joshua1988.github.io/web-development/vuejs/vuex-getters-mutations/
- https://boycoding.tistory.com/38
- https://boycoding.tistory.com/37?category=915176
- https://joshua1988.github.io/vue-camp/es6/async-await.html#%EA%B8%B0%EB%B3%B8-%EC%98%88%EC%A0%9C
- https://okky.kr/article/442679
- https://programmingsummaries.tistory.com/325
vue-loader
https://vue-loader-v14.vuejs.org/kr/- https://kr.vuejs.org/v2/api/index.html
- https://devriver.tistory.com/31