|
|
|
|
|
|
|
Ã¥³»¿ë |
|
¸®¾×Æ®¿Í °ü·Ã »ýÅ°踦 ÀÌ¿ëÇÑ Ç® ½ºÅà À¥/¾Û °³¹ß!
¿Ö ¸®¾×Æ®Àΰ¡?
React.js´Â ÆäÀ̽ººÏÀÌ 2013³â¿¡ ¿ÀÇ ¼Ò½º·Î °ø°³ÇÑ ÀÌ·¡ ³ÝÇø¯½º, ¿¡¾îºñ¾Øºñ, ÀνºÅ¸±×·¥ °°Àº À¯¸í ±â¾÷À» ºñ·ÔÇÑ ¸¹Àº °÷¿¡¼ »ç¿ëµÇ¸ç ºü¸£°Ô ¼ºÀåÇß´Ù. ¸®¾×Æ®ÀÇ ÀαⰡ ³ô¾Ò´ø ÀÌÀ¯´Â À¥ »çÀÌÆ® ¾îµð¼µç UI¸¦ Àç»ç¿ëÇÏ´Â »õ·Î¿î ¹æ½ÄÀ¸·Î ÇÁ·±Æ®¿£µå °³¹ßÀ» È¿À²ÀûÀ¸·Î ¹Ù²ã ³õ¾Ò±â ¶§¹®ÀÌ´Ù. ¸®¾×Æ®´Â ÃÖÃÊ·Î ÅÛÇø´ ¾øÀÌ ¼ø¼öÇÏ°Ô ÀÚ¹Ù½ºÅ©¸³Æ®¸¸À¸·Î ÄÄÆ÷³ÍÆ®¸¦ Á¤ÀÇÇØ UI¸¦ ±¸¼ºÇÑ´Ù. ±×¸®°í ÀÌ ¹æ¹ýÀÌ À¯Áöº¸¼ö, Àç»ç¿ë, È®ÀåÇϱ⵵ ´õ ½±´Ù´Â »ç½ÇÀ» ÀÔÁõÇß´Ù.
¸®¾×Æ®ÀÇ ÇÙ½É °³³äºÎÅÍ °ü·Ã »ýÅ°踦 È°¿ëÇÑ Çö½ÇÀûÀÎ ¿¹Á¦±îÁö
1ºÎ¿¡¼ ¸®¾×Æ®ÀÇ ÇÙ½É °³³äÀ» »ìÆ캻´Ù. ¸®¾×Æ®ÀÇ Æ¯Â¡, JSX, ¸®¾×Æ®¿¡¼ ÄÄÆ÷³ÍÆ®, À̺¥Æ®, ÆûÀ» ´Ù·ç´Â ¹æ¹ýÀ» ¹è¿î´Ù. ±×¸®°í 1ºÎ ¸¶Áö¸·¿¡ ÇнÀÇÑ °³³äÀ» ¹ÙÅÁÀ¸·Î Menu, Tooltip, Timer ÄÄÆ÷³ÍÆ®¸¦ È°¿ëÇÑ ¼¼ °¡Áö ÇÁ·ÎÁ§Æ®¸¦ ÁøÇàÇÑ´Ù. ÇÁ·ÎÁ§Æ®¸¦ ÅëÇØ ¸®¾×Æ®ÀÇ Áß¿ä °³³ä°ú ±â¼úÀ» ½ÇÁ¦ ¾÷¹«¿¡ »ç¿ëÇØ º»´Ù°í °¡Á¤ÇÏ°í º¹½ÀÇغ¼ ¼ö ÀÖ´Ù.
2ºÎ´Â ¸®¾×Æ® °³¹ß »ýÅ°踦 ±¸¼ºÇϴ ģ±¸µéÀ» »ìÆ캻´Ù. Webpack, Redux, GraphQL, Jest¸¦ ´Ù·ç°í, ¸®¾×Æ®ÀÇ »óÅÂ(state)¿Í ÇÁ·±Æ®¿£µå, ¹é¿£µå¸¦ ¸ðµÎ ÀÚ¹Ù½ºÅ©¸³Æ®·Î ±¸¼ºÇÏ´Â À¯´Ï¹ö¼³ ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ »ìÆ캻´Ù. ÇнÀÇÑ ´Ù¾çÇÑ ±â¼úÀ» Á¾ÇÕÀûÀ¸·Î »ç¿ëÇغ¼ ¼ö ÀÖµµ·Ï ¿ª½Ã ¼¼ °¡Áö ÇÁ·ÎÁ§Æ®¸¦ ÁغñÇß´Ù. ÇÁ·ÎÁ§Æ®¸¦ ÅëÇØ ¸®¾×Æ®¿¡ ´ëÇÑ °æÇèÀ» Å°¿ì°í ÇнÀÇÑ Áö½ÄÀ» È®°íÇÏ°Ô Á¤¸®ÇÒ ¼ö ÀÖ´Ù. |
|
¸ñÂ÷ |
|
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À» ¼±º¸ÀÌ¸é¼ ¼º´ÉÀ» ´õ¿í °³¼±Çß½À´Ï´Ù. Á¾Á¾ ¹®Á¦·Î ÁöÀûµÇ´ø ÆÄÀÏ »çÀÌÁî±îÁö ÁÙÀÌ¸é¼ µÎ ¸¶¸® Åä³¢¸¦ Àâ¾Ò½À´Ï´Ù.
ÀÌ Ã¥¿¡¼ ÀúÀÚ°¡ Á¦½ÃÇÏ´Â ¡®ºü¸¥¡¯ ÇнÀ ºñ¹ýÀº ¹Ýº¹ÀÔ´Ï´Ù. ÀúÀÚ´Â ¸®¾×Æ®¸¦ ÀÍÈ÷±â À§ÇÑ ÇÙ½ÉÀûÀÎ ³»¿ëÀ» °÷°÷¿¡¼ µ¶ÀÚ¿¡°Ô »ó±â½Ãŵ´Ï´Ù. ²÷ÀÓ¾øÀÌ »õ·Î¿î ¶óÀ̺귯¸®, ÇÁ·¹ÀÓ¿öÅ©, °³¹ß ¹æ¹ýÀÌ µîÀåÇÏ´Â ÇÁ·±Æ®¿£µå ¼¼°è¸¦ Áñ±â±â À§ÇÑ Àü·«À¸·Îµµ ÈǸ¢ÇÑ ¹æ¹ýÀÔ´Ï´Ù. ÀÌ Ã¥À» ÅëÇØ ¸®¾×Æ®¿¡ ´ëÇÑ Áö½ÄÀº ¹°·Ð °³¹ßÀÚÀÇ »ýÁ¸ Àü·«µµ ¾òÀ» ¼ö ÀÖ±æ ¹Ù¶ø´Ï´Ù.
- ¿Å±äÀÌ ¼¹® Áß¿¡¼ |
|
|
|
ÀúÀÚ
|
|
¾ÆÀÚÆ® ¸¶¸£´Ü
¼Ò±Ô¸ð ½ºÅ¸Æ®¾÷, ´ë±â¾÷, ¹Ì±¹ ¿¬¹æÁ¤ºÎ¿¡¼ µ¥½ºÅ©Åé, À¥, ¸ð¹ÙÀÏ ¾ÖÇø®ÄÉÀ̼ÇÀ» °³¹ßÇß´Ù. °ÀÇ¿Í °³¹ßÀÚ ¿¡¹ÝÁ©¸®½ºÆ® Developer Evangelist, ÇÁ·ÎÁ§Æ® °ü¸®¸¦ ¸Ã±âµµ Çß´Ù. Áö±ÝÀº »÷ÇÁ¶õ½Ã½ºÄÚ¿¡ À§Ä¡ÇÑ ¹Ì±¹ÀÇ ÁÖ¿ä ÀºÇà Áß ÇÑ °÷ÀΠijÇÇÅ» ¿ø Capital One ¿¡¼ ±â¼ú Æç·Î¿ì fellow ·Î È°µ¿ÇÏ°í ÀÖ´Ù. 14±Ç ÀÌ»óÀÇ Ã¥À» Ãâ°£Çß°í, NodeUniversity (http://node.university)¸¦ ÅëÇØ 17°³ ÀÌ»óÀÇ ¿Â¶óÀÎ ÄÚ½º¸¦ °³¼³Çß´Ù. ´ëºÎºÐ AWS °°Àº Ŭ¶ó¿ìµå ¼ºñ½º¿Í React, ÀÚ¹Ù½ºÅ©¸³Æ®, Node.js¿¡ °üÇÑ ³»¿ëÀÌ´Ù. »õ·Î¿î ¼Ò½ÄÀ̳ª ¾÷µ¥ÀÌÆ®, ÆÁÀ» ¾Ë°í ½Í´Ù¸é ¼Ò¼È ¹Ìµð¾î³ª À¥ »çÀÌÆ®¸¦ ã¾ÆÁֱ⠹ٶõ´Ù. - Æ®À§ÅÍ https://twitter.com/azat_co - À¥ »çÀÌÆ® http://azat.co - ¸µÅ©µåÀÎ http://linkedin.com/in/azatm - ºí·Î±× http://webapplog.com - Ã¥ http://webapplog.com/books
|
|
|
¾ÆÀÚÆ® ¸¶¸£´Ü
|
|
¿ªÀÚ
|
|
°ûÇöö
NTS, Ƽ¸ó¿¡¼ UI °³¹ßÀÚ, ÇÁ·±Æ®¿£µå °³¹ßÀÚ·Î ±Ù¹«Çß°í, Áö±ÝÀº ¿Ü±¹°è ±â¾÷ÀÇ À¥ ¼ºñ½º¸¦ ÇöÁöÈÇÏ´Â ¾÷¹«¸¦ ¸Ã°í ÀÖ½À´Ï´Ù. ¹ø¿ª¼·Î´Â ¡º¸®¾×Æ® ±³°ú¼¡», ¡ºÃ³À½ ½ÃÀÛÇÏ´Â ¸®¾×Æ®¡»°¡ ÀÖ½À´Ï´Ù.
|
óÀ½ ½ÃÀÛÇÏ´Â ¸®¾×Æ® | °ûÇöö | ÇѺû¹Ìµð¾î
ÀÚ¹Ù½ºÅ©¸³Æ® ÄÚµùÀÇ ±â¼ú | °ûÇöö | ±æ¹þ
|
|
°ûÇöö
|
|
|
|
|
|
|
|
Ãâ°í¾È³» |
|
|
Ãâ°í¶õ ÀÎÅÍÆÄÅ© ¹°·ùâ°í¿¡¼ µµ¼°¡ Æ÷ÀåµÇ¾î ³ª°¡´Â ½ÃÁ¡À» ¸»Çϸç, ½ÇÁ¦ °í°´´Ô²²¼ ¼ö·ÉÇϽô ½Ã°£Àº »óÇ°Áغñ¿Ï·áÇØ Ãâ°íÇÑ ³¯Â¥ + Åùè»ç ¹è¼ÛÀÏÀÔ´Ï´Ù. |
|
ÀÎÅÍÆÄÅ© µµ¼´Â ¸ðµç »óÇ°ÀÇ Àç°í°¡ ÃæÁ·ÇÒ ½Ã¿¡ ÀÏ°ý Ãâ°í¸¦ ÇÕ´Ï´Ù. |
|
ÀϺΠÀç°í¿¡ ´ëÇÑ Ãâ°í°¡ ÇÊ¿äÇÒ ½Ã¿¡´Â ´ã´çÀÚ¿¡°Ô Á÷Á¢ ¿¬¶ôÇϽðųª, °í°´¼¾ÅÍ(°í°´¼¾ÅÍ(1577-2555)·Î ¿¬¶ôÁֽñ⠹ٶø´Ï´Ù. |
|
¹è¼Ûºñ ¾È³» |
|
|
ÀÎÅÍÆÄÅ© µµ¼ ´ë·®±¸¸Å´Â ¹è¼Û·á°¡ ¹«·áÀÔ´Ï´Ù. |
|
´Ü, 1°³ÀÇ »óÇ°À» ´Ù¼öÀÇ ¹è¼ÛÁö·Î ÀÏ°ý ¹ß¼Û½Ã¿¡´Â 1°³ÀÇ ¹è¼ÛÁö´ç 2,000¿øÀÇ ¹è¼Ûºñ°¡ ºÎ°úµË´Ï´Ù. |
¾Ë¾ÆµÎ¼¼¿ä! |
|
|
°í°´´Ô²²¼ ÁÖ¹®ÇϽŠµµ¼¶óµµ µµ¸Å»ó ¹× ÃâÆÇ»ç »çÁ¤¿¡ µû¶ó Ç°Àý/ÀýÆÇ µîÀÇ »çÀ¯·Î Ãë¼ÒµÉ ¼ö ÀÖ½À´Ï´Ù. |
|
Åùè»ç ¹è¼ÛÀÏÀÎ ¼¿ï ¹× ¼öµµ±ÇÀº 1~2ÀÏ, Áö¹æÀº 2~3ÀÏ, µµ¼, »ê°£, ±ººÎ´ë´Â 3ÀÏ ÀÌ»óÀÇ ½Ã°£ÀÌ ¼Ò¿äµË´Ï´Ù.
(´Ü, Åä/ÀÏ¿äÀÏ Á¦¿Ü) |
|
|
|
|
ÀÎÅÍÆÄÅ©µµ¼´Â °í°´´ÔÀÇ ´Ü¼ø º¯½É¿¡ ÀÇÇÑ ±³È¯°ú ¹ÝÇ°¿¡ µå´Â ºñ¿ëÀº °í°´´ÔÀÌ ÁöºÒÄÉ µË´Ï´Ù.
´Ü, »óÇ°À̳ª ¼ºñ½º ÀÚüÀÇ ÇÏÀÚ·Î ÀÎÇÑ ±³È¯ ¹× ¹ÝÇ°Àº ¹«·á·Î ¹ÝÇ° µË´Ï´Ù.
±³È¯/¹ÝÇ°/º¸ÁõÁ¶°Ç ¹× Ç°Áúº¸Áõ ±âÁØÀº ¼ÒºñÀڱ⺻¹ý¿¡ µû¸¥ ¼ÒºñÀÚ ºÐÀï ÇØ°á ±âÁØ¿¡ µû¶ó ÇÇÇظ¦ º¸»ó ¹ÞÀ» ¼ö ÀÖ½À´Ï´Ù.
Á¤È®ÇÑ È¯ºÒ ¹æ¹ý ¹× ȯºÒÀÌ Áö¿¬µÉ °æ¿ì 1:1¹®ÀÇ °Ô½ÃÆÇ ¶Ç´Â °í°´¼¾ÅÍ(1577-2555)·Î ¿¬¶ô Áֽñ⠹ٶø´Ï´Ù.
¼ÒºñÀÚ ÇÇÇغ¸»óÀÇ ºÐÀïó¸® µî¿¡ °üÇÑ »çÇ×Àº ¼ÒºñÀÚºÐÀïÇØ°á±âÁØ(°øÁ¤°Å·¡À§¿øȸ °í½Ã)¿¡ µû¶ó ºñÇØ º¸»ó ¹ÞÀ» ¼ö ÀÖ½À´Ï´Ù.
|
±³È¯ ¹× ¹ÝÇ°ÀÌ °¡´ÉÇÑ °æ¿ì |
|
|
»óÇ°À» °ø±Þ ¹ÞÀ¸½Å ³¯·ÎºÎÅÍ 7ÀÏÀ̳» °¡´ÉÇÕ´Ï´Ù. |
|
°ø±Þ¹ÞÀ¸½Å »óÇ°ÀÇ ³»¿ëÀÌ Ç¥½Ã, ±¤°í ³»¿ë°ú ´Ù¸£°Å³ª ´Ù¸£°Ô ÀÌÇàµÈ °æ¿ì¿¡´Â °ø±Þ¹ÞÀº ³¯·ÎºÎÅÍ 3°³¿ùÀ̳», ±×»ç½ÇÀ» ¾Ë°Ô µÈ ³¯ ¶Ç´Â ¾Ë ¼ö ÀÖ¾ú´ø ³¯·ÎºÎÅÍ 30ÀÏÀ̳» °¡´ÉÇÕ´Ï´Ù. |
|
»óÇ°¿¡ ¾Æ¹«·± ÇÏÀÚ°¡ ¾ø´Â °æ¿ì ¼ÒºñÀÚÀÇ °í°´º¯½É¿¡ ÀÇÇÑ ±³È¯Àº »óÇ°ÀÇ Æ÷Àå»óÅ µîÀÌ ÀüÇô ¼Õ»óµÇÁö ¾ÊÀº °æ¿ì¿¡ ÇÑÇÏ¿© °¡´ÉÇÕ´Ï´Ù.
|
|
|
|
±³È¯ ¹× ¹ÝÇ°ÀÌ ºÒ°¡´ÉÇÑ °æ¿ì |
|
|
|
°í°´´ÔÀÇ Ã¥ÀÓ ÀÖ´Â »çÀ¯·Î »óÇ° µîÀÌ ¸ê½Ç ¶Ç´Â ÈÑ¼ÕµÈ °æ¿ì´Â ºÒ°¡´ÉÇÕ´Ï´Ù. (´Ü, »óÇ°ÀÇ ³»¿ëÀ» È®ÀÎÇϱâ À§ÇÏ¿© Æ÷Àå µîÀ» ÈѼÕÇÑ °æ¿ì´Â Á¦¿Ü) |
|
½Ã°£ÀÌ Áö³²¿¡ µû¶ó ÀçÆǸŰ¡ °ï¶õÇÒ Á¤µµ·Î ¹°Ç°ÀÇ °¡Ä¡°¡ ¶³¾îÁø °æ¿ì´Â ºÒ°¡´ÉÇÕ´Ï´Ù. |
|
Æ÷Àå °³ºÀµÇ¾î »óÇ° °¡Ä¡°¡ ÈÑ¼ÕµÈ °æ¿ì´Â ºÒ°¡´ÉÇÕ´Ï´Ù. |
|
|
´Ù¹è¼ÛÁöÀÇ °æ¿ì ¹ÝÇ° ȯºÒ |
|
|
|
´Ù¹è¼ÛÁöÀÇ °æ¿ì ´Ù¸¥ Áö¿ªÀÇ ¹ÝÇ°À» µ¿½Ã¿¡ ÁøÇàÇÒ ¼ö ¾ø½À´Ï´Ù. |
|
1°³ Áö¿ªÀÇ ¹ÝÇ°ÀÌ ¿Ï·áµÈ ÈÄ ´Ù¸¥ Áö¿ª ¹ÝÇ°À» ÁøÇàÇÒ ¼ö ÀÖÀ¸¹Ç·Î, ÀÌÁ¡ ¾çÇØÇØ Áֽñ⠹ٶø´Ï´Ù. |
|
|
|
|
|
|