»ó¼¼Á¤º¸
ÇÁ·ÐÆ®¿£µå °³¹ß ù°ÉÀ½
- ÀúÀÚ
- Hara Kazuhiro
- ÃâÆÇ»ç
- Á¤º¸¹®È»ç
- ÃâÆÇÀÏ
- 2018-11-15
- µî·ÏÀÏ
- 2019-01-29
- ÆÄÀÏÆ÷¸Ë
- EPUB
- ÆÄÀÏÅ©±â
- 43MB
- °ø±Þ»ç
- ±³º¸¹®°í
- Áö¿ø±â±â
-
PC
PHONE
TABLET
ÇÁ·Î±×·¥ ¼öµ¿¼³Ä¡
ºä¾îÇÁ·Î±×·¥ ¼³Ä¡ ¾È³»
Ã¥¼Ò°³
ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·ÐÆ®¿£µå °³¹ß ÇÁ·¹ÀÓ¿öÅ©ÀÇ Ã¹°ÉÀ½!
ÀÌ Ã¥Àº 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 À¥ µðÀÚÀ̳Ê
ÀúÀÚ¼Ò°³
ÀúÀÚ : 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 ÄÄÆ÷³ÍÆ® ±¸ÇöÇϱâ
ä³Î ¸ñ·Ï ±¸ÇöÇϱâ
º¸´Ù ½Ç¿ëÀûÀÎ ¾ÖÇø®ÄÉÀ̼ÇÀ» ±¸ÇöÇϱâ À§ÇØ
ã¾Æº¸±â