|
|
|
¿ø½ÜÀÇ Vue.js Äü½ºÅ¸Æ® : Vue.js 3.x ºü¸£°Ô ¹è¿ö¼ ¹Ù¸£°Ô Àû¿ëÇÏ´Â
|
|
|
¿øÇü¼·
¤Ó
½ÜÁî
|
|
|
|
- Á¦ÈÞ¸ô ÁÖ¹® ½Ã °í°´º¸»ó, ÀϺΠÀ̺¥Æ® Âü¿© ¹× ÁõÁ¤Ç° ÁõÁ¤, ÇÏ·ç/´çÀÏ ¹è¼Û¿¡¼ Á¦¿ÜµÇ¹Ç·Î Âü°í ¹Ù¶ø´Ï´Ù.
-
-
-
½ÇÀü ¿¹Á¦·Î ¿Ï¼ºÇÑ Vue.jsÀÇ ¸ðµç °Í Composition API ±â¹Ý ¼³¸í
ÀÌ Ã¥Àº ¹Ýµå½Ã ¾Ë¾Æ¾ß ÇÒ ES6 ¹®¹ý°ú Vue.js °³³äÀ» ½ÃÀÛÀ¸·Î ´Ù¾çÇÑ ¿¹Á¦¸¦ Á÷Á¢ ÀÛ¼ºÇÑ´Ù. ´õºÒ¾î ¿¹Á¦¸¦ °è¼Ó ¸®ÆÑÅ͸µÇÏ´Â ¹æ½ÄÀ¸·Î »óÅ °ü¸®(Pinia), ¼¹ö Åë½Å(axios) ¶ó¿ìÆÃ(Vue-router)±îÁö »ó¼¼ÇÏ°Ô ´Ù·é´Ù. ¶ÇÇÑ Å©·Ò ºê¶ó¿ìÀúÀÇ °³¹ßÀÚ µµ±¸¸¦ ÀÌ¿ëÇØ ³»ºÎ ÀÛµ¿ ¹æ½Ä°ú ±¸¼ºÀ» ÀÌÇØÇÒ ¼ö ÀÖ´Â ¼¼½ÉÇÑ ¼³¸í±îÁö °çµéÀ̸ç Vue.js °³¹ß ½Ã, ½Ç¼öÇϱ⠽¬¿î ÄÚµå¿Í ¹ß»ýÇÒ ¼ö ÀÖ´Â ¿À·ù »ç·Ê, °³¹ßºÎÅÍ »çÈÄ °ü¸®¸¦ µµ¿ï °¢Á¾ µµ±¸ »ç¿ë¹ý±îÁö Vue.js °³¹ß¿¡ ÇÊ¿äÇÑ ¸ðµç °ÍÀ» ´Ù·ç°í ÀÖ´Ù.
-
-
ÀÌ Ã¥ÀÇ ±¸¼º
¡á 1~2Àå
Vue °³¹ß¿¡ ÇÊ¿äÇÑ °³¹ß ȯ°æÀ» ¼³Á¤ÇÏ´Â ¹æ¹ý°ú Vue °³¹ß¿¡ ÇÊ¿äÇÑ ES6(ECMAScript 6) ¹®¹ýÀ» ÇнÀÇÕ´Ï´Ù.
¡á 3~6Àå
´ÜÀÏ ÆÄÀÏ ÄÄÆ÷³ÍÆ® ±â¹ÝÀ¸·Î °³¹ßÇÏÁö ¾Ê°í, ´Ü¼øÈ÷ HTML ÆÄÀÏ¿¡ ¡´script¡µ ű׸¸À¸·Î Äڵ带 ÀÛ¼ºÇϵµ·Ï ÇÏ¿© VueÀÇ ±âÃÊÀÎ ÅÛÇø´À» ÀÛ¼ºÇÏ´Â ¹æ¹ý, Vue ÀνºÅϽº¸¦ ±¸¼ºÇÏ°í ¸Þ¼µå, À̺¥Æ®¸¦ ±¸¼ºÇÏ°í »ç¿ëÇÏ´Â ¹æ¹ýÀ» ½±°Ô ÀÌÇØÇÒ ¼ö ÀÖµµ·Ï Á¤¸®Çß½À´Ï´Ù.
¡á 7~9Àå
7~8Àå¿¡¼´Â ´ÜÀÏ ÆÄÀÏ ÄÄÆ÷³ÍÆ®(Singe File Component) ±â¹ÝÀ¸·Î Vue ¾ÖÇø®ÄÉÀ̼ÇÀ» °³¹ßÇÏ´Â ¹æ¹ýÀ» ÇнÀÇÕ´Ï´Ù. ÄÄÆ÷³ÍÆ®µéÀ» Æ®¸® ±¸Á¶·Î Á¶ÇÕÇÏ¿© Àüü ¾ÛÀÇ ±â´É°ú UI¸¦ ¸¸µå´Â ¹æ¹ý, ÄÄÆ÷³ÍÆ® °£ÀÇ Á¤º¸ Àü´Þ, »óÈ£ ÀÛ¿ë ¹æ¹ýÀ» Á¤È®È÷ ÀÌÇØÇÒ ¼öÀÖµµ·Ï ³»¿ëÀ» ±¸¼ºÇß½À´Ï´Ù.
9Àå¿¡¼´Â Vue 3¿¡¼ »õ·Ó°Ô Ãß°¡µÈ Composition API¸¦ »ç¿ëÇÏ´Â ¹æ¹ýÀ» ÇнÀÇÕ´Ï´Ù. Vue ÄÄÆ÷³ÍÆ®¸¦ ÀÛ¼ºÇÒ ¶§ °³¹ßÀÚ´Â Option API¿Í Composition API Áß ÇÑ °¡Áö¹æ¹ýÀ» ¼±ÅÃÇÒ ¼ö ÀÖ½À´Ï´Ù. ±âÁ¸ÀÇ Option API¿Í ºñ±³ÇØ ´Ù¾çÇÑ ÀåÁ¡ÀÌ ÀÖ¾î ÃÖ±Ù ¸¹ÀÌ »ç¿ëµÇ°í ÀÖ½À´Ï´Ù.
¡á 10~12Àå
10Àå¿¡¼´Â Vue Router¸¦ ÀÌ¿ëÇØ URI °æ·Î¸¦ ÀÌ¿ëÇØ È¸éÀ» ÀüȯÇÏ´Â ¶ó¿ìÆà ±â´ÉÀÇ ±¸Çö ¹æ¹ýÀ» ÇнÀÇÕ´Ï´Ù. Vue¸¦ ÀÌ¿ëÇØ SPA(Single Page Application)¸¦ °³¹ßÇÒ ¶§ ÇʼöÀûÀ¸·Î »ç¿ëÇÏ´Â ¶óÀ̺귯¸®À̹ǷΠ»ó¼¼ÇÏ°Ô ¿¹Á¦ Áß½ÉÀ¸·Î ¼³¸íÇÕ´Ï´Ù.
11Àå¿¡¼´Â axios¶ó´Â ¶óÀ̺귯¸®¸¦ ÀÌ¿ëÇØ HTTP Åë½ÅÀ» ¼öÇàÇÏ´Â ¹æ¹ýÀ» ÇнÀÇÕ´Ï´Ù. ¹Ì¸® Á¦°øµÇ´Â ¹é¿£µå API¸¦ ÀÌ¿ëÇØ °ð¹Ù·Î Vue ¾ÖÇø®ÄÉÀ̼ǿ¡¼ ¹é¿£µå¿Í Åë½ÅÇÏ´Â ¹æ¹ýÀ» ÇнÀÇÒ ¼ö ÀÖ½À´Ï´Ù. ÀÌ·¸°Ô ÇнÀÇÑ ³»¿ëÀº 12Àå¿¡¼ ¹Ù·Î ½ÇÀü ¿¹Á¦¸¦ ÀÛ¼ºÇÏ¸é¼ Á¤¸®ÇÕ´Ï´Ù.
¡á 13Àå
13Àå¿¡¼´Â VueÀÇ »õ·Î¿î »óÅ °ü¸® ¶óÀ̺귯¸®ÀÎ Pinia¸¦ ÀÌ¿ëÇØ ¾ÖÇø®ÄÉÀÌ¼Ç ¼öÁØÀÇ »óŸ¦ È¿°úÀûÀ¸·Î °ü¸®ÇÏ´Â ¹æ¹ýÀ» ÇнÀÇÕ´Ï´Ù. SPA °³¹ßÀ» ÇÒ ¶§ Áß¿äÇÏ°Ô ´Ù·ïÁö´Â µÎ °³ÀÇ ÃàÀÌ 10Àå¿¡¼ ÇнÀÇÏ´Â ¶ó¿ìÆà ±â´É°ú 13ÀåÀÇ »óÅ °ü¸®ÀÔ´Ï´Ù. ÀÌ ÀåÀÇ ¸¶Áö¸·¿¡¼ 12Àå¿¡¼ ÀÛ¼ºÇß´ø ¿¹Á¦¸¦ Pinia¸¦ Àû¿ëÇÑ ¿¹Á¦·Î ¸®ÆÑÅ丵ÇÏ¸é¼ ÇнÀ ³»¿ëÀ» Á¤¸®ÇÕ´Ï´Ù.
-
-
1Àå Vue.js ¼Ò°³
1.1 Vue.js¶õ?
1.2 °³¹ß ȯ°æ ¼³Á¤
__1.2.1 Node.js ¼³Ä¡
__1.2.2 Visual Studio Code ¼³Ä¡
__1.2.3 Å©·Ò ºê¶ó¿ìÀú ¹× Vue.js Devtools ¼³Ä¡
1.3 ù ¹ø° Vue.js ¾ÖÇø®ÄÉÀ̼Ç
1.4 ¸¶¹«¸®
2Àå Vue.js¸¦ À§ÇÑ ES6
2.1 ES6 ¼Ò°³
__2.1.1 ES6¸¦ ¹Ýµå½Ã ÇнÀÇØ¾ß ÇÏ´Â ÀÌÀ¯
__2.1.2 ES6¸¦ ÇнÀÇϱâ À§ÇØ »ç¿ëÇÏ´Â µµ±¸
2.2 ES6¸¦ »ç¿ëÇϱâ À§ÇÑ ÇÁ·ÎÁ§Æ® ¼³Á¤
2.3 let°ú const
2.4 ±âº» ÆĶó¹ÌÅÍ¿Í °¡º¯ ÆĶó¹ÌÅÍ
2.5 ±¸Á¶ºÐÇØ ÇÒ´ç
2.6 È»ìÇ¥ ÇÔ¼ö
__2.6.1 È»ìÇ¥ ÇÔ¼öÀÇ Çü½Ä
__2.6.2 ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ this
__2.6.3 È»ìÇ¥ ÇÔ¼ö¿¡¼ÀÇ this
2.7 »õ·Î¿î °´Ã¼ ¸®ÅÍ·²
2.8 ÅÛÇø´ ¸®ÅÍ·²
2.9 ¸ðµâ
2.10 Promise
2.11 Àü°³ ¿¬»êÀÚ
2.12 Proxy
2.13 ¸¶¹«¸®
3Àå Vue.js ±âÃÊ¿Í Template
3.1 º¸°£¹ý
3.2 ±âº» µð·ºÆ¼ºê
__3.2.1 v-text, v-html µð·ºÆ¼ºê
__3.2.2 v-bind µð·ºÆ¼ºê
3.3 v-model µð·ºÆ¼ºê
__3.3.1 ±âº» »ç¿ë¹ý
__3.3.2 ¼ö½Ä¾î
__3.3.3 v-modelÀÇ ÇѱÛó¸® ¹®Á¦
3.4 Á¶°Ç ·»´õ¸µ µð·ºÆ¼ºê
__3.4.1 v-show
__3.4.2 v-if
__3.4.3 v-else, v-else-if µð·ºÆ¼ºê
3.5 ¹Ýº¹ ·»´õ¸µ µð·ºÆ¼ºê
__3.5.1 v-for µð·ºÆ¼ºê
__3.5.2 ...¿©·¯ ¿ä¼Ò¸¦ ¹¾î¼ ¹Ýº¹ ·»´õ¸µÇϱâ
__3.5.3 v-for µð·ºÆ¼ºê¿Í key Ư¼º
__3.5.4 µ¥ÀÌÅÍ º¯°æ ½Ã ÁÖÀÇ»çÇ×
3.6 ±âŸ µð·ºÆ¼ºê
__3.6.1 v-pre µð·ºÆ¼ºê
__3.6.2 v-once µð·ºÆ¼ºê
__3.6.3 v-cloak µð·ºÆ¼ºê
3.7 µ¿Àû ¾Æ±Ô¸ÕÆ®(Dynamic Argument)
3.8 ¸¶¹«¸®
4Àå Vue ÀνºÅϽº
4.1 Vue ÀνºÅϽº °³¿ä
4.2 data ¿É¼Ç
4.3 °è»êµÈ ¼Ó¼º(Computed Property)
4.4 ¸Þ¼µå
4.5 °üÂû ¼Ó¼º
4.6 »ý¸íÁֱ⠸޼µå
4.7 ¸¶¹«¸®
5Àå À̺¥Æ® ó¸®
5.1 À̺¥Æ® °³¿ä
5.2 ÀζóÀÎ À̺¥Æ® ó¸®
5.3 À̺¥Æ® Çڵ鷯 ¸Þ¼µå
5.4 À̺¥Æ® °´Ã¼
5.5 ±âº» À̺¥Æ®
5.6 À̺¥Æ® ÀüÆÄ¿Í ¹öºí¸µ
5.7 À̺¥Æ® ¼ö½Ä¾î
__5.7.1 once ¼ö½Ä¾î
__5.7.2 Å°ÄÚµå °ü·Ã ¼ö½Ä¾î
__5.7.3 ¸¶¿ì½º °ü·Ã ¼ö½Ä¾î
__5.7.4 exact ¼ö½Ä¾î
5.8 ¸¶¹«¸®
6Àå ½ºÅ¸ÀÏ Àû¿ë
6.1 HTMLÀÇ ½ºÅ¸ÀÏ Àû¿ë
6.2 ÀζóÀÎ ½ºÅ¸ÀÏ
6.3 CSS Ŭ·¡½º ¹ÙÀεù
__6.3.1 CSS Ŭ·¡½º¸í ¹®ÀÚ¿À» ¹ÙÀεùÇÏ´Â ¹æ¹ý
__6.3.2 true/false °ªÀ» °¡Áø °´Ã¼¸¦ ¹ÙÀεùÇÏ´Â ¹æ¹ý
6.4 µ¿Àû ½ºÅ¸ÀÏ ¹ÙÀεù
6.5 TodoList ¿¹Á¦
__6.5.1 È¸é ½Ã¾È ÀÛ¼º & È®ÀÎ
__6.5.2 µ¥ÀÌÅÍ¿Í ¸Þ¼µå Á¤ÀÇ
__6.5.3 ÅÛÇø´ ÀÛ¼º
6.6 ¸¶¹«¸®
7Àå ´ÜÀÏ ÆÄÀÏ ÄÄÆ÷³ÍÆ®¸¦ ÀÌ¿ëÇÑ Vue ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ß
7.1 ÇÁ·ÎÁ§Æ® ¼³Á¤ µµ±¸
__7.1.1 Vue CLI µµ±¸
__7.1.2 Vite ±â¹ÝÀÇ µµ±¸
7.2 »ý¼ºµÈ ÇÁ·ÎÁ§Æ® ±¸Á¶ »ìÆ캸±â
__7.2.1 ÇÁ·ÎÁ§Æ® »ý¼º°ú ½ÃÀÛ(ÁøÀÔÁ¡ »ìÆ캸±â)
__7.2.2 ´ÜÀÏ ÆÄÀÏ ÄÄÆ÷³ÍÆ® »ìÆ캸±â
__7.2.3 °£´ÜÇÑ ´ÜÀÏ ÆÄÀÏ ÄÄÆ÷³ÍÆ® ÀÛ¼º°ú »ç¿ë
7.3 ÄÄÆ÷³ÍÆ®ÀÇ Á¶ÇÕ
7.4 ¼Ó¼º
__7.4.1 ¼Ó¼ºÀ» ÀÌ¿ëÇÑ Á¤º¸ Àü´Þ
__7.4.2 ¼Ó¼ºÀ» ÀÌ¿ëÇØ °´Ã¼ Àü´ÞÇϱâ
__7.4.3 ¼Ó¼ºÀÇ À¯È¿¼º °ËÁõ
7.5 »ç¿ëÀÚ Á¤ÀÇ À̺¥Æ®
__7.5.1 »ç¿ëÀÚ Á¤ÀÇ À̺¥Æ®¸¦ ÀÌ¿ëÇÑ Á¤º¸ Àü´Þ
__7.5.2 À̺¥Æ® À¯È¿¼º °ËÁõ
7.6 À̺¥Æ® ¿¡¹ÌÅÍ »ç¿ë
7.7 TodoList ¿¹Á¦ ¸®ÆÑÅ丵
__7.7.1 ÄÄÆ÷³ÍÆ® ºÐÇÒ°ú Á¤ÀÇ
__7.7.2 ¼Ó¼º°ú À̺¥Æ®¸¦ Á¶ÇÕÇÑ ¸®ÆÑÅ丵
__7.7.3 À̺¥Æ® ¿¡¹ÌÅÍ Àû¿ëÇϱâ
7.8 ¸¶¹«¸®
8Àå ÄÄÆ÷³ÍÆ® ½ÉÈ
8.1 ´ÜÀÏ ÆÄÀÏ ÄÄÆ÷³ÍÆ®¿¡¼ÀÇ ½ºÅ¸ÀÏ
__8.1.1 ¹üÀ§ CSS
__8.1.2 CSS ¸ðµâ
8.2 ½½·Ô
__8.2.1 ½½·Ô »ç¿ë ÀüÀÇ ÄÄÆ÷³ÍÆ®
__8.2.2 ½½·ÔÀÇ ±âº» »ç¿ë¹ý
__8.2.3 ¸í¸íµÈ ½½·Ô
__8.2.4 ¹üÀ§ ½½·Ô
8.3 µ¿Àû ÄÄÆ÷³ÍÆ®
8.4 ÄÄÆ÷³ÍÆ®¿¡¼ÀÇ v-model µð·ºÆ¼ºê
8.5 provide, inject¸¦ ÀÌ¿ëÇÑ °ø¿ëµ¥ÀÌÅÍ »ç¿ë
8.6 ÅÚ·¹Æ÷Æ®
8.7 ºñµ¿±â ÄÄÆ÷³ÍÆ®
8.8 ¸¶¹«¸®
9Àå Composition API
9.1 Composition API¶õ?
9.2 setup ¸Þ¼µå¸¦ ÀÌ¿ëÇÑ ÃʱâÈ
9.3 ¹ÝÀÀ¼ºÀ» °¡Áø »óÅ µ¥ÀÌÅÍ
__9.3.1 ref
__9.3.2 reactive
9.4 computed
9.5 watch¿Í watchEffect
__9.5.1 watch
__9.5.2 watchEffect
__9.5.3 °¨½ÃÀÚ ¼³Á¤ ÇØÁ¦
9.6 »ý¸íÁÖ±â ÈÅ(Life Cycle Hook)
9.7 TodoList App ¸®ÆÑÅ丵
9.8 ¡´script setup¡µ »ç¿ëÇϱâ
__9.8.1 ¡´script setup¡µÀÌ ±âÁ¸°ú ´Ù¸¥ Á¡
__9.8.2 TodoList ¾Û¿¡ ¡´script setup¡µ Àû¿ëÇϱâ
9.9 ¸¶¹«¸®
10Àå vue-router¸¦ ÀÌ¿ëÇÑ ¶ó¿ìÆÃ
10.1 vue-router¶õ?
10.2 vue-routerÀÇ ±âº» »ç¿ë¹ý
10.3 router °´Ã¼¿Í currentRoute °´Ã¼
10.4 µ¿Àû ¶ó¿ìÆ®
10.5 Áßø ¶ó¿ìÆ®
10.6 ¸í¸íµÈ ¶ó¿ìÆ®¿Í ¸í¸íµÈ ºä
__10.6.1 ¸í¸íµÈ ¶ó¿ìÆ®
__10.6.2 ¸í¸íµÈ ºä
10.7 ÇÁ·Î±×·¡¹Ö ¹æ½ÄÀÇ ¶ó¿ìÆà Á¦¾î
__10.7.1 ¶ó¿ìÅÍ °´Ã¼ÀÇ ¸Þ¼µå
__10.7.2 ³»ºñ°ÔÀÌ¼Ç °¡µå
__10.7.3 ³»ºñ°ÔÀÌ¼Ç °¡µå Àû¿ëÇϱâ
10.8 È÷½ºÅ丮 ¸ðµå¿Í 404 ¶ó¿ìÆ®
__10.8.1 È÷½ºÅ丮 ¸ðµå
__10.8.2 404 ¶ó¿ìÆ®
10.9 ¶ó¿ìÆ® Á¤º¸¸¦ ¼Ó¼ºÀ¸·Î ¿¬°áÇϱâ
10.10 Áö¿¬ ·Îµù
__10.10.1 Áö¿¬ ·Îµù Àû¿ëÇϱâ
__10.10.2 Suspense ÄÄÆ÷³ÍÆ®
__10.10.3 ûũ ½ºÇø´ÆÃ
10.11 ¶ó¿ìÆðú ÀÎÁõ ó¸®
__10.11.1 ÅäÅ« ±â¹Ý ÀÎÁõ °³¿ä
__10.11.2 ³»ºñ°ÔÀÌ¼Ç °¡µå¸¦ ÀÌ¿ëÇÑ ·Î±×ÀΠȸé Àüȯ
10.12 ¸¶¹«¸®
11Àå axios¸¦ ÀÌ¿ëÇÑ HTTP Åë½Å
11.1 axios¶õ?
11.2 Å×½ºÆ®¿ë ¹é¿£µå API ¼Ò°³
11.3 ÇÁ·ÎÁ§Æ® »ý¼º°ú Å©·Î½º ¿À¸®Áø ¿À·ù ¹ß»ý
11.4 Å©·Î½º ¿À¸®Áø ¹®Á¦¶õ?
11.5 Å©·Î½º ¿À¸®Áø ¹®Á¦ ÇØ°á ¹æ¹ý
__11.5.1 CORS
__11.5.2 ÇÁ·Ï½Ã¸¦ ÀÌ¿ëÇÑ ¿ìȸ
11.6 axios ¶óÀ̺귯¸® »ç¿ë¹ý
__11.6.1 Promise¿Í async~await
__11.6.2 axios ¶óÀ̺귯¸® »ç¿ë ¹æ¹ý
__11.6.3 ¿¡·¯ ó¸®
11.7 ¸¶¹«¸®
12Àå vue-router¿Í axios¸¦ »ç¿ëÇÑ ¿¹Á¦
12.1 ¾ÖÇø®ÄÉÀÌ¼Ç ¾ÆÅ°ÅØó¿Í ÇÁ·ÎÁ§Æ® »ý¼º
__12.1.1 ÀÛ¼ºÇÒ È¸éµé
__12.1.2 ÄÄÆ÷³ÍÆ® °èÃþ ±¸Á¶
__12.1.3 ÇÁ·ÎÁ§Æ® »ý¼º
12.2 1´Ü°è ¿¹Á¦ ÀÛ¼º
12.3 2´Ü°è axios Àû¿ë
__12.3.1 ¹é¿£µå API ½ÇÇà°ú ÇÁ·Ï½Ã ¼³Á¤
__12.3.2 App ÄÄÆ÷³ÍÆ® º¯°æ
12.4 3´Ü°è Áö¿¬ ½Ã°£¿¡ ´ëÇÑ ½ºÇÇ³Ê UI ±¸Çö
12.5 ¸¶¹«¸®
13Àå pinia¸¦ ÀÌ¿ëÇÑ »óÅ °ü¸®
13.1 pinia¶õ?
13.2 pinia ¾ÆÅ°ÅØó¿Í ±¸¼º ¿ä¼Ò
__13.2.1 pinia ¾ÆÅ°ÅØó
__13.2.2 ½ºÅä¾î Á¤ÀÇ
__13.2.3 pinia¸¦ »ç¿ëÇϵµ·Ï Vue ¾ÖÇø®ÄÉÀÌ¼Ç ÀνºÅϽº ¼³Á¤
__13.2.4 ÄÄÆ÷³ÍÆ®¿¡¼ ½ºÅä¾î »ç¿ë
13.3 °£´ÜÇÑ pinia ¿¹Á¦ ÀÛ¼º
13.4 todolist-app-router ¿¹Á¦¿¡ pinia Àû¿ëÇϱâ
__13.4.1 ±âÁ¸ ¿¹Á¦ ±¸Á¶ °ËÅä
__13.4.2 ¹é¿£µå API ¼¹ö ½ÇÇà
__13.4.3 ±âÃÊ ÀÛ¾÷
__13.4.4 ½ºÅä¾î ÀÛ¼º
__13.4.5 App ÄÄÆ÷³ÍÆ® º¯°æ
__13.4.6 TodoList, TodoItem ÄÄÆ÷³ÍÆ® º¯°æ
__13.4.7 AddTodo, EditTodo ÄÄÆ÷³ÍÆ® º¯°æ
13.5 ¸¶¹«¸®
-
-
|
¿øÇü¼· [Àú]
|
|
-
2001³â±îÁö »ï¼ºÁ¾ÇÕ±â¼ú¿ø HCILAB¿¡¼ ÀÏÇÏ´Ù 2001³âºÎÅÍ ÇöÀç±îÁö Å©·¹µà ¸ÖƼķÆÛ½º(±¸ »ï¼º ¸ÖƼķÆÛ½º)¿¡¼ ÇÁ·Î±×·¡¹Ö, ºòµ¥ÀÌÅÍ, NOSQL ºÐ¾ß ÀüÀÓ ±³¼ö·Î È°µ¿ÇÏ°í ÀÖ´Ù. ¶ÇÇÑ °ÀÇ¿Í º´ÇàÇÏ¿© ¢ß¿ÀÇ¿¡½ºÁö¿¡¼ ¼ö¼® ÄÁ¼³ÅÏÆ®·Î ÀçÁ÷ ÁßÀÌ¸ç »ï¼ºÁß°ø¾÷, »ï¼ºµð½ºÇ÷¹ÀÌ µî¿¡¼ ÇÁ·ÎÁ§Æ®¸¦ ÁøÇàÇÏ¿´´Ù. React, Angular, Vue.js µîÀÇ ÇÁ·±Æ®¿£µå ÇÁ·¹ÀÓ¿öÅ©¿Í Open API, MSA(Micro Service Architecture)¿¡ °ü½ÉÀÌ ¸¹À¸¸ç DB¿¡¼ ¹é¿£µå, ÇÁ·±Æ®¿£µå±îÁö ¼··ÆÇÏ´Â Ç®½ºÅà °³¹ßÀÚ¸¦ ÁöÇâÇÑ´Ù. ÃÖ±Ù¿¡´Â AWS¿Í °°Àº Ŭ¶ó¿ìµå ȯ°æ°ú ÄÁÅ×ÀÌ³Ê ±â¹Ý ±â¼ú¿¡ ´ëÇÑ ¿©·¯ °¡Áö ½Ãµµ¸¦ ÇÏ°í ÀÖÀ¸¸ç ÇöÀç èÇǾð AWS °øÀΰ»ç(AAI: AWS Authorized Instructor)·Îµµ È°µ¿ ÁßÀÌ´Ù.
-
-
Àüü 0°³ÀÇ ±¸¸ÅÈıⰡ ÀÖ½À´Ï´Ù.
|
ÀÎÅÍÆÄÅ©µµ¼´Â °í°´´ÔÀÇ ´Ü¼ø º¯½É¿¡ ÀÇÇÑ ±³È¯°ú ¹ÝÇ°¿¡ µå´Â ºñ¿ëÀº °í°´´ÔÀÌ ÁöºÒÄÉ µË´Ï´Ù.
´Ü, »óÇ°À̳ª ¼ºñ½º ÀÚüÀÇ ÇÏÀÚ·Î ÀÎÇÑ ±³È¯ ¹× ¹ÝÇ°Àº ¹«·á·Î ¹ÝÇ° µË´Ï´Ù. |
|
±³È¯ ¹× ¹ÝÇ°ÀÌ °¡´ÉÇÑ °æ¿ì |
»óÇ°À» °ø±Þ ¹ÞÀº ³¯·ÎºÎÅÍ 7ÀÏÀ̳» °¡´É
°ø±Þ¹ÞÀ¸½Å »óÇ°ÀÇ ³»¿ëÀÌ Ç¥½Ã, ±¤°í ³»¿ë°ú ´Ù¸£°Å³ª ´Ù¸£°Ô ÀÌÇàµÈ °æ¿ì¿¡´Â °ø±Þ¹ÞÀº ³¯·ÎºÎÅÍ 3°³¿ù À̳», ȤÀº ±×»ç½ÇÀ» ¾Ë°Ô µÈ ³¯ ¶Ç´Â ¾Ë ¼ö ÀÖ¾ú´ø ³¯·ÎºÎÅÍ 30ÀÏ À̳»
»óÇ°¿¡ ¾Æ¹«·± ÇÏÀÚ°¡ ¾ø´Â °æ¿ì ¼ÒºñÀÚÀÇ °í°´º¯½É¿¡ ÀÇÇÑ ±³È¯Àº »óÇ°ÀÇ Æ÷Àå»óÅ µîÀÌ ÀüÇô ¼Õ»óµÇÁö ¾ÊÀº °æ¿ì¿¡ ÇÑÇÏ¿© °¡´É |
|
±³È¯ ¹× ¹ÝÇ°ÀÌ ºÒ°¡´ÉÇÑ °æ¿ì |
±¸¸ÅÈ®Á¤ ÀÌÈÄ(¿ÀǸ¶ÄÏ»óÇ°¿¡ ÇÑÇÔ)
°í°´´ÔÀÇ Ã¥ÀÓ ÀÖ´Â »çÀ¯·Î »óÇ° µîÀÌ ¸ê½Ç ¶Ç´Â ÈÑ¼ÕµÈ °æ¿ì
(´Ü, »óÇ°ÀÇ ³»¿ëÀ» È®ÀÎÇϱâ À§ÇÏ¿© Æ÷Àå µîÀ» ÈѼÕÇÑ °æ¿ì´Â Á¦¿Ü)
½Ã°£ÀÌ Áö³²¿¡ µû¶ó ÀçÆǸŰ¡ °ï¶õÇÒ Á¤µµ·Î ¹°Ç°ÀÇ °¡Ä¡°¡ ¶³¾îÁø °æ¿ì
Æ÷Àå °³ºÀµÇ¾î »óÇ° °¡Ä¡°¡ ÈÑ¼ÕµÈ °æ¿ì |
|
´Ù¹è¼ÛÁöÀÇ °æ¿ì ¹ÝÇ° ȯºÒ |
´Ù¹è¼ÛÁöÀÇ °æ¿ì ´Ù¸¥ Áö¿ªÀÇ ¹ÝÇ°À» µ¿½Ã¿¡ ÁøÇàÇÒ ¼ö ¾ø½À´Ï´Ù.
1°³ Áö¿ªÀÇ ¹ÝÇ°ÀÌ ¿Ï·áµÈ ÈÄ ´Ù¸¥ Áö¿ª ¹ÝÇ°À» ÁøÇàÇÒ ¼ö ÀÖÀ¸¹Ç·Î, ÀÌÁ¡ ¾çÇØÇØ Áֽñ⠹ٶø´Ï´Ù. |
|
Áß°í»óÇ°ÀÇ ±³È¯ |
Áß°í»óÇ°Àº Á¦ÇÑµÈ Àç°í ³»¿¡¼ ÆǸŰ¡ ÀÌ·ç¾îÁö¹Ç·Î, ±³È¯Àº ºÒ°¡´ÉÇÕ´Ï´Ù. |
|
¿ÀǸ¶ÄÏ »óÇ°ÀÇ È¯ºÒ |
¿ÀǸ¶ÄÏ»óÇ°¿¡ ´ëÇÑ Ã¥ÀÓÀº ¿øÄ¢ÀûÀ¸·Î ¾÷ü¿¡°Ô ÀÖÀ¸¹Ç·Î, ±³È¯/¹ÝÇ° Á¢¼ö½Ã ¹Ýµå½Ã ÆǸÅÀÚ¿Í ÇùÀÇ ÈÄ ¹ÝÇ° Á¢¼ö¸¦ ÇϼžßÇϸç, ¹ÝÇ°Á¢¼ö ¾øÀÌ ¹Ý¼ÛÇϰųª, ¿ìÆíÀ¸·Î º¸³¾ °æ¿ì »óÇ° È®ÀÎÀÌ ¾î·Á¿ö ȯºÒÀÌ ºÒ°¡´ÉÇÒ ¼ö ÀÖÀ¸´Ï À¯ÀÇÇϽñ⠹ٶø´Ï´Ù. |
|
|
|
¹è¼Û¿¹Á¤ÀÏ ¾È³» |
ÀÎÅÍÆÄÅ© µµ¼´Â ¸ðµç »óÇ°¿¡ ´ëÇØ ¹è¼Û¿Ï·á¿¹Á¤ÀÏÀ» À¥»çÀÌÆ®¿¡ Ç¥½ÃÇÏ°í ÀÖ½À´Ï´Ù.
|
<ÀÎÅÍÆÄÅ© Á÷¹è¼Û »óÇ°> |
»óÇ°Àº ¿ù~Åä¿äÀÏ ¿ÀÀü 10½Ã ÀÌÀü ÁÖ¹®ºÐ¿¡ ´ëÇÏ¿© ´çÀÏ Ãâ°í/´çÀÏ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÏ´Â »óÇ°ÀÔ´Ï´Ù. |
»óÇ°Àº ¼¿ïÁö¿ª/ÆòÀÏ ÁÖ¹®ºÐÀº ´çÀÏ Ãâ°í/ÀÍÀÏ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇϸç,
¼¿ï¿ÜÁö¿ª/ÆòÀÏ ÁÖ¹®ºÐÀÇ °æ¿ì´Â ¿ÀÈÄ 6½Ã±îÁö ÁÖ¹®ºÐ¿¡ ´ëÇÏ¿© ÀÍÀÏ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÏ´Â »óÇ°ÀÔ´Ï´Ù.
(´Ü, ¿ù¿äÀÏÀº 12½Ã±îÁö ÁÖ¹®¿¡ ÇÑÇÔ)
|
»óÇ°Àº, ÀÔ°í¿¹Á¤ÀÏ(Á¦Ç°Ãâ½ÃÀÏ)+Åùè»ç¹è¼ÛÀÏ(1ÀÏ)¿¡ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÕ´Ï´Ù. |
~
»óÇ°Àº À¯ÅëƯ¼º»ó ÀÎÅÍÆÄÅ©¿¡¼ Àç°í¸¦ º¸À¯ÇÏÁö ¾ÊÀº »óÇ°À¸·Î ÁÖ¹®ÀÏ+±âÁØÃâ°íÀÏ+Åùè»ç¹è¼ÛÀÏ(1ÀÏ)¿¡ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÕ´Ï´Ù.(Åä/°øÈÞÀÏÀº ¹è¼Û±â°£¿¡ Æ÷ÇÔµÇÁö ¾Ê½À´Ï´Ù.)
¡Ø±âÁØÃâ°íÀÏ:ÀÎÅÍÆÄÅ©°¡ »óÇ°À» ¼ö±ÞÇÏ¿© ¹°·ùâ°í¿¡¼ Æ÷Àå/Ãâ°íÇϱâ±îÁö ¼Ò¿äµÇ´Â ½Ã°£
|
|
<¾÷ü Á÷Á¢¹è¼Û/¿ÀǸ¶ÄÏ »óÇ°> |
~
»óÇ°Àº ¾÷ü°¡ ÁÖ¹®À» È®ÀÎÇÏ°í, Ãâ°íÇϱâ±îÁö °É¸®´Â ½Ã°£ÀÔ´Ï´Ù. ÁÖ¹®ÀÏ+±âÁØÃâ°íÀÏ+Åùè»ç¹è¼ÛÀÏ(2ÀÏ)¿¡ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÕ´Ï´Ù.(Åä/°øÈÞÀÏÀº ¹è¼Û±â°£¿¡ Æ÷ÇÔµÇÁö ¾Ê½À´Ï´Ù.)
¡Ø5ÀÏÀ̳» Ãâ°í°¡ ½ÃÀÛµÇÁö ¾ÊÀ»½Ã, ¿ÀǸ¶ÄÏ »óÇ°Àº ÀÚµ¿À¸·Î ÁÖ¹®ÀÌ Ãë¼ÒµÇ¸ç, °í°´´Ô²² Ç°Àýº¸»ó±ÝÀ» Áö±ÞÇØ µå¸³´Ï´Ù.
|
|
|
¹è¼Ûºñ ¾È³» |
µµ¼(Áß°íµµ¼ Æ÷ÇÔ)¸¸ ±¸¸ÅÇϽøé : ¹è¼Ûºñ 2,000¿ø (1¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û) À½¹Ý/DVD¸¸ ±¸¸ÅÇϽøé : ¹è¼Ûºñ 1,500¿ø (2¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û)
ÀâÁö/¸¸È/±âÇÁÆ®¸¸ ±¸¸ÅÇϽøé : ¹è¼Ûºñ 2,000¿ø (2¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û)
µµ¼¿Í À½¹Ý/DVD¸¦ ÇÔ²² ±¸¸ÅÇϽøé : ¹è¼Ûºñ 1,500¿ø 1¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û)
µµ¼¿Í ÀâÁö/¸¸È/±âÇÁÆ®/Áß°íÁ÷¹è¼Û»óÇ°À» ÇÔ²² ±¸¸ÅÇϽøé : 2,000¿ø (1¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û)
¾÷üÁ÷Á¢¹è¼Û»óÇ°À» ±¸¸Å½Ã : ¾÷üº°·Î »óÀÌÇÑ ¹è¼Ûºñ Àû¿ë
* ¼¼Æ®»óÇ°ÀÇ °æ¿ì ºÎºÐÃë¼Ò ½Ã Ãß°¡ ¹è¼Ûºñ°¡ ºÎ°úµÉ ¼ö ÀÖ½À´Ï´Ù.
* ºÏÄ«Æ®¿¡¼ ¹è¼Ûºñ¾ø¾Ö±â ¹öÆ°À» Ŭ¸¯Çϼż, µ¿ÀϾ÷ü»óÇ°À» Á¶±Ý ´õ ±¸¸ÅÇϽøé, ¹è¼Ûºñ¸¦ Àý¾àÇÏ½Ç ¼ö ÀÖ½À´Ï´Ù.
|
|
Çؿܹè¼Û ¾È³» |
ÀÎÅÍÆÄÅ©µµ¼¿¡¼´Â ±¹³»¿¡¼ ÁÖ¹®ÇϽðųª ÇØ¿Ü¿¡¼ ÁÖ¹®ÇÏ¿© ÇØ¿Ü·Î ¹è¼ÛÀ» ¿øÇÏ½Ç °æ¿ì DHL°ú Ư¾àÀ¸·Î Ã¥Á¤µÈ ¿ä±ÝÇ¥¿¡
ÀÇÇØ °³ÀÎÀÌ ÀÌ¿ëÇÏ´Â °æ¿ìº¸´Ù ¹è¼Û¿ä±ÝÀ» Å©°Ô ³·Ã߸ç DHL(www.dhl.co.kr)·Î Çؿܹè¼Û ¼ºñ½º¸¦ Á¦°øÇÕ´Ï´Ù.
Çؿܹè¼ÛÀº µµ¼/CD/DVD »óÇ°¿¡ ÇÑÇØ ¼ºñ½ºÇÏ°í ÀÖÀ¸¸ç, ´Ù¸¥ »óÇ°À» ºÏÄ«Æ®¿¡ ÇÔ²² ´ãÀ¸½Ç °æ¿ì Çؿܹè¼ÛÀÌ ºÒ°¡ÇÕ´Ï´Ù.
ÇØ¿ÜÁÖ¹®¹è¼Û ¼ºñ½º´Â ÀÎÅÍÆÄÅ© µµ¼ ȸ¿ø °¡ÀÔÀ» Çϼž߸¸ ½Åû °¡´ÉÇÕ´Ï´Ù. |
|
¾Ë¾ÆµÎ¼¼¿ä!!! |
µµ¸Å»ó ¹× Á¦ÀÛ»ç »çÁ¤¿¡ µû¶ó Ç°Àý/ÀýÆÇ µîÀÇ »çÀ¯·Î Ãë¼ÒµÉ ¼ö ÀÖ½À´Ï´Ù.
¿ÀǸ¶ÄϾ÷üÀÇ ¹è¼ÛÁö¿¬½Ã ÁÖ¹®ÀÌ ÀÚµ¿À¸·Î Ãë¼ÒµÉ ¼ö ÀÖ½À´Ï´Ù.
Ãâ°í°¡´É ½Ã°£ÀÌ ¼·Î ´Ù¸¥ »óÇ°À» ÇÔ²² ÁÖ¹®ÇÒ °æ¿ì Ãâ°í°¡´É ½Ã°£ÀÌ °¡Àå ±ä ±âÁØÀ¸·Î ¹è¼ÛµË´Ï´Ù.
À¯ÅëÀÇ Æ¯¼º»ó Ãâ°í±â°£Àº ¿¹Á¤º¸´Ù ¾Õ´ç°ÜÁö°Å³ª ´ÊÃçÁú ¼ö ÀÖ½À´Ï´Ù.
Åùè»ç ¹è¼ÛÀÏÀÎ ¼¿ï ¹× ¼öµµ±ÇÀº 1~2ÀÏ, Áö¹æÀº 2~3ÀÏ, µµ¼, »ê°£, ±ººÎ´ë´Â 3ÀÏ ÀÌ»óÀÇ ½Ã°£ÀÌ ¼Ò¿äµË´Ï´Ù. |
|
|
|
|