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

ÇÁ·ÐÆ®¿£µå °³¹ß ù°ÉÀ½
ÇÁ·ÐÆ®¿£µå °³¹ß ù°ÉÀ½
  • ÀúÀÚ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 ÄÄÆ÷³ÍÆ® ±¸ÇöÇϱâ
ä³Î ¸ñ·Ï ±¸ÇöÇϱâ
º¸´Ù ½Ç¿ëÀûÀΠ¾ÖÇø®ÄÉÀ̼ÇÀ» ±¸ÇöÇϱâ À§ÇØ

ÇÑÁÙ ¼­Æò