±¹³»µµ¼
ÄÄÇ»ÅÍ/ÀÎÅͳÝ
IT Àü¹®¼
ÇÁ·Î±×·¡¹Ö °³¹ß ¹æ¹ý·Ð
2013³â 9¿ù 9ÀÏ ÀÌÈÄ ´©Àû¼öÄ¡ÀÔ´Ï´Ù.
Á¤°¡ |
28,000¿ø |
---|
25,200¿ø (10%ÇÒÀÎ)
1,400P (5%Àû¸³)
ÇÒÀÎÇýÅÃ | |
---|---|
Àû¸³ÇýÅà |
|
|
|
Ãß°¡ÇýÅÃ |
|
À̺¥Æ®/±âȹÀü
¿¬°üµµ¼(208)
»óÇ°±Ç
Ã¥¼Ò°³
±¸±ÛÀº ´Ù¾çÇÑ ºÐ¾ß¿¡¼ °³¹ßÀڵ鿡°Ô À¯ÀÍÇÑ Ç÷§Æû°ú ¶óÀ̺귯¸®¸¦ Á¦°øÇÑ´Ù. º°µµÀÇ ÆÀÀ» ±¸¼ºÇؼ Angular UI, AngularJS Material Design µî ´Ù¾çÇÑ ÇÁ·ÎÁ§Æ®¸¦ Áö¼ÓÀûÀ¸·Î »ý¼º ¹ßÀü½ÃÅ°°í ÀÖ´Ù. AngularJS´Â À¥ ¾ÖÇø®ÄÉÀ̼ÇÀ» °³¹ßÇÒ ¶§ ´Ù¾çÇÑ ¿ÜºÎ ¶óÀ̺귯¸®¸¦ ¿¬µ¿ÇÏ´Â ÆíÀǼºÀ» Á¦°øÇÏ¸é¼ ÇÁ·ÎÅäŸÀÔÀ» ªÀº ½Ã°£ ³»¿¡ °³¹ßÇÒ ¼ö Àִ ȯ°æÀ» Á¦°øÇÑ´Ù. ¶ÇÇÑ À¥ °³¹ß, Å×½ºÆ®¿Í °ËÁõ, À¯Áö º¸¼ö, ±×¸®°í ÃÖÀûȱîÁö °í·ÁÇÑ ÇÁ·¹ÀÓ¿öÅ©À̱⠶§¹®¿¡ ¸¹Àº À¥ °³¹ß ȸ»ç¿Í ÀÚ¹Ù½ºÅ©¸³Æ® °³¹ßÀÚ°¡ »ç¿ëÇÏ°í ÀÖ´Ù. ¡ºAngularJS ¹ÝÀÀÇü À¥¾Û °³¹ß°ú ¼º´É ÃÖÀûÈ¡» ¸¦ ÅëÇØ °³¹ßÀÚ´Â AngularJSÀÇ ±âº» Áö½Ä»Ó ¾Æ´Ï¶ó ÅÍÄ¡ ȯ°æÀ̳ª ¹ÝÀÀÇü À¥°ú °°Àº ¸ð¹ÙÀÏ È¯°æÀ» °í·ÁÇÏ°í ÆäÀÌÁö ·Îµù ¼Óµµ±îÁö ÃÖÀûÈÇÒ ¼ö ÀÖ´Â °í±Þ ±â¼úÀ» ½ÀµæÇÒ ¼ö ÀÖÀ» °ÍÀÌ´Ù.
ÃâÆÇ»ç ¼Æò
¡Ú ¿ä¾à ¡Ú
±¸±ÛÀº ´Ù¾çÇÑ ºÐ¾ß¿¡¼ °³¹ßÀڵ鿡°Ô À¯ÀÍÇÑ Ç÷§Æû°ú ¶óÀ̺귯¸®¸¦ Á¦°øÇÑ´Ù. º°µµÀÇ ÆÀÀ» ±¸¼ºÇؼ Angular UI, AngularJS Material Design µî ´Ù¾çÇÑ ÇÁ·ÎÁ§Æ®¸¦ Áö¼ÓÀûÀ¸·Î »ý¼º ¹ßÀü½ÃÅ°°í ÀÖ´Ù. AngularJS´Â À¥ ¾ÖÇø®ÄÉÀ̼ÇÀ» °³¹ßÇÒ ¶§ ´Ù¾çÇÑ ¿ÜºÎ ¶óÀ̺귯¸®¸¦ ¿¬µ¿ÇÏ´Â ÆíÀǼºÀ» Á¦°øÇÏ¸é¼ ÇÁ·ÎÅäŸÀÔÀ» ªÀº ½Ã°£ ³»¿¡ °³¹ßÇÒ ¼ö Àִ ȯ°æÀ» Á¦°øÇÑ´Ù. ¶ÇÇÑ À¥ °³¹ß, Å×½ºÆ®¿Í °ËÁõ, À¯Áö º¸¼ö, ±×¸®°í ÃÖÀûȱîÁö °í·ÁÇÑ ÇÁ·¹ÀÓ¿öÅ©À̱⠶§¹®¿¡ ¸¹Àº À¥ °³¹ß ȸ»ç¿Í ÀÚ¹Ù½ºÅ©¸³Æ® °³¹ßÀÚ°¡ »ç¿ëÇÏ°í ÀÖ´Ù. ÀÌ Ã¥À» ÅëÇØ °³¹ßÀÚ´Â AngularJSÀÇ ±âº» Áö½Ä»Ó ¾Æ´Ï¶ó ÅÍÄ¡ ȯ°æÀ̳ª ¹ÝÀÀÇü À¥°ú °°Àº ¸ð¹ÙÀÏ È¯°æÀ» °í·ÁÇÏ°í ÆäÀÌÁö ·Îµù ¼Óµµ±îÁö ÃÖÀûÈÇÒ ¼ö ÀÖ´Â °í±Þ ±â¼úÀ» ½ÀµæÇÒ ¼ö ÀÖÀ» °ÍÀÌ´Ù.
¡Ú ÀÌ Ã¥¿¡¼ ´Ù·ç´Â ³»¿ë ¡Ú
¡á ¸ð¹ÙÀÏ ¹öÀü¿¡ ÀûÇÕÇÑ ¾ÖÇø®ÄÉÀ̼ÇÀ» ¼³°èÇÒ ¼ö ÀÖ´Â Æ®À§ÅÍ ºÎÆ®½ºÆ®·¦(Bootstrap)°ú ÆÄ¿îµ¥À̼ǰú °°Àº ¹ÝÀÀÇü ·¹À̾ƿô°ú °·ÂÇÑ CSS3 ÇÁ·¹ÀÓ¿öÅ© »ç¿ë
¡á AngularUI ÄÄÆдϿ ½ºÀ§Æ®¸¦ »ç¿ëÇÒ ¶§ »ý±â´Â ÀϹÝÀûÀÎ UI ¹®Á¦ ÇØ°á
¡á AngularJS¸¦ ÀÌ¿ëÇؼ RESTful API¸¦ Á¤ÇÕÇÑ µ¿Àû ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ß
¡á CSS ¹ÝÀÀÇü ÇÁ·¹ÀÓ¿öÅ©, ´Ù¾çÇÑ UI À§Á¬, ±×¸®°í AngularJS ³»ºÎÀÇ °³¿ä ÇнÀ
¡á ¿¤¸®¸ÕÆ®ÀÇ ÆäÀ̵åÀΰú ÆäÀÌµå ¾Æ¿ôºÎÅÍ Á» ´õ º¹ÀâÇÑ µ¿ÀÛ±îÁö Ç¥ÇöÇÒ ¼ö ÀÖ´Â ¾Ö´Ï¸ÞÀÌ¼Ç °³¹ß
¡Ú ÀÌ Ã¥ÀÇ ´ë»ó µ¶ÀÚ ¡Ú
AngularJS·Î UI ¹®Á¦¸¦ ÇØ°áÇÏ´Â µ¥ °ü½ÉÀÌ ÀÖ´Â »ç¶÷À̶ó¸é ´©±¸³ª ÀÐÀ» ¼ö ÀÖ´Ù. ÀÚ¹Ù½ºÅ©¸³Æ®, HTML, CSS¿¡ ´ëÇÑ ±âº» Áö½ÄÀº ÇÊ¿äÇÏ´Ù.
¡Ú ÀÌ Ã¥ÀÇ ±¸¼º ¡Ú
1Àå. ¡®È¯°æ¼³Á¤¡¯¿¡¼´Â ÀÌ Ã¥ÀÇ ¸ðµç ºÎºÐ¿¡¼ ½ÃÀÛ ÅÛÇø´À¸·Î »ç¿ëÇÒ ¼ö ÀÖ´Â ¸Å¿ì ±âº»ÀûÀÌÁö¸¸ ÀüüÀûÀ¸·Î Å×½ºÆ®°¡ ¿Ï·áµÈ »ùÇà ¾Û ¼³Ä¡ ¹æ¹ýÀ» ¼³¸íÇÑ´Ù. 1ÀåÀº Å×½ºÆ®¿Í ºôµå ÇÁ·Î¼¼½ºÀÇ ÀÚµ¿Èµµ ´Ù·é´Ù.
2Àå. ¡®AngularUIÀÇ °³¿ä¿Í À¯Æ¿¡¯¿¡¼´Â AngularUI ÄÄÆдϿ ½ºÀ§Æ®¸¦ ¼Ò°³ÇÏ°í Å°ÇÁ·¹½º, À̺¥Æ® ¹ÙÀδõ, jQuery Passthrough, Validate¿Í Mask, Highlight, ±×¸®°í Fragment utilitiesÀÇ »ç¿ë ¹æ¹ýÀ» ¼³¸íÇÑ´Ù.
3Àå. ¡®AugularUIÀÇ È®À塯¿¡¼´Â ³¯Â¥, Ķ¸°´õ, ±¸±Û ¸Ê½º¿Í UI ¶ó¿ìÅÍ ¸ðµâÀÇ »ç¿ë ¹æ¹ýÀ» ¼³¸íÇÑ´Ù.
4Àå. ¡®°³ÀÎÈ¿Í ng-grid È°¿ë¡¯¿¡¼´Â ±âº»ÀûÀÎ ¿¹Á¦¼ºÎÅÍ ±×·ìÇÎ, °³ÀÎÈµÈ ¼¿°ú ¿ ÅÛÇø´, ÆäÀÌ¡, 7°³ ¼¼ºÎ ºä »ç¿ë, ±×¸®°í ¼¿ ¼±Åðú ÆíÁýó·³ º¹ÀâÇÑ ÁÖÁ¦¿¡ À̸£±â±îÁö ½Ã¼±À» »ç·ÎÀâ´Â ±×¸®µå ±¸¼º ¹æ¹ýÀ» ¼³¸íÇÑ´Ù.
5Àå. ¡®¾Ö´Ï¸ÞÀÌ¼Ç ÇнÀ¡¯¿¡¼´Â AngularJS¸¦ ÀÌ¿ëÇؼ »ç¹°¿¡ ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¸¦ Àû¿ëÇÏ´Â ¹æ¹ýÀ» ¼³¸íÇÑ´Ù. ¾Ö´Ï¸ÞÀ̼ÇÀº ÆäÀÌÁö ¿¤¸®¸ÕÆ®ÀÇ ÆäÀ̵åÀΰú ÆäÀ̵å¾Æ¿ô ±×¸®°í ¿¤¸®¸ÕÆ® À̵¿À» Æ÷ÇÔÇÏ¸ç ¸ðµç ¾Ö´Ï¸ÞÀ̼ÇÀº AngularJS µ¥ÀÌÅÍ ¸ðµ¨À» ¹ÙÅÁÀ¸·Î Àû¿ëµÈ´Ù.
6Àå. ¡®Â÷Æ®¿Í µ¥ÀÌÅÍ ±â¹Ý ±×·¡ÇÈ¡¯¿¡¼´Â AngularJS µ¥ÀÌÅÍ ¸ðµ¨¿¡ º¯°æ »çÇ×À» ¹Ý¿µÇÏ´Â À¥ ÆäÀÌÁö¿¡ µ¿Àû Â÷Æ®¸¦ »ðÀÔÇÏ´Â ¹æ¹ýÀ» º¸¿©ÁֹǷΠ5À庸´Ù ³»¿ëÀÌ Á» ´õ È®ÀåµÇ¾ú´Ù. ÀÌ·± Á¡ ¶§¹®¿¡ »ç¿ëÀÚ Á¤ÀÇ Áö½Ã¾î¸¦ Á¤ÀÇÇÑ´Ù.
7Àå. ¡®CSS¿Í CSS ÇÁ·¹ÀÓ¿öÅ©¸¦ ÀÌ¿ëÇÑ AngularJSÀÇ »ç¿ëÀÚ Á¤ÀÇ¡¯¿¡¼´Â CSS¿¡ ´ëÇÑ ±âº» »çÇ×À» °ß°íÈ÷ ´ÙÁö°Ô ÇÒ ¼ö ÀÖ°í CSS ÇÁ·¹ÀÓ¿öÅ©°¡ UI °³¹ß ÇÁ·Î¼¼½º¸¦ ¾ó¸¶³ª ´Ü¼øȽÃų ¼ö ÀÖ´ÂÁö º¸¿©ÁØ´Ù. 7ÀåÀº 8Àå°ú ƯÈ÷ 9ÀåÀ» ÀÌÇØÇϱâ À§ÇØ ¾Ë¾Æ¾ß ÇÒ »çÀü Áö½ÄÀ» ¼³¸íÇÑ´Ù.
8Àå. ¡®AngularUI ºÎÆ®½ºÆ®·¦ °³¹ß¡¯¿¡¼´Â AngularUI ºÎÆ®½ºÆ®·¦ ÇÁ·ÎÁ§Æ®¸¦ È°¿ëÇؼ AngularJS¿Í Æ®À§ÅÍ ºÎÆ®½ºÆ®·¦À» ¸Å²ô·´°Ô ÅëÇÕÇÒ ¼ö ÀÖ´Â ¹æ¹ýÀ» ¼³¸íÇÑ´Ù. Æ®À§ÅÍÀÇ ºÎÆ®½ºÆ®·¦ CSS ÇÁ·¹ÀÓ¿öÅ©¸¦ »ç¿ëÇÏ¸é ¾Æ¹«°Íµµ ¾ø´Â ÄÚµå »óÅ¿¡¼ óÀ½ ½ÃÀÛÇؼ °³¹ßÀ» ½ÃÀÛÇÏ´Â °Íº¸´Ù »ó´çÈ÷ ÀûÀº ½Ã°£À¸·Î ¸Å·ÂÀûÀÌ¸é¼ À¯¿¬ÇÑ »ç¿ëÀÚ ÀÎÅÍÆäÀ̽º¸¦ ±¸¼ºÇÒ ¼ö ÀÖ´Ù.
9Àå. ¡®AngularUI ºÎÆ®½ºÆ®·¦ÀÇ »ç¿ëÀÚ Á¤ÀÇ¡¯¿¡¼´Â ƯÁ¤ ¿ä±¸»çÇ׿¡ ÀûÇÕÇÑ UI ºÎÆ®½ºÆ®·¦À» ¼±ÅÃÇÏ´Â ¹æ¹ýÀ» ¼³¸íÇÑ´Ù. ±âº» ÅÛÇø´ÀÌ ¸Å·ÂÀûÀÏ ¼ö ÀÖÀ¸³ª Ç×»ó ¸ðµç ¿ä±¸¿¡ ÀûÇÕÇÏÁö´Â ¾Ê´Ù. 9ÀåÀº »ç¿ëÀÚ Á¤ÀÇ ÅÛÇø´À» ÀÌ¿ëÇؼ ¸ðµç Áö½Ã¾î¸¦ ÀÀ¿ëÇÒ ¼ö ÀÖ´Â ¹æ¹ýÀ» ã¾Æº»´Ù.
10Àå. ¡®AngularUI¿Í ºÎÆ®½ºÆ®·¦À» È°¿ëÇÑ ¸ð¹ÙÀÏ °³¹ß¡¯¿¡¼´Â ÅÍÄ¡ Á¦½ºÃ³¸¦ Æ÷ÇÔÇÑ ¸ð¹ÙÀÏ ½Ì±Û ÆäÀÌÁö ¾ÛÀÇ °³¹ß ¹æ¹ýÀ» »ìÆ캻´Ù. ¸ð¹ÙÀÏ »ç¿ëÀÚ °æÇè¿¡ ´ëÇÑ Æ¯Á¤ ¿ä±¸»çÇ×À» ¸¸Á·½ÃÅ°±â À§ÇØ ¾ÛÀÇ ÃÖÀûÈ ¹æ¾Èµµ ´Ù·é´Ù.
¸ñÂ÷
1 ȯ°æ¼³Á¤
__Hello World ¾Û
____ÇÁ¸®¹ÌƼºê ´ë½Å ¿ÀºêÁ§Æ® »ç¿ë
____ù Áö½Ã¾î ±¸Çö
__Node.js¿Í NPM ¼³Ä¡
____OS X
____À©µµ¿ì
____¸®´ª½º(¿ìºÐÅõ)
__Bower¸¦ ÀÌ¿ëÇÑ Å¬¶óÀ̾ðÆ®Ãø Á¾¼Ó¼º °ü¸®
__Hello World ¾Û Å×½ºÆ®
____´ÜÀ§ Å×½ºÆ®
____Ä«¸£¸¶¿Í À罺¹Î ¼³Ä¡
____ÅëÇÕ/Protractor¸¦ ÀÌ¿ëÇÑ ´Ü´ë´Ü Å×½ºÆ®
__¾ÖÇø®ÄÉÀÌ¼Ç °³¹ß
____±×·±Æ®¿¡¼ Protractor ½ÇÇà
__±êÀ» ÀÌ¿ëÇÑ ¼Ò½º ÄÚµå °ü¸®
__Á¤¸®
2 AngularUI µµÀÔ°ú À¯Æ¿¸®Æ¼
__AngularUI ´Ù¿î·Îµå
__AngularUI-Utils ºôµå
__ÇÁ·ÎÁ§Æ®¿¡ AngularUI-Utils ÅëÇÕ
__uiMask Áö½Ã¾î
__À̺¥Æ® ¹ÙÀδõ
__Å°ÇÁ·¹½º
__Á¦ÀÌÄõ¸® Àü´Þ
__Á¤¸®
3 AngularUI È®Àå
__±¸±Û ¸Ê Àû¿ë
____Áöµµ À§ÀÇ ¸¶Ä¿
____À̺¥Æ® ¹ÙÀεù
__Bower¸¦ ÀÌ¿ëÇÑ ¾ÖÇø®ÄÉÀÌ¼Ç Á¾¼Ó¼º °ü¸®
____.gitignore ÆÄÀÏ º¯°æ
__Ķ¸°´õ ÄÄÆ÷³ÍÆ®
____µ¥ÀÌÅÍ Æ÷¸Ëȸ¦ À§ÇÑ ÇÊÅÍ »ç¿ë
____Ķ¸°´õ ½ºÅ¸ÀÏ Àû¿ë
____ÄÁÆ®·Ñ·¯ º¯°æ
____Å×½ºÆ® Ãß°¡
______ÄÁÆ®·Ñ·¯ Å×½ºÆ®
______ÇÊÅÍ Å×½ºÆ®
____¾ÖÇø®ÄÉÀÌ¼Ç ºôµå
__Á¤¸®
4 ng-gridÀÇ Ä¿½ºÅ͸¶ÀÌ¡°ú ºÐ¼®
__ÇÁ·ÎÁ§Æ® ¼³Á¤
__AngularJS¸¦ ÀÌ¿ëÇÑ ¼ºñ½º »ý¼º
__±×¸®µå ºä
__±×¸®µå ±×·ìÇÎ
__¸¶½ºÅÍ¿Í µðÅ×ÀÏ ºä »ç¿ë
__Á¤¸®
5 ¾Ö´Ï¸ÞÀÌ¼Ç ÇнÀ
__ÇÁ·ÎÁ§Æ® ¼³Á¤
__¾Ö´Ï¸ÞÀÌ¼Ç ±â´ÉÀÌ Æ÷ÇÔµÈ ÇÒ ÀÏ ¸®½ºÆ® ÇÁ·ÎÁ§Æ® °³¹ß
__ÆäÀÌÁö¿¡¼ ¿ä¼Ò À̵¿
____Easing ÇÔ¼ö
__Àüü ¾Ö´Ï¸ÞÀ̼ÇÀ» È®´ëÇÒ ¼ö ÀÖ´Â LESS »ç¿ë
__animate.css ÆÄÀÏ »ç¿ë
__½ºÅÂÄ¿¸µ ¾Ö´Ï¸ÞÀ̼Ç
____½ºÅ°Š¾Ö´Ï¸ÞÀÌ¼Ç µ¿ÀÛ ÀÌÇØ
__ÀÚ¹Ù½ºÅ©¸³Æ®·Î Á¤ÀÇÇÏ´Â ¾Ö´Ï¸ÞÀ̼Ç
__Á¤¸®
6 Â÷Æ®¿Í µ¥ÀÌÅÍ ±â¹ÝÀÇ ±×·¡ÇÈ »ç¿ë
__Â÷Æ®ÀÇ Á߿伺
____¸·´ë Â÷Æ® ÀÛ¼º
__µ¥ÀÌÅÍ ±â¹ÝÀÇ ¸·´ë Â÷Æ® »ý¼º
__¸·´ë Â÷Æ®¸¦ À§Á¬À¸·Î º¯È¯
____¸·´ë Â÷Æ® Áö½Ã¾î ÀÛ¼º
__Angular Google Â÷Æ® µµ±¸ »ç¿ë
__GitHub REST API¸¦ ÀÌ¿ëÇÑ ´ë½Ãº¸µå ÀÛ¼º
____´ë½Ãº¸µå ¾ÖÇø®ÄÉÀÌ¼Ç È®Àå
__Á¤¸®
7 CSS¿Í CSS ÇÁ·¹ÀÓ¿öÅ©¸¦ ÀÌ¿ëÇÑ AngularJS Ä¿½ºÅ͸¶ÀÌ¡
__¹ÝÀÀÇü µðÀÚÀÎÀÇ Çõ¸í
__¹Ìµð¾î Äõ¸® ¼Ò°³
____@media
____@media ÀͽºÇÁ·¹¼Ç
__Æ®À§ÅÍ ºÎÆ®½ºÆ®·¦À» ÀÌ¿ëÇÑ Áøº¸µÈ µðÀÚÀÎ
__¾ÖÇø®ÄÉÀ̼ǿ¡ Foundation ÇÁ·¹ÀÓ¿öÅ© »ç¿ë
__Á¤¸®
8 AngularUI ºÎÆ®½ºÆ®·¦ °³¹ß
__¿Ö AngularUI ºÎÆ®½ºÆ®·¦À» »ç¿ëÇØ¾ß Çϴ°¡?
____ÇÁ·ÎÁ§Æ® °ü¸® ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ß
____accordion »ý¼º
____ÅÇ »ý¼º
____¼û±è ±â´ÉÀ» ÀÌ¿ëÇÑ °³¿¬¼ºÀÌ ÀûÀº ÄÜÅÙÃ÷ ¼û±è
____µ¥ÀÌÆ®ÇÇÄ¿¸¦ ÀÌ¿ëÇÑ Å¸ÀÓ¶óÀÎ ¼³Á¤
____¹öÆ° »ç¿ë
____ºñÀ² Æû¿¡ ´ëÇÑ ¿ì¼± ¼øÀ§ º¯°æ
____»ç¿ëÀÚ¿¡°Ô ¾Ë¸² ¸Þ½ÃÁö Ç¥½Ã
____ij·Î¼³ »ç¿ë
____À̽´ÀÇ »óŸ¦ Ç¥½ÃÇÏ´Â ÇÁ·Î±×·¡½º ¹Ù
__typeahead¸¦ ÀÌ¿ëÇÑ È¿°úÀûÀÎ Ãßõ
__µå·Ó´Ù¿îÀ¸·Î µÈ ¾ÖÇø®ÄÉÀÌ¼Ç Àü¿ë ¸Þ´º¸¦ À§ÇÑ ¹ü¿ë ÇÏ¿ì¡
__Á¤¸®
9 AngularUI ºÎÆ®½ºÆ®·¦ Ä¿½ºÅ͸¶ÀÌ¡
__¿ÜºÎ ÅÛÇø´ °³¿ä
____½ºÅ©¸³Æ® ű׸¦ ÀÌ¿ëÇÑ ÅÛÇø´ ·Îµù
____$templateCache¸¦ ÅëÇÑ ÅÛÇø´ ·Îµù
____¿ÜºÎ ÅÛÇø´ »ç¿ë
__AngularUI ºÎÆ®½ºÆ®·¦ ÆäÀÌÁö À§Á¬ Ä¿½ºÅ͸¶ÀÌ¡
__AngularUI ºÎÆ®½ºÆ®·¦ ÅÇ À§Á¬ È®Àå
__Á¤¸®
10 AngularJS¿Í ºÎÆ®½ºÆ®·¦À» ÀÌ¿ëÇÑ ¸ð¹ÙÀÏ ¾Û °³¹ß
__¿Ö ¸ð¹ÙÀÏ ¶§¹®¿¡ °í¹ÎÇϴ°¡?
__¸ð¹ÙÀÏÀ» ¿ì¼± °í·ÁÇÑ ºÏ¸¶Å© ¾Û °³¹ß
____µ¿Àû ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ß
____ºÏ¸¶Å©¸¦ ÅëÇÑ °Ë»ö ±â´É
____¸ð¹ÙÀÏ ´Ü¸»¿ë ¾ÖÇø®ÄÉÀ̼ÇÀÇ ±âÃÊ ¼³°è
____´õ ³ªÀº »ç¿ëÀÚ °æÇèÀ» À§ÇÑ ¾Ö´Ï¸ÞÀ̼Ç
__´õ ³ªÀº »ç¿ëÀÚ °æÇèÀ» Á¦°øÇϱâ À§ÇÑ ¸ð¹ÙÀÏ ÃÖÀûÈ
____ÅÇ À̺¥Æ®¸¦ À§ÇÑ ÁÖ±âÀûÀÎ Áö¿¬
____Æ®·£Áö¼Ç°ú ¾Ö´Ï¸ÞÀÌ¼Ç °¡¼Ó
______½ÃÀÛ ÆäÀÌÁö ·Îµù ¼º´É °³¼±
__Á¤¸®
º»¹®Áß¿¡¼
¡Ú ÁöÀºÀÌÀÇ ¸» ¡Ú
½Ì±Û ÆäÀÌÁö À¥ ¾ÖÇø®ÄÉÀ̼ǿë À¥ °³¹ß ÇÁ·¹ÀÓ¿öÅ©µéÀÌ ³ª¿À±â ½ÃÀÛÇÑ °Ç ²Ï ¿À·¡ Àü ÀÏÀÌ´Ù. ÇÏÁö¸¸ AngularJS´Â ¿©·¯ Áß¿äÇÑ ¸éÀ» °í·ÁÇØ º¼ ¶§, ±âÁ¸ ºÎ·ù¿Í´Â Â÷¿øÀÌ ´Ù¸¥ ÇÁ·¹ÀÓ¿öÅ©´Ù. ¹«¾ùº¸´Ùµµ, Ŭ¶óÀ̾ðÆ® Ãø °³¹ß¿¡ Àç¹Ì¸¦ ¾È°ÜÁØ´Ù.
AngularJS´Â ¾î¶² Á¡ÀÌ Æ¯ÈµÇ¾î ÀÖÀ»±î? °³¹ßÀÚµéÀÌ ºê¶ó¿ìÀú·Î ·ÎµùÇÑ ¹®¼ °´Ã¼ ¸ðµ¨)DOM)À» ¼öÀÛ¾÷À¸·Î º¯°æÇÒ ÇÊ¿ä°¡ ¾ø´Ù´Â Á¡¿¡¼ AngularJS´Â ¼±¾ðÀû(declarative-¿©·¯ Á¤º¸¸¦ ÀúÀåÇÏ°í ±â¾ïÇÒ ¼ö ÀÖ´Â »óÅÂ)À̶ó ÇÒ ¼ö ÀÖ´Ù. ¹Ý¸é µ¥ÀÌÅÍ ¸ðµ¨À» ÆäÀÌÁö¿¡ ·»´õ¸µÇÏ´Â ¹æ¹ý¿¡ °üÇؼ¶ó¸é AngularJS´Â µ¥ÀÌÅÍ ¸ðµ¨ÀÌ º¯°æµÉ ¶§ ÆäÀÌÁöÀÇ ·»´õ¸µÀ» ó¸®ÇÑ´Ù.
¾ç¹æÇâ µ¥ÀÌÅÍ ¹ÙÀεùÀ» Çϸé, ¿¹¸¦ µé¾î ÆäÀÌÁö¿¡ ÅؽºÆ®¸¦ ÀÔ·ÂÇϰųª ¹öÆ°À» Ŭ¸¯ÇÒ ¶§ µ¥ÀÌÅÍ ¸ðµ¨Àº ÀÚµ¿À¸·Î ¾÷µ¥ÀÌÆ®µÈ´Ù. µ¥ÀÌÅÍ ¸ðµ¨°ú ¹ÙÀεùµÈ ´Ù¸¥ UI ¿¤¸®¸ÕÆ®µµ ¾÷µ¥ÀÌÆ®µÉ °ÍÀÌ´Ù. µ¿ÀÛÇÏ´Â °ÍÀ» Á÷Á¢ º¸±â Àü¿¡´Â ´ë´ÜÇÏÁö ¾ÊÀ» °Í °°Áö¸¸, ÇöÀç ¾Û »óÅ°¡ ÆäÀÌÁö¿¡ ¾î¶»°Ô º¸ÀÏÁö¿¡ ´ëÇؼ, Á¦ÀÌÄõ¸®¸¦ ÀÌ¿ëÇÑ Å« ¿ë·®ÀÇ DOM º¯°æ ÄÚµå¿Í °£°áÇÑ ÄÚµå »çÀÌ¿¡´Â Å« Â÷ÀÌ°¡ ÀÖ´Ù. ½ÇÁ¦·Î, Äڵ带 »ó´çÈ÷ °¡µ¶¼ºÀÌ ³ô°í °£°áÇÏ°Ô ¸¸µé¾î ÁØ´Ù.
ÀÚ¹Ù½ºÅ©¸³Æ®´Â ¸Å¿ì °·ÂÇÑ ¾ð¾î´Ù. ±×·¯³ª º°³ Ư¡ÀÌ ÀÖ¾î¼ ÀÌ ¾ð¾î¸¦ ³í¸®ÀûÀ¸·Î »ç¿ëÇÏÁö ¾ÊÀ¸¸é ÀÌÇØÇϱ⠾î·Æ°Å³ª ¿¡·¯°¡ ¸Å¿ì ¸¹Àº ÁöÀúºÐÇÑ Äڵ带 ÀÛ¼ºÇÏ°Ô µÉ ¼ö ÀÖ´Ù. ÇÏÁö¸¸ AngularJS´Â ÀÌ Á¡À» °ÆÁ¤ÇÏÁö ¾Ê¾Æµµ µÈ´Ù. AngularJS¸¦ »ç¿ëÇÏ¸é °£°áÇÑ ¸ðµâ »ç¿ë°ú ÀûÀýÇÑ ¼ÒÇÁÆ®¿þ¾î Å×½ºÆà Àü·«¿¡ ÁýÁßÇϹǷÎ, ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ÀåÁ¡À» Àß È°¿ëÇÒ ¼ö ÀÖ´Ù. Å×½ºÆ® ÁÖµµ °³¹ß(TDD, Test-driven development)Àº »ó´çÈ÷ ¸·°ÇÑ °³³äÀ¸·Î¼, ¿¹¸¦ µé¾î °³¹ß ¿Ï·á ÈÄ ÆäÀÌÁö ȸ鿡¼ °£°úÇß´ø ¹®Á¦¸¦ ¹ß°ßÇÒÁö¶óµµ ´çȲÇÏÁö ¾Ê°í ¹®Á¦¸¦ Áï½Ã °£ÆÄÇØ Äڵ带 ¼öÁ¤ÇÒ ¼ö ÀÖ´Ù.
TDD °³³ä ÀÌÇØ¿¡ Á» ´õ Å« µµ¿òÀ» Áִ åµé Áß¿¡ °¡Àå ÁÖ¸ñÇÒ ¸¸ÇÑ °ÍÀº ÆÑÆ®ÃâÆǻ翡¼ Ãâ°£ÇÑ ¡ºAngularJS·Î ÇÏ´Â À¥ ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ß¡»(¿¡ÀÌÄÜÃâÆÇ, 2014)ÀÌ ÀÖ´Ù. ÇÏÁö¸¸ ÀÌ °³³äÀº °³¹ß ÇÁ·Î¼¼½º Àü¹Ý¿¡ °ÉÃÄ ¿©·¯ À̵æÀ» ÁֹǷΠÀÌ Ã¥¿¡¼µµ »ìÆ캼 ¿¹Á¤ÀÌ´Ù.
Á¦ÀÌÄõ¸®´Â Ä¿¹Â´ÏƼ°¡ ¼ö³â°£¿¡ °ÉÃÄ ÄÚµå ÀÛ¼º¿¡ ±â¿©ÇØ ¹ßÀü½ÃÄÑ¿Â À§Á¬À» ÀÌ¿ëÇØ ¸¹Àº UI ¹®Á¦¸¦ ÇØ°áÇÒ ¼ö ÀÖ´Ù´Â Á¡¿¡¼ »ó´çÈ÷ À¯¿ëÇÏ´Ù. ÇÏÁö¸¸ ÀÌ¿Í °°Àº À§Á¬µéÀº AngularJS°¡ °·ÂÇÏ°Ô ±ÝÁöÇÏ°í ÀÖ´Â Á÷Á¢ÀûÀÎ DOM º¯°æÀ» Æ÷ÇÔÇÏ°í Àֱ⠶§¹®¿¡ AngularJS·Î Á÷Á¢ »ç¿ëÇÒ ¼ö´Â ¾ø´Ù.
Á÷Á¢ÀûÀÎ DOM º¯°æÀº ¹Ù·Î ÀÌ Ã¥À» ÁýÇÊÇÏ°Ô µÈ ÀÌÀ¯À̸ç, ÀÌ Ã¥¿¡¼´Â AngularJS °³¹ß °úÁ¤¿¡¼ UI¿Í °ü·ÃµÈ ´Ù¾çÇÑ ¹®Á¦¸¦ ¾î¶»°Ô ÇØ°áÇÏ´ÂÁö º¸¿©ÁÖ´Â µ¥ ¸ñÀûÀ» µÐ´Ù. ÀÌ Ã¥¿¡¼´Â ´ÙÀ½°ú °°Àº ³»¿ëÀ» ´Ù·é´Ù
¡Ü ÀϹÝÀûÀÎ UI ¹®Á¦¸¦ ÇØ°áÇϱâ À§ÇØ AngularUI ÄÄÆдϿ ½ºÀ§Æ®(companion suite) »ç¿ë ¹æ¹ý
¡Ü ƯÁ¤ ¹®Á¦¸¦ ÇØ°áÇϱâ À§ÇØ AngularUI ¶óÀ̺귯¸®¸¦ ¼öÁ¤Çϰųª È®ÀåÇÏ´Â ¹æ¹ý
¡Ü Æ®À§ÅÍ ºÎÆ®½ºÆ®·¦À» ÀÌ¿ëÇؼ ½Ã¼±À» ÁýÁß½Ãų ¼ö ÀÖ´Â »ç¿ëÀÚ ÀÎÅÍÆäÀ̽º¸¦ ºü¸£°Ô »ý°¢Çس¾ ¼ö ÀÖ´Â UI ºÎÆ®½ºÆ®·¦ »ç¿ë ¹æ¹ý
¡Ü ƯÁ¤ ¿ä±¸»çÇ׿¡ ºÎÇÕÇÒ ¼ö ÀÖ´Â UI ºÎÆ®½ºÆ®·¦À» º¯°æÇÏ´Â ¹æ¹ý
¡Ü CSS µ¿ÀÛ ¹æ¹ý
¡Ü ÀÌ Ã¥¿¡¼ ´Ù·ç´Â AngularUI ÄÄÆдϿ ½ºÀ§Æ®(companion suite)ÀÌ °³¹ßÀÚÀÇ ¹®Á¦¸¦ ÇØ°áÇÏÁö ¸øÇÒ ¶§ »ç¿ëÀÚ Á¤ÀÇ Áö½Ã¾î(directive)¸¦ ±¸¼ºÇÏ´Â ¹æ¹ý
ÀúÀÚ¼Ò°³
»ý³â¿ùÀÏ | - |
---|
ÇØ´çÀÛ°¡¿¡ ´ëÇÑ ¼Ò°³°¡ ¾ø½À´Ï´Ù.
»ý³â¿ùÀÏ | - |
---|
ÇØ´çÀÛ°¡¿¡ ´ëÇÑ ¼Ò°³°¡ ¾ø½À´Ï´Ù.
ÁÖ°£·©Å·
´õº¸±â»óÇ°Á¤º¸Á¦°ø°í½Ã
À̺¥Æ® ±âȹÀü
ÀÌ »óÇ°ÀÇ ½Ã¸®Áî
(ÃÑ 208±Ç / ÇöÀ籸¸Å °¡´Éµµ¼ 208±Ç)
ÄÄÇ»ÅÍ/ÀÎÅÍ³Ý ºÐ¾ß¿¡¼ ¸¹Àº ȸ¿øÀÌ ±¸¸ÅÇÑ Ã¥
ÆǸÅÀÚÁ¤º¸
»óÈ£ |
(ÁÖ)±³º¸¹®°í |
---|---|
´ëÇ¥ÀÚ¸í |
¾Èº´Çö |
»ç¾÷ÀÚµî·Ï¹øÈ£ |
102-81-11670 |
¿¬¶ôó |
1544-1900 |
ÀüÀÚ¿ìÆíÁÖ¼Ò |
callcenter@kyobobook.co.kr |
Åë½ÅÆǸž÷½Å°í¹øÈ£ |
01-0653 |
¿µ¾÷¼ÒÀçÁö |
¼¿ïƯº°½Ã Á¾·Î±¸ Á¾·Î 1(Á¾·Î1°¡,±³º¸ºôµù) |
±³È¯/ȯºÒ
¹ÝÇ°/±³È¯ ¹æ¹ý |
¡®¸¶ÀÌÆäÀÌÁö > Ãë¼Ò/¹ÝÇ°/±³È¯/ȯºÒ¡¯ ¿¡¼ ½Åû ¶Ç´Â 1:1 ¹®ÀÇ °Ô½ÃÆÇ ¹× °í°´¼¾ÅÍ(1577-2555)¿¡¼ ½Åû °¡´É |
---|---|
¹ÝÇ°/±³È¯°¡´É ±â°£ |
º¯½É ¹ÝÇ°ÀÇ °æ¿ì Ãâ°í¿Ï·á ÈÄ 6ÀÏ(¿µ¾÷ÀÏ ±âÁØ) À̳»±îÁö¸¸ °¡´É |
¹ÝÇ°/±³È¯ ºñ¿ë |
º¯½É ȤÀº ±¸¸ÅÂø¿À·Î ÀÎÇÑ ¹ÝÇ°/±³È¯Àº ¹Ý¼Û·á °í°´ ºÎ´ã |
¹ÝÇ°/±³È¯ ºÒ°¡ »çÀ¯ |
·¼ÒºñÀÚÀÇ Ã¥ÀÓ ÀÖ´Â »çÀ¯·Î »óÇ° µîÀÌ ¼Õ½Ç ¶Ç´Â ÈÑ¼ÕµÈ °æ¿ì ·¼ÒºñÀÚÀÇ »ç¿ë, Æ÷Àå °³ºÀ¿¡ ÀÇÇØ »óÇ° µîÀÇ °¡Ä¡°¡ ÇöÀúÈ÷ °¨¼ÒÇÑ °æ¿ì ·º¹Á¦°¡ °¡´ÉÇÑ »óÇ° µîÀÇ Æ÷ÀåÀ» ÈѼÕÇÑ °æ¿ì ·½Ã°£ÀÇ °æ°ú¿¡ ÀÇÇØ ÀçÆǸŰ¡ °ï¶õÇÑ Á¤µµ·Î °¡Ä¡°¡ ÇöÀúÈ÷ °¨¼ÒÇÑ °æ¿ì ·ÀüÀÚ»ó°Å·¡ µî¿¡¼ÀÇ ¼ÒºñÀÚº¸È£¿¡ °üÇÑ ¹ý·üÀÌ Á¤ÇÏ´Â ¼ÒºñÀÚ Ã»¾àöȸ Á¦ÇÑ ³»¿ë¿¡ ÇØ´çµÇ´Â °æ¿ì |
»óÇ° Ç°Àý |
°ø±Þ»ç(ÃâÆÇ»ç) Àç°í »çÁ¤¿¡ ÀÇÇØ Ç°Àý/Áö¿¬µÉ ¼ö ÀÖÀ½ |
¼ÒºñÀÚ ÇÇÇغ¸»ó |
·»óÇ°ÀÇ ºÒ·®¿¡ ÀÇÇÑ ±³È¯, A/S, ȯºÒ, Ç°Áúº¸Áõ ¹× ÇÇÇغ¸»ó µî¿¡ °üÇÑ »çÇ×Àº¼ÒºñÀÚºÐÀïÇØ°á ±âÁØ (°øÁ¤°Å·¡À§¿øȸ °í½Ã)¿¡ ÁØÇÏ¿© ó¸®µÊ ·´ë±Ý ȯºÒ ¹× ȯºÒÁö¿¬¿¡ µû¸¥ ¹è»ó±Ý Áö±Þ Á¶°Ç, ÀýÂ÷ µîÀº ÀüÀÚ»ó°Å·¡ µî¿¡¼ÀǼҺñÀÚ º¸È£¿¡ °üÇÑ ¹ý·ü¿¡ µû¶ó ó¸®ÇÔ |
(ÁÖ)ÀÎÅÍÆÄÅ©Ä¿¸Ó½º´Â ȸ¿ø´ÔµéÀÇ ¾ÈÀü°Å·¡¸¦ À§ÇØ ±¸¸Å±Ý¾×, °áÁ¦¼ö´Ü¿¡ »ó°ü¾øÀÌ (ÁÖ)ÀÎÅÍÆÄÅ©Ä¿¸Ó½º¸¦ ÅëÇÑ ¸ðµç °Å·¡¿¡ ´ëÇÏ¿©
(ÁÖ)KGÀ̴Ͻýº°¡ Á¦°øÇÏ´Â ±¸¸Å¾ÈÀü¼ºñ½º¸¦ Àû¿ëÇÏ°í ÀÖ½À´Ï´Ù.
¹è¼Û¾È³»
±³º¸¹®°í »óÇ°Àº Åùè·Î ¹è¼ÛµÇ¸ç, Ãâ°í¿Ï·á 1~2Àϳ» »óÇ°À» ¹Þ¾Æ º¸½Ç ¼ö ÀÖ½À´Ï´Ù.
Ãâ°í°¡´É ½Ã°£ÀÌ ¼·Î ´Ù¸¥ »óÇ°À» ÇÔ²² ÁÖ¹®ÇÒ °æ¿ì Ãâ°í°¡´É ½Ã°£ÀÌ °¡Àå ±ä »óÇ°À» ±âÁØÀ¸·Î ¹è¼ÛµË´Ï´Ù.
±ººÎ´ë, ±³µµ¼Ò µî ƯÁ¤±â°üÀº ¿ìü±¹ Åù踸 ¹è¼Û°¡´ÉÇÕ´Ï´Ù.
¹è¼Ûºñ´Â ¾÷ü ¹è¼Ûºñ Á¤Ã¥¿¡ µû¸¨´Ï´Ù.