React´Â ÆäÀ̽ººÏ°ú ÀνºÅ¸±×·¥ÀÇ UI¸¦ À§ÇØ ¸¸µé¾îÁø ÀÚ¹Ù½ºÅ©¸³Æ® ¶óÀ̺귯¸®ÀÌÁö¸¸ ÀÌÁ¦´Â À¥ °³¹ß¿¡ °®Ãç¾ß ÇÒ ±â¼ú·Î È®´ëµÇ°í ÀÖ´Ù. ƯÈ÷, ÀúÀÛ±Ç ¹®Á¦¸¦ ÇØ°áÇÑ ¹öÀü 16ºÎÅÍ´Â React 16À̶ó´Â »õ Á¦Ç°¸íÀ¸·Î ´õ¿í »ç¿ëÀÚÃþÀ» ³ÐÇô°¥ °ÍÀÌ´Ù. ÀÌ Ã¥Àº ¸ðµç React °³¹ßÀÚ°¡ ¾Ë¾Æ¾ß ÇÒ °¡Àå Áß¿äÇÑ µµ±¸, À¯Æ¿¸®Æ¼, ¶óÀ̺귯¸®¸¦ ÀÚ¼¼ÇÏ°Ô ´Ù·é´Ù. ¸ðµç ±â¼úÀº µµ±¸ È°¿ë¿¡ µû¶ó ºûÀÌ ³ª¹Ç·Î ÀÌ Ã¥À» ÅëÇØ ÀÚ½ÅÀÇ ±â¼ú¿¡ ÈûÀ» ´õÇÒ ¼ö ÀÖ´Ù.
1Àå ¸ÂÃãÇü React °³¹ß »ýÅÂ°è ¸¸µé±â
__React¿¡ Æ÷ÇԵǴ °Í
____·»´õ Æ®¸®¸¦ ºñ±³ÇÏ´Â ÄÄÆ÷³ÍÆ®
____DOM ·»´õ Ÿ±ê
__µµ±¸ È°¿ë ¼Ò°³?
____React ¿ÜºÎÀÇ º¸Á¶ ÀÛ¾÷
____°Ç¼³ ÇöÀå°úÀÇ À¯»çÁ¡
__ÀÌ Ã¥¿¡¼ ´Ù·ç´Â React µµ±¸
____JSX´Â ÀÚ¹Ù½ºÅ©¸³Æ®·Î ÄÄÆÄÀÏµÅ¾ß ÇÑ´Ù
____ÃֽŠÀÚ¹Ù½ºÅ©¸³Æ® ¾ð¾î ±â´ÉÀº Æ®·£½ºÆÄÀÏµÅ¾ß ÇÑ´Ù
____¾ÖÇø®ÄÉÀÌ¼Ç °³¹ßÀ» °¡´ÉÇÏ°Ô ÇÏ´Â ÇÖ ¸ðµâ ·Îµù
____´ÜÀ§ Å×½ºÆ® ÀÚµ¿ ½ÇÇà
____ŸÀÔ ¾ÈÀü¼º¿¡ °üÇÑ °í·Á
____ÄÚµå Ç°ÁúÀ» À§ÇÑ ¼Ò½º ÄÚµå ºÐ¼®
____ÄÄÆ÷³ÍÆ® °³¹ß ȯ°æ °Ý¸®
____ºê¶ó¿ìÀú ±â¹ÝÀÇ µð¹ö±ë ȯ°æ Á¦°ø
____React ¾ÖÇø®ÄÉÀÌ¼Ç ¹èÆ÷
__¿Ã¹Ù¸¥ µµ±¸ ¼±ÅÃ
____Çʼö µµ±¸
____¿É¼Ç µµ±¸
__¿ä¾à
2Àå Create React AppÀ¸·Î React ¾ÖÇø®ÄÉÀ̼ÇÀ» È¿À²ÀûÀ¸·Î ºÎÆ®½ºÆ®·¦Çϱâ
__Create React App ¼³Ä¡
____ù ¹ø° ¾Û Á¦ÀÛ
______ÇÁ·ÎÁ§Æ® À̸§ ÁöÁ¤
______ÀÚµ¿ Á¾¼Ó¼º ó¸®
______µð·ºÅ͸® ±¸Á¶
__¿ä¾à
3Àå °³¹ß ¸ðµå¿Í ÇÖ ¸®·Îµù ¸¶½ºÅÍÇϱâ
__°³¹ß ¼¹ö ½ÃÀÛ
____À¥ÆÑ ±¸¼º
______ÁøÀÔÁ¡
______ºôµå Ãâ·Â
______ÀÔ·Â ÆÄÀÏ ÇØ°á
______ÆÄÀÏ ·Îµå¿Í ÄÄÆÄÀÏ
______Ç÷¯±×ÀÎ ¼³Á¤
______ÇÖ ¸®·Îµù
____ÇÖ ÄÄÆ÷³ÍÆ® ¸®·Îµù °¡µ¿
____Create React App¿¡¼ ¹þ¾î³ª±â
__¿ä¾à
4Àå Å×½ºÆ® ÁöÇâ React °³¹ß ÃÖÀûÈ
__JestÀÇ ÁöÇâ öÇÐ
____¾ÖÇø®ÄÉÀÌ¼Ç Äڵ带 Á¦¿ÜÇÑ ¸ðµç °Í Èä³»³»±â
____Å×½ºÆ®¸¦ °Ý¸®Çؼ º´·Ä·Î ½ÇÇà
______Å×½ºÆ®´Â ÀÚ¿¬½º·´°Ô ´À²¸Á®¾ß ÇÑ´Ù
__Å×½ºÆ® ½ÇÇà
____react-scripts¸¦ »ç¿ëÇØ Å×½ºÆ® ½ÇÇàÇϱâ
____´Üµ¶Çü Jest¸¦ »ç¿ëÇØ Å×½ºÆ® ½ÇÇàÇϱâ
__Jest Å×½ºÆ® ÀÛ¼º
____½ºÀ§Æ®¸¦ »ç¿ëÇØ Å×½ºÆ® Á¶Á÷Çϱâ
____±âº» ¾î¼¼Ç
______±âº» ÀÏÄ¡
______±Ù»ç ÀÏÄ¡
______°ª ÀÏÄ¡
______Ä÷º¼ÇÀÇ °ª
______¸ðÅ·À¸·Î ÀÛ¾÷Çϱâ
______ºñµ¿±â ¾î¼¼Ç
______React ÄÄÆ÷³ÍÆ® ½º³À¼¦
____´ÜÀ§ Å×½ºÆ® Ä¿¹ö¸®Áö
__¿ä¾à
5Àå ŸÀÔ ¾ÈÀüÇÑ React ÄÄÆ÷³ÍÆ®·Î °³¹ß °£¼ÒÈ¿Í ¸®ÆÑÅ丵Çϱâ
__ŸÀÔ ¾ÈÀü¼ºÀ¸·Î ¹«¾ùÀ» ÇØ°áÇÒ ¼ö Àִ°¡?
____¾î¸²ÁüÀÛÀ» ºÐ¸íÇÏ°Ô Çϱâ
____·±Å¸ÀÓ Á¡°Ë Á¦°Å
____¸í¹éÈ÷ ½É°¢¼ºÀÌ ³·Àº ¹ö±×
__Flow ¼³Ä¡ ¹× ÃʱâÈ
__ÄÄÆ÷³ÍÆ® ÇÁ·ÎÆÛƼ ¹× »óÅ °ËÁõ
____ÇÁ¸®¹ÌƼºê ÇÁ·ÎÆÛƼ °ª
____°´Ã¼ ÇÁ·ÎÆÛƼ °ª
____ÄÄÆ÷³ÍÆ® »óÅÂÀÇ À¯È¿È
____ÇÔ¼ö ÇÁ·ÎÆÛƼ °ª
____ÀÚ½Ä ÄÄÆ÷ÅÏÆ® ŸÀÔÀÇ Àû¿ë
______ƯÁ¤ ÀÚ½Ä Å¸ÀÔÀ» °¡Áø ºÎ¸ð
______ÇϳªÀÇ ÀÚ½ÄÀ» °¡Áø ºÎ¸ð
______ÀÚ½ÄÀÌ ¿É¼ÇÀÎ ºÎ¸ð
______ÇÁ¸®¹ÌƼºê ÀÚ½Ä °ªÀ» °¡Áø ºÎ¸ð
__À̺¥Æ® 󸮱â ÇÔ¼ö¿¡ °üÇÑ À¯È¿¼º °Ë»ç
__°³¹ß ¼¹ö¿¡¼ Flow °¡´ÉÇÏ°Ô Çϱâ
__ÆíÁý±â¿¡¼ Flow °¡´ÉÇÏ°Ô Çϱâ
__¿ä¾à
6Àå À¯Áö º¸¼ö¼ºÀ» Çâ»ó½ÃÅ°±â À§ÇÑ ÄÚµå Ç°Áú °È
__ESLint ¼³Ä¡ ¹× ¼³Á¤
__¿¡¾îºñ¾Øºñ Ç¥ÁØÀ¸·Î ºôµåÇϱâ
__ESLint¿¡ React Ç÷¯±×ÀÎ Ãß°¡Çϱâ
__create-react-app°ú ÇÔ²² ESLint »ç¿ëÇϱâ
__ÄÚµå ÆíÁý±â¿¡¼ ESLint »ç¿ëÇϱâ
__Prettier·Î ÄÚµå Æ÷¸Ë ÀÚµ¿ÈÇϱâ
__¿ä¾à
7Àå StorybookÀ» »ç¿ëÇØ ÄÄÆ÷³ÍÆ® °Ý¸®Çϱâ
__°Ý¸®µÈ ÄÄÆ÷³ÍÆ® °³¹ß¿¡ °üÇÑ ÇÊ¿ä
__Storybook¼³Ä¡ ¹× ±¸¼º
__½ºÅ丮¸¦ »ç¿ëÇØ ÄÄÆ÷³ÍÆ® °³¹ßÇϱâ
____props·Î ½ÇÇèÇϱâ
____¾×¼ÇÀ¸·Î ½ÇÇèÇϱâ
____½ºÅ丮¿¡ ¸µÅ© °É±â
____¹®¼È µµ±¸·Î¼ÀÇ ½ºÅ丮
__Á¤Àû Storybook ¾Û Á¦ÀÛ
__¿ä¾à
8Àå ºê¶ó¿ìÀú¿¡¼ÀÇ ÄÄÆ÷³ÍÆ® µð¹ö±ë
__React Developer Tools ¾Öµå¿Â ¼³Ä¡Çϱâ
__React Developer Tools¿¡¼ React ¿ä¼Ò·Î ÀÛ¾÷Çϱâ
____React ¿ä¼Ò ¼±ÅÃ
____React ¿ä¼Ò °Ë»ö
__ÄÄÆ÷³ÍÆ® ÇÁ·ÎÆÛƼ ¹× »óÅ °Ë»ç
__¿ä¼Ò »óÅ °ª Á¶ÀÛ
__ÄÄÆ÷³ÍÆ® ¼º´É ÇÁ·ÎÆÄÀϸµ
____Á¶Á¤ ÀÛ¾÷ »èÁ¦Çϱâ
____CPU¿¡ ºÎÇϸ¦ ÁÖ´Â ÄÄÆ÷³ÍÆ® ã±â
__¿ä¾à
9Àå Redux·Î ¾ÖÇø®ÄÉÀÌ¼Ç »óÅ Á¶À²Çϱâ
__Redux ¾Û ºôµåÇϱâ
____App ÄÄÆ÷³ÍÆ® ¹× »óÅÂ
____Home ÄÄÆ÷³ÍÆ® ¹× »óÅÂ
____NewBook ÄÄÆ÷³ÍÆ® ¹× »óÅÂ
____API Ãß»óÈ
____¸ðµÎ Á¶¸³Çϱâ
__Redux DevTools ¼³Ä¡Çϱâ
__¾×¼Ç ¼±Åà ¹× °Ë»ç
____¾×¼Ç µ¥ÀÌÅÍ
____¾×¼Ç »óÅ Ʈ¸® ¹× Â÷Æ®
____¾×¼Ç »óÅ Â÷ÀÌ
__½Ã°£ À̵¿ µð¹ö±ë
__¼öµ¿À¸·Î ¾×¼Ç ¹ß»ý½ÃÅ°±â
__»óÅ ³»º¸³»±â¿Í °¡Á®¿À±â
__¿ä¾à
10Àå Gatsby·Î Á¤Àû React »çÀÌÆ® ±¸Ãà ¹× Àü°³Çϱâ
__¿Ö Á¤Àû React »çÀÌÆ®Àΰ¡?
____React ¾ÛÀÇ Å¸ÀÔ
____»ç¿ëÀÚ °æÇè °³¼±
____È¿À²ÀûÀÎ ÀÚ¿ø »ç¿ë
__óÀ½À¸·Î Gatsby »çÀÌÆ® ¸¸µé±â
__·ÎÄà ÆÄÀϽýºÅÛ µ¥ÀÌÅÍ Ãß°¡Çϱâ
__¿ø°Ý µ¥ÀÌÅÍ °¡Á®¿À±â
__¿ä¾à
11Àå Docker ÄÁÅ×À̳ʷΠReact ¾ÖÇø®ÄÉÀÌ¼Ç ºôµå ¹× ¹èÆ÷Çϱâ
__¸Þ½Ã¡ ¾Û Á¦ÀÛ
____Barely SMS ½ÃÀÛÇϱâ
____·Î±×ÀÎ
____ȨÆäÀÌÁö
____¿¬¶ôó ÆäÀÌÁö
____¸Þ½ÃÁö ÆäÀÌÁö
____¸Þ½ÃÁö º¸³»±â
____API
__Node ÄÁÅ×À̳ʷΠ½ÃÀÛÇϱâ
__React ¾ÛÀ» ¼ºñ½º·Î ±¸¼ºÇϱâ
__»ý»êÀ» À§ÇÑ Á¤Àû React ºôµå
__¿ä¾à