±¹³»µµ¼
Àü°øµµ¼/´ëÇб³Àç
°øÇаè¿
ÄÄÇ»ÅÍ°øÇÐ
Á¤°¡ |
30,000¿ø |
---|
27,000¿ø (10%ÇÒÀÎ)
1,500P (5%Àû¸³)
ÇÒÀÎÇýÅÃ | |
---|---|
Àû¸³ÇýÅà |
|
|
|
Ãß°¡ÇýÅÃ |
|
À̺¥Æ®/±âȹÀü
¿¬°üµµ¼
»óÇ°±Ç
ÀÌ»óÇ°ÀÇ ºÐ·ù
Ã¥¼Ò°³
ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·¹ÀÓ¿öÅ©ÀÎ React, Angular, Vue Áß Vue.js´Â °¡Àå Àαâ ÀÖ´Â ÇÁ·ÐÆ®¿£µå Github ÇÁ·ÎÁ§Æ®°¡ µÆ´Ù. ÀÌ Ã¥¿¡¼´Â Vue.js ÇнÀ¿¡ ÇÊ¿äÇÑ ±âº»ÀûÀΠȯ°æ ¼³Á¤ºÎÅÍ ºä ÀνºÅϽº, ÄÄÆ÷³ÍÆ®, Vue-router¸¦ ÀÌ¿ëÇÑ ¶ó¿ìÆÃ, vuex¸¦ È°¿ëÇÑ È¿°úÀûÀÎ µ¥ÀÌÅÍ °ü¸®¸¦ ÀÚ¼¼ÇÑ ¼³¸í°ú ¿¹Á¦·Î ½±°Ô ÀÌÇØÇÒ ¼ö ÀÖ°Ô ±¸¼ºÇß´Ù. ¶ÇÇÑ ¸¶Áö¸· Àå¿¡¼ °¢±¤¹Þ´Â Ç®½ºÅà Áß ÇϳªÀÎ MEVN(MongoDB, Express, Vue, Node)ÀÇ ÀÌ·Ð ¼³¸í°ú ÇÔ²² ¿¹Á¦¸¦ µû¶ó ÇÏ¸é¼ Å¬¶óÀ̾ðÆ®(Vue) - ¼¹ö´Ü(Node, Express, MongoDB)ÀÌ ¾î¶»°Ô µ¿ÀÛÇÏ´ÂÁö ÀüüÀûÀ¸·Î ÀÌÇØÇÒ ¼ö ÀÖ°Ô ±¸¼ºÇß´Ù.
ÃâÆÇ»ç ¼Æò
¡Ú ÀÌ Ã¥¿¡¼ ´Ù·ç´Â ³»¿ë ¡Ú
¡á MEVN(MongoDB, Express, Vue, Node) ½ºÅà ±¸Çö
¡á ȯ°æ ¼³Á¤ºÎÅÍ ½ÃÀÛÇØ »ó¼¼ÇÑ ¼³¸í°ú ¿¹Á¦·Î Ãʺ¸ÀÚµµ ½±°Ô ÀÌÇØÇÒ ¼ö ÀÖ´Â ¼³¸í
¡á CDN°ú Vue/CLI¸¦ ÀÌ¿ëÇÑ ÇÁ·ÎÁ§Æ® »ý¼º°ú °³¹ß
¡á Materialize, Vuetify¸¦ ÀÌ¿ëÇÑ ¹ÝÀÀÇü ¾Û µðÀÚÀÎ
¡á Vue-router¸¦ ÀÌ¿ëÇÑ À¥»çÀÌÆ® Ž»ö ¹æ¹ý°ú Á¢±Ù Á¦¾î
¡á Vuex¸¦ ÀÌ¿ëÇÑ È¿À²ÀûÀÎ µ¥ÀÌÅÍ °ü¸®
¡á REST, RESTful °³³ä°ú ½ÇÁ¦ ±¸Çö
¡á Mongoose¸¦ ÀÌ¿ëÇÑ RESTful ¼¹ö¿Í MongoDB ¿¬µ¿ ¹æ¹ý
¡á axios¸¦ ÀÌ¿ëÇÑ RESTful ¼¹ö, MongoDB¿Í Vue.js Ŭ¶óÀ̾ðÆ® ¿¬µ¿
¡Ú ÀÌ Ã¥ÀÇ ´ë»ó µ¶ÀÚ ¡Ú
¡á ÃÊ/Áß±Þ Javascript °³¹ßÀÚ
¡á ÇÁ·ÐÆ®¿£µå °³¹ßÀÚ¸¦ »ý°¢ÇÏ´Â À¥ÆÛºí¸®¼Å
¡á Vue.js¸¦ ¹è¿ì°í ½ÍÀº ÇÁ·ÐÆ®¿£µå ÀÔ¹®ÀÚ
¡á ±âº»ÀûÀÎ HTML, CSS, Javascript °æÇèÀÚ
¡á RESTful ¼¹ö¿Í MongoDB¿¡ ´ëÇÑ ÀÌÇØ°¡ ÇÊ¿äÇÑ ÃÊ/Áß±Þ °³¹ßÀÚ
¡Ú ÀÌ Ã¥ÀÇ ±¸¼º ¡Ú
1Àå. Vue.js ½ÃÀÛÇϱâ
Vue.js¸¦ ÇнÀÇÏ´Â µ¥ ÇÊ¿äÇÑ Node.js ¼³Ä¡¸¦ ½ÃÀÛÀ¸·Î Vue.js ÇнÀ ½Ã ÇÊ¿äÇÑ ±âº»ÀûÀÎ npm ¸í·É¾î¸¦ ¼Ò°³ÇÑ´Ù. Vue.js ÇÁ·ÎÁ§Æ®¸¦ »ý¼ºÇÏ´Â ¹æ¹ýÀ» ¼Ò°³ÇÏ°í ±¸Ã¼ÀûÀ¸·Î vue/cli¸¦ ÀÌ¿ëÇÑ ¹æ¹ýÀ» ¼³¸íÇÑ´Ù. °³¹ß Åø·Î ¿äÁò °¢±¤¹Þ°í ÀÖ´Â Visual Studio Code ¼³Ä¡ ¹× ±â´ÉÀ» ¼³¸íÇÏ°í Vue.js °³¹ßÀÚ µµ±¸ÀÎ devtools¿¡ ´ëÇؼ ¼Ò°³ÇÏ¸ç ³¡À¸·Î ÀÚ¹Ù½ºÅ©¸³Æ® ES6¿¡ »õ·Ó°Ô µîÀåÇÏ°í ÀÌ Ã¥¿¡¼µµ ÀÚÁÖ »ç¿ëµÇ´Â È»ìÇ¥ ÇÔ¼ö(=>)¸¦ ¼³¸íÇÑ´Ù.
2Àå. Vue.js ¾ÖÇø®ÄÉÀ̼ÇÀÇ ½ÃÀÛ - ºä ÀνºÅϽº
Vue.js ¾ÖÇø®ÄÉÀ̼ÇÀÇ ½ÃÀÛÁ¡ÀÎ ºä ÀνºÅϽº(Vue instance)¸¦ Á¤ÀÇÇÏ°í Áö¿øÇÏ´Â ´Ù¾çÇÑ ¼Ó¼ºÀ» ÀÌÇØÇÏ°í ³ª¾Æ°¡ À̸¦ ÀÀ¿ëÇÒ ¼ö ÀÖµµ·Ï ¼Ò°³ÇÑ´Ù. method ÇÁ·ÎÆÛƼ¸¦ ÀÌ¿ëÇØ ÀüÅëÀûÀÎ À̺¥Æ® ó¸® ¹æ¹ý°ú computed, watch ÇÁ·ÎÆÛƼ¸¦ ÀÌ¿ëÇØ data °´Ã¼ ³» µ¥ÀÌÅ͸¦ ÀúÀåÇÏ´Â ÇÁ·ÎÆÛƼ¿¡ º¯È°¡ ¹ß»ýÇßÀ» ¶§¸¶´Ù º¯È¸¦ ó¸®ÇÏ´Â ¹æ¹ýÀ» ¼³¸íÇÑ´Ù. props ÇÁ·ÎÆÛƼ¸¦ ÀÌ¿ëÇØ ºÎ¸ð ÄÄÆ÷³ÍÆ®(ºä ÀνºÅϽº)·ÎºÎÅÍ ÀÚ³à ÄÄÆ÷³ÍÆ®¿¡°Ô µ¥ÀÌÅ͸¦ Àü´ÞÇÏ´Â ¹æ¹ý°ú ºä ÀνºÅϽºÀÇ »ýÁ¸ Áֱ⿡ ´ëÇؼ ¼³¸íÇÑ´Ù.
3Àå. ¿¤¸®¸ÕÆ®¿¡ ±â´ÉÀ» µ¡ºÙÀÌ´Â µð·ºÆ¼ºê
µð·ºÆ¼ºê(Directives)´Â p, div °°Àº HTML ¿¤¸®¸ÕÆ®¿¡ ºÙ¿© ÇØ´ç ¿¤¸®¸ÕÆ®¿¡ ¹º°¡¸¦ ÇÒ ¼ö ÀÖµµ·Ï Á¤ÀÇÇÏ´Â ÀÏÁ¾ÀÇ ¸í·ÉÀ¸·Î v-prefix ÇüÅ·Π¿¤¸®¸ÕÆ®ÀÇ ½ÃÀÛű׿¡ ¼Ó¼ºÀÇ ÇüÅ·ΠÃß°¡ÇØ »ç¿ëÇÑ´Ù. v-if, v-for °°Àº µð·ºÆ¼ºê¸¦ ÀÌ¿ëÇÑ È帧Á¦¾î¸¦ ¼Ò°³ÇÑ´Ù. v-model µð·ºÆ¼ºê¸¦ ÀÌ¿ëÇÑ ¾ç¹æÇâ µ¥ÀÌÅÍ ¹ÙÀεù¿¡ ´ëÇؼ ¼Ò°³ÇÏ¸ç ¸¶Áö¸·À¸·Î v-on µð·ºÆ¼ºê¸¦ ÀÌ¿ëÇÑ À̺¥Æ® 󸮿¡ ´ëÇØ ¼³¸íÇÑ´Ù.
4Àå. Àç»ç¿ëÀÌ °¡´ÉÇÑ ·¹°í(Lego)¿Í °°Àº ÄÄÆ÷³ÍÆ®
Vue.jsÀÇ ¾ÖÇø®ÄÉÀ̼ÇÀ» ±â´ÉÀûÀÌ°í È¿°úÀûÀ¸·Î °ü¸®ÇÏ´Â µ¥ ÇÙ½ÉÀû ¿ªÇÒÀ» ÇÏ´Â ÄÄÆ÷³ÍÆ®(Component)¿¡ ´ëÇØ CDN, vue/cli¸¦ ÀÌ¿ëÇØ ¾î¶»°Ô ÄÄÆ÷³ÍÆ®¸¦ Á¤ÀÇ, µî·ÏÇØ »ç¿ëÇÒ ¼ö ÀÖ´ÂÁö ¼Ò°³ÇÑ´Ù. µ¶¸³ÀûÀ¸·Î µ¿ÀÛÇÏ´Â ÄÄÆ÷³ÍÆ® °£ÀÇ µ¥ÀÌÅÍ Àü´ÞÀ» À§ÇØ props, $emit, eventbus¸¦ ÀÌ¿ëÇÏ´Â ¹æ¹ýÀ» ¼³¸íÇÑ´Ù. Á» ´õ º¹ÀâÇÑ µ¥ÀÌÅ͵éÀ» Àü´ÞÇÏ´Â µ¥ ¿ëÀÌÇÑ ½½·Ô(slot) °³³äÀ» ¼Ò°³ÇÏ°í vue.js 2.6 ¹öÀü¿¡¼ »õ·Ó°Ô µîÀåÇÑ v-slot±îÁö ¼³¸íÇÑ´Ù.
5Àå. ´Ù¾çÇÑ ÀåÄ¡µé¿¡ ´ëÇÑ »çÀÌÆ® µðÀÚÀο¡ ÀûÇÕÇÑ Materialize, Vuetify
½º¸¶Æ®Æù, ÅÂºí¸´, ·¦Åé, PC µî ´Ù¾çÇÑ ÀåÄ¡¿¡¼ µ¿ÀÛÇÏ´Â ÆäÀÌÁö¸¦ µðÀÚÀÎÇÏ´Â ÀÏÀº ½¬¿î ÀÏÀÌ ¾Æ´Ï´Ù. ÀÌ·¯ÇÑ ÀÛ¾÷À» ¼ö¿ùÇÏ°Ô ÇÒ ¼ö ÀÖµµ·Ï Google Material Design¿¡ ±â¹ÝÀ» µÐ Materialize, Vuetify ¶óÀ̺귯¸®¸¦ ¼Ò°³ÇÑ´Ù. ÀÌ µÎ ¶óÀ̺귯¸®¸¦ ÀÌ¿ëÇØ Grid ½Ã½ºÅÛÀ» ÀÌÇØÇÏ°í È°¿ëÇÒ ¼ö ÀÖÀ¸¸ç À̹ÌÁö, ÅؽºÆ®°¡ Æ÷ÇÔµÈ card ÇüÅÂÀÇ ÄÜÅÙÃ÷¸¦ Ãß°¡ÇÏ´Â ¹æ¹ý, slider ÄÄÆ÷³ÍÆ®¸¦ ÀÌ¿ëÇÑ À̹ÌÁö ½½¶óÀÌ´õ¸¦ ¸¸µé°í Navbar ÄÄÆ÷³ÍÆ®¸¦ ÀÌ¿ëÇØ »çÀÌÆ®¸¦ Ž»öÇÏ´Â ¹æ¹ý µîÀ» ¼³¸íÇÑ´Ù. ¸¶Áö¸·À¸·Î vue.js¿Í ±¸±Û Ŭ¶ó¿ìµå(Google Cloud) µ¥ÀÌÅͺ£À̽ºÀÎ Firestore¸¦ ÀÌ¿ëÇØ ÇÁ·ÐÆ®´Â vue.js, ¹é¿£µå´Â Firestore·Î ±¸¼ºµÇ´Â ½Ç½Ã°£ äÆà ÇÁ·Î±×·¥À» ¸¸µé¾îº½À¸·Î½á ¾Õ¼ ÇнÀÇÑ Materialize¿¡ ½ÇÁ¦·Î Àû¿ëÇغ»´Ù.
6Àå. »ç¿ëÀڷκÎÅÍ µ¥ÀÌÅÍ ÀÔ·Â ¹× ¼¹ö·Î µ¥ÀÌÅÍ Àü´ÞÀ» À§ÇÑ Forms
form°ú °ü·ÃµÈ HTML ¿¤¸®¸ÕÆ®¸¦ ¼Ò°³ÇÏ°í ¿¤¸®¸ÕÆ®¿Í ºä ÀνºÅϽºÀÇ data °´Ã¼ ³»¿¡ Á¤ÀǵǴ µ¥ÀÌÅÍµé °£ÀÇ ¾ç¹æÇâ µ¥ÀÌÅÍ ¹ÙÀεùÀÌ v-model µð·ºÆ¼ºê¸¦ ÅëÇØ ¾î¶»°Ô ÀÌ·ïÁö´ÂÁö ¼³¸íÇÑ´Ù. ¼¹ö·Î Àü¼ÛÇϱâ Àü¿¡ ÀÔ·ÂµÈ µ¥ÀÌÅÍ°¡ Á¤È®ÇÑÁö È®ÀÎÇÏ´Â ÀÛ¾÷ÀÎ À¯È¿¼º °Ë»ç°úÁ¤À» ¼Ò°³ÇÏ°í À¯È¿¼º °Ë»ç¸¦ À§ÇØ vuetify¸¦ ÀÌ¿ëÇÏ´Â ¹æ¹ýÀ» ¼³¸íÇÑ´Ù. node.js¸¦ ÀÌ¿ëÇØ ¼¹ö¸¦ ¸¸µé¾î ½ÇÁ¦ ¼¹ö·Î Àü¼ÛµÇ´Â µ¥ÀÌÅÍ¿¡ ´ëÇÑ À¯È¿¼º °Ë»ç¸¦ ¼³¸íÇÑ´Ù.
7Àå. À¥»çÀÌÆ® Ž»öÀ» À§ÇÑ Routing
¶ó¿ìÆÃÀº »ç¿ëÀÚ°¡ ¿øÇÏ´Â Á¤º¸³ª ¼ºñ½º¸¦ ½±°Ô Ž»öÇÒ ¼ö ÀÖµµ·Ï À¥»çÀÌÆ® ³»ÀÇ À¥ÆäÀÌÁöµé °£ÀÇ À̵¿À» Á¤ÀÇÇÑ´Ù. ÀÌ Àå¿¡¼´Â vue-router¸¦ ÀÌ¿ëÇØ ÇÁ·ÎÁ§Æ®¿¡ ±â´ÉÀ» Ãß°¡ÇÏ´Â ¹æ¹ýÀ» ¼Ò°³ÇÑ´Ù. nested routes¸¦ ÀÌ¿ëÇØ Áßø ¶ó¿ìÆà °æ·Î, named routes, named views¸¦ ÅëÇØ ´Ù¼öÀÇ ºä¸¦ ÇϳªÀÇ ÆäÀÌÁö¿¡ °ü¸®ÇÏ´Â ¹æ¹ýÀ» ¾Ë ¼ö ÀÖÀ¸¸ç navigation guard¸¦ ÀÌ¿ëÇØ ÆäÀÌÁö¿¡ ´ëÇÑ Á¢±Ù Á¦¾î¸¦ ¼³¸íÇÑ´Ù.
8Àå. È¿À²ÀûÀÎ µ¥ÀÌÅÍ °ü¸®¸¦ À§ÇÑ Vuex
Vue.js ¾ÖÇø®ÄÉÀ̼ǿ¡¼ ÇÑ °÷¿¡ µ¥ÀÌÅÍ ÀúÀå¼Ò(store)¸¦ µÎ°í ¾ÖÇø®ÄÉÀÌ¼Ç ³»ÀÇ ¸ðµç ÄÄÆ÷³ÍÆ®°¡ ÀÌ¿ëÇÒ ¼ö ÀÖ°Ô È¿À²ÀûÀ¸·Î °ü¸®ÇÏ´Â vuex¸¦ ¼Ò°³ÇÑ´Ù. »óÅÂ(state)¸¦ ÀÌ¿ëÇØ µ¥ÀÌÅ͸¦ ÀúÀåÇÏ°í ÀÌ »óÅ¿¡ ´ëÇÑ Á÷Á¢ÀûÀÎ º¯°æ°ú ÃßÀûÀÌ °¡´ÉÇÑ mutation, »óÅ·κÎÅÍ µ¥ÀÌÅ͸¦ °¡Á®¿À´Â ÇÔ¼öÀÎ getters, mutationÀ» Ä¿¹Ô(commit)ÇØ °£Á¢ÀûÀ¸·Î »óŸ¦ ¼öÁ¤ÇÏ°í ºñµ¿±âÀûÀ¸·Î µ¿ÀÛÇÏ´Â ActionÀ» ¼³¸íÇÑ´Ù.
9Àå. MEVN ±â¹Ý RESTful ¼ºñ½º
2000³â ·ÎÀÌ Çʵù(Roy Fielding)ÀÌ ¹Ú»çÇÐÀ§ ³í¹®¿¡ REST¸¦ ¼Ò°³ÇÑ ÀÌÈÄ ¸ð¹ÙÀÏ È¯°æÀº °³¹ß ȯ°æÀÇ ´ë¼¼°¡ µÆ´Ù. ¿äÁò °³¹ßÀÚ°¡ ¾Ë¾Æ¾ß ÇÒ REST °³³ä, RESTful ¼ºñ½º¿¡ ´ëÇØ ¼³¸íÇÑ´Ù. RESTful ¼ºñ½º¿ÍÀÇ ¿¬µ¿À» À§ÇØ ¾Ë¾Æ¾ß ÇÒ °³³äÀÎ callback, promise, async/await °°Àº ºñµ¿±âó¸® ¹æ¹ýÀ» ¼³¸íÇÏ°í NoSQLÀÇ ´ë¸í»çÀÎ MongoDBÀÇ ÀÌÇØ¿Í ±âº»ÀûÀÎ CRUD ÀÛ¾÷À» ¼³¸íÇÑ´Ù. ÀÌ·¯ÇÑ ÀÌÇظ¦ ¹ÙÅÁÀ¸·Î Node.js¸¦ ÀÌ¿ëÇØ RESTful ¼ºñ½º¸¦ ¸¸µé°í MongoDB¿Í ¿¬µ¿ÇÒ ¼ö ÀÖ´Ù. ¸¶Áö¸·À¸·Î Vue.js¸¦ ÀÌ¿ëÇØ ¸¸µé¾îÁø RESTful ¼ºñ½º·Î MongoDB¿¡ CRUD¸¦ ÀÛ¾÷ÇÏ´Â ¹æ¹ýÀ» ¼³¸íÇÑ´Ù.
̵̧ȍ
°ÀǸ¦ ÇÒ ¶§¸¶´Ù ÇнÀÀڵ鿡°Ô Á¾Á¾ ¡°³ª´Â ´ÜÁö ¿©·¯ºÐº¸´Ù Á¶±Ý ¸ÕÀú ¾Ë°Ô µÈ °ÍÀ» Àü´ÞÇÏ´Â »ç¶÷À̸ç, ÀÌ °ÀÇ°¡ ÀÚ½ÅÀÌ ³ª¾Æ°¥ ¹æÇâÀ» Á¤ÇÏ´Â µ¥ Á¶±ÝÀÌ¶óµµ µµ¿òÀÌ µÇ±â¸¦ ¹Ù¶õ´Ù¡±¶ó°í ¸»ÇÏ°ï ÇÑ´Ù. ¿äÁò°ú °°ÀÌ »õ·Î¿î ±â¼úÀÌ ÀÚÁÖ µîÀåÇÏ°í ÀÎÅÍÆäÀ̽º°¡ º¯ÇÏ´Â »óȲ¿¡¼ À̸¦ ÀÌÇØÇÏ°í °ÀǸ¦ Çϰųª Ã¥À» ¾²´Â ÀÏÀº ½¬¿î ÀÏÀÌ ¾Æ´Ñ °Í °°´Ù. ´ëÇ¥ÀûÀÎ ¿¹·Î ÀΰøÁö´É, Ŭ¶ó¿ìµå¸¦ µé ¼ö ÀÖÀ¸¸ç ÀÚ¹Ù½ºÅ©¸³Æ® °ü·ÃµÈ ºÐ¾ßµµ ±×·¸´Ù´Ù. ¸ðµÎ ¼ÒÀ§ ¸»ÇÏ´Â ÀÎÀû, ¹°Àû ÀÚ¿øÀÌ ÁýÁߵǴ ºÐ¾ß´Ù.
ÀÚ¹Ù½ºÅ©¸³Æ® ºÐ¾ß¸¦ ¿¹·Î µé¸é Çѵ¿¾È ¾Æ¸¶Á¸¿¡¼ ÀÚ¹Ù½ºÅ©¸³Æ®¿Í °ü·ÃµÈ ¿©·¯ Ã¥À» ÁÖ¹®ÇØ º¸°ï ÇßÁö¸¸ ¿äÁòÀº ´õ ÀÌ»ó ¾Æ¸¶Á¸¿¡¼ Ã¥À» ±¸¸ÅÇÏÁö ¾Ê´Â´Ù. ¿Ö³ÄÇÏ¸é ´ëºÎºÐÀÇ Ã¥µéÀÌ ÀúÀÚÀÇ Á¤¼ºÀÌ °¡µæ ´ã±ä, ½ÉÇ÷À» ±â¿ïÀÎ ³»¿ëÀ̾úÁö¸¸, Áß¿äÇÑ °ÍÀº Ã¥À» ±¸¸ÅÇؼ Àд ½ÃÁ¡¿¡ ¼ö·ÏµÈ ¿¹Á¦°¡ µ¿ÀÛÇÏÁö ¾Ê°Å³ª ±× »çÀÌ º¯°æµÈ API¸¦ µû·Î ÇнÀÇؼ ÀÌÇØÇØ¾ß ÇÏ´Â Ãß°¡ÀûÀÎ ³ë·ÂÀÌ ÇÊ¿äÇ߱⠶§¹®ÀÌ´Ù.
ÀÌ Ã¥Àº 2016³â ´ëÇб³¸¦ ¶°³ª ¿ìÁŰ½ºÅº¿¡¼ KOICA ºÀ»ç´Ü¿øÀ¸·Î Çлýµé¿¡°Ô ÇÁ·Î±×·¡¹ÖÀ» °¡¸£Ä¡´ø 2017³âºÎÅÍ Á¶±Ý¾¿ ÁغñÇؼ ³ª¿Â °á°ú¹°ÀÌ´Ù. ÀÌ¹Ì ¿©·¯ ±ÇÀÇ IT Ã¥À» ½èÁö¸¸ ¸Å¹ø Ã¥À» ¾²´Â µ¿¾È ¼ö¹é ¹ø ÀÌ»ó ÀڽŰúÀÇ ½Î¿òÀ» ÇØ¾ß Çß°í ¾²´Â µ¿¾È ¹öÀüÀÌ º¯°æµÅ ´Ù½Ã ¼öÁ¤ÇÏ´Â ÀÛ¾÷À» ¹Ýº¹Çß´Ù. ÀÌ Ã¥µµ ¸ðµç ¿¹Á¦°¡ µ¿ÀÛÇϵµ·Ï ¸¶¹«¸®ÇÏ´Â ½ÃÁ¡¿¡¼ ´Ù½Ã Å×½ºÆ®¸¦ Çß´Ù. °³ÀÎÀûÀ¸·Î ¸ðµç µ¶ÀÚ¸¦ ¸¸Á·½Ãų ¼ö Àִ åÀº ÀÌ ¼¼»ó¿¡ ¾ø´Ù´Â °ÍÀÌ ºÒº¯ÀÇ Áø¸®¶ó°í »ý°¢ÇÑ´Ù.
´Ù¸¸ ÀÌ Ã¥À» ÅëÇØ Vue.js¸¦ ÇнÀÇÏ´Â µ¶ÀÚ¿¡°Ô ¡°Ã¥¿¡ ÅõÀÚÇÑ ±Ý¾×°ú ½Ã°£µéÀÌ Á¶±ÝÀº Àǹ̰¡ ÀÖ¾ú´Ù¡± Á¤µµÀÇ ¾ê±â¸¦ µéÀ» ¼ö ÀÖ¾úÀ¸¸é ÁÁ°Ú´Ù.
ÀÌ Ã¥À» ÇнÀÇÒ ¶§ HTML, CSS, ÀÚ¹Ù½ºÅ©¸³Æ®¿¡ ´ëÇÑ ±âº»ÀûÀÎ ÀÌÇØ°¡ ÇÊ¿äÇÏ´Ù¸é ³» ºí·Î±×¿¡¼ 2013³â 8¿ù¿¡ °ø°³ÇÑ HTML, CSS, ÀÚ¹Ù½ºÅ©¸³Æ® °ü·Ã Ã¥ ÇÑ ±Ç ºÐ·®ÀÇ ÀÚ·á(https://fromyou.tistory.com/581)¸¦ Âü°íÇÏ±æ ¹Ù¶õ´Ù.
°Ã¢ÈÆ(¸¶ÀÌÅ©·Î¼ÒÇÁÆ® AI MVP)
¿ÃÇØ ÇÁ·ÐÆ®¿£µå¿¡¼ ¹é¿£µå±îÁö ¿©¼º °³¹ßÀÚ¸¦ ¾ç¼ºÇÏ´Â °ÀǸ¦ ÁøÇàÇÏ¸é¼ ¼ö¾÷¿¡¼ È°¿ëÇϱâ À§ÇÑ Vue.js Âü°íµµ¼¿¡ ´ëÇÑ ¸ñ¸¶¸§À» ´À³¢´ø Â÷¿¡ ÁöÀÎÀ» ÅëÇØ ÀÌ Ã¥À» Á¢ÇÏ°Ô µÆ´Ù. ÀÌ Ã¥Àº Vue.js ÁÖ¿ä µð·ºÆ¼ºê ¹®¹ýºÎÅÍ SPA °³¹ß¿¡ ÇÊ¿äÇÑ °¢Á¾ È®Àå Ç÷¯±×ÀÎ È°¿ë ±â¼ú, ±×¸®°í ¸ù°í DB ±â¹ÝÀÇ ³ëµå ¹é¿£µå OPEN API °³¹ß ±â¼ú±îÁö ´Ù·ç°í ÀÖ´Ù. Vue.js ±â¹ÝÀÇ ÇÁ·ÐÆ®¿£µå ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ßÀ» ¸ñÇ¥·Î ÇÏ´Â ÀÔ¹®ÀÚ»Ó ¾Æ´Ï¶ó ³ëµå ±â¹Ý Ç®½ºÅà °³¹ßÀڵ鿡°Ôµµ °·ÂÈ÷ ±ÇÀåÇÏ´Â ÀÚ¹Ù½ºÅ©¸³Æ® Ç®½ºÅà °³¹ßÀÚ°¡ µÇ±â À§ÇÑ Çʼö Âü°íµµ¼´Ù.
(¼¿ï½Ã ³²ºÎ¿©¼º¹ßÀü¼¾ÅÍ À¥ °³¹ß Àü¹®°»ç)
±èµµ±Õ(Microsoft MVP, MCT)
¸¶ÀÌÅ©·Î¼ÒÇÁÆ® MVP°¡ µÇ¸é¼ Ä£ºÐÀ» ¸ÎÀº ¿øö¿¬ ´ÔÀº ¿À·§µ¿¾È ¼º°øȸ´ëÇб³¿¡¼ C#ºÎÅÍ À¥ ÇÁ·Î±×·¡¹Ö, µ¥ÀÌÅͺ£À̽º±îÁö ÇÁ·Î±×·¡¹Ö Àü¹ÝÀÇ ÅºÅºÇÑ ±âº»±â¸¦ Çлýµé¿¡°Ô Àß °¡¸£Ä¡±â·Î ¼Ò¹®³ ¼±»ý´ÔÀ̾ú´Ù. ÀÌ¹Ì ¸î ±ÇÀÇ ÇÁ·Î±×·¡¹Ö Ã¥À» ÁýÇÊÇÑ ¿¬·û ÀÖ´Â ÀúÀÚÀ̸ç, °°Àº µ¿³× ÁÖ¹ÎÀ̱⵵ ÇÏ´Ù. ¸î ´Þ Àü µ¿³× Ä«Æä¿¡¼ Ä¿ÇÇ ÇÑ ÀÜÀ» ¾Õ¿¡ ³õ°í ³²Àڵ鸸ÀÇ ¼ö´Ù¸¦ ÇÏ´ø Áß »õ·Î¿î Ã¥ÀÇ ÁýÇÊ ¾ÆÀ̵ð¾î¸¦ µè°Ô µÆ´Ù.
ÀÌ¹Ì ½ÃÁß¿¡ Á¦¹ý ¸¹Àº Vue Ã¥ÀÌ ³ª¿Í ÀÖ´Â »óÅÂÀÌÁö¸¸ ÇÁ·Î±×·¡¹Ö¿¡ ÀÔ¹®ÇÏ´Â ÇлýµéÀ» ¿À·§µ¿¾È °¡¸£ÃÄ¿Â °¨°¢À¸·Î ¼³°èÇÑ Ã¥ÀÇ °ñ°ÝÀ» µè°í ³ª´Ï, ³»¿ëÀ» »¡¸® º¸°í ½Í¾îÁ³´Ù. ±×·¡¼ ÀÌ Ã¥ÀÇ ÁýÇÊ Ãʹݿ¡ Ã¥ ³»¿ëÀ» º¼ ¼ö ÀÖ´Â ±âȸ¸¦ ¾ò¾ú°í, Ã¥À» ½á ³»·Á°£ ¹æ½ÄÀÌ ¸¶À½¿¡ ¿Í ´ê¾Ò´Ù. ÇÁ·ÐÆ®¿£µå ±â¼úÀÎ Vue¸¦ ´Ù·ç´Â Ã¥À̱ä ÇÏÁö¸¸, ¹é¿£µå ±â¼úÀ» Á¢¸ñÇÏÁö ¾Ê°í¼´Â VueÀÇ È¿°úÀûÀÎ ¼³¸í°ú ½Ç¹«¿¡¼ ÇÊ¿äÇÑ »ç¿ë¹ýÀ» ÀÍÈ÷±â¿¡ ÇÑ°è°¡ ÀÖ´Ù°í »ý°¢Çß´Ù.
ÀÌ Ã¥Àº Vue¸¦ ÇöÀå°¨ ÀÖ°Ô ¹è¿ï ¼ö ÀÖµµ·Ï MongoDB¿Í Node, Express¸¦ µîÀå½ÃÄ×Áö¸¸, ÀÌµé ±â¼ú¿¡ ´ëÇÑ ¹è°æÁö½ÄÀÌ ¾ø¾îµµ Vue¸¦ ÇнÀÇÏ´Â µ¥ °É¸²µ¹ÀÌ µÇÁö ¾Êµµ·Ï Àß ±¸¼ºÇß´Ù. ÃÖ±ÙÀÇ ÇÁ·ÐÆ®¿£µå °³¹ß ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·¹ÀÓ¿öÅ©·Î °¡Àå ÇÖÇÑ Vue¸¦ ÇнÀÀÚÀÇ ÀÔÀå¿¡¼ Àß Ç®¾î³½ ÀÌ Ã¥ ÇÑ ±ÇÀÌ Ã³À½ Vue¿¡ ÀÔ¹®ÇÏ´Â °³¹ßÀÚ¿¡°Ô ½Ã¿øÇÑ »ý¼ö°¡ µÅÁÙ °Í °°´Ù. ÃÖ±Ù <Ŭ¶ó¿ìµå ±â¹Ý À¥ °³¹ß> °úÁ¤À» ÁøÇàÇÏ¸é¼ ±³Àç·Î ¾µ Vue Ã¥À» °í¸£±â À§ÇØ ½ÃÁß¿¡ ³ª¿Â Ã¥µéÀ» »ìÆìºÃÁö¸¸, ¿øö¿¬ ´ÔÀÇ Ã¥À» Á¢ÇÏ°í ³ª¼ ±³Àç·Î ¼±ÅÃÇϴ ŸÀ̹ÖÀÌ ¸ÂÁö ¾ÊÀº °Í¿¡ ¾Æ½¬¿òÀÌ ¸¹ÀÌ ³²¾Ò´Ù.
°ð ÀÌ Ã¥À» ÅëÇØ Vue¸¦ ½±°í ºü¸£°Ô ¹è¿ö Àß »ç¿ëÇÏ´Â µ¶ÀÚµéÀÌ ¸¹¾ÆÁö±æ ±â´ëÇÑ´Ù. Ã¥À» ÁýÇÊÇÏ´À¶ó ¿À·§µ¿¾È ¿Á¤À» ½ñÀº ¿øö¿¬ ´Ô²²µµ °¨»ç¸¦ ÀüÇÑ´Ù.
ÀåÇü¿í(LINE, DevOps °³¹ßÀÚ)
Vue.js¿¡ °ü½ÉÀÌ ÀÖ´Â ÀÔ¹®ÀÚ°¡ Vue.js¿¡ ½±°í ÆíÇÏ°Ô Á¢±ÙÇÒ ¼ö ÀÖµµ·Ï Ç®¾î³½ Ã¥ÀÌ´Ù. ±×¸®°í Vue.js»Ó ¾Æ´Ï¶ó ¿©·¯ ȯ°æÀÇ °³¹ß ¹æ¹ýÀ̳ª ºê¶ó¿ìÀú·Î µð¹ö±ëÀ» ÇÏ´Â ¹æ¹ý±îÁö ¼ö·ÏµÅ ÀÖ¾î ³õÄ¥ ¼öµµ ÀÖ´Â ±âÃʸ¦ Æ°Æ°ÇÏ°Ô ÇÒ ¼ö ÀÖ´Ù.
ÇÑ»óÈÆ(³Ø½¼ÄÚ¸®¾Æ)
ÀÌ¹Ì À¥ ÇÁ·Î±×·¡¸Ó·Î È°µ¿ÇÏ°í ÀÖ´Â À̵鿡°Ôµµ, ¶Ç Áغñ¸¦ ÇÏ°í ÀÖ´Â À̵鿡°Ôµµ Vue.js´Â ´õ ÀÌ»ó ³¸¼± À̸§ÀÌ ¾Æ´Ï´Ù. ±×·¡¼ ´ëºÎºÐÀÌ ¹è¿öº¸°í ½Í´Ù´Â »ý°¢À» ÇÏ°í ÀÖÁö¸¸ ¸·»ó ½ÃÀÛÇÏ·Á°í ÇÏ¸é ¾îµð¼ºÎÅÍ ¾î¶»°Ô ½ÃÀÛÇØ¾ß ÇÏ´ÂÁö ¸·¸·Çϱ⠸¶·ÃÀÌ´Ù. ÀÌ Ã¥Àº ±× ¸·¸·ÇÔÀ» ÇؼÒÇØÁÖ´Â °ÍÀº ¹°·ÐÀÌ°í Æí¾ÈÇÏ°í ¾Æ´ÁÇÏ°Ô ÇнÀÇÒ ¼ö ÀÖ´Â ±æ±îÁö Á¦½ÃÇØÁØ´Ù. Vue.jsÀÇ °³¹ß ȯ°æ ±¸¼ººÎÅÍ ¾ÖÇø®ÄÉÀÌ¼Ç ±¸Ãà±îÁö À̾îÁö´Â ÀÌ ±æÀº Áß°£Áß°£ Vue.js¿Í ¾î¿ì·¯Á® È°¿ëÇÒ ¼ö ÀÖ´Â ÇÁ·¹ÀÓ¿öÅ©³ª ¼ºñ½ºµé¿¡ ´ëÇÑ ¼³¸íµéµµ Æ÷ÇÔÇÏ°í ÀÖÀ¸¸ç, ¿À·£ ½Ã°£ °´Ü¿¡¼ ±³À°¿¡ Èû¾²°í ÀÖ´Â ÀúÀÚÀÇ Áø½ÉÀÌ ¹¯¾îÁ® ÀÖ´Ù. ÀÚ, ÀÌÁ¦ ÀÌ ±æÀ» ÇÔ²² °É¾îº¸ÀÚ.
¸ñÂ÷
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
________µ¥ÀÌÅÍ Ãß°¡Çϱâ
________µ¥ÀÌÅÍ ¼öÁ¤Çϱâ
________µ¥ÀÌÅÍ »èÁ¦Çϱâ
ÀúÀÚ¼Ò°³
»ý³â¿ùÀÏ | - |
---|
ÀüºÏ´ëÇб³ Á¤º¸Åë½Å ´ëÇпø ¼®»ç¸¦ ¹Þ¾ÒÀ¸¸ç KH Á¤º¸±³À°¿ø, ICU¿¡¼ °ÀÇÇß´Ù. Á¤º¸Ã³¸®±â»ç, Á÷¾÷´É·Â°³¹ßÈƷñ³»ç, ÁßµîÇб³(Á¤±³»ç) ÀÚ°ÝÁõÀ» °¡Á³°í ´ë¿ë·® ¹®ÀÚ, À½¼º, Æѽº ¸Þ½ÃÁö¸¦ Àü¼ÛÇÒ ¼ö ÀÖ´Â KT Å©·Î¼¦ ÇÁ·Î±×·¥À» °³¹ßÇß´Ù. Çѱ¹ÀüÀÚÅë½Å¿¬±¸¿ø(ETRI)°ú DSRC ÇÁ·ÎÁ§Æ®¸¦ ¼öÇàÇß´Ù.
ÁÖ°£·©Å·
´õº¸±â»óÇ°Á¤º¸Á¦°ø°í½Ã
À̺¥Æ® ±âȹÀü
Àü°øµµ¼/´ëÇб³Àç ºÐ¾ß¿¡¼ ¸¹Àº ȸ¿øÀÌ ±¸¸ÅÇÑ Ã¥
ÆǸÅÀÚÁ¤º¸
»óÈ£ |
(ÁÖ)±³º¸¹®°í |
---|---|
´ëÇ¥ÀÚ¸í |
¾Èº´Çö |
»ç¾÷ÀÚµî·Ï¹øÈ£ |
102-81-11670 |
¿¬¶ôó |
1544-1900 |
ÀüÀÚ¿ìÆíÁÖ¼Ò |
callcenter@kyobobook.co.kr |
Åë½ÅÆǸž÷½Å°í¹øÈ£ |
01-0653 |
¿µ¾÷¼ÒÀçÁö |
¼¿ïƯº°½Ã Á¾·Î±¸ Á¾·Î 1(Á¾·Î1°¡,±³º¸ºôµù) |
±³È¯/ȯºÒ
¹ÝÇ°/±³È¯ ¹æ¹ý |
¡®¸¶ÀÌÆäÀÌÁö > Ãë¼Ò/¹ÝÇ°/±³È¯/ȯºÒ¡¯ ¿¡¼ ½Åû ¶Ç´Â 1:1 ¹®ÀÇ °Ô½ÃÆÇ ¹× °í°´¼¾ÅÍ(1577-2555)¿¡¼ ½Åû °¡´É |
---|---|
¹ÝÇ°/±³È¯°¡´É ±â°£ |
º¯½É ¹ÝÇ°ÀÇ °æ¿ì Ãâ°í¿Ï·á ÈÄ 6ÀÏ(¿µ¾÷ÀÏ ±âÁØ) À̳»±îÁö¸¸ °¡´É |
¹ÝÇ°/±³È¯ ºñ¿ë |
º¯½É ȤÀº ±¸¸ÅÂø¿À·Î ÀÎÇÑ ¹ÝÇ°/±³È¯Àº ¹Ý¼Û·á °í°´ ºÎ´ã |
¹ÝÇ°/±³È¯ ºÒ°¡ »çÀ¯ |
·¼ÒºñÀÚÀÇ Ã¥ÀÓ ÀÖ´Â »çÀ¯·Î »óÇ° µîÀÌ ¼Õ½Ç ¶Ç´Â ÈÑ¼ÕµÈ °æ¿ì ·¼ÒºñÀÚÀÇ »ç¿ë, Æ÷Àå °³ºÀ¿¡ ÀÇÇØ »óÇ° µîÀÇ °¡Ä¡°¡ ÇöÀúÈ÷ °¨¼ÒÇÑ °æ¿ì ·º¹Á¦°¡ °¡´ÉÇÑ »óÇ° µîÀÇ Æ÷ÀåÀ» ÈѼÕÇÑ °æ¿ì ·½Ã°£ÀÇ °æ°ú¿¡ ÀÇÇØ ÀçÆǸŰ¡ °ï¶õÇÑ Á¤µµ·Î °¡Ä¡°¡ ÇöÀúÈ÷ °¨¼ÒÇÑ °æ¿ì ·ÀüÀÚ»ó°Å·¡ µî¿¡¼ÀÇ ¼ÒºñÀÚº¸È£¿¡ °üÇÑ ¹ý·üÀÌ Á¤ÇÏ´Â ¼ÒºñÀÚ Ã»¾àöȸ Á¦ÇÑ ³»¿ë¿¡ ÇØ´çµÇ´Â °æ¿ì |
»óÇ° Ç°Àý |
°ø±Þ»ç(ÃâÆÇ»ç) Àç°í »çÁ¤¿¡ ÀÇÇØ Ç°Àý/Áö¿¬µÉ ¼ö ÀÖÀ½ |
¼ÒºñÀÚ ÇÇÇغ¸»ó |
·»óÇ°ÀÇ ºÒ·®¿¡ ÀÇÇÑ ±³È¯, A/S, ȯºÒ, Ç°Áúº¸Áõ ¹× ÇÇÇغ¸»ó µî¿¡ °üÇÑ »çÇ×Àº¼ÒºñÀÚºÐÀïÇØ°á ±âÁØ (°øÁ¤°Å·¡À§¿øȸ °í½Ã)¿¡ ÁØÇÏ¿© ó¸®µÊ ·´ë±Ý ȯºÒ ¹× ȯºÒÁö¿¬¿¡ µû¸¥ ¹è»ó±Ý Áö±Þ Á¶°Ç, ÀýÂ÷ µîÀº ÀüÀÚ»ó°Å·¡ µî¿¡¼ÀǼҺñÀÚ º¸È£¿¡ °üÇÑ ¹ý·ü¿¡ µû¶ó ó¸®ÇÔ |
(ÁÖ)ÀÎÅÍÆÄÅ©Ä¿¸Ó½º´Â ȸ¿ø´ÔµéÀÇ ¾ÈÀü°Å·¡¸¦ À§ÇØ ±¸¸Å±Ý¾×, °áÁ¦¼ö´Ü¿¡ »ó°ü¾øÀÌ (ÁÖ)ÀÎÅÍÆÄÅ©Ä¿¸Ó½º¸¦ ÅëÇÑ ¸ðµç °Å·¡¿¡ ´ëÇÏ¿©
(ÁÖ)KGÀ̴Ͻýº°¡ Á¦°øÇÏ´Â ±¸¸Å¾ÈÀü¼ºñ½º¸¦ Àû¿ëÇÏ°í ÀÖ½À´Ï´Ù.
¹è¼Û¾È³»
±³º¸¹®°í »óÇ°Àº Åùè·Î ¹è¼ÛµÇ¸ç, Ãâ°í¿Ï·á 1~2Àϳ» »óÇ°À» ¹Þ¾Æ º¸½Ç ¼ö ÀÖ½À´Ï´Ù.
Ãâ°í°¡´É ½Ã°£ÀÌ ¼·Î ´Ù¸¥ »óÇ°À» ÇÔ²² ÁÖ¹®ÇÒ °æ¿ì Ãâ°í°¡´É ½Ã°£ÀÌ °¡Àå ±ä »óÇ°À» ±âÁØÀ¸·Î ¹è¼ÛµË´Ï´Ù.
±ººÎ´ë, ±³µµ¼Ò µî ƯÁ¤±â°üÀº ¿ìü±¹ Åù踸 ¹è¼Û°¡´ÉÇÕ´Ï´Ù.
¹è¼Ûºñ´Â ¾÷ü ¹è¼Ûºñ Á¤Ã¥¿¡ µû¸¨´Ï´Ù.