|
|
|
AngularJS ¹ÝÀÀÇü À¥¾Û °³¹ß°ú ¼º´É ÃÖÀûÈ : MVC ÆÐÅÏ°ú Æ®À§ÅÍ ºÎÆ®½ºÆ®·¦À» ÀÌ¿ëÇÑ
|
|
|
acorn PACKT1
¤Ó ¸¶Æ¼¾Æ½º ³Ú¼¾(Matthias Nehlsen), Á¶È¿¼º
¤Ó
¿¡ÀÌÄÜÃâÆÇ
¤Ó
AngularJS UI Development
|
|
|
|
- Á¦ÈÞ¸ô ÁÖ¹® ½Ã °í°´º¸»ó, ÀϺΠÀ̺¥Æ® Âü¿© ¹× ÁõÁ¤Ç° ÁõÁ¤, ÇÏ·ç/´çÀÏ ¹è¼Û¿¡¼ Á¦¿ÜµÇ¹Ç·Î Âü°í ¹Ù¶ø´Ï´Ù.
-
-
-
±¸±ÛÀº ´Ù¾çÇÑ ºÐ¾ß¿¡¼ °³¹ßÀڵ鿡°Ô À¯ÀÍÇÑ Ç÷§Æû°ú ¶óÀ̺귯¸®¸¦ Á¦°øÇÑ´Ù. º°µµÀÇ ÆÀÀ» ±¸¼ºÇؼ 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)¸¦ ±¸¼ºÇÏ´Â ¹æ¹ý
-
-
|
¸¶Æ¼¾Æ½º ³Ú¼¾(Matthias Nehlsen) [Àú]
|
|
-
15³â°£ Á¤º¸ Å×Å©³î·ÎÁö ºÐ¾ß¿¡¼ ÀÏÇÑ ÇÁ¸®·£¼ ¼ÒÇÁÆ®¿þ¾î ¿£Áö´Ï¾îÀÌÀÚ ¿Á¤ÀûÀÎ ¿ÀǼҽº ÄÁÆ®¸®ºäÅÍ´Ù. ÇöÀç À¥ ¾ÖÇø®ÄÉÀ̼ǿ¡ ¿Á¤À» ½ñ°í Àִµ¥ ÁÖ·Î AngularJS¸¦ È°¿ëÇؼ °³¹ßÇÑ´Ù. ÇԺθ£Å© AngularJS ¹ÌÆ®¾÷(Meetup)À» â¼³Çß´Ù. https://github.com/matthiasn¿¡ µé¾î°¡¸é ¿ÀǼҽº ÇÁ·ÎÁ§Æ®¸¦, http://matthiasnehlsen.com¿¡ °¡¸é ºí·Î±×¸¦ È®ÀÎÇÒ ¼ö ÀÖ´Ù. Æ®À§ÅÍ¿¡¼ @matthiasnehlsen·Î °Ë»öÇϸé ÆȷοìÇÒ ¼ö ÀÖ´Ù.
Àú¼ [AngularJS ¹ÝÀÀÇü À¥¾Û °³¹ß°ú ¼º´É ÃÖÀûÈ]
-
|
Á¶È¿¼º [Àú]
|
|
-
±¤¿î´ëÇб³ ÀüÀÚ°øÇаú¸¦ Á¹¾÷ÇÏ°í µ¿´ëÇпø ÀÓº£µðµå ¼ÒÇÁÆ®¿þ¾î °øÇаú¿¡¼ ¾Èµå·ÎÀ̵å¿Í ºí·çÅõ½º¸¦ Àü°øÇß´Ù. °ú°Å ¿Àºñ°í¿¡¼ À¥ °³¹ßÀÚ·Î È°µ¿ÇÏ°í ÀÖ´Â ³ëµå¿¡ °ü½ÉÀÌ ¸¹Àº Çູ °³¹ßÀÚ´Ù. ÇູÇÑ HMI WebApp °³¹ß ÆÀ¿¡¼ Â÷·®¿ë Ç÷§Æû¿¡ ¿Ã¶ó°¡´Â À¥ ¾ÛÀ» °³¹ßÇÏ¸é¼ ¸¹Àº °æÇè°ú ½Ç·ÂÀ» ½×¾Ò´Ù. ÇöÀç ºê¶óÀÌ´ÏŬ¿¡ ±Ù¹«ÇÏ¸é¼ ¼¹ö¿Í Ŭ¶óÀ̾ðÆ®¸¦ °³¹ßÇϸç, ºòµ¥ÀÌÅÍ ºÐ¼®¿¡ °ü½ÉÀÌ ¸¹°í, ½ÇÁ¦ µ¥ÀÌÅÍ ºÐ¼® »ç·Ê¸¦ ¸¸µé°í ÀÖ´Ù. ¹ø¿ª ÀÛ¾÷À» ÅëÇØ Ã¥À» Àд ¸ðµç »ç¶÷¿¡°Ô ²À µµ¿òÀÌ µÇ±â¸¦ ¹Ù¶ó´Â ¸¶À½À» ´Ã Ç°°í ÀÖ´Ù. ¿¡ÀÌÄÜÃâÆǻ翡¼ Ãâ°£ÇÑ [³ëµå·Î ÇÏ´Â À¥ ¾Û Å×½ºÆ® ÀÚµ¿È](2013), [ÀͽºÇÁ·¹½º ÇÁ·¹ÀÓ¿öÅ©·Î ÇÏ´Â ³ëµå À¥ ¾Û ÇÁ·Î±×·¡¹Ö](2014), [Storm ½Ç½Ã°£ ºòµ¥ÀÌÅÍ ºÐ¼® Ç÷§Æû](2014), [¾Èµå·ÎÀ̵å À½¼º ÀÎ½Ä ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ß](2014), [Spark·Î ÇÏ´Â °í¼Ó ºòµ¥ÀÌÅÍ ºÐ¼®°ú ó¸®](2014), [AngularJS ¹ÝÀÀÇü À¥¾Û °³¹ß°ú ¼º´É ÃÖÀûÈ](2015), [¸®¾×Æ® Á¤º¹Çϱâ](2016)¸¦ ¹ø¿ªÇß´Ù.
-
-
Àüü 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ÀÏ ÀÌ»óÀÇ ½Ã°£ÀÌ ¼Ò¿äµË´Ï´Ù. |
|
|
|
|