±¹³»µµ¼
Àü°øµµ¼/´ëÇб³Àç
°øÇаè¿
ÄÄÇ»ÅÍ°øÇÐ
Á¤°¡ |
36,000¿ø |
---|
32,400¿ø (10%ÇÒÀÎ)
1,800P (5%Àû¸³)
ÇÒÀÎÇýÅÃ | |
---|---|
Àû¸³ÇýÅà |
|
|
|
Ãß°¡ÇýÅÃ |
|
À̺¥Æ®/±âȹÀü
¿¬°üµµ¼
»óÇ°±Ç
ÀÌ»óÇ°ÀÇ ºÐ·ù
Ã¥¼Ò°³
±âº»±â¿¡ Ãæ½ÇÇÑ ¸®¾×Æ® ÀÔ¹®¼!
ÀÌ Ã¥Àº React.js¸¦ »ç¿ëÇØ À¥/¸ð¹ÙÀÏÀ» °³¹ßÇÏ°íÀÚ ÇÏ´Â À¥/¸ð¹ÙÀÏ °³¹ßÀÚ, ¼ÒÇÁÆ®¿þ¾î ¿£Áö´Ï¾î¸¦ ´ë»óÀ¸·Î ÇÑ´Ù. 1ºÎ´Â JSX, »óÅ °´Ã¼, ¶óÀÌÇÁ»çÀÌŬ À̺¥Æ®, DOM À̺¥Æ®, jQuery UI À̺¥Æ®, Æû, ¸®¾×Æ® ÄÄÆ÷³ÍÆ® °°Àº ¸®¾×Æ®ÀÇ ÇÙ½É °³³äÀ» ´Ù·ç°í, 2ºÎ´Â Webpack, React Router, Redux, GraphQL, Jest, Node.js, Express °°Àº ¸®¾×Æ® °³¹ß »ýÅ°踦 »ìÆ캻´Ù. ±×¸®°í °¢ ºÎ ¸¶Áö¸·¿¡ ¸®¾×Æ®¸¦ °æÇèÇغ¸°í, ¾Õ¼ ÇнÀÇÑ °³³äÀ» È®°íÈ÷ ´ÙÁú ¼ö ÀÖ´Â Å« ÇÁ·ÎÁ§Æ®¸¦ ¼¼ °³¾¿ ÁغñÇß´Ù.
ÃâÆÇ»ç ¼Æò
¸®¾×Æ®¿Í °ü·Ã »ýÅ°踦 ÀÌ¿ëÇÑ Ç® ½ºÅà À¥/¾Û °³¹ß!
¿Ö ¸®¾×Æ®Àΰ¡?
React.js´Â ÆäÀ̽ººÏÀÌ 2013³â¿¡ ¿ÀÇ ¼Ò½º·Î °ø°³ÇÑ ÀÌ·¡ ³ÝÇø¯½º, ¿¡¾îºñ¾Øºñ, ÀνºÅ¸±×·¥ °°Àº À¯¸í ±â¾÷À» ºñ·ÔÇÑ ¸¹Àº °÷¿¡¼ »ç¿ëµÇ¸ç ºü¸£°Ô ¼ºÀåÇß´Ù. ¸®¾×Æ®ÀÇ ÀαⰡ ³ô¾Ò´ø ÀÌÀ¯´Â À¥ »çÀÌÆ® ¾îµð¼µç UI¸¦ Àç»ç¿ëÇÏ´Â »õ·Î¿î ¹æ½ÄÀ¸·Î ÇÁ·±Æ®¿£µå °³¹ßÀ» È¿À²ÀûÀ¸·Î ¹Ù²ã ³õ¾Ò±â ¶§¹®ÀÌ´Ù. ¸®¾×Æ®´Â ÃÖÃÊ·Î ÅÛÇø´ ¾øÀÌ ¼ø¼öÇÏ°Ô ÀÚ¹Ù½ºÅ©¸³Æ®¸¸À¸·Î ÄÄÆ÷³ÍÆ®¸¦ Á¤ÀÇÇØ UI¸¦ ±¸¼ºÇÑ´Ù. ±×¸®°í ÀÌ ¹æ¹ýÀÌ À¯Áöº¸¼ö, Àç»ç¿ë, È®ÀåÇϱ⵵ ´õ ½±´Ù´Â »ç½ÇÀ» ÀÔÁõÇß´Ù.
¸®¾×Æ®ÀÇ ÇÙ½É °³³äºÎÅÍ °ü·Ã »ýÅ°踦 È°¿ëÇÑ Çö½ÇÀûÀÎ ¿¹Á¦±îÁö
1ºÎ¿¡¼ ¸®¾×Æ®ÀÇ ÇÙ½É °³³äÀ» »ìÆ캻´Ù. ¸®¾×Æ®ÀÇ Æ¯Â¡, JSX, ¸®¾×Æ®¿¡¼ ÄÄÆ÷³ÍÆ®, À̺¥Æ®, ÆûÀ» ´Ù·ç´Â ¹æ¹ýÀ» ¹è¿î´Ù. ±×¸®°í 1ºÎ ¸¶Áö¸·¿¡ ÇнÀÇÑ °³³äÀ» ¹ÙÅÁÀ¸·Î Menu, Tooltip, Timer ÄÄÆ÷³ÍÆ®¸¦ È°¿ëÇÑ ¼¼ °¡Áö ÇÁ·ÎÁ§Æ®¸¦ ÁøÇàÇÑ´Ù. ÇÁ·ÎÁ§Æ®¸¦ ÅëÇØ ¸®¾×Æ®ÀÇ Áß¿ä °³³ä°ú ±â¼úÀ» ½ÇÁ¦ ¾÷¹«¿¡ »ç¿ëÇØ º»´Ù°í °¡Á¤ÇÏ°í º¹½ÀÇغ¼ ¼ö ÀÖ´Ù.
2ºÎ´Â ¸®¾×Æ® °³¹ß »ýÅ°踦 ±¸¼ºÇϴ ģ±¸µéÀ» »ìÆ캻´Ù. Webpack, Redux, GraphQL, Jest¸¦ ´Ù·ç°í, ¸®¾×Æ®ÀÇ »óÅÂ(state)¿Í ÇÁ·±Æ®¿£µå, ¹é¿£µå¸¦ ¸ðµÎ ÀÚ¹Ù½ºÅ©¸³Æ®·Î ±¸¼ºÇÏ´Â À¯´Ï¹ö¼³ ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ »ìÆ캻´Ù. ÇнÀÇÑ ´Ù¾çÇÑ ±â¼úÀ» Á¾ÇÕÀûÀ¸·Î »ç¿ëÇغ¼ ¼ö ÀÖµµ·Ï ¿ª½Ã ¼¼ °¡Áö ÇÁ·ÎÁ§Æ®¸¦ ÁغñÇß´Ù. ÇÁ·ÎÁ§Æ®¸¦ ÅëÇØ ¸®¾×Æ®¿¡ ´ëÇÑ °æÇèÀ» Å°¿ì°í ÇнÀÇÑ Áö½ÄÀ» È®°íÇÏ°Ô Á¤¸®ÇÒ ¼ö ÀÖ´Ù.
̵̧ȍ
Á¸ ¼Õ¸ÞÁî(<¼ÒÇÁÆ® ½ºÅ³> ÀúÀÚ)
´©±¸³ª ÀÌÇØÇÒ ¼ö ÀÖ´Â ½¬¿î ¹æ¹ýÀ¸·Î ¼³¸íÇÑ´Ù. ¶ÇÇÑ, ½Ã½ÃÇÏÁö ¾Ê°í À¯¿ëÇÑ ÇÁ·ÎÁ§Æ® ¿©¼¸ °³°¡ ½Ç·Á ÀÖ´Ù. ÀÌ Ã¥Àº ¸®¾×Æ®¸¦ ¹è¿ï ¼ö ÀÖ´Â °¡Àå ÁÁÀº ¹æ¹ýÀÌ´Ù.
¸®Â÷µå ÄÚ(Capital One¼ÒÇÁÆ®¿þ¾î ¿£Áö´Ï¾î)
¸®¾×Æ®¸¦ óÀ½ Á¢ÇÏ°í ¿Ïº®ÇÏ°Ô ¼÷´ÞÇÏ°íÀÚ ÇÏ´Â »ç¶÷¿¡°Ô ¹Ýµå½Ã ÃßõÇÏ°í ½Í´Ù.
¿¡¸¯ ÇÚüƮ(
¸®¾×Æ®¿¡ ´ëÇÑ ±âÃÊ ³»¿ëÀ» ³Ñ¾î¼¼ ±Ùº»ÀûÀÎ ÀÌÇØ¿Í °ü·ÃµÈ ȯ°æ ±¸¼º±îÁö ±íÀÌ ÀÖ°Ô ´Ù·é´Ù.
ºê·ç³ë ¿ÍÆ®(hypermedia.tech ÄÁ¼³ÆþÆÅ°ÅØÆ®)
¸®¾×Æ®ÀÇ Áß¿äÇÑ ºÎºÐÀ» ½±°Ô ¹Þ¾ÆµéÀÏ ¼ö ÀÖµµ·Ï ¼³¸íÇÑ´Ù. ¸®¾×Æ®¸¦ ´Ù·ç±â·Î °áÁ¤Çß´Ù¸é ÀÌ Ã¥À¸·Î ½ÃÀÛÇ϶ó.
¾Ë¶õ Æù ½¨ÄÌ(FoundHuman ±â¼úÀü·« ºÎ»çÀå)
¸®¾×Æ®ÀÇ ±Ùº»ÀûÀÎ ºÎºÐÀ» ¸í·áÇÏ°Ô ¼³¸íÇÏ°í, ¸®¾×Æ®¸¦ ÀÌ¿ëÇÑ ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ß °úÁ¤ÀÇ ÀÌÁ¡À» ºüÁü¾øÀÌ Àü´ÞÇÑ´Ù.
¸ñÂ÷
1ºÎ React ±âÃÊ
1Àå React »ìÆ캸±â
__1.1 React¶õ ¹«¾ùÀΰ¡?
__1.2 React°¡ ÇØ°áÇÒ ¼ö ÀÖ´Â ¹®Á¦
__1.3 ReactÀÇ ÀåÁ¡
____1.3.1 °£°á¼º
____1.3.2 ¼Óµµ¿Í Å×½ºÆ® ¿ëÀ̼º
____1.3.3 ReactÀÇ Æø³ÐÀº °³¹ß Ä¿¹Â´ÏƼ¿Í »ýÅ°è
__1.4 ReactÀÇ ´ÜÁ¡
__1.5 À¥ ¾ÖÇø®ÄÉÀ̼ǿ¡ React Àû¿ëÇϱâ
____1.5.1 React ¶óÀ̺귯¸®¿Í ·»´õ¸µ ´ë»ó
____1.5.2 ´ÜÀÏ ÆäÀÌÁö ¾ÖÇø®ÄÉÀ̼ǰú React
____1.5.3 React °³¹ß ½ºÅÃ
__1.6 ù ¹ø° React ¾Û ¸¸µé±â: Hello World
__1.7 ÄûÁî
__1.8 ¿ä¾à
__1.9 ÄûÁî Á¤´ä
2Àå React ù°ÉÀ½
__2.1 ¿¤¸®¸ÕÆ® Áßø
__2.2 React ÄÄÆ÷³ÍÆ® Ŭ·¡½º »ý¼º
__2.3 React ¼Ó¼º »ç¿ëÇϱâ
__2.4 ÄûÁî
__2.5 ¿ä¾à
__2.6 ÄûÁî Á¤´ä
3Àå JSX
__3.1 JSXÀÇ Á¤ÀÇ¿Í ÀåÁ¡
__3.2 JSXÀÇ ÀÌÇØ
____3.2.1 JSX·Î React ¿¤¸®¸ÕÆ® »ý¼ºÇϱâ
____3.2.2 React ÄÄÆ÷³ÍÆ®¿¡ JSX »ç¿ëÇϱâ
____3.2.3 JSX¿¡¼ º¯¼ö Ãâ·ÂÇϱâ
____3.2.4 JSX¿¡¼ ¼Ó¼º »ç¿ëÇϱâ
____3.2.5 React ÄÄÆ÷³ÍÆ® ¸Þ¼µå »ý¼ºÇϱâ
____3.2.6 JSXÀÇ if/else ó¸®
____3.2.7 JSXÀÇ ÁÖ¼® ÀÛ¼º ¹æ¹ý
__3.3 BabelÀ» ÀÌ¿ëÇÑ JSX Æ®·£½ºÆÄÀÏ·¯ ¼³Á¤Çϱâ
__3.4 React¿Í JSXÀÇ ±î´Ù·Î¿î ºÎºÐ
____3.4.1 Ư¼ö¹®ÀÚ
____3.4.2 data- ¼Ó¼º
____3.4.3 ½ºÅ¸ÀÏ ¼Ó¼º
____3.4.4 class¿Í for ¼Ó¼º
____3.4.5 ºÒ °ªÀ» ¼Ó¼º °ªÀ¸·Î »ç¿ëÇÏ´Â °æ¿ì
__3.5 ÄûÁî
__3.6 ¿ä¾à
__3.7 ÄûÁî Á¤´ä
4Àå React ÄÄÆ÷³ÍÆ®ÀÇ »óÅ °´Ã¼
__4.1 React ÄÄÆ÷³ÍÆ®ÀÇ »óŶõ?
__4.2 »óÅ °´Ã¼ ´Ù·ç±â
____4.2.1 »óÅ °´Ã¼¿¡ Á¢±ÙÇϱâ
____4.2.2 Ãʱ⠻óÅ ¼³Á¤Çϱâ
____4.2.3 »óÅ °»½ÅÇϱâ
__4.3 »óÅ °´Ã¼¿Í ¼Ó¼º
__4.4 »óźñÀúÀå ÄÄÆ÷³ÍÆ®
__4.5 »óźñÀúÀå ÄÄÆ÷³ÍÆ®¿Í »óÅÂÀúÀå ÄÄÆ÷³ÍÆ®ÀÇ ºñ±³ 1
__4.6 ÄûÁî
__4.7 ¿ä¾à
__4.8 ÄûÁî Á¤´ä
5Àå React ÄÄÆ÷³ÍÆ® ¶óÀÌÇÁ»çÀÌŬ À̺¥Æ®
__5.1 React ÄÄÆ÷³ÍÆ® ¶óÀÌÇÁ»çÀÌŬ À̺¥Æ® ÇÑ´«¿¡ »ìÆ캸±â
__5.2 À̺¥Æ® ºÐ·ù
__5.3 À̺¥Æ® ±¸Çö
__5.4 ¸ðµç À̺¥Æ® ½ÇÇàÇϱâ
__5.5 ¸¶¿îÆà À̺¥Æ®
____5.5.1 componentWillMount( )
____5.5.2 componentDidMount( )
__5.6 °»½Å À̺¥Æ®
____5.6.1 componentWillReceiveProps(newProps)
____5.6.2 shouldComponentUpdate( )
____5.6.3 componentWillUpdate( )
____5.6.4 componentDidUpdate( )
__5.7 ¾ð¸¶¿îÆà À̺¥Æ®
____5.7.1 componentWillUnmount( )
__5.8 °£´ÜÇÑ ¿¹Á¦
__5.9 ÄûÁî
__5.10 ¿ä¾à
__5.11 ÄûÁî Á¤´ä
6Àå React¿¡¼ À̺¥Æ® ´Ù·ç±â
__6.1 React¿¡¼ DOM À̺¥Æ® ´Ù·ç±â
____6.1.1 ĸó ¹× ¹öºí¸µ ´Ü°è
____6.1.2 React À̺¥Æ® »ìÆ캸±â
____6.1.3 React ÇÕ¼º À̺¥Æ® °´Ã¼ ´Ù·ç±â
____6.1.4 À̺¥Æ®¿Í »óÅ »ç¿ëÇϱâ
____6.1.5 À̺¥Æ® Çڵ鷯¸¦ ¼Ó¼ºÀ¸·Î Àü´ÞÇϱâ
____6.1.6 ÄÄÆ÷³ÍÆ® °£ÀÇ µ¥ÀÌÅÍ ±³È¯
__6.2 React°¡ Áö¿øÇÏÁö ¾Ê´Â DOM À̺¥Æ® ó¸®Çϱâ
__6.3 React¸¦ ´Ù¸¥ ¶óÀ̺귯¸®¿Í ÅëÇÕÇϱâ: jQuery UI À̺¥Æ®
____6.3.1 ¹öÆ° ÅëÇÕÇϱâ
____6.3.2 ¶óº§ ÅëÇÕÇϱâ
__6.4 ÄûÁî
__6.5 ¿ä¾à
__6.6 ÄûÁî Á¤´ä
7Àå React¿¡¼ Æû ´Ù·ç±â
__7.1 React¿¡¼ ÆûÀ» ´Ù·ç±â À§ÇÑ ±ÇÀå ¹æ¹ý
____7.1.1 React¿¡¼ Æû°ú À̺¥Æ® Á¤ÀÇÇϱâ
____7.1.2 Æû ¿ä¼Ò Á¤ÀÇÇϱâ
____7.1.3 º¯°æ °¨ÁöÇϱâ
____7.1.4 ´ëÃâ ½Åû¼ÀÇ °èÁ¹øÈ£ ¿µ¿ª ¸¸µé±â
__7.2 ÆûÀ» ´Ù·ç´Â ´Ù¸¥ ¹æ¹ý
____7.2.1 ºñÁ¦¾î ¿¤¸®¸ÕÆ®¿¡¼ º¯°æ °¨ÁöÇϱâ
____7.2.2 ºñÁ¦¾î ¿¤¸®¸ÕÆ®¿¡¼ À̺¥Æ®¸¦ °¨ÁöÇÏÁö ¾Ê´Â °æ¿ì
____7.2.3 °ª¿¡ ÂüÁ¶·Î Á¢±ÙÇϱâ
____7.2.4 ±âº»°ª ¼³Á¤Çϱâ
__7.3 ÄûÁî
__7.4 ¿ä¾à
__7.5 ÄûÁî Á¤´ä
8Àå È®À强À» °í·ÁÇÑ React ÄÄÆ÷³ÍÆ®
__8.1 ÄÄÆ÷³ÍÆ®ÀÇ ±âº» ¼Ó¼º
__8.2 React ¼Ó¼º ŸÀÔ°ú À¯È¿¼º °Ë»ç
__8.3 ÀÚ½Ä ¿¤¸®¸ÕÆ® ·»´õ¸µ
__8.4 ÄÚµå Àç»ç¿ëÀ» À§ÇÑ React °íÂ÷ ÄÄÆ÷³ÍÆ® »ý¼ºÇϱâ
____8.4.1 displayNameÀ» ÀÌ¿ëÇÑ ÀÚ½Ä ÄÄÆ÷³ÍÆ®¿Í ºÎ¸ð ÄÄÆ÷³ÍÆ®ÀÇ ±¸ºÐ
____8.4.2 Æîħ ¿¬»êÀÚ¸¦ »ç¿ëÇؼ ¸ðµç ¼Ó¼º Àü´ÞÇϱâ
____8.4.3 °íÂ÷ ÄÄÆ÷³ÍÆ® »ç¿ëÇϱâ
__8.5 ¸ð¹ü »ç·Ê: ÇÁ·¹Á¨Å×ÀÌ¼Ç ÄÄÆ÷³ÍÆ®¿Í ÄÁÅ×ÀÌ³Ê ÄÄÆ÷³ÍÆ®
__8.6 ÄûÁî
__8.7 ¿ä¾à
__8.8 ÄûÁî Á¤´ä
9Àå ÇÁ·ÎÁ§Æ®: Menu ÄÄÆ÷³ÍÆ®
__9.1 ÇÁ·ÎÁ§Æ® ±¸Á¶¿Í °³¹ß ȯ°æ ÁغñÇϱâ
__9.2 JSX¸¦ »ç¿ëÇÏÁö ¾Ê°í ¸¸µå´Â Menu ÄÄÆ÷³ÍÆ®
____9.2.1 Menu ÄÄÆ÷³ÍÆ®
____9.2.2 Link ÄÄÆ÷³ÍÆ®
____9.2.3 ¸Þ´º ÀÛµ¿½ÃÅ°±â
__9.3 JSX·Î ¸¸µå´Â Menu ÄÄÆ÷³ÍÆ®
____9.3.1 Menu ÄÄÆ÷³ÍÆ® ¸®ÆÑÅ丵
____9.3.2 Link ÄÄÆ÷³ÍÆ® ¸®ÆÑÅ丵
____9.3.3 JSX ÇÁ·ÎÁ§Æ® ½ÇÇàÇϱâ
__9.4 °úÁ¦
__9.5 ¿ä¾à
10Àå ÇÁ·ÎÁ§Æ®: Tooltip ÄÄÆ÷³ÍÆ®
__10.1 ÇÁ·ÎÁ§Æ® ±¸Á¶¿Í °³¹ß ȯ°æ ÁغñÇϱâ
__10.2 Tooltip ÄÄÆ÷³ÍÆ®
____10.2.1 toggle( ) ¸Þ¼µå
____10.2.2 render( ) ¸Þ¼µå
__10.3 ½ÇÇàÇϱâ
__10.4 °úÁ¦
__10.5 ¿ä¾à
11Àå ÇÁ·ÎÁ§Æ®: Timer ÄÄÆ÷³ÍÆ®
__11.1 ÇÁ·ÎÁ§Æ® ±¸Á¶¿Í °³¹ß ȯ°æ ÁغñÇϱâ
__11.2 ¾Û ¾ÆÅ°ÅØó
__11.3 TimerWrapper ÄÄÆ÷³ÍÆ®
__11.4 Timer ÄÄÆ÷³ÍÆ®
__11.5 Button ÄÄÆ÷³ÍÆ®
__11.6 ½ÇÇàÇϱâ
__11.7 °úÁ¦
__11.8 ¿ä¾à
2ºÎ React ¾ÆÅ°ÅØó
12Àå Webpack ºôµå µµ±¸
__12.1 WebpackÀÇ ¿ªÇÒ
__12.2 ÇÁ·ÎÁ§Æ®¿¡ Webpack Àû¿ëÇϱâ
____12.2.1 Webpack°ú ÀÇÁ¸ ¸ðµâ ¼³Ä¡
____12.2.2 Webpack ¼³Á¤
__12.3 ÄÚµå ¸ðµâÈ
__12.4 WebpackÀÇ ½ÇÇà°ú ºôµå Å×½ºÆ®
__12.5 ÇÖ ¸ðµâ ´ëü
____12.5.1 HMR ¼³Á¤ ¹æ¹ý
____12.5.2 HMR ½ÇÇà
__12.6 ÄûÁî
__12.7 ¿ä¾à
__12.8 ÄûÁî Á¤´ä
13Àå React ¶ó¿ìÆÃ
__13.1 ¶ó¿ìÅ͸¦ óÀ½ºÎÅÍ ±¸ÇöÇϱâ
____13.1.1 ÇÁ·ÎÁ§Æ® ¼³Á¤
____13.1.2 app.jsx¿¡¼ °æ·Î ¸ÊÇÎ »ý¼ºÇϱâ
____13.1.3 router.jsx ÆÄÀÏ¿¡ Router ÄÄÆ÷³ÍÆ® »ý¼ºÇϱâ
__13.2 React Router
____13.2.1 JSX·Î React Router »ç¿ëÇϱâ
____13.2.2 Çؽà È÷½ºÅ丮
____13.2.3 ºê¶ó¿ìÀú È÷½ºÅ丮
____13.2.4 React Router¸¦ »ç¿ëÇϱâ À§ÇÑ Webpack ¼³Á¤
____13.2.5 ·¹À̾ƿô ÄÄÆ÷³ÍÆ® »ý¼ºÇϱâ
__13.3 React RouterÀÇ ±â´É°ú ÆÐÅÏ
____13.3.1 withRouter °íÂ÷ ÄÄÆ÷³ÍÆ®¸¦ ÀÌ¿ëÇؼ ¶ó¿ìÅÍ¿¡ Á¢±ÙÇϱâ
____13.3.2 ÇÁ·Î±×·¡¹ÖÀûÀ¸·Î ÆäÀÌÁö À̵¿Çϱâ
____13.3.3 URL ¸Å°³º¯¼ö¿Í µ¥ÀÌÅÍ Àü´Þ
____13.3.4 React Router¿¡¼ ¼Ó¼º Àü´ÞÇϱâ
__13.4 BackboneÀ» ÀÌ¿ëÇÑ ¶ó¿ìÆÃ
__13.5 ÄûÁî
__13.6 ¿ä¾à
__13.7 ÄûÁî Á¤´ä
14Àå Redux¸¦ ÀÌ¿ëÇÑ µ¥ÀÌÅÍ ´Ù·ç±â
__14.1 ReactÀÇ ´Ü¹æÇâ µ¥ÀÌÅÍ È帧 Áö¿ø
__14.2 Flux µ¥ÀÌÅÍ ¾ÆÅ°ÅØóÀÇ ÀÌÇØ
__14.3 Redux µ¥ÀÌÅÍ ¶óÀ̺귯¸® »ç¿ëÇϱâ
____14.3.1 Redux¸¦ ÀÌ¿ëÇÑ ³ÝÇø¯½º µû¶óÀâ±â
____14.3.2 ÀÇÁ¸ ¸ðµâ°ú ºôµå ¼³Á¤
____14.3.3 Redux »ç¿ëÇϱâ
____14.3.4 ¶ó¿ìÆÃ
____14.3.5 ¸®µà¼ °áÇÕÇϱâ
____14.3.6 ¿µÈ ¸ñ·Ï ¸®µà¼
____14.3.7 ¾×¼Ç
____14.3.8 ¾×¼Ç »ý¼ºÀÚ
____14.3.9 ÄÄÆ÷³ÍÆ®¸¦ ½ºÅä¾î¿¡ ¿¬°áÇϱâ
____14.3.10 ½ºÅä¾î¿¡ ¾×¼Ç Àü´ÞÇϱâ
____14.3.11 ÄÄÆ÷³ÍÆ® ¼Ó¼ºÀ¸·Î ¾×¼Ç »ý¼ºÀÚ Àü´ÞÇϱâ
____14.3.12 ³ÝÇø¯½º ¾Û ½ÇÇàÇϱâ
____14.3.13 Redux ¿ä¾à Á¤¸®
__14.4 ÄûÁî
__14.5 ¿ä¾à
__14.6 ÄûÁî Á¤´ä
15Àå GraphQLÀ» ÀÌ¿ëÇÑ µ¥ÀÌÅÍ ´Ù·ç±â
__15.1 GraphQL
__15.2 ³ÝÇø¯½º ¾Û¿¡ ¹é¿£µå Ãß°¡Çϱâ
____15.2.1 ¼¹ö¿¡ GraphQL ¼³Ä¡Çϱâ
____15.2.2 µ¥ÀÌÅÍ ±¸Á¶
____15.2.3 GraphQL ½ºÅ°¸¶
____15.2.4 API¸¦ È£ÃâÇÏ¿© ÀÀ´äÀ» ½ºÅä¾î¿¡ ÀúÀåÇϱâ
____15.2.5 ¿µÈ ¸ñ·Ï º¸¿©ÁÖ±â
____15.2.6 GraphQL ¿ä¾à Á¤¸®
__15.3 ÄûÁî
__15.4 ¿ä¾à
__15.5 ÄûÁî Á¤´ä
16Àå Jest¸¦ ÀÌ¿ëÇÑ React ´ÜÀ§ Å×½ºÆ®
__16.1 Å×½ºÆ®ÀÇ Á¾·ù
__16.2 Jest¿Í ´Ù¸¥ Å×½ºÆ® ÇÁ·¹ÀÓ¿öÅ©ÀÇ ºñ±³
__16.3 Jest¸¦ ÀÌ¿ëÇÑ ´ÜÀ§ Å×½ºÆ®
____16.3.1 Jest ´ÜÀ§ Å×½ºÆ® ÀÛ¼º
____16.3.2 Jest ¾î½á¼Ç
__16.4 Jest¿Í TestUtils¸¦ ÀÌ¿ëÇÑ UI Å×½ºÆ®
____16.4.1 TestUtils¸¦ ÀÌ¿ëÇÑ ¿¤¸®¸ÕÆ® Ž»ö
____16.4.2 Æнº¿öµå À§Á¬À» À§ÇÑ UI Å×½ºÆ®
____16.4.3 ¾èÀº ·»´õ¸µ
__16.5 TestUtils ¿ä¾à Á¤¸®
__16.6 ÄûÁî
__16.7 ¿ä¾à
__16.8 ÄûÁî Á¤´ä
17Àå React¿Í Node.js¸¦ ÀÌ¿ëÇÑ À¯´Ï¹ö¼È ÀÚ¹Ù½ºÅ©¸³Æ®
__17.1 React¸¦ ¼¹ö¿¡¼ »ç¿ëÇÏ´Â ÀÌÀ¯¿Í À¯´Ï¹ö¼È ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ÀÌÇØ
____17.1.1 ÀûÀýÇÑ ÆäÀÌÁö »öÀÎ
____17.1.2 ´õ ³ªÀº ¼º´É°ú ºü¸¥ ¼Óµµ
____17.1.3 ´õ ³ªÀº ÄÚµå À¯Áöº¸¼ö
____17.1.4 React¿Í Node.js¸¦ ÀÌ¿ëÇÑ À¯´Ï¹ö¼È ÀÚ¹Ù½ºÅ©¸³Æ®
__17.2 Node.js¿Í React
__17.3 React¿Í Express: ÄÄÆ÷³ÍÆ®¸¦ ÀÌ¿ëÇÑ ¼¹ö Ãø ·»´õ¸µ
____17.3.1 ¼¹ö¿¡¼ °£´ÜÇÑ ÅؽºÆ® ·»´õ¸µÇϱâ
____17.3.2 HTML ÆäÀÌÁö ·»´õ¸µ
__17.4 Express¿Í React¸¦ ÀÌ¿ëÇÑ À¯´Ï¹ö¼È ÀÚ¹Ù½ºÅ©¸³Æ®
____17.4.1 ÇÁ·ÎÁ§Æ® ±¸Á¶¿Í ¼³Á¤
____17.4.2 ¼¹ö ¼³Á¤
____17.4.3 Handlebars¸¦ ÀÌ¿ëÇÑ ¼¹ö Ãø ·¹À̾ƿô ÅÛÇø´
____17.4.4 ¼¹ö¿¡¼ React ÄÄÆ÷³ÍÆ® ±¸¼ºÇϱâ
____17.4.5 Ŭ¶óÀ̾ðÆ® ÃøÀÇ React ÄÚµå
____17.4.6 Webpack ¼³Á¤
____17.4.7 ¾Û ½ÇÇàÇϱâ
__17.5 ÄûÁî
__17.6 ¿ä¾à
__17.7 ÄûÁî Á¤´ä
18Àå ÇÁ·ÎÁ§Æ®: React Router¸¦ ÀÌ¿ëÇÑ ¼Á¡ ¸¸µé±â
__18.1 ÇÁ·ÎÁ§Æ® ±¸Á¶¿Í Webpack ¼³Á¤
__18.2 ÁÖ HTML ÆÄÀÏ
__18.3 ÄÄÆ÷³ÍÆ® »ý¼ºÇϱâ
____18.3.1 ¸ÞÀÎ ÆÄÀÏ: app.jsx
____18.3.2 Cart ÄÄÆ÷³ÍÆ®
____18.3.3 Checkout ÄÄÆ÷³ÍÆ®
____18.3.4 Modal ÄÄÆ÷³ÍÆ®
____18.3.5 Product ÄÄÆ÷³ÍÆ®
__18.4 ÇÁ·ÎÁ§Æ® ½ÇÇàÇϱâ
__18.5 °úÁ¦
__18.6 ¿ä¾à
19Àå ÇÁ·ÎÁ§Æ®: Jest¸¦ ÀÌ¿ëÇÑ ºñ¹Ð¹øÈ£ °Ë»ç
__19.1 ÇÁ·ÎÁ§Æ® ±¸Á¶¿Í Webpack ¼³Á¤
__19.2 ÁÖ HTML ÆÄÀÏ
__19.3 ºñ¹Ð¹øÈ£ ¸ðµâ ±¸ÇöÇϱâ
____19.3.1 Å×½ºÆ® ÀÛ¼º
____19.3.2 ÄÚµå ±¸Çö
__19.4 Password ÄÄÆ÷³ÍÆ® ±¸ÇöÇϱâ
____19.4.1 Å×½ºÆ® ÀÛ¼º
____19.4.2 ÄÚµå ±¸Çö
__19.5 ½ÇÇàÇϱâ
__19.6 °úÁ¦
__19.7 ¿ä¾à
20Àå ÇÁ·ÎÁ§Æ®: Jest, Express, MongoDB¸¦ ÀÌ¿ëÇÑ ÀÚµ¿¿Ï¼º ÄÄÆ÷³ÍÆ® ±¸Çö
__20.1 ÇÁ·ÎÁ§Æ® ±¸Á¶¿Í Webpack ¼³Á¤
__20.2 À¥ ¼¹ö ±¸ÇöÇϱâ
____20.2.1 RESTful API Á¤ÀÇÇϱâ
____20.2.2 ¼¹ö¿¡¼ React ·»´õ¸µÇϱâ
__20.3 ºê¶ó¿ìÀú ½ºÅ©¸³Æ® Ãß°¡Çϱâ
__20.4 ¼¹ö ÅÛÇø´ »ý¼ºÇϱâ
__20.5 Autocomplete ÄÄÆ÷³ÍÆ® ±¸ÇöÇϱâ
____20.5.1 Autocomplete ÄÄÆ÷³ÍÆ®¸¦ À§ÇÑ Å×½ºÆ®
____20.5.2 Autocomplete ÄÄÆ÷³ÍÆ® ÄÚµå
__20.6 ½ÇÇàÇϱâ
__20.7 °úÁ¦
__20.8 ¿ä¾à
ºÎ·Ï A | ÀÌ Ã¥¿¡¼ »ç¿ëÇÑ ¾ÖÇø®ÄÉÀÌ¼Ç ¼³Ä¡Çϱâ
ºÎ·Ï B | React Ä¡Æ®½ÃÆ®
ºÎ·Ï C | Express.js Ä¡Æ®½ÃÆ®
ºÎ·Ï D | MongoDB¿Í Mongoose Ä¡Æ®½ÃÆ®
ºÎ·Ï E | ¼º°øÀ» À§ÇÑ ES6
ºÎ·Ï F | ¼Á¡ ¿¹Á¦·Î »ìÆ캸´Â React Router v4
ºÎ·Ï G | React ¹öÀü 16.3ÀÇ º¯°æ »çÇ×
ã¾Æº¸±â
º»¹®Áß¿¡¼
[ÁöÀºÀÌ ¼¹®]
¸®¾×Æ®´Â »õ·Î¿î °³¹ß ¹æ¹ýÀÌ°í, µ¿½Ã¿¡ »õ·Î¿î »ý°¢ ¹æ¹ýÀ̱⵵ ÇÏ´Ù. HTML°ú ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ºÐ¸®ÇÏÁö ¾Ê°í ÇÑ °÷¿¡ ¸ð¾ÆµÎ´Â ´Ü¼øÇÔÀº ³ª¿¡°Ô ÀÚÀ¯¸¦ ÁÖ¾ú´Ù. ÀÌ´Â ÇÁ·±Æ®¿£µå °³¹ß¿¡ ´ëÇÑ ³ªÀÇ ¿¸ÁÀ» ´Ù½Ã ºÒ·¯ÀÏÀ¸Å°±â¿¡ ÃæºÐÇß´Ù.
¸®¾×Æ®´Â UI ÄÄÆ÷³ÍÆ® °³¹ß¿¡ ´ëÇÑ ½Å¼±ÇÑ °üÁ¡ÀÌ´Ù. ¸®¾×Æ®´Â ÇÁ·¹Á¨Å×ÀÌ¼Ç °èÃþÀ» ´ã´çÇÏ´Â ¶óÀ̺귯¸®ÀÇ »õ·Î¿î ¼¼´ë¶ó°í ÇÒ ¼ö ÀÖ´Ù. ¸®¾×Æ®¸¦ ¸ðµ¨À̳ª ¶ó¿ìÆÃÀ» ´ã´çÇÏ´Â ¶óÀ̺귯¸®¿Í ÇÔ²² »ç¿ëÇϸé AngularJS, Backbone, Ember °°Àº ±âÁ¸ÀÇ À¥/¸ð¹ÙÀÏ ±â¼ú ½ºÅÃÀ» ´ëüÇÒ ¼ö ÀÖ´Ù.
ÇÁ·Î±×·¡¹ÖÀº âÁ¶ÀûÀÎ ÀÛ¾÷ÀÌ µÉ ¼ö ÀÖ´Ù. ¸®¾×Æ®´Â ºÒÇÊ¿äÇÑ °ÍÀ» ¸ðµÎ °È¾î³½´Ù. ´Ü¼øÇÑ ¾Æ¸§´Ù¿òÀ» °¡Áø ¸ðµâ°ú ÄÄÆ÷³ÍÆ® ±â¹ÝÀÇ UI¸¦ ÅëÇØ ¿©·¯ºÐÀÇ Ã¢Á¶¼ºÀÌ µÇ»ì¾Æ³¯ °ÍÀÌ´Ù.
- ÁöÀºÀÌ ¼¹® Áß¿¡¼
[¿Å±äÀÌ ¼¹®]
¼ö¸¹Àº »ç¿ëÀÚ ´öºÐ¿¡ ¸®¾×Æ®´Â ºü¸£°Ô ¹ßÀüÇÏ°í ÀÖ½À´Ï´Ù. ¸®¾×Æ®´Â Áö³ ÇØ React Fiber¶ó´Â À̸§ÀÇ »õ·Î¿î Äھ µµÀÔÇÑ ¹öÀü 16À» ¼±º¸ÀÌ¸é¼ ¼º´ÉÀ» ´õ¿í °³¼±Çß½À´Ï´Ù. Á¾Á¾ ¹®Á¦·Î ÁöÀûµÇ´ø ÆÄÀÏ »çÀÌÁî±îÁö ÁÙÀÌ¸é¼ µÎ ¸¶¸® Åä³¢¸¦ Àâ¾Ò½À´Ï´Ù.
ÀÌ Ã¥¿¡¼ ÀúÀÚ°¡ Á¦½ÃÇÏ´Â ¡®ºü¸¥¡¯ ÇнÀ ºñ¹ýÀº ¹Ýº¹ÀÔ´Ï´Ù. ÀúÀÚ´Â ¸®¾×Æ®¸¦ ÀÍÈ÷±â À§ÇÑ ÇÙ½ÉÀûÀÎ ³»¿ëÀ» °÷°÷¿¡¼ µ¶ÀÚ¿¡°Ô »ó±â½Ãŵ´Ï´Ù. ²÷ÀÓ¾øÀÌ »õ·Î¿î ¶óÀ̺귯¸®, ÇÁ·¹ÀÓ¿öÅ©, °³¹ß ¹æ¹ýÀÌ µîÀåÇÏ´Â ÇÁ·±Æ®¿£µå ¼¼°è¸¦ Áñ±â±â À§ÇÑ Àü·«À¸·Îµµ ÈǸ¢ÇÑ ¹æ¹ýÀÔ´Ï´Ù. ÀÌ Ã¥À» ÅëÇØ ¸®¾×Æ®¿¡ ´ëÇÑ Áö½ÄÀº ¹°·Ð °³¹ßÀÚÀÇ »ýÁ¸ Àü·«µµ ¾òÀ» ¼ö ÀÖ±æ ¹Ù¶ø´Ï´Ù.
- ¿Å±äÀÌ ¼¹® Áß¿¡¼
°ü·ÃÀ̹ÌÁö
ÀúÀÚ¼Ò°³
»ý³â¿ùÀÏ | - |
---|
ÇØ´çÀÛ°¡¿¡ ´ëÇÑ ¼Ò°³°¡ ¾ø½À´Ï´Ù.
»ý³â¿ùÀÏ | - |
---|
ÇØ´çÀÛ°¡¿¡ ´ëÇÑ ¼Ò°³°¡ ¾ø½À´Ï´Ù.
ÁÖ°£·©Å·
´õº¸±â»óÇ°Á¤º¸Á¦°ø°í½Ã
À̺¥Æ® ±âȹÀü
Àü°øµµ¼/´ëÇб³Àç ºÐ¾ß¿¡¼ ¸¹Àº ȸ¿øÀÌ ±¸¸ÅÇÑ Ã¥
ÆǸÅÀÚÁ¤º¸
»óÈ£ |
(ÁÖ)±³º¸¹®°í |
---|---|
´ëÇ¥ÀÚ¸í |
¾Èº´Çö |
»ç¾÷ÀÚµî·Ï¹øÈ£ |
102-81-11670 |
¿¬¶ôó |
1544-1900 |
ÀüÀÚ¿ìÆíÁÖ¼Ò |
callcenter@kyobobook.co.kr |
Åë½ÅÆǸž÷½Å°í¹øÈ£ |
01-0653 |
¿µ¾÷¼ÒÀçÁö |
¼¿ïƯº°½Ã Á¾·Î±¸ Á¾·Î 1(Á¾·Î1°¡,±³º¸ºôµù) |
±³È¯/ȯºÒ
¹ÝÇ°/±³È¯ ¹æ¹ý |
¡®¸¶ÀÌÆäÀÌÁö > Ãë¼Ò/¹ÝÇ°/±³È¯/ȯºÒ¡¯ ¿¡¼ ½Åû ¶Ç´Â 1:1 ¹®ÀÇ °Ô½ÃÆÇ ¹× °í°´¼¾ÅÍ(1577-2555)¿¡¼ ½Åû °¡´É |
---|---|
¹ÝÇ°/±³È¯°¡´É ±â°£ |
º¯½É ¹ÝÇ°ÀÇ °æ¿ì Ãâ°í¿Ï·á ÈÄ 6ÀÏ(¿µ¾÷ÀÏ ±âÁØ) À̳»±îÁö¸¸ °¡´É |
¹ÝÇ°/±³È¯ ºñ¿ë |
º¯½É ȤÀº ±¸¸ÅÂø¿À·Î ÀÎÇÑ ¹ÝÇ°/±³È¯Àº ¹Ý¼Û·á °í°´ ºÎ´ã |
¹ÝÇ°/±³È¯ ºÒ°¡ »çÀ¯ |
·¼ÒºñÀÚÀÇ Ã¥ÀÓ ÀÖ´Â »çÀ¯·Î »óÇ° µîÀÌ ¼Õ½Ç ¶Ç´Â ÈÑ¼ÕµÈ °æ¿ì ·¼ÒºñÀÚÀÇ »ç¿ë, Æ÷Àå °³ºÀ¿¡ ÀÇÇØ »óÇ° µîÀÇ °¡Ä¡°¡ ÇöÀúÈ÷ °¨¼ÒÇÑ °æ¿ì ·º¹Á¦°¡ °¡´ÉÇÑ »óÇ° µîÀÇ Æ÷ÀåÀ» ÈѼÕÇÑ °æ¿ì ·½Ã°£ÀÇ °æ°ú¿¡ ÀÇÇØ ÀçÆǸŰ¡ °ï¶õÇÑ Á¤µµ·Î °¡Ä¡°¡ ÇöÀúÈ÷ °¨¼ÒÇÑ °æ¿ì ·ÀüÀÚ»ó°Å·¡ µî¿¡¼ÀÇ ¼ÒºñÀÚº¸È£¿¡ °üÇÑ ¹ý·üÀÌ Á¤ÇÏ´Â ¼ÒºñÀÚ Ã»¾àöȸ Á¦ÇÑ ³»¿ë¿¡ ÇØ´çµÇ´Â °æ¿ì |
»óÇ° Ç°Àý |
°ø±Þ»ç(ÃâÆÇ»ç) Àç°í »çÁ¤¿¡ ÀÇÇØ Ç°Àý/Áö¿¬µÉ ¼ö ÀÖÀ½ |
¼ÒºñÀÚ ÇÇÇغ¸»ó |
·»óÇ°ÀÇ ºÒ·®¿¡ ÀÇÇÑ ±³È¯, A/S, ȯºÒ, Ç°Áúº¸Áõ ¹× ÇÇÇغ¸»ó µî¿¡ °üÇÑ »çÇ×Àº¼ÒºñÀÚºÐÀïÇØ°á ±âÁØ (°øÁ¤°Å·¡À§¿øȸ °í½Ã)¿¡ ÁØÇÏ¿© ó¸®µÊ ·´ë±Ý ȯºÒ ¹× ȯºÒÁö¿¬¿¡ µû¸¥ ¹è»ó±Ý Áö±Þ Á¶°Ç, ÀýÂ÷ µîÀº ÀüÀÚ»ó°Å·¡ µî¿¡¼ÀǼҺñÀÚ º¸È£¿¡ °üÇÑ ¹ý·ü¿¡ µû¶ó ó¸®ÇÔ |
(ÁÖ)ÀÎÅÍÆÄÅ©Ä¿¸Ó½º´Â ȸ¿ø´ÔµéÀÇ ¾ÈÀü°Å·¡¸¦ À§ÇØ ±¸¸Å±Ý¾×, °áÁ¦¼ö´Ü¿¡ »ó°ü¾øÀÌ (ÁÖ)ÀÎÅÍÆÄÅ©Ä¿¸Ó½º¸¦ ÅëÇÑ ¸ðµç °Å·¡¿¡ ´ëÇÏ¿©
(ÁÖ)KGÀ̴Ͻýº°¡ Á¦°øÇÏ´Â ±¸¸Å¾ÈÀü¼ºñ½º¸¦ Àû¿ëÇÏ°í ÀÖ½À´Ï´Ù.
¹è¼Û¾È³»
±³º¸¹®°í »óÇ°Àº Åùè·Î ¹è¼ÛµÇ¸ç, Ãâ°í¿Ï·á 1~2Àϳ» »óÇ°À» ¹Þ¾Æ º¸½Ç ¼ö ÀÖ½À´Ï´Ù.
Ãâ°í°¡´É ½Ã°£ÀÌ ¼·Î ´Ù¸¥ »óÇ°À» ÇÔ²² ÁÖ¹®ÇÒ °æ¿ì Ãâ°í°¡´É ½Ã°£ÀÌ °¡Àå ±ä »óÇ°À» ±âÁØÀ¸·Î ¹è¼ÛµË´Ï´Ù.
±ººÎ´ë, ±³µµ¼Ò µî ƯÁ¤±â°üÀº ¿ìü±¹ Åù踸 ¹è¼Û°¡´ÉÇÕ´Ï´Ù.
¹è¼Ûºñ´Â ¾÷ü ¹è¼Ûºñ Á¤Ã¥¿¡ µû¸¨´Ï´Ù.