- ÇöÀç À§Ä¡
- home > ÄÄÇ»ÅÍ¡¤ICT¡¤¾îÇÐ > ÄÄÇ»ÅÍ¡¤IT µµ¼ > À¥ÇÁ·Î±×·¡¹Ö > Vue.js ÇÁ·ÎÁ§Æ® ÅõÀÔ ÀÏÁÖÀÏ Àü[ºñÁ¦ÀÌÆÛºí¸¯]
¸¹Àº °³¹ß ¾ð¾î Áß¿¡¼ Á÷°üÀûÀÌ°í ¹è¿ì±â ½¬¿î Vue.js¸¦ ´Ù·ð½À´Ï´Ù. ÀÌ Ã¥Àº ½Ç¹«¿¡¼ ÇÁ·ÎÁ§Æ®¸¦ °³¹ßÇÏ´Â ÁøÇà ¼ø¼¿¡ ¸ÂÃç¼ ±¸¼ºÇ߱⠶§¹®¿¡ Ãʺ¸ÀÚµµ ÃæºÐÈ÷ µû¶óÇÒ ¼ö ÀÖÀ¸¸ç, °³¹ß ±âÃÊ Áö½ÄÀÌ ÀÖ´Â µ¶ÀÚ¶ó¸é Á¶±Ý ´õ ºü¸£°Ô Vue.js¸¦ ¹è¿ï ¼ö ÀÖ½À´Ï´Ù. °³¹ß ȯ°æ ¼³Á¤ºÎÅÍ À¥ ¾Û ±¸Çö±îÁö Ã¥À» µû¶ó ÇÏ¸é¼ ÀÚ¿¬½º·´°Ô ½Ç¹«¿¡ ÇÊ¿äÇÑ ³»¿ëÀ» ¹è¿ö º¸¼¼¿ä.
ÀÌ Ã¥ÀÇ Æ¯Â¡
- ½Ç¹«¿¡ ÇÊ¿äÇÑ ³»¿ë¸¸ ´ã¾Ò½À´Ï´Ù.
- ½ÇÁ¦ ÇÁ·ÎÁ§Æ®Ã³·³ ¼ø¼´ë·Î ÁøÇàÇÕ´Ï´Ù.
- ¹Ì´Ï ÇÁ·ÎÁ§Æ®¸¦ ÅëÇØ µµ¼ ³»¿ëÀ» ºü¸£°Ô º¹½ÀÇÕ´Ï´Ù.
´ë»ó µ¶ÀÚ
- Vue.js¸¦ óÀ½ Á¢ÇÏ´Â °³¹ßÀÚ
- °³¹ß°ú ¿î¿µÀ» µ¿½Ã¿¡ °í¹ÎÇÏ´Â °³¹ßÀÚ
- ´Ù¸¥ °³¹ß ¾ð¾î·Î ÇÁ·ÎÁ§Æ®¸¦ ÁøÇàÇØ º» °³¹ßÀÚ
¼Ò½ºÄÚµå ´Ù¿î·Îµå
https://github.com/seungwongo/vue-project
https://github.com/seungwongo/mini-project-shop
ÀÌ Ã¥ÀÇ Æ¯Â¡
- ½Ç¹«¿¡ ÇÊ¿äÇÑ ³»¿ë¸¸ ´ã¾Ò½À´Ï´Ù.
- ½ÇÁ¦ ÇÁ·ÎÁ§Æ®Ã³·³ ¼ø¼´ë·Î ÁøÇàÇÕ´Ï´Ù.
- ¹Ì´Ï ÇÁ·ÎÁ§Æ®¸¦ ÅëÇØ µµ¼ ³»¿ëÀ» ºü¸£°Ô º¹½ÀÇÕ´Ï´Ù.
´ë»ó µ¶ÀÚ
- Vue.js¸¦ óÀ½ Á¢ÇÏ´Â °³¹ßÀÚ
- °³¹ß°ú ¿î¿µÀ» µ¿½Ã¿¡ °í¹ÎÇÏ´Â °³¹ßÀÚ
- ´Ù¸¥ °³¹ß ¾ð¾î·Î ÇÁ·ÎÁ§Æ®¸¦ ÁøÇàÇØ º» °³¹ßÀÚ
¼Ò½ºÄÚµå ´Ù¿î·Îµå
https://github.com/seungwongo/vue-project
https://github.com/seungwongo/mini-project-shop
ÀúÀÚ: °í½Â¿ø (ÁöÀºÀÌ)
CHAPTER 1. Vue.js´Â ¹«¾ùÀΰ¡?
1.1 Vue.js ÀåÁ¡
1.2 Vue.js Ư¡
CHAPTER 2. °³¹ßȯ°æ ±¸¼º(vs code, node, npm)
2.1 Visual Studio Code ¼³Ä¡
2.2 Node.js ¼³Ä¡
2.3 NPM(Node Package Manager) ¼³Ä¡
2.4 Vue °³¹ßÀ» À§ÇÑ À¯¿ëÇÑ vs code Extension ¼³Ä¡
CHAPTER 3. Vue CLI·Î Vue ÇÁ·ÎÁ§Æ® »ý¼ºÇϱâ
3.1 Vue CLI ¼³Ä¡
3.2 Default ¿É¼ÇÀ¸·Î ÇÁ·ÎÁ§Æ® ¼³Ä¡Çϱâ
3.3 Manually select features ¿É¼ÇÀ¸·Î ÇÁ·ÎÁ§Æ® ¼³Ä¡Çϱâ
3.4 Vue ÇÁ·ÎÁ§Æ® ¸Å´ÏÀú·Î ÇÁ·ÎÁ§Æ® ¼³Ä¡
CHAPTER 4. Vue Router ¼³Á¤
4.1 ¶ó¿ìÆÃÀ̶õ?
4.2 Vue-Router ¼³Ä¡
4.3 Lazy Load Àû¿ëÇϱâ(ºñµ¿±â ÄÄÆ÷³ÍÆ®)
CHAPTER 5. ÄÄÆ÷³ÍÆ® Basic
5.1 ÄÄÆ÷³ÍÆ®¶õ?
5.2 ÄÄÆ÷³ÍÆ® ±¸Á¶ ÀÌÇØÇϱâ
5.3 µ¥ÀÌÅÍ ¹ÙÀεù
5.4 ¸®½ºÆ® ·£´õ¸µ(v-for)
5.5 ·£´õ¸µ ¹®¹ý(v-if, v-show)
5.6 À̺¥Æ® ó¸®(v-on)
5.7 computed¿Í watch
CHAPTER 6. Mock ¼¹ö ÁغñÇϱâ
6.1 Postman ¼³Ä¡
6.2 Mock ¼¹ö »ý¼º
6.3 API ¹Ýȯ µ¥ÀÌÅÍ ¼³Á¤
CHAPTER 7. ¼¹ö µ¥ÀÌÅÍ ¹ÙÀεù ½Ç½À
7.1 ¼¹ö¿ÍÀÇ µ¥ÀÌÅÍ Åë½ÅÀ» À§ÇÑ API È£Ãâ ¸Þ¼Òµå ¸¸µé±â
7.2 ¼¹ö µ¥ÀÌÅÍ ·£´õ¸µ
CHAPTER 8. ÄÄÆ÷³ÍÆ® ½ÉÈ ÇнÀ
8.1 ÄÄÆ÷³ÍÆ® ¾È¿¡ ´Ù¸¥ ÄÄÆ÷³ÍÆ® »ç¿ëÇϱâ
8.2 Slot
8.3 Provide/Inject
8.4 Template refs
CHAPTER 9. Reusability
1.1 Vue.js ÀåÁ¡
1.2 Vue.js Ư¡
CHAPTER 2. °³¹ßȯ°æ ±¸¼º(vs code, node, npm)
2.1 Visual Studio Code ¼³Ä¡
2.2 Node.js ¼³Ä¡
2.3 NPM(Node Package Manager) ¼³Ä¡
2.4 Vue °³¹ßÀ» À§ÇÑ À¯¿ëÇÑ vs code Extension ¼³Ä¡
CHAPTER 3. Vue CLI·Î Vue ÇÁ·ÎÁ§Æ® »ý¼ºÇϱâ
3.1 Vue CLI ¼³Ä¡
3.2 Default ¿É¼ÇÀ¸·Î ÇÁ·ÎÁ§Æ® ¼³Ä¡Çϱâ
3.3 Manually select features ¿É¼ÇÀ¸·Î ÇÁ·ÎÁ§Æ® ¼³Ä¡Çϱâ
3.4 Vue ÇÁ·ÎÁ§Æ® ¸Å´ÏÀú·Î ÇÁ·ÎÁ§Æ® ¼³Ä¡
CHAPTER 4. Vue Router ¼³Á¤
4.1 ¶ó¿ìÆÃÀ̶õ?
4.2 Vue-Router ¼³Ä¡
4.3 Lazy Load Àû¿ëÇϱâ(ºñµ¿±â ÄÄÆ÷³ÍÆ®)
CHAPTER 5. ÄÄÆ÷³ÍÆ® Basic
5.1 ÄÄÆ÷³ÍÆ®¶õ?
5.2 ÄÄÆ÷³ÍÆ® ±¸Á¶ ÀÌÇØÇϱâ
5.3 µ¥ÀÌÅÍ ¹ÙÀεù
5.4 ¸®½ºÆ® ·£´õ¸µ(v-for)
5.5 ·£´õ¸µ ¹®¹ý(v-if, v-show)
5.6 À̺¥Æ® ó¸®(v-on)
5.7 computed¿Í watch
CHAPTER 6. Mock ¼¹ö ÁغñÇϱâ
6.1 Postman ¼³Ä¡
6.2 Mock ¼¹ö »ý¼º
6.3 API ¹Ýȯ µ¥ÀÌÅÍ ¼³Á¤
CHAPTER 7. ¼¹ö µ¥ÀÌÅÍ ¹ÙÀεù ½Ç½À
7.1 ¼¹ö¿ÍÀÇ µ¥ÀÌÅÍ Åë½ÅÀ» À§ÇÑ API È£Ãâ ¸Þ¼Òµå ¸¸µé±â
7.2 ¼¹ö µ¥ÀÌÅÍ ·£´õ¸µ
CHAPTER 8. ÄÄÆ÷³ÍÆ® ½ÉÈ ÇнÀ
8.1 ÄÄÆ÷³ÍÆ® ¾È¿¡ ´Ù¸¥ ÄÄÆ÷³ÍÆ® »ç¿ëÇϱâ
8.2 Slot
8.3 Provide/Inject
8.4 Template refs
CHAPTER 9. Reusability