- ÇöÀç À§Ä¡
- home > ÄÄÇ»ÅÍ¡¤ICT¡¤¾îÇÐ > ÄÄÇ»ÅÍ¡¤IT µµ¼ > À¥ÇÁ·Î±×·¡¹Ö > ¿¹Á¦·Î ¹è¿ì´Â Vue.js[¿¡ÀÌÄÜÃâÆÇ]
ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·¹ÀÓ¿öÅ©ÀÎ React, Angular, Vue Áß Vue.js´Â °¡Àå Àαâ ÀÖ´Â ÇÁ·ÐÆ®¿£µå Github ÇÁ·ÎÁ§Æ®°¡ µÆ´Ù. ÀÌ Ã¥¿¡¼´Â Vue.js ÇнÀ¿¡ ÇÊ¿äÇÑ ±âº»ÀûÀΠȯ°æ ¼³Á¤ºÎÅÍ ºä ÀνºÅϽº, ÄÄÆ÷³ÍÆ®, Vue-router¸¦ ÀÌ¿ëÇÑ ¶ó¿ìÆÃ, vuex¸¦ È°¿ëÇÑ È¿°úÀûÀÎ µ¥ÀÌÅÍ °ü¸®¸¦ ÀÚ¼¼ÇÑ ¼³¸í°ú ¿¹Á¦·Î ½±°Ô ÀÌÇØÇÒ ¼ö ÀÖ°Ô ±¸¼ºÇß´Ù. ¶ÇÇÑ ¸¶Áö¸· Àå¿¡¼ °¢±¤¹Þ´Â Ç®½ºÅà Áß ÇϳªÀÎ MEVN(MongoDB, Express, Vue, Node)ÀÇ ÀÌ·Ð ¼³¸í°ú ÇÔ²² ¿¹Á¦¸¦ µû¶ó ÇÏ¸é¼ Å¬¶óÀ̾ðÆ®(Vue) - ¼¹ö´Ü(Node, Express, MongoDB)ÀÌ ¾î¶»°Ô µ¿ÀÛÇÏ´ÂÁö ÀüüÀûÀ¸·Î ÀÌÇØÇÒ ¼ö ÀÖ°Ô ±¸¼ºÇß´Ù.
ÀúÀÚ: ¿øö¿¬
1Àå. Vue.js ¼Ò°³
______¾ç¹æÇâ µ¥ÀÌÅÍ ¹ÙÀεù
______°¡»ó µ¼
______Vue.jsÀÇ ÀåÁ¡
______Vue.js ÇöÀç¿Í ÇâÈÄ Àü¸Á
__1.1 Vue.js ½ÃÀÛÇϱâ
____1.1.1 Node.js ¼³Ä¡ ¹× NPM ¸í·É¾î ÀÌÇØ
________package.jsonÀ» ¸¸µé±â À§ÇÑ npm init
________ÆÐÅ°Áö ¼³Ä¡¸¦ À§ÇÑ npm install, »èÁ¦¸¦ À§ÇÑ npm uninstall
________npm start ¸í·ÉÀ» ÀÌ¿ëÇÑ ½ÇÇà
__1.1.2 VUE/CLI
__1.1.3 Visual Studio Code
________»õ·Î¿î Æú´õ »ý¼º°ú doc tab Å°¸¦ ÀÌ¿ëÇÑ index.html ±âº» ±¸Á¶ ¸¸µé±â
________ÇÁ·ÎÁ§Æ®¸¦ ½ÇÇàÇϰųª ÆÐÅ°Áö¸¦ ¼³Ä¡ÇÏ´Â ¹æ¹ý
________scaffolding ±â´É
________Emmet ±â´É
________Lorem ¹®ÀÚ¿ ÀÔ·ÂÇϱâ
__1.1.4 Live Server
__1.1.5 Vue.js devtools ¼³Ä¡Çϱâ
__1.1.6 È»ìÇ¥ ÇÔ¼ö
2Àå. Vue.js ¾ÖÇø®ÄÉÀ̼ÇÀÇ ½ÃÀÛ - ºä ÀνºÅϽº
__2.1 template ÇÁ·ÎÆÛƼ
__2.2 methods ÇÁ·ÎÆÛƼ
__2.3 computed ÇÁ·ÎÆÛƼ
____2.3.1 computed ÇÁ·ÎÆÛƼ¸¦ ÀÌ¿ëÇÑ ÇÊÅ͸µ
__2.4 props ÇÁ·ÎÆÛƼ
__2.5 watch ÇÁ·ÎÆÛƼ
__2.6 ÇÑ ÆäÀÌÁö ³»¿¡¼ ´Ù¼öÀÇ ºä ÀνºÅϽº
__2.7 ºä ÀνºÅϽº »ýÁ¸ ÁÖ±â
3Àå. ¿¤¸®¸ÕÆ®¿¡ ±â´ÉÀ» µ¡ºÙÀÌ´Â µð·ºÆ¼ºê
__3.1 v-if, v-for¸¦ ÀÌ¿ëÇÑ È帧Á¦¾î
____3.1.1 v-if, v-if ¡¦ v-else, v-if ¡¦ v-else-if ¡¦ v-else ±¸¹®
____3.1.2 v-if¿Í v-showÀÇ ºñ±³
____3.1.3 v-for¸¦ ÀÌ¿ëÇÑ ¹Ýº¹ ó¸®
__3.2 v-bind¸¦ ÀÌ¿ëÇÑ µ¥ÀÌÅÍ ¹ÙÀεù
____3.2.1 ½ºÅ¸ÀÏÀ» Àû¿ëÇϱâ À§ÇÑ v-bind:class, v-bind:style
____3.2.3 À̹ÌÁö ¿¬°áÀ» À§ÇÑ v-bind:src¿Í ¸µÅ© ¿¬°áÀ» À§ÇÑ v:bind:href
__3.3 v-modelÀ» ÀÌ¿ëÇÑ ¾ç¹æÇâ µ¥ÀÌÅÍ ¹ÙÀεù
__3.4 v-onÀ» ÀÌ¿ëÇÑ À̺¥Æ® ó¸®
____3.4.1 v-for¸¦ ÀÌ¿ëÇØ Ä÷º¼Ç À̺¥Æ® ó¸®Çϱâ
____3.4.2 ÇϳªÀÇ HTML ¿¤¸®¸ÕÆ®¿¡ ¿©·¯ °³ÀÇ À̺¥Æ® Àû¿ëÇϱâ
____3.4.3 À̺¥Æ® ¼ö½Ä¾î
4Àå. Àç»ç¿ëÀÌ °¡´ÉÇÑ ·¹°í(Lego)¿Í °°Àº ÄÄÆ÷³ÍÆ®
__4.1 ÄÄÆ÷³ÍÆ®ÀÇ Á¤ÀÇ ¹× µî·Ï
____4.1.1 CDNÀ» ÀÌ¿ëÇÑ ¹æ¹ý
____4.1.2 VUE/CLI¸¦ ÀÌ¿ëÇÑ ¹æ¹ý
__4.2 ÄÄÆ÷³ÍÆ® Àû¿ë ¹üÀ§ ÀÌÇØÇϱâ
____4.2.1 CDNÀ» ÀÌ¿ëÇÑ Àü¿ª(global), Áö¿ª(local) Àû¿ë ÀÌÇØÇϱâ
____4.2.2 VUE/CLI¸¦ ÀÌ¿ëÇÑ Àü¿ª(global), Áö¿ª(local) Àû¿ë ÀÌÇØÇϱâ
__4.3 ÄÄÆ÷³ÍÆ® °£ µ¥ÀÌÅÍ Àü´ÞÇϱâ
____4.3.1 props ÇÁ·ÎÆÛƼ¸¦ ÀÌ¿ëÇØ ºÎ¸ð ÄÄÆ÷³ÍÆ®¿¡¼ ÀÚ³à ÄÄÆ÷³ÍÆ®·Î µ¥ÀÌÅÍ Àü´Þ
____4.3.2 \$emit( ) ¸Þ¼µå·Î ÀÚ³à ÄÄÆ÷³ÍÆ®¿¡¼ ºÎ¸ð ÄÄÆ÷³ÍÆ®·Î µ¥ÀÌÅÍ Àü´Þ
________CDNÀ» ÀÌ¿ëÇÑ ¹æ¹ý
________Vue CLI¸¦ ÀÌ¿ëÇÑ ¹æ¹ý
____4.3.3 À̺¥Æ® ¹ö½º¸¦ ÀÌ¿ëÇÑ µ¥ÀÌÅÍ Àü´Þ
________À̺¥Æ® ¹ö½ºÀÇ ÃʱâÈ
________À̺¥Æ® ¹ö½ºÀÇ »ç¿ë
________CDNÀ» ÀÌ¿ëÇÑ ¹æ¹ý
________Vue CLI¸¦ ÀÌ¿ëÇÑ ¹æ¹ý
__4.4 ½½·Ô »ç¿ëÇϱâ
____4.4.1 Unnamed slot
____4.4.2 Named slot
____4.4.3 Scoped slot
____4.4.4 v-slot
5Àå ´Ù¾çÇÑ ÀåÄ¡ µðÀÚÀο¡ ÀûÇÕÇÑ Materialize, Vuetify
__5.1 Materialize¸¦ ÀÌ¿ëÇÑ ½ºÅ¸Àϸµ
________Materialize ´Ù¿î·Îµå ¹× ¼³Ä¡
____5.1.1 »ö, Á¤·Ä
____5.1.2 Image, Icon, Video
____5.1.3 ÀåÄ¡ÀÇ È¸é Å©±â¿¡ µû¸¥ Hide/Show Content ±â´É
____5.1.4 Grid
________¹ÝÀÀÇü ·¹À̾ƿô
________offset
________Ä÷³ÀÇ ¼ø¼ ¹Ù²Ù±â push, pull
____5.1.5 Button
____5.1.6 Table
____5.1.7 Card
____5.1.8 Navbar
____5.1.9 Slider
____5.1.10 Autocomplete
____5.1.11 Scrollspy
__5.2 Vuetify¸¦ ÀÌ¿ëÇÑ ½ºÅ¸Àϸµ
____5.2.1 Color, Text
____5.2.2 v-btn, v-icon
________v-btn
________v-icon
____5.2.3 Breakpoints, Visibility
____5.2.4 ±×¸®µå ½Ã½ºÅÛ
________v-container
________v-layout
________v-flex
____5.2.5 v-dialog
________Modal ÇüÅÂÀÇ ´ëÈ»óÀÚ
________Form ÇüÅÂÀÇ ´ëÈ»óÀÚ
____5.2.6 v-toolbar, v-navigation-drawer
__5.3 Vue.js Cloud Firestore¸¦ ÀÌ¿ëÇÑ ½Ç½Ã°£ äÆà ÇÁ·Î±×·¥ ¸¸µé±â
________äÆà ÇÁ·Î±×·¥ ±¸Á¶
____5.3.1 Firebase ¼³Á¤Çϱâ
____5.3.2 Vue ÇÁ·ÎÁ§Æ® »ý¼º
________Firebase ¿¬°áÀ» À§ÇÑ ÆÄÀÏ Ãß°¡
________µðÀÚÀÎÀ» À§ÇÑ css, icon Ãß°¡
________¶ó¿ìÆà ±â´ÉÀ» À§ÇÑ router.js ¼³Á¤Çϱâ
6Àå. »ç¿ëÀڷκÎÅÍ µ¥ÀÌÅÍ ÀÔ·Â ¹× ¼¹ö·Î µ¥ÀÌÅÍ Àü´ÞÀ» À§ÇÑ Forms
__6.1 Form °ü·Ã ¿¤¸®¸ÕÆ®¿¡ ´ëÇÑ ÀÌÇØ
____6.1.1 ÇÑ Çà(row) ÅؽºÆ® ÀÔ·ÂÀ» À§ÇÑ input ¿¤¸®¸ÕÆ®¿Í v-model
____6.1.2 ¸ÖƼ Çà ÅؽºÆ® ÀÔ·ÂÀ» À§ÇÑ textarea ¿¤¸®¸ÕÆ®¿Í v-model
____6.1.3 ¿É¼Ç ¼±Åà °¡´ÉÇÑ checkbox¿Í v-model
____6.1.4 ¼±Åà °¡´ÉÇÑ ´Ù¼öÀÇ ¾ÆÀÌÅÛÀ» ¹ÙÀεùÇÏ´Â select
____6.1.5 v-model ¼ö½Ä¾îÀ» ÀÌ¿ëÇÑ °ø¹é Á¦°Å, data ÇÁ·ÎÆÛƼ Áö¿¬ ¾÷µ¥ÀÌÆ®
__6.2 À¯È¿¼º °Ë»ç
____6.2.1 vue.js¿¡¼ÀÇ ±âº»ÀûÀÎ À¯È¿¼º °Ë»ç
____6.2.2 Vuetify¸¦ ÀÌ¿ëÇÑ form À¯È¿¼º °Ë»ç
7Àå. À¥»çÀÌÆ® Ž»öÀ» À§ÇÑ ¶ó¿ìÆÃ
__7.1 vue-router·Î ¶ó¿ìÆà ÇÁ·ÎÁ§Æ® »ý¼ºÇϱâ
__7.2 ¶ó¿ìÅÍ ºä, ¶ó¿ìÅÍ ¸µÅ©, ¸®´ÙÀÌ·ºÆ®
__7.3 ÁßøµÈ ¶ó¿ìÆ®
__7.4 Named Routes¿Í Named Views
________Named Route
________Named View
__7.5 ³×ºñ°ÔÀÌ¼Ç °¡µå
____7.5.1 ÄÄÆ÷³ÍÆ® ¼öÁØÀÇ Guard ¸Þ¼µå
________beforeRouteEnter( ) ¸Þ¼µå
________beforeRouteLeave( ) ¸Þ¼µå
________beforeRouteUpdate() ¸Þ¼µå
____7.5.2 Per-Route Guard
____7.5.3 Àü¿ª Navigation Guard
8Àå. È¿À²ÀûÀÎ µ¥ÀÌÅÍ °ü¸®¸¦ À§ÇÑ Vuex
__8.1 Vuex ÆÐÅ°Áö ¼³Ä¡Çϱâ
__8.2 Getters
__8.3 Mutations
__8.4 Actions
__8.5 mapState, mapGetters, mapMutations, mapActions
__8.6 Mutations¿Í ActionsÀÇ Â÷ÀÌÁ¡
9Àå. MEVN(MongoDB, Express, Vue, Node.js) ±â¹Ý RESTful ¼ºñ½º
__9.1 REST Á¤ÀÇ ¹× °³³ä ÀÌÇØÇϱâ
________RESTÀÇ Á¤ÀÇ
________RESTÀÇ Á¦¾à Á¶°Ç
________RESTful À¥¼ºñ½º
__9.2 Äݹé, promise ÀÌÇØÇϱâ
____9.2.1 µ¿±â¿Í ºñµ¿±â
____9.2.2 ÄݹéÇÔ¼ö, callback Hell
____9.2.3 Promise
________promise »ý¼ºÇϱâ
________promise.then() ¸Þ¼µå
________promise.catch() ¸Þ¼µå
____9.2.4 Promise Chaining
____9.2.5 async/await¸¦ ÀÌ¿ëÇÑ ºñµ¿±â ó¸®
__9.3 Axios
____9.3.1 GET ¿äû
________ÀÀ´ä °´Ã¼
________¿¡·¯ °´Ã¼
____9.3.2 POST request
____9.3.3 PUT request
____9.3.4 DELETE request
__9.4 MongoDB
________´Ù¿î·Îµå ¹× ¼³Ä¡
____9.4.1 µ¥ÀÌÅÍ Ãß°¡(CREATE)
____9.4.2 µ¥ÀÌÅÍ °Ë»ö(READ)
____9.4.3 µ¥ÀÌÅÍ ¼öÁ¤(UPDATE)
____9.4.4 µ¥ÀÌÅÍ »èÁ¦(DELETE)
____9.4.5 save( ) ¸Þ¼µå·Î µ¥ÀÌÅÍ Ãß°¡, ¼öÁ¤
__9.5 Node.js MongoDB¸¦ ÀÌ¿ëÇÑ RESTful ¼ºñ½º ¸¸µé±â
____9.5.1 Express.js
____9.5.2 RESTful ¼ºñ½º ¼¹ö MongoDB
____9.5.3 PostmanÀ» ÀÌ¿ëÇÑ REST ¼ºñ½º Å×½ºÆÃ
________µ¥ÀÌÅÍ Ãß°¡(POST)
________µ¥ÀÌÅÍ °Ë»ö(GET)
________µ¥ÀÌÅÍ ¾÷µ¥ÀÌÆ®(PUT)
________µ¥ÀÌÅÍ »èÁ¦(DELETE)
__9.6 Vue.js RESTful ¼ºñ½º MongoDB
________µ¥ÀÌÅÍ Ãß°¡Çϱâ
________µ¥ÀÌÅÍ ¼öÁ¤Çϱâ
________µ¥ÀÌÅÍ »èÁ¦Çϱâ
______¾ç¹æÇâ µ¥ÀÌÅÍ ¹ÙÀεù
______°¡»ó µ¼
______Vue.jsÀÇ ÀåÁ¡
______Vue.js ÇöÀç¿Í ÇâÈÄ Àü¸Á
__1.1 Vue.js ½ÃÀÛÇϱâ
____1.1.1 Node.js ¼³Ä¡ ¹× NPM ¸í·É¾î ÀÌÇØ
________package.jsonÀ» ¸¸µé±â À§ÇÑ npm init
________ÆÐÅ°Áö ¼³Ä¡¸¦ À§ÇÑ npm install, »èÁ¦¸¦ À§ÇÑ npm uninstall
________npm start ¸í·ÉÀ» ÀÌ¿ëÇÑ ½ÇÇà
__1.1.2 VUE/CLI
__1.1.3 Visual Studio Code
________»õ·Î¿î Æú´õ »ý¼º°ú doc tab Å°¸¦ ÀÌ¿ëÇÑ index.html ±âº» ±¸Á¶ ¸¸µé±â
________ÇÁ·ÎÁ§Æ®¸¦ ½ÇÇàÇϰųª ÆÐÅ°Áö¸¦ ¼³Ä¡ÇÏ´Â ¹æ¹ý
________scaffolding ±â´É
________Emmet ±â´É
________Lorem ¹®ÀÚ¿ ÀÔ·ÂÇϱâ
__1.1.4 Live Server
__1.1.5 Vue.js devtools ¼³Ä¡Çϱâ
__1.1.6 È»ìÇ¥ ÇÔ¼ö
2Àå. Vue.js ¾ÖÇø®ÄÉÀ̼ÇÀÇ ½ÃÀÛ - ºä ÀνºÅϽº
__2.1 template ÇÁ·ÎÆÛƼ
__2.2 methods ÇÁ·ÎÆÛƼ
__2.3 computed ÇÁ·ÎÆÛƼ
____2.3.1 computed ÇÁ·ÎÆÛƼ¸¦ ÀÌ¿ëÇÑ ÇÊÅ͸µ
__2.4 props ÇÁ·ÎÆÛƼ
__2.5 watch ÇÁ·ÎÆÛƼ
__2.6 ÇÑ ÆäÀÌÁö ³»¿¡¼ ´Ù¼öÀÇ ºä ÀνºÅϽº
__2.7 ºä ÀνºÅϽº »ýÁ¸ ÁÖ±â
3Àå. ¿¤¸®¸ÕÆ®¿¡ ±â´ÉÀ» µ¡ºÙÀÌ´Â µð·ºÆ¼ºê
__3.1 v-if, v-for¸¦ ÀÌ¿ëÇÑ È帧Á¦¾î
____3.1.1 v-if, v-if ¡¦ v-else, v-if ¡¦ v-else-if ¡¦ v-else ±¸¹®
____3.1.2 v-if¿Í v-showÀÇ ºñ±³
____3.1.3 v-for¸¦ ÀÌ¿ëÇÑ ¹Ýº¹ ó¸®
__3.2 v-bind¸¦ ÀÌ¿ëÇÑ µ¥ÀÌÅÍ ¹ÙÀεù
____3.2.1 ½ºÅ¸ÀÏÀ» Àû¿ëÇϱâ À§ÇÑ v-bind:class, v-bind:style
____3.2.3 À̹ÌÁö ¿¬°áÀ» À§ÇÑ v-bind:src¿Í ¸µÅ© ¿¬°áÀ» À§ÇÑ v:bind:href
__3.3 v-modelÀ» ÀÌ¿ëÇÑ ¾ç¹æÇâ µ¥ÀÌÅÍ ¹ÙÀεù
__3.4 v-onÀ» ÀÌ¿ëÇÑ À̺¥Æ® ó¸®
____3.4.1 v-for¸¦ ÀÌ¿ëÇØ Ä÷º¼Ç À̺¥Æ® ó¸®Çϱâ
____3.4.2 ÇϳªÀÇ HTML ¿¤¸®¸ÕÆ®¿¡ ¿©·¯ °³ÀÇ À̺¥Æ® Àû¿ëÇϱâ
____3.4.3 À̺¥Æ® ¼ö½Ä¾î
4Àå. Àç»ç¿ëÀÌ °¡´ÉÇÑ ·¹°í(Lego)¿Í °°Àº ÄÄÆ÷³ÍÆ®
__4.1 ÄÄÆ÷³ÍÆ®ÀÇ Á¤ÀÇ ¹× µî·Ï
____4.1.1 CDNÀ» ÀÌ¿ëÇÑ ¹æ¹ý
____4.1.2 VUE/CLI¸¦ ÀÌ¿ëÇÑ ¹æ¹ý
__4.2 ÄÄÆ÷³ÍÆ® Àû¿ë ¹üÀ§ ÀÌÇØÇϱâ
____4.2.1 CDNÀ» ÀÌ¿ëÇÑ Àü¿ª(global), Áö¿ª(local) Àû¿ë ÀÌÇØÇϱâ
____4.2.2 VUE/CLI¸¦ ÀÌ¿ëÇÑ Àü¿ª(global), Áö¿ª(local) Àû¿ë ÀÌÇØÇϱâ
__4.3 ÄÄÆ÷³ÍÆ® °£ µ¥ÀÌÅÍ Àü´ÞÇϱâ
____4.3.1 props ÇÁ·ÎÆÛƼ¸¦ ÀÌ¿ëÇØ ºÎ¸ð ÄÄÆ÷³ÍÆ®¿¡¼ ÀÚ³à ÄÄÆ÷³ÍÆ®·Î µ¥ÀÌÅÍ Àü´Þ
____4.3.2 \$emit( ) ¸Þ¼µå·Î ÀÚ³à ÄÄÆ÷³ÍÆ®¿¡¼ ºÎ¸ð ÄÄÆ÷³ÍÆ®·Î µ¥ÀÌÅÍ Àü´Þ
________CDNÀ» ÀÌ¿ëÇÑ ¹æ¹ý
________Vue CLI¸¦ ÀÌ¿ëÇÑ ¹æ¹ý
____4.3.3 À̺¥Æ® ¹ö½º¸¦ ÀÌ¿ëÇÑ µ¥ÀÌÅÍ Àü´Þ
________À̺¥Æ® ¹ö½ºÀÇ ÃʱâÈ
________À̺¥Æ® ¹ö½ºÀÇ »ç¿ë
________CDNÀ» ÀÌ¿ëÇÑ ¹æ¹ý
________Vue CLI¸¦ ÀÌ¿ëÇÑ ¹æ¹ý
__4.4 ½½·Ô »ç¿ëÇϱâ
____4.4.1 Unnamed slot
____4.4.2 Named slot
____4.4.3 Scoped slot
____4.4.4 v-slot
5Àå ´Ù¾çÇÑ ÀåÄ¡ µðÀÚÀο¡ ÀûÇÕÇÑ Materialize, Vuetify
__5.1 Materialize¸¦ ÀÌ¿ëÇÑ ½ºÅ¸Àϸµ
________Materialize ´Ù¿î·Îµå ¹× ¼³Ä¡
____5.1.1 »ö, Á¤·Ä
____5.1.2 Image, Icon, Video
____5.1.3 ÀåÄ¡ÀÇ È¸é Å©±â¿¡ µû¸¥ Hide/Show Content ±â´É
____5.1.4 Grid
________¹ÝÀÀÇü ·¹À̾ƿô
________offset
________Ä÷³ÀÇ ¼ø¼ ¹Ù²Ù±â push, pull
____5.1.5 Button
____5.1.6 Table
____5.1.7 Card
____5.1.8 Navbar
____5.1.9 Slider
____5.1.10 Autocomplete
____5.1.11 Scrollspy
__5.2 Vuetify¸¦ ÀÌ¿ëÇÑ ½ºÅ¸Àϸµ
____5.2.1 Color, Text
____5.2.2 v-btn, v-icon
________v-btn
________v-icon
____5.2.3 Breakpoints, Visibility
____5.2.4 ±×¸®µå ½Ã½ºÅÛ
________v-container
________v-layout
________v-flex
____5.2.5 v-dialog
________Modal ÇüÅÂÀÇ ´ëÈ»óÀÚ
________Form ÇüÅÂÀÇ ´ëÈ»óÀÚ
____5.2.6 v-toolbar, v-navigation-drawer
__5.3 Vue.js Cloud Firestore¸¦ ÀÌ¿ëÇÑ ½Ç½Ã°£ äÆà ÇÁ·Î±×·¥ ¸¸µé±â
________äÆà ÇÁ·Î±×·¥ ±¸Á¶
____5.3.1 Firebase ¼³Á¤Çϱâ
____5.3.2 Vue ÇÁ·ÎÁ§Æ® »ý¼º
________Firebase ¿¬°áÀ» À§ÇÑ ÆÄÀÏ Ãß°¡
________µðÀÚÀÎÀ» À§ÇÑ css, icon Ãß°¡
________¶ó¿ìÆà ±â´ÉÀ» À§ÇÑ router.js ¼³Á¤Çϱâ
6Àå. »ç¿ëÀڷκÎÅÍ µ¥ÀÌÅÍ ÀÔ·Â ¹× ¼¹ö·Î µ¥ÀÌÅÍ Àü´ÞÀ» À§ÇÑ Forms
__6.1 Form °ü·Ã ¿¤¸®¸ÕÆ®¿¡ ´ëÇÑ ÀÌÇØ
____6.1.1 ÇÑ Çà(row) ÅؽºÆ® ÀÔ·ÂÀ» À§ÇÑ input ¿¤¸®¸ÕÆ®¿Í v-model
____6.1.2 ¸ÖƼ Çà ÅؽºÆ® ÀÔ·ÂÀ» À§ÇÑ textarea ¿¤¸®¸ÕÆ®¿Í v-model
____6.1.3 ¿É¼Ç ¼±Åà °¡´ÉÇÑ checkbox¿Í v-model
____6.1.4 ¼±Åà °¡´ÉÇÑ ´Ù¼öÀÇ ¾ÆÀÌÅÛÀ» ¹ÙÀεùÇÏ´Â select
____6.1.5 v-model ¼ö½Ä¾îÀ» ÀÌ¿ëÇÑ °ø¹é Á¦°Å, data ÇÁ·ÎÆÛƼ Áö¿¬ ¾÷µ¥ÀÌÆ®
__6.2 À¯È¿¼º °Ë»ç
____6.2.1 vue.js¿¡¼ÀÇ ±âº»ÀûÀÎ À¯È¿¼º °Ë»ç
____6.2.2 Vuetify¸¦ ÀÌ¿ëÇÑ form À¯È¿¼º °Ë»ç
7Àå. À¥»çÀÌÆ® Ž»öÀ» À§ÇÑ ¶ó¿ìÆÃ
__7.1 vue-router·Î ¶ó¿ìÆà ÇÁ·ÎÁ§Æ® »ý¼ºÇϱâ
__7.2 ¶ó¿ìÅÍ ºä, ¶ó¿ìÅÍ ¸µÅ©, ¸®´ÙÀÌ·ºÆ®
__7.3 ÁßøµÈ ¶ó¿ìÆ®
__7.4 Named Routes¿Í Named Views
________Named Route
________Named View
__7.5 ³×ºñ°ÔÀÌ¼Ç °¡µå
____7.5.1 ÄÄÆ÷³ÍÆ® ¼öÁØÀÇ Guard ¸Þ¼µå
________beforeRouteEnter( ) ¸Þ¼µå
________beforeRouteLeave( ) ¸Þ¼µå
________beforeRouteUpdate() ¸Þ¼µå
____7.5.2 Per-Route Guard
____7.5.3 Àü¿ª Navigation Guard
8Àå. È¿À²ÀûÀÎ µ¥ÀÌÅÍ °ü¸®¸¦ À§ÇÑ Vuex
__8.1 Vuex ÆÐÅ°Áö ¼³Ä¡Çϱâ
__8.2 Getters
__8.3 Mutations
__8.4 Actions
__8.5 mapState, mapGetters, mapMutations, mapActions
__8.6 Mutations¿Í ActionsÀÇ Â÷ÀÌÁ¡
9Àå. MEVN(MongoDB, Express, Vue, Node.js) ±â¹Ý RESTful ¼ºñ½º
__9.1 REST Á¤ÀÇ ¹× °³³ä ÀÌÇØÇϱâ
________RESTÀÇ Á¤ÀÇ
________RESTÀÇ Á¦¾à Á¶°Ç
________RESTful À¥¼ºñ½º
__9.2 Äݹé, promise ÀÌÇØÇϱâ
____9.2.1 µ¿±â¿Í ºñµ¿±â
____9.2.2 ÄݹéÇÔ¼ö, callback Hell
____9.2.3 Promise
________promise »ý¼ºÇϱâ
________promise.then() ¸Þ¼µå
________promise.catch() ¸Þ¼µå
____9.2.4 Promise Chaining
____9.2.5 async/await¸¦ ÀÌ¿ëÇÑ ºñµ¿±â ó¸®
__9.3 Axios
____9.3.1 GET ¿äû
________ÀÀ´ä °´Ã¼
________¿¡·¯ °´Ã¼
____9.3.2 POST request
____9.3.3 PUT request
____9.3.4 DELETE request
__9.4 MongoDB
________´Ù¿î·Îµå ¹× ¼³Ä¡
____9.4.1 µ¥ÀÌÅÍ Ãß°¡(CREATE)
____9.4.2 µ¥ÀÌÅÍ °Ë»ö(READ)
____9.4.3 µ¥ÀÌÅÍ ¼öÁ¤(UPDATE)
____9.4.4 µ¥ÀÌÅÍ »èÁ¦(DELETE)
____9.4.5 save( ) ¸Þ¼µå·Î µ¥ÀÌÅÍ Ãß°¡, ¼öÁ¤
__9.5 Node.js MongoDB¸¦ ÀÌ¿ëÇÑ RESTful ¼ºñ½º ¸¸µé±â
____9.5.1 Express.js
____9.5.2 RESTful ¼ºñ½º ¼¹ö MongoDB
____9.5.3 PostmanÀ» ÀÌ¿ëÇÑ REST ¼ºñ½º Å×½ºÆÃ
________µ¥ÀÌÅÍ Ãß°¡(POST)
________µ¥ÀÌÅÍ °Ë»ö(GET)
________µ¥ÀÌÅÍ ¾÷µ¥ÀÌÆ®(PUT)
________µ¥ÀÌÅÍ »èÁ¦(DELETE)
__9.6 Vue.js RESTful ¼ºñ½º MongoDB
________µ¥ÀÌÅÍ Ãß°¡Çϱâ
________µ¥ÀÌÅÍ ¼öÁ¤Çϱâ
________µ¥ÀÌÅÍ »èÁ¦Çϱâ
¡Ú ÀÌ Ã¥¿¡¼ ´Ù·ç´Â ³»¿ë ¡Ú
¡á MEVN(MongoDB, Express, Vue, Node) ½ºÅà ±¸Çö
¡á ȯ°æ ¼³Á¤ºÎÅÍ ½ÃÀÛÇØ »ó¼¼ÇÑ ¼³¸í°ú ¿¹Á¦·Î Ãʺ¸ÀÚµµ ½±°Ô ÀÌÇØÇÒ ¼ö ÀÖ´Â ¼³¸í
¡á CDN°ú Vue/CLI¸¦ ÀÌ¿ëÇÑ ÇÁ·ÎÁ§Æ® »ý¼º°ú °³¹ß
¡á Materialize, Vuetify¸¦ ÀÌ¿ëÇÑ ¹ÝÀÀÇü ¾Û µðÀÚÀÎ
¡á Vue-router¸¦ ÀÌ¿ëÇÑ À¥»çÀÌÆ® Ž»ö ¹æ¹ý°ú Á¢±Ù Á¦¾î
¡á Vuex¸¦ ÀÌ¿ëÇÑ È¿À²ÀûÀÎ µ¥ÀÌÅÍ °ü¸®
¡á REST, RESTful °³³ä°ú ½ÇÁ¦ ±¸Çö
¡á Mongoose¸¦ ÀÌ¿ëÇÑ RESTful ¼¹ö¿Í M...
´õº¸±â