|
[±¹³»ÇåÃ¥] ½ÇÀü ÇÁ·ÎÁ§Æ®·Î ¹è¿ì´Â Angular JS (À§Å°ºÏ½º ¿ÀǼҽº À¥ ½Ã¸®Áî 71) [Àç°í: 1 ±Ç] |
| ¡º½ÇÀü ÇÁ·ÎÁ§Æ®·Î ¹è¿ì´Â AngularJS¡»¿¡¼´Â ÇÁ·±Æ®¿£µå °³¹ß µµ±¸¿¡ ´ëÇÑ ¼Ò°³ ¹× ¼³Ä¡¿Í ÇÔ²² ´ÜÀÏ ÆäÀÌÁö ¾ÖÇø®ÄÉÀ̼ÇÀ» ÀÌÇØÇÏ°í, AngularJS¿¡ ¸Â´Â ÄÚµå ÄÁº¥¼Ç°ú °³¹ß Àü¿¡ ÁغñÇØ¾ß ÇÒ ¸ðµâÀ» »ìÆ캻´Ù. ½ÇÁ¦ ¿î¿µµÆ´ø NodeJS ¼¹ö Äڵ带 ±â¹ÝÀ¸·Î AngularJS¸¦ ÀÌ¿ëÇØ ±¸Á¶ÀûÀ¸·Î °³¹ßÇÏ´Â ¹æ¹ý°ú HTML ű׸¦ UI ÄÄÆ÷³ÍÆ®·Î º¯È¯ÇÏ¸é¼ ºí·ÏÀ» ¸ÂÃßµí ¾÷¹«¸¦ °³¹ßÇÏ´Â °úÁ¤À» »ìÆ캼 ¼ö ÀÖ´Ù. |
¢Ã 01Àå: ´ÜÀÏ ÆäÀÌÁö ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ß Áغñ
1-1. °³¹ß µµ±¸ ¼³Ä¡
- ±ê ¼³Ä¡
- ³ëµå ¼³Ä¡
- ¿ä¸Ç ¼³Ä¡
- ¼ºê¶óÀÓ ÅؽºÆ® ÆíÁý±â ¼³Ä¡
1-2. ´ÜÀÏ ÆäÀÌÁö ¾ÖÇø®ÄÉÀÌ¼Ç »ý¼º
- yo generator ¼±Åðú ¼³Ä¡
- Yo¸¦ ÀÌ¿ëÇÑ ToDo ¾ÖÇø®ÄÉÀÌ¼Ç »ý¼º
1-3. ¾ÖÇø®ÄÉÀÌ¼Ç ÄÄÆ÷³ÍÆ® »ý¼º
- ¾Þ±Ö·¯¸¦ À§ÇÑ index.html ¼³Á¤ ÀÌÇØÇϱâ
- yo¸¦ ÀÌ¿ëÇÑ ¾Þ±Ö·¯ ÄÁÆ®·Ñ·¯ Ãß°¡
- bower¸¦ ÀÌ¿ëÇÑ ¾Þ±Ö·¯ Áö½ÃÀÚ Ãß°¡
1-4. ¾ÖÇø®ÄÉÀÌ¼Ç Å×½ºÆ® ¹× ºôµå
- grunt¸¦ ÀÌ¿ëÇÑ Å×½ºÆ®
- grunt¸¦ ÀÌ¿ëÇÑ ¹èÆ÷
Á¤¸®
¢Ã 02Àå: AngularJS ÇÁ·¹ÀÓ¿öÅ© ÀÌÇØ
2-1. MV* ÇÁ·¹ÀÓ¿öÅ©
2-2. ¾ç¹æÇâ µ¥ÀÌÅÍ ¹ÙÀεù
- ½ºÄÚÇÁ ³»ºÎ¿Í »ó¼Ó °ü°è
- MyToDo ¾ÖÇø®ÄÉÀ̼ǿ¡¼ ¾ç¹æÇâ µ¥ÀÌÅÍ ¹ÙÀεù
- ½ºÄÚÇÁ »ý¸í ÁÖ±â(Life Cycle)
- ±× ¿Ü $scope °´Ã¼ ¸Þ¼µå
2-3. ÀÇÁ¸¼º ÁÖÀÔ(DI, Dependency Injection)
2-4. Ŭ¶óÀ̾ðÆ® ÅÛÇø´
2-5. Áö½ÃÀÚ(Directive)
- Áö½ÃÀÚ°¡ DOM¿¡ Àû¿ëµÇ´Â ¼ø¼
- Áö½ÃÀÚ Á¤ÀÇ
- Áö½ÃÀÚÀÇ ½ºÄÚÇÁ °´Ã¼ÀÇ ¹üÀ§ Á¾·ù
- Template, TemplateUrl, TemplateCache, replace¿Í ng-template »ç¿ë
- compile, linkÀÇ $watch µî·ÏÀ» ÀÌ¿ëÇÑ ¾ç¹æÇâ µ¥ÀÌÅÍ ¹ÙÀεù
- controller, require¿Í link ³× ¹ø° ÆĶó¹ÌÅÍ¿ÍÀÇ °ü°è
- transclude, ng-transclude »ç¿ë
2-6. Å×½ºÆ® ÇÁ·¹ÀÓ¿öÅ©(´ÜÀ§, E2E)
- Ä«¸£¸¶ ±â¹Ý ´ÜÀ§ Å×½ºÆ®
- ÇÁ·ÎÆ®·¢ÅÍ ±â¹Ý E2E Å×½ºÆ®
Á¤¸®
¢Ã 03Àå: ½Ì±Û ÆäÀÌÁö ¾ÖÇø®ÄÉÀÌ¼Ç ±âȹ¹× »ý¼º
3-1. ¾ÖÇø®ÄÉÀÌ¼Ç ±âȹ
- ¸ÞÀÎ ÆäÀÌÁö
- ±×·ì Á¤º¸ ÆäÀÌÁö
- ±×·ì È°µ¿ ÆäÀÌÁö
- ¼³¹® »ý¼º ÆäÀÌÁö
3-2. ¾ÖÇø®ÄÉÀÌ¼Ç Á¦³Ê·¹ÀÌÅÍ ¼³°è
- ¾ÖÇø®ÄÉÀ̼ÇÀÇ Æú´õ ±¸Á¶ Àü·«
- ¾ÖÇø®ÄÉÀÌ¼Ç Á¦³Ê·¹ÀÌÅÍ ¼±Á¤
- ¾Þ±Ö·¯ ÄÚµå ½ºÅ¸ÀÏ Àü·«
- ½ºÅ¸ÀÏ °¡À̵忡 µû¸¥ Á¦³Ê·¹ÀÌÅÍ ÅÛÇø´ ¼öÁ¤ ¹æ¹ý
- IE8 Áö¿øÀ» À§ÇÑ index.html ¼³Á¤
3-3. SPA »ý¼º
- ¾ÖÇø®ÄÉÀ̼ÇÀÇ ¸ðµâ ±¸¼º
- ¶ó¿ìÆà ¼³Á¤ ¹æ½Ä
3-4. ´ÜÀ§ ¾÷¹«¸¦ À§ÇÑ ¾Þ±Ö·¯ ÄÄÆ÷³ÍÆ® Á¶ÇÕ
- $resource¸¦ ÅëÇÑ REST ¸ðµ¨ »ç¿ë
- promise¿Í $q Async È£Ãâ¿¡ ´ëÇÑ ÀÌÇØ
Á¤¸®
¢Ã 04Àå: ¾ÖÇø®ÄÉÀ̼ÇÀ» À§ÇÑ °øÅë ÇÁ·¹ÀÓ¿öÅ© °³¹ß
4-1. °øÅë ÇÁ·¹ÀÓ¿öÅ© ¸ðµâ °³¹ß
- ´Ù±¹¾î ó¸®
- ¸Þ½ÃÁö ó¸®
- Æ˾÷ ¸Þ½ÃÁöâ Áö½ÃÀÚ
- HTTP ¿¡·¯ ó¸®
- »ç¿ëÀÚ Á¤ÀÇ Bower ÄÄÆ÷³ÍÆ® µî·Ï
- ·ÎÄà ÀúÀå¼Ò ¼ºñ½º
- À¯Æ¿¸®Æ¼ Áö½ÃÀÚ
4-2. ·Î±×ÀÎ È¸é °³¹ß
- Æ®À§ÅÍ ºÎÆ®½ºÆ®·¦ ±â¹ÝÀÇ È¸é µðÀÚÀÎ ¹× ÆùÆ® »ç¿ë
- Æû À¯È¿¼º(Form Validation) °Ë»ç
- ÀÎÁõÀ» À§ÇÑ ÅäÅ«°ú ÄíÅ°
4-3. OAuth¸¦ ÀÌ¿ëÇÑ ÀÎÁõ ó¸®
- ¹é¿£µå¿¡¼ Passport ¸ðµâÀ» ÀÌ¿ëÇÑ ÀÎÁõ ó¸®
- ÆäÀ̽ººÏ ÀÎÁõ ó¸®
- Å©·Ò ºê¶ó¿ìÀú °³¹ßÀÚ µµ±¸¸¦ ÀÌ¿ëÇÑ Å¬¶óÀ̾ðÆ® µð¹ö±ë
- ³ëµå ÀνºÆÑÅ͸¦ ÀÌ¿ëÇÑ ¼¹ö µð¹ö±ë
Á¤¸® 235
¢Ã 05Àå: ¸ÞÀÎ ÆäÀÌÁö °³¹ß
5-1. ¹é¿£µå API °³¹ß
- REST API º° ¼¹ö ¸ðµâ Á¶ÇÕ
- ³ëµå ¸ðµâÀÇ exports ÀÌÇØ
- ¸ù°íµðºñ¿Í ¸ù±¸½º ÀÌÇØ
- ¼¹ö ¸ðµ¨ °³¹ß
- ±×·ì REST API °³¹ß
- Æ÷½ºÆ®¸ÇÀ» ÀÌ¿ëÇÑ REST API °ËÁõ
- ¹é¿£µå ´ÜÀ§ Å×½ºÆ® ¼öÇà
5-2. ¸ÞÀÎ È¸é °³¹ß
- °øÅë ÄÄÆ÷³ÍÆ® À籸¼º
- ¸ÞÀÎ È¸é ·¹À̾ƿô °³¹ß
- ±×·ì »ý¼º
5-3. ±×·ì ¸ñ·Ï ¹× Á¤º¸ Ç¥Çö
Á¤¸®
¢Ã 06Àå: ±×·ì ÆäÀÌÁö °³¹ß
6-1. ±×·ì Á¤º¸ ÆäÀÌÁö
- ±×·ì »ó¼¼ Á¤º¸ Á¶È¸
- ±×·ì ÇÁ·ÎÇÊ À̹ÌÁö º¯°æ
- ±×·ì °¡ÀÔ, Å»Åð
6-2. ±×·ì È°µ¿ ÆäÀÌÁö
- ±×·ì È°µ¿ È¸é ·¹À̾ƿô °³¹ß
- ±×·ì ¸â¹ö ¸ñ·Ï Ç¥Çö
6-3. ¼³¹® Ä«µå »ý¼º
- ¼³¹® Ä«µå »ý¼º
- Ä«µå Áö½ÃÀÚ °³¹ß
6-4. ¼³¹® Á¾·ùº° Ä«µå Ç¥Çö
6-5. ¼³¹® ÀÀ´ä ¹× °á°ú Ç¥Çö
Á¤¸®
¢Ã 07Àå: ½Ç½Ã°£ ¹ÝÀÀ °³¹ß
7-1. Socket.IO ±â¹Ý ½Ç½Ã°£ ¿¬µ¿
- ³ëµå ±â¹Ý ¹é¿£µå Socket.IO
- AngularJS ±â¹Ý ÇÁ·±Æ®¿£µå Socket.IO
- »ó´Ü ¾Ë¸² ¸Þ´º Ãß°¡
7-2. Ä«µå ¸ñ·Ï UX °³¼±
- Ä«µå¿¡ µ¿¿µ»ó Ãß°¡
- ¹«ÇÑ ½ºÅ©·Ñ Àû¿ë
- ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú Àû¿ë
7-3. AngularJS ¼º´É ¿É¼Ç
- ÀÏȸ ¹ÙÀεù
- ngModelOptions Áö½ÃÀÚ
- µð¹ö±ë Á¤º¸ ºñÈ°¼ºÈ
- $applyAsync Àû¿ë
Á¤¸® |
|
| | ÇöÀç ½ÇÀü ÇÁ·ÎÁ§Æ®·Î ¹è¿ì´Â Angular JS (À§Å°ºÏ½º ¿ÀǼҽº À¥ ½Ã¸®Áî 71)¿¡ µî·ÏµÈ ¼ÆòÀÌ ¾ø½À´Ï´Ù. | |
|
|
|