ÇÁ·ÐÆ®¿£µå °³¹ß ù°ÉÀ½
- ÀúÀÚHara Kazuhiro µîÀú/½ÉÈ¿¼· ¿ª
- ÃâÆÇ»çÁ¤º¸¹®È»ç
- ÃâÆÇÀÏ2018-11-20
- µî·ÏÀÏ2020-01-31
º¸À¯ 2, ´ëÃâ 0,
¿¹¾à 0, ´©Àû´ëÃâ 14, ´©Àû¿¹¾à 0
Ã¥¼Ò°³
ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·ÐÆ®¿£µå °³¹ß ÇÁ·¹ÀÓ¿öÅ©ÀÇ Ã¹°ÉÀ½!¡ºÇÁ·ÐÆ®¿£µå °³¹ß ù°ÉÀ½¡»Àº dzºÎÇÑ UI¸¦ ±¸ÃàÇÒ ¼ö ÀÖ´Â ÀÚ¹Ù½ºÅ©¸³Æ®·Î ¸¸µç ÇÁ·ÐÆ®¿£µå ÇÁ·¹ÀÓ¿öÅ©·Î React, Angular, Vue.js, React Native¸¦ ´Ù·é´Ù. ¶ÇÇÑ iOS¿Í Android¿ë ³×ÀÌƼºê ÀÀ¿ë ÇÁ·Î±×·¥À» ¸¸µé ¼ö ÀÖ´Ù. ½½·¢(Slack) ½ºÅ¸ÀÏÀÇ Ã¤Æà ¾ÖÇø®ÄÉÀ̼ÇÀ» °¢°¢ÀÇ ÇÁ·¹ÀÓ¿öÅ©·Î ¸¸µé¾îº¸´Â °úÁ¤À¸·Î ÀÌ·ç¾îÁ® ÀÖÀ¸¸ç, À̸¦ À§ÇØ ¸ÕÀú API ¼¹ö¸¦ ¸¸µé¾îº¸´Â °úÁ¤À» ¾Õ¿¡ Ãß°¡ÇÏ¿´´Ù. ¶ÇÇÑ API ¼¹ö°¡ ¿Ï¼ºµÇ¸é ÀÌµé °¢ ÇÁ·¹ÀÓ¿öÅ©·Î °°Àº API ¼¹ö¸¦ ÅëÇØ °°Àº ±â´ÉÀ» Á¦°øÇÏ´Â ¾ÖÇø®ÄÉÀ̼ÇÀ» ¸¸µé¾î º¸°í, React Native´Â ¸ð¹ÙÀÏ ³×ÀÌƼºê ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ßÀ» ¸ñÀûÀ¸·Î ÇÏ´Â ÇÁ·¹ÀÓ¿öÅ©À̹ǷΠSPA(´ÜÀÏ ÆäÀÌÁö ¾ÖÇø®ÄÉÀ̼Ç)¸¦ ³Ñ¾î ¸ð¹ÙÀÏ ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ßµµ ¹è¿öº¼ ¼ö ÀÖ´Ù. React, Vue.js, Angular¿Í °°Àº ÇÁ·ÐÆ®¿£µå °è¿ ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·¹ÀÓ¿öÅ©¸¦ ¹è¿ì°íÀÚ ÇÏ´Â À¥ °³¹ßÀÚ³ª jQueryÀÇ °æÇèÀÌ ÀÖ°í SPA(Single Page Application)µµ ÀÌÇØÇÏ°í ¹è¿ì°íÀÚ ÇÏ´Â HTML/CSS À¥ µðÀÚÀ̳ʵ鿡°Ô ÃßõµÇ¾î Áø´Ù.
ÀúÀÚ¼Ò°³
À¥ µðÀÚÀÌ³Ê °â ¿£Áö´Ï¾î. ´Ù¾çÇÑ ÀÚ¸®¸¦ °ÅÄ¡¸ç À¥À» Áß½ÉÀ¸·Î ÁÁÀº Á¦Ç°À» ¸¸µå´Âµ¥ Žµ¶ÇÏ°í ÀÖ´Ù. ÃÖ±Ù¿¡´Â ÀÎÇÁ¶ó¿Í °ü·ÃµÈ °øºÎ¸¦ ÇÏ´Â ÁßÀÌ´Ù. À¥ µðÀÚÀÎ Æ®·»µå¸¦ ¸®¼Ä¡ÇÏ´Â °ÍÀÌ Æò»ýÀÇ ¾÷ÀÌ´Ù. Àú¼·Î´Â ¡ºPlay Framework 2 öÀú ÀÔ¹®¡», ¡ºÇÁ·Î¼¼½º ¿Àºê À¥ µðÀÚÀΡ» µîÀÌ ÀÖ´Ù.
¸ñÂ÷
Part 1. ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·ÐÆ®¿£µå °³¹ß ÇÁ·¹ÀÓ¿öÅ©ÀÇ ÃֽŠµ¿ÇâÁ¦1Àå ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·ÐÆ®¿£µå °³¹ß ÇÁ·¹ÀÓ¿öÅ©ÀÇ ¹ßÀü ÇÁ·¹ÀÓ¿öÅ©¶õ ¹«¾ùÀΰ¡ ÀÚ¹Ù½ºÅ©¸³Æ®ºÎÅÍ ÇÁ·¹ÀÓ¿öÅ©±îÁö ±×¸®°í ã¾Æ¿Â SPAÀÇ ½Ã´ë ÀÌ Ã¥¿¡¼ ´Ù·ç´Â ÇÁ·¹ÀÓ¿öÅ© ±× ¿ÜÀÇ ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·¹ÀÓ¿öÅ©Á¦2Àå SPA¿Í PWA-ÇÁ·ÐÆ®¿£µå ±¸Çö ±â¼úÀÇ ÃֽŠµ¿Çâ Ŭ¶óÀ̾ðÆ® »çÀÌµå ¶ó¿ìÆà CSS in JS ÄÄÆ÷³ÍÆ® ÁöÇâ SSR°ú ÇÁ¸®·»´õ¸µ °¡»ó DOM MVC¿Í MVP, MVVM Flux PWA ÀÏ·ºÆ®·Ð
Part 2. ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·ÐÆ®¿£µå °³¹ßÀ» À§ÇÑ ±âÃÊ Áö½Ä ¹× ȯ°æ ±¸ÃàÁ¦3Àå ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·ÐÆ®¿£µå °³¹ßÀ» À§ÇÑ È¯°æ ±¸Ãà Node.js ¼³Ä¡Çϱâ npm°ú package.json ÇÁ·ÐÆ®¿£µå ºôµå µµ±¸ ¿¡µðÅÍ Á¤¸®Á¦4Àå ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·ÐÆ®¿£µå °³¹ßÀ» À§ÇÑ ±âÃÊ Áö½Ä ECMAScript 2015ÀÇ °³¿ä TypeScriptÀÇ °³¿äÁ¦5Àå ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·ÐÆ®¿£µå °³¹ßÀ» À§ÇÑ ¼¹ö ±¸Ãà ¿¹Á¦ ¾ÖÇø®ÄÉÀ̼ÇÀÇ °³¿ä RESTful API¸¦ ÀÌ¿ëÇÑ Ã¤Æà ¼¹ö äÆà ¼¹öÀÇ RESTful API äÆà ¼¹öÀÇ ±¸Á¶ °³¹ß ȯ°æ ÁغñÇϱâ äÆà ¼¹öÀÇ RESTful API ±¸Çö
Part 3. Slack ½ºÅ¸ÀÏÀÇ ¿¹Á¦¸¦ ¸¸µé¾îº¸¸ç React/Angular/Vue.js ÀÍÈ÷±âÁ¦6Àå React ÀÔ¹® ¹× È°¿ëÇϱâ ReactÀÇ ±âÃÊ Áö½Ä props¿Í state ÄÄÆ÷³ÍÆ®ÀÇ »ý¾ÖÁÖ±â ±× ¿Ü Á¤º¸ ¿¹Á¦ ¾ÖÇø®ÄÉÀ̼ÇÀ» ±¸ÇöÇÏ¸ç ¹è¿ì´Â React °³¹ß ¶ó¿ìÆà ¼³Á¤ ÄÄÆ÷³ÍÆ® ±¸ÇöÇϱ⠸޽ÃÁö Çǵå ÄÄÆ÷³ÍÆ® ±¸ÇöÇϱâ ä³Î »ó¼¼ ÄÄÆ÷³ÍÆ® ±¸ÇöÇϱ⠸޽ÃÁö Æû ÄÄÆ÷³ÍÆ® ±¸ÇöÇϱâ ÄÄÆ÷³ÍÆ® °£ÀÇ ¿¬µ¿ º¸´Ù ½Ç¿ëÀûÀÎ ¾ÖÇø®ÄÉÀ̼ÇÀ» ±¸ÇöÇϱâ À§ÇØÁ¦7Àå Angular ÀÔ¹® ¹× È°¿ëÇϱâ Angular¿¡ ´ëÇÑ ±âÃÊ Áö½Ä AngularÀÇ Æ¯Â¡ ¾ÆÅ°ÅØó ¹× ÁÖ¿ä °³³ä AngularJS·ÎºÎÅÍ ¸¶À̱׷¹À̼ÇÇϱâ UI ¶óÀ̺귯¸® Angular °ü·Ã Ä¿¹Â´ÏƼ ¸¸µé¾îº¸¸ç ¹è¿ì´Â Angular °³¹ß Angular CLI·Î ÇÁ·ÎÁ§Æ® ¸¸µé±â Angular Material µµÀÔÇϱâ ä³Î ¸ñ·Ï ±¸ÇöÇϱ⠶ó¿ìÆà ¼³Á¤Çϱ⠸޽ÃÁö ÇÇµå ±¸ÇöÇϱ⠸޽ÃÁö Æû ±¸ÇöÇϱ⠺θðÀÚ½Ä °ü°è°¡ ¾Æ´Ñ ÄÄÆ÷³ÍÆ® ¿¬µ¿½ÃÅ°±â º¸´Ù ½Ç¿ëÀûÀÎ ¾ÖÇø®ÄÉÀ̼ÇÀ» ±¸ÇöÇϱâ À§ÇØÁ¦8Àå Vue.js ÀÔ¹® ¹× È°¿ëÇϱâ Vue.js¿¡ ´ëÇÑ ±âÃÊ Áö½Ä Vue.jsÀÇ Æ¯Â¡ Vue ¼³Ä¡Çϱâ äÆà ¾ÖÇø®ÄÉÀÌ¼Ç ¸¸µé±â »õ·Î »ý¼ºÇÑ ÇÁ·ÎÁ§Æ® È®ÀÎÇϱ⠴ÜÀÏ ÆÄÀÏ ÄÄÆ÷³ÍÆ® ÄÄÆ÷³ÍÆ® ºÐÇÒ°ú ÇÁ·ÎÆÛƼ¸¦ ÀÌ¿ëÇÑ µ¥ÀÌÅÍ Àü´Þ ÄÄÆ÷³ÍÆ® ´õ Àß È°¿ëÇϱâ Element ¶óÀ̺귯¸® »ç¿ëÇϱâ Á¤¸®
Part 4. Slack ½ºÅ¸ÀÏÀÇ ¿¹Á¦¸¦ ¸¸µé¾îº¸¸ç React Native ¹è¿ì±âÁ¦9Àå React Native ÀÔ¹® ¹× È°¿ëÇϱâ React Native¿¡ ´ëÇÑ ±âÃÊ Áö½Ä React NativeÀÇ Æ¯Â¡ React Native¸¦ »ç¿ëÇϱâ À§ÇØ ¾Ë¾Æ¾ß ÇÒ »çÇ× React NativeÀÇ ½Ç¿ë¼º React Native °³¹ß ȯ°æ ±¸ÃàÇϱâ React Native ½ÃÀÛÇϱ⠿¹Á¦ ¾ÖÇø®ÄÉÀ̼ÇÀ» ±¸ÇöÇغ¸¸ç React Native ¹è¿ì±â ¡°Ã¤³Î »ó¼¼ ȸ顱ÀÇ ¸Þ½ÃÁö ¸ñ·Ï ºÎºÐ ±¸ÇöÇϱ⠡°Ã¤³Î »ó¼¼ ȸ顱ÀÇ ¸Þ½ÃÁö Æû ºÎºÐ ±¸ÇöÇϱâ Channel ÄÄÆ÷³ÍÆ® ±¸ÇöÇϱâ ä³Î ¸ñ·Ï ±¸ÇöÇϱ⠺¸´Ù ½Ç¿ëÀûÀÎ ¾ÖÇø®ÄÉÀ̼ÇÀ» ±¸ÇöÇϱâ À§ÇØ
ÇÑÁÙ ¼Æò