ÄÁÅÙÃ÷»ó¼¼º¸±â

ÇÁ·ÐÆ®¿£µå °³¹ß ù°ÉÀ½
ÇÁ·ÐÆ®¿£µå °³¹ß ù°ÉÀ½
  • ÀúÀÚHara Kazuhiro
  • ÃâÆÇ»çÁ¤º¸¹®È­»ç
  • ÃâÆÇÀÏ2018-11-15
  • µî·ÏÀÏ2019-06-20
º¸À¯ 5, ´ëÃâ 0, ¿¹¾à 0, ´©Àû´ëÃâ 10, ´©Àû¿¹¾à 0

Ã¥¼Ò°³



ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·ÐÆ®¿£µå °³¹ß ÇÁ·¹ÀÓ¿öÅ©ÀǠù°ÉÀ½!



À̠åÀº Ç³ºÎÇÑ 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 À¥ µðÀÚÀ̳Ê

ÀúÀÚ¼Ò°³



ÀúÀÚ : Hara Kazuhiro

ÀúÀÚ : Hara Kazuhiro

À¥ µðÀÚÀ̳ʠ°â ¿£Áö´Ï¾î. ´Ù¾çÇÑ ÀÚ¸®¸¦ °ÅÄ¡¸ç À¥À» Áß½ÉÀ¸·Î ÁÁÀº Á¦Ç°À» ¸¸µå´Âµ¥ Å½µ¶ÇÏ°í ÀÖ´Ù. ÃÖ±Ù¿¡´Â ÀÎÇÁ¶ó¿Í °ü·ÃµÈ °øºÎ¸¦ Çϴ ÁßÀÌ´Ù. À¥ µðÀÚÀΠƮ·»µå¸¦ ¸®¼­Ä¡Çϴ °ÍÀÌ Æò»ýÀÇ ¾÷ÀÌ´Ù. Àú¼­·Î´Â ¡°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 ÄÄÆ÷³ÍÆ® ±¸ÇöÇϱâ

ä³Î ¸ñ·Ï ±¸ÇöÇϱâ

º¸´Ù ½Ç¿ëÀûÀΠ¾ÖÇø®ÄÉÀ̼ÇÀ» ±¸ÇöÇϱâ À§ÇØ



ã¾Æº¸±â