|
|
|
¿ø½ÜÀÇ ¸®¾×Æ® Äü½ºÅ¸Æ® with ŸÀÔ½ºÅ©¸³Æ® : ÇÁ·±Æ®¿£µå °³¹ßÀÚ°¡ ¹«Á¶°Ç ¾Ë¾Æ¾ß ÇÏ´Â ¸®¾×Æ® Á¦´ë·Î ¹è¿ì±â
|
|
|
¿øÇü¼·
¤Ó
½ÜÁî
|
|
|
|
- Á¦ÈÞ¸ô ÁÖ¹® ½Ã °í°´º¸»ó, ÀϺΠÀ̺¥Æ® Âü¿© ¹× ÁõÁ¤Ç° ÁõÁ¤, ÇÏ·ç/´çÀÏ ¹è¼Û¿¡¼ Á¦¿ÜµÇ¹Ç·Î Âü°í ¹Ù¶ø´Ï´Ù.
-
-
-
¿ø½Ü¿¡°Ô Á¦´ë·Î ¹è¿ì´Â ¸®¾×Æ® with ŸÀÔ½ºÅ©¸³Æ®
Á¤ÀûÀÎ µ¥ÀÌÅÍ Çü½ÄÀ» Áö¿øÇϴ ŸÀÔ½ºÅ©¸³Æ®ÀÇ ¾ð¾îÀû Ư¼ºÀÌ °³¹ß »ý»ê¼º°ú ÄÚµå ¾ÈÁ¤¼ºÀ» ³ôÀÌ´Â µ¥ ¾î¶»°Ô Àû¿ëµÇ´ÂÁö ŸÀÔ½ºÅ©¸³Æ®ÀÇ ÁÖ¿ä °³³äÀ» ¸ÕÀú »ìÆ캾´Ï´Ù. ±×¸®°í ¸®¾×Æ®ÀÇ ±â´É°ú ¿ä¼ÒµéÀÌ ÇÊ¿äÇÑ ÀÌÀ¯¸¦ ¼³¸íÇØ ¸®¾×Æ®ÀÇ ±âÃʸ¦ źźÇÏ°Ô Àâ½À´Ï´Ù. À¯Æ©ºê Ç÷¹À̸®½ºÆ®¸¦ ¸¸µé¾îº¸¸ç ¸®¾×Æ®ÀÇ °í±Þ ±â¼ú±îÁö Á¦´ë·Î ÀÍÈ÷°í, ³¡¿¡´Â ¸®¾×Æ® 18¿¡ »õ·Ó°Ô Ãß°¡µÈ ÈÅ°ú ±â´ÉµéÀ» ¾Ë¾Æº¾´Ï´Ù.
-
-
ÀÌ Ã¥ÀÇ ±¸¼º
- 1~2Àå °³¹ß ȯ°æ ¼³Á¤°ú ¼±¼ö Áö½Ä ÇнÀ
¸®¾×Æ®¶õ ¹«¾ùÀÎÁö ¼Ò°³ÇÏ°í ¸®¾×Æ®ÀÇ Æ¯Â¡°ú ÀåÁ¡µéÀ» »ìÆ캾´Ï´Ù. º»°ÝÀûÀ¸·Î ¸®¾×Æ®¸¦ ÇнÀÇϱ⿡ ¾Õ¼ °³¹ß ȯ°æÀ» ¼³Á¤ÇÏ°í ¼±¼ö Áö½ÄÀÎ ES6, ŸÀÔ½ºÅ©¸³Æ® ¾ð¾îÀÇ ±âÃʸ¦ ÇнÀÇÕ´Ï´Ù.
- 3~4Àå ¸®¾×Æ® ±âÃÊ
¸®¾×Æ®ÀÇ JSX, ¼Ó¼º(props), »óÅÂ(state)¿Í °°Àº ±âÃÊ Áö½Ä°ú ´õºÒ¾î ¸®¾×Æ® ÄÄÆ÷³ÍÆ®¸¦ ÀÛ¼ºÇÏ´Â ¹æ¹ý°ú ÄÄÆ÷³ÍÆ® »çÀÌÀÇ µ¥ÀÌÅ͸¦ Àü´ÞÇÏ´Â ¹æ¹ý, À̺¥Æ® ó¸® µî°ú °°Àº ¸®¾×Æ®ÀÇ ÇÙ½ÉÀ» ÇнÀÇÕ´Ï´Ù.
- 5Àå ¸®¾×Æ® Ŭ·¡½º ÄÄÆ÷³ÍÆ®
ÀÌ Ã¥Àº ¸®¾×Æ®¸¦ ÇÔ¼ö ÄÄÆ÷³ÍÆ®¸¦ Áß½ÉÀ¸·Î »ç¿ëÇÏÁö¸¸ 5Àå¿¡¼´Â Ŭ·¡½º ÄÄÆ÷³ÍÆ®¸¦ ´Ù·ì´Ï´Ù. Ŭ·¡½º ÄÄÆ÷³ÍÆ®ÀÇ »ý¸íÁֱ⠸޼µå È°¿ë ¹æ¹ý°ú ·»´õ¸µ ÃÖÀûÈ¿¡ ´ëÇØ ¾Ë¾Æº¾´Ï´Ù.
- 6~7Àå ¸®¾×Æ® ÈÅ°ú °íÂ÷ ÇÔ¼ö
ÇÔ¼ö ÄÄÆ÷³ÍÆ®¿¡¼ »óÅÂ¿Í »ý¸íÁֱ⠸޼µå ±â´ÉÀ» »ç¿ëÇÒ ¼ö ÀÖµµ·Ï ÇÏ´Â ¸®¾×Æ® ÈÅÀ» ÇнÀÇÕ´Ï´Ù. ¶ÇÇÑ °íÂ÷ ÇÔ¼öÀÇ °³³ä°ú »ç¿ëÀÚ Á¤ÀÇ °íÂ÷ ÇÔ¼ö¸¦ ÀÛ¼ºÇÏ´Â ¹æ¹ý, React.memo¶ó´Â °íÂ÷ ÇÔ¼ö¸¦ ÀÌ¿ëÇØ ·»´õ¸µ ¼º´ÉÀ» ÃÖÀûÈÇÏ´Â ¹æ¹ýÀ» ÇнÀÇÕ´Ï´Ù.
- 8Àå Context API
Context API¸¦ ÀÌ¿ëÇØ ¼Ó¼ºÀ» ÀÌ¿ëÇÏÁö ¾Ê°í ÇÊ¿äÇÑ µ¥ÀÌÅ͸¦ ÀÚ½Ä ÄÄÆ÷³ÍÆ®¿¡ Àü´ÞÇÏ´Â ¹æ¹ýÀ» ÇнÀÇÕ´Ï´Ù.
- 9~10Àå ¸®¾×Æ® ¶ó¿ìÅÍ
¸®¾×Æ® ¶ó¿ìÅ͸¦ ÀÌ¿ëÇØ SPA(Single Page Application)¸¦ °³¹ßÇÏ´Â ¹æ¹ýÀ» ¾Ë¾Æº¾´Ï´Ù. ¸®¾×Æ® ¶ó¿ìÅÍ°¡ Á¦°øÇÏ´Â ´Ù¾çÇÑ ¸®¾×Æ® Èŵµ ÇÔ²² ´Ù·ì´Ï´Ù. 9ÀåÀ» ÇнÀÇÑ ÈÄ 10Àå¿¡¼´Â ¸®¾×Æ® ¶ó¿ìÅÍ°¡ Àû¿ëµÈ SPA ½ÇÀü ¿¹Á¦¸¦ ÀÛ¼ºÇغ¾´Ï´Ù.
- 11Àå axios¸¦ ÀÌ¿ëÇÑ HTTP Åë½Å
axios ¶óÀ̺귯¸®¸¦ ÀÌ¿ëÇØ ¹é¿£µå API¿Í Åë½ÅÇÏ´Â ¹æ¹ýÀ» ÇнÀÇÕ´Ï´Ù. Å©·Î½º ¿À¸®Áø ¹®Á¦ ÇØ°áÀ» À§ÇØ ÇÁ·Ï½Ã¸¦ ¼³Á¤ÇÏ´Â ¹æ¹ýµµ ÇÔ²² ´Ù·ì´Ï´Ù.
- 12Àå ¸®´ö½º¸¦ ÀÌ¿ëÇÑ »óÅ °ü¸®
¸®´ö½º(redux) ¶óÀ̺귯¸®¸¦ ÀÌ¿ëÇØ ¾ÖÇø®ÄÉÀÌ¼Ç ¼öÁØÀÇ »óÅ °ü¸® ±â¹ýÀ» ¸®¾×Æ® ¾ÖÇø®ÄÉÀ̼ǿ¡ Àû¿ëÇغ¾´Ï´Ù. ƯÈ÷ redux-thunk, redux-saga¿Í °°Àº ¸®´ö½º ¹Ìµé¿þ¾î¸¦ ÀÌ¿ëÇØ ºñµ¿±â ÀÛ¾÷À» ó¸®ÇÏ´Â ¹æ¹ýÀ» ±×¸²°ú ÇÔ²² ÀÚ¼¼È÷ »ìÆ캾´Ï´Ù.
- 13Àå ¸®¾×Æ® 18 ´õ ¾Ë¾Æº¸±â
¸®¾×Æ® 18¿¡¼ Ãß°¡µÈ »õ·Î¿î ±â´É°ú ÈŵéÀ» »ìÆ캾´Ï´Ù.
ÀúÀÚ Á÷°°ú ÇÔ²² Çϼ¼¿ä.
SSAMZ.com¿¡ ÀÌ Ã¥À» ±³Àç·Î ÇÏ´Â À¯·á µ¿¿µ»ó °ÀÇ°¡ ÀÖ½À´Ï´Ù.
-
-
01Àå ¸®¾×Æ® ¼Ò°³
_1.1 ¸®¾×Æ®¶õ?
__1.1.1 ÀüÅëÀûÀÎ À¥ ¾ÖÇø®ÄÉÀ̼Ç
__1.1.2 ¸ÖƼ ÆäÀÌÁö ¾ÖÇø®ÄÉÀ̼Ç
__1.1.3 ´ÜÀÏ ÆäÀÌÁö ¾ÖÇø®ÄÉÀ̼Ç
_1.2 ¸®¾×Æ®ÀÇ ½ÇÇà ¹æ½Ä°ú Ư¡
__1.2.1 »óÅ °ü¸®¿Í ´Ü¹æÇâ µ¥ÀÌÅÍ ¹ÙÀεù
__1.2.2 JSX
__1.2.3 ÄÄÆ÷³ÍÆ® ±â¹ÝÀÇ °³¹ß
__1.2.4 °¡»ó DOMÀÇ ¼º´É
_1.3 ¸®¾×Æ® ¾ÖÇø®ÄÉÀÌ¼Ç ÀÛ¼º
_1.4 °³¹ß ȯ°æ ¼³Á¤
__1.4.1 Node.js ¼³Ä¡
__1.4.2 Visual Studio Code ¼³Ä¡
__1.4.3 React Developer Tools ¼³Ä¡
02Àå ES6¿Í ŸÀÔ½ºÅ©¸³Æ® ±âÃÊ
_2.1 ES6¿Í ŸÀÔ½ºÅ©¸³Æ® °³¿ä
_2.2 ES6
__2.2.1 ES6¸¦ »ç¿ëÇϱâ À§ÇÑ ÇÁ·ÎÁ§Æ® ¼³Á¤
__2.2.2 let°ú const
__2.2.3 ±âº» ÆĶó¹ÌÅÍ¿Í °¡º¯ ÆĶó¹ÌÅÍ
__2.2.4 ±¸Á¶ ºÐÇØ ÇÒ´ç
__2.2.5 È»ìÇ¥ ÇÔ¼ö
__2.2.6 °´Ã¼ ¸®ÅÍ·²
__2.2.7 ÅÛÇø´ ¸®ÅÍ·²
__2.2.8 ¸ðµâ
__2.2.9 ÇÁ·Î¹Ì½º
__2.2.10 Àü°³ ¿¬»êÀÚ
__2.2.11 Ŭ·¡½º
_2.3 ŸÀÔ½ºÅ©¸³Æ®
__2.3.1 ŸÀÔ½ºÅ©¸³Æ® ȯ°æ ¼³Á¤
__2.3.2 ŸÀÔ ÁöÁ¤ ¹æ¹ý
__2.3.3 Á¦³×¸¯
__2.3.4 ŸÀÔ º°Äª
__2.3.5 À¯´Ï¿Â ŸÀÔ
__2.3.6 ÀÎÅͼ½¼Ç ŸÀÔ
__2.3.7 ¿°ÅÇü
__2.3.8 ÀÎÅÍÆäÀ̽º
__2.3.9 ŸÀÔ Ãß·Ð
03Àå ¸®¾×Æ® ½ÃÀÛÇϱâ
_3.1 °³¹ß ȯ°æ ¼³Á¤ µµ±¸
__3.1.1 CRA µµ±¸
__3.1.2 Vit...e µµ±¸
_3.2 Hello ¾ÖÇø®ÄÉÀÌ¼Ç ÀÛ¼º
_3.3 CSS ½ºÅ¸ÀÏ Àû¿ë ¹æ¹ý
_3.4 JSX
__3.4.1 JSX ÁÖÀÇ »çÇ× 1
__3.4.2 JSX ÁÖÀÇ »çÇ× 2
__3.4.3 JSX ÁÖÀÇ »çÇ× 3
__3.4.4 JSX ÁÖÀÇ »çÇ× 4
__3.4.5 JSX ÁÖÀÇ »çÇ× 5
__3.4.6 JSX Àû¿ë ¿¹Á¦
_3.5 ¼Ó¼º
__3.5.1 ¼Ó¼º Á¤ÀÇ
__3.5.2 ¼Ó¼º Àû¿ë ¿¹Á¦
__3.5.3 ÄÄÆ÷³ÍÆ®ÀÇ ¼¼ºÐÈ
_3.6 »óÅÂ
__3.6.1 »óÅÂÀÇ ÃʱâÈ
04Àå ¸®¾×Æ® ÄÄÆ÷³ÍÆ®
_4.1 ÄÄÆ÷³ÍÆ® ½ºÅ¸ÀÏ ÁöÁ¤
__4.1.1 HTML¿¡¼ÀÇ ½ºÅ¸ÀÏ ÁöÁ¤
__4.1.2 ¸®¾×Æ®¿¡¼ÀÇ ½ºÅ¸ÀÏ ÁöÁ¤
__4.1.3 ¸®¾×Æ® ÀζóÀÎ ½ºÅ¸ÀÏ ÁöÁ¤
__4.1.4 CSS ¸ðµâ
__4.1.5 styled-components
_4.2 ¼Ó¼ºÀÇ À¯È¿¼º °ËÁõ
__4.2.1 ¼Ó¼ºÀÇ À¯È¿¼º °ËÁõ ¹æ¹ý
__4.2.2 PropTypes¸¦ ÀÌ¿ëÇÑ À¯È¿¼º °ËÁõ
__4.2.3 ÁöÁ¤ °¡´ÉÇÑ À¯È¿¼º °ËÁõ ŸÀÔ
__4.2.4 ¼Ó¼ºÀÇ ±âº»°ª ÁöÁ¤
_4.3 ¸®¾×Æ® À̺¥Æ®
__4.3.1 À̺¥Æ® Àû¿ë ¹æ¹ý
__4.3.2 À̺¥Æ® ¾Æ±Ô¸ÕÆ®ÀÇ Á¤Àû ŸÀÔ
__4.3.3 À̺¥Æ® Àû¿ë ¿¹Á¦ ÀÛ¼º
__4.3.4 ¸®¾×Æ®ÀÇ ´Ü¹æÇâ µ¥ÀÌÅÍ ¹ÙÀεù
_4.4 À̺¥Æ® Çڵ鷯¿Í »óÅ º¯°æ
_4.5 Á¦¾î ÄÄÆ÷³ÍÆ®¿Í ºñÁ¦¾î ÄÄÆ÷³ÍÆ®
__4.5.1 Á¦¾î ÄÄÆ÷³ÍÆ®
__4.5.2 ºñÁ¦¾î ÄÄÆ÷³ÍÆ®
_4.6 »óÅ ½ÉÈ
__4.6.1 ·»´õ¸µ ÃÖÀûÈ¿Í ºÒº¯¼º
__4.6.2 ºÒº¯¼º ¶óÀ̺귯¸® immer
_4.7 ÄÁÅ×ÀÌ³Ê ÄÄÆ÷³ÍÆ®¿Í Ç¥Çö ÄÄÆ÷³ÍÆ®
_4.8 È¸é ´ÜÀ§ °³¹ß ´Ü°è
__4.8.1 È¸é ½Ã¾È ÀÛ¼º
__4.8.2 »óÅÂ¿Í ¾×¼Ç µµÃâ
__4.8.3 ÄÄÆ÷³ÍÆ® ºÐÇÒ°ú ¸ñ·Ï µµÃâ
__4.8.4 ÄÄÆ÷³ÍÆ® Á¤ÀÇ
__4.8.5 ÄÄÆ÷³ÍÆ® ±¸Çö
_4.9 ¾ÖÇø®ÄÉÀÌ¼Ç ½Ç½À
__4.9.1 È¸é ½Ã¾È°ú ÄÄÆ÷³ÍÆ® ºÐÇÒ
__4.9.2 ÄÄÆ÷³ÍÆ® ¸ñ·Ï ÀÛ¼º
__4.9.3 ÇÁ·ÎÁ§Æ® »ý¼º
__4.9.4 ÄÄÆ÷³ÍÆ® ÀÛ¼º
__4.9.5 ¾ÖÇø®ÄÉÀÌ¼Ç ½ÇÇà
05Àå ¸®¾×Æ® Ŭ·¡½º ÄÄÆ÷³ÍÆ®
_5.1 ÇÔ¼ö ÄÄÆ÷³ÍÆ®¿Í Ŭ·¡½º ÄÄÆ÷³ÍÆ®
_5.2 Ŭ·¡½º ÄÄÆ÷³ÍÆ® ÀÛ¼º ¹æ¹ý
_5.3 °£´ÜÇÑ µðÁöÅÐ ½Ã°è ¸¸µé±â ¿¹Á¦
_5.4 »ý¸íÁֱ⠸޼µå
__5.4.1 ÄÄÆ÷³ÍÆ®°¡ ¸¶¿îÆ®µÉ ¶§
__5.4.2 ÄÄÆ÷³ÍÆ®°¡ ¾÷µ¥ÀÌÆ®µÉ ¶§
__5.4.3 ÄÄÆ÷³ÍÆ®°¡ ¾ð¸¶¿îÆ®µÉ ¶§
__5.4.4 »ý¸íÁֱ⠸޼µå ¿¹Á¦ 1
__5.4.5 »ý¸íÁֱ⠸޼µå ¿¹Á¦ 2
__5.4.6 »ý¸íÁֱ⠸޼µå ¿¹Á¦ 3
_5.5 °¡»ó DOM°ú Á¶Á¤
__5.5.1 °¡»ó DOM°ú ºê¶ó¿ìÀú DOM
__5.5.2 key Ư¼º
__5.5.3 »ý¸íÁֱ⠸޼µå¸¦ ÀÌ¿ëÇÑ ·»´õ¸µ ÃÖÀûÈ
_5.6 ·»´õ¸µ ÃÖÀûÈ Àû¿ë
__5.6.1 shouldComponentUpdate »ý¸íÁֱ⠸޼µå Àû¿ë
__5.6.2 PureComponent Àû¿ë
06Àå ¸®¾×Æ® ÈÅ
_6.1 ÇÔ¼ö ÄÄÆ÷³ÍÆ®¿Í ¸®¾×Æ® ÈÅ
_6.2 useState ÈÅ
_6.3 useEffect ÈÅ
__6.3.1 ÄÄÆ÷³ÍÆ®°¡ ¸¶¿îÆ® ¹× ¾÷µ¥ÀÌÆ®µÉ ¶§
__6.3.2 depsList ÁöÁ¤
__6.3.3 Ŭ¸°¾÷ ÇÔ¼ö
__6.3.4 useEffectÀÇ ÀåÁ¡
__6.3.5 ¸®¾×Æ® ÈÅÀÇ »ý¸íÁÖ±â
_6.4 useReducer ÈÅ
__6.4.1 ¸®µà¼ÀÇ °³³ä
__6.4.2 ¸®µà¼ ÇÔ¼ö
__6.4.3 useReducer ÈÅ »ç¿ëÇϱâ
_6.5 useRef ÈÅ
__6.5.1 »óÅ°¡ ¾Æ´Ñ µ¥ÀÌÅÍ °ü¸®
__6.5.2 useRef ÈÅÀ» ÀÌ¿ëÇØ ºê¶ó¿ìÀú DOM¿¡ Á¢±ÙÇϱâ
_6.6 ¸Þ¸ðÀÌÁ¦ÀÌ¼Ç ÈÅ
__6.6.1 Å×½ºÆ® ¿¹Á¦ Áغñ
__6.6.2 useMemo ÈÅ Àû¿ë
__6.6.3 useCallback ÈÅ Àû¿ë
_6.7 »ç¿ëÀÚ Á¤ÀÇ ÈÅ
07Àå °íÂ÷ ÇÔ¼ö¿Í ·»´õ¸µ ÃÖÀûÈ
_7.1 °íÂ÷ ÇÔ¼ö¶õ?
_7.2 °£´ÜÇÑ °íÂ÷ ÇÔ¼ö ¿¹Á¦
_7.3 React.memo °íÂ÷ ÇÔ¼ö
_7.4 React.memo¸¦ ÀÌ¿ëÇÑ ·»´õ¸µ ¼º´É ÃÖÀûÈ
__7.4.1 ÃÖÀûÈ ÀÌÀüÀÇ todolist-app
__7.4.2 React.memo °íÂ÷ ÇÔ¼ö Àû¿ë
__7.4.3 ¼Ó¼ºÀ¸·Î ÇÔ¼ö¸¦ Àü´ÞÇÏ´Â °æ¿ì
__7.4.4 useCallback ÈÅ Àû¿ë
__7.4.5 React.memoÀÇ µÎ ¹ø° ÀÎÀÚ Àû¿ë
__7.4.6 Ãß°¡ÀûÀÎ ÄÄÆ÷³ÍÆ®ÀÇ ºÐÇÒ
08Àå Context API
_8.1 Context API¶õ?
_8.2 todolist-app¿¡ Context API Àû¿ëÇϱâ
09Àå ¸®¾×Æ® ¶ó¿ìÅÍ
_9.1 ¸®¾×Æ® ¶ó¿ìÅͶõ?
_9.2 ¸®¾×Æ® ¶ó¿ìÅÍÀÇ ±âº» »ç¿ë¹ý
__9.2.1 ¿¹Á¦ ÇÁ·ÎÁ§Æ® »ý¼º ¹× ¶ó¿ìÆà ÄÄÆ÷³ÍÆ® ±âÃÊ
__9.2.2 ±âÃÊ ¿¹Á¦ ÀÛ¼º
_9.3 ¶ó¿ìÆÃµÈ ÄÄÆ÷³ÍÆ®·Î ¼Ó¼º Àü´ÞÇϱâ
__9.3.1 ¼Ó¼ºÀ» Àü´ÞÇÏ´Â ¹æ¹ý
__9.3.2 º¹ÀâÇÑ °´Ã¼¸¦ ¼Ó¼ºÀ¸·Î Àü´ÞÇϱâ
_9.4 URI ÆĶó¹ÌÅÍ ÀÌ¿ë
__9.4.1 URI ÆĶó¹ÌÅͶõ?
__9.4.2 URI ÆĶó¹ÌÅÍ Àû¿ëÇϱâ
__9.4.3 Ŭ·¡½º ÄÄÆ÷³ÍÆ®¿¡ URI ÆĶó¹ÌÅÍ Àû¿ëÇϱâ
_9.5 Áßø ¶ó¿ìÆ®
__9.5.1 Áßø ¶ó¿ìÆ®¶õ?
__9.5.2 Áßø ¶ó¿ìÆ® Àû¿ëÇϱâ
__9.5.3 index ¶ó¿ìÆ® ¼³Á¤
_9.6 ¸®¾×Æ® ¶ó¿ìÅÍ°¡ Á¦°øÇÏ´Â ÈÅ
__9.6.1 useMatch
__9.6.2 useSearchParams
__9.6.3 useNavigate¿Í useLocation
__9.6.4 useOutletContext
_9.7 ¶ó¿ìÅÍ °ü·Ã ÄÄÆ÷³ÍÆ®
__9.7.1 Router ÄÄÆ÷³ÍÆ®
__9.7.2 fallback UI°¡ ¾ø´Â À¥ ¼¹ö¿¡¼ÀÇ ¿¡·¯ È®ÀÎ
__9.7.3 404 ¶ó¿ìÆ®¿Í ¸®µð·º¼Ç ±¸¼º
__9.7.4 NavLink ÄÄÆ÷³ÍÆ®
_9.8 ¸®¾×Æ® ¶ó¿ìÅÍ¿Í ·¹ÀÌÁö ·Îµù ±â¹ý
__9.8.1 ·¹ÀÌÁö ·ÎµùÀ̶õ?
__9.8.2 ·¹ÀÌÁö ·Îµù Àû¿ë ¹æ¹ý
__9.8.3 Suspense ÄÄÆ÷³ÍÆ®
__9.8.4 ·¹ÀÌ¡ ·Îµù Àû¿ëÇϱâ
10Àå ¶ó¿ìÆÃÀ» Àû¿ëÇÑ ¿¹Á¦ ½Ç½À
_10.1 ¿¹Á¦ °³¿ä
_10.2 ÇÁ·ÎÁ§Æ® »ý¼º°ú ÃʱâÈ
_10.3 AppContainer ÄÄÆ÷³ÍÆ® ÀÛ¼º
_10.4 App ÄÄÆ÷³ÍÆ® ÀÛ¼º
_10.5 Header, Layout, Home, About, NotFound ÄÄÆ÷³ÍÆ® ÀÛ¼º
_10.6 TodoList, TodoItem ÄÄÆ÷³ÍÆ® ÀÛ¼º
_10.7 AddTodo ÄÄÆ÷³ÍÆ® ÀÛ¼º
_10.8 EditTodo ÄÄÆ÷³ÍÆ® ÀÛ¼º
_10.9 ½ÇÇà °á°ú È®ÀÎ
11Àå axios¸¦ ÀÌ¿ëÇÑ HTTP Åë½Å
_11.1 axios¶õ?
_11.2 Å×½ºÆ®¿ë ¹é¿£µå API ¼Ò°³
_11.3 ÇÁ·ÎÁ§Æ® »ý¼º°ú Å©·Î½º ¿À¸®Áø ¿¡·¯ ¹ß»ý
_11.4 Å©·Î½º ¿À¸®Áø ¹®Á¦¶õ?
_11.5 Å©·Î½º ¿À¸®Áø ¹®Á¦ ÇØ°á ¹æ¹ý
__11.5.1 CORS
__11.5.2 ÇÁ·Ï½Ã¸¦ ÀÌ¿ëÇÑ ¿ìȸ
_11.6 axios ¶óÀ̺귯¸® »ç¿ë¹ý
__11.6.1 Promise¿Í async/await
__11.6.2 axios ¶óÀ̺귯¸® »ç¿ë ¹æ¹ý
__11.6.3 ¿¡·¯ ó¸®
_11.7 axios Àû¿ëÇϱâ
__11.7.1 todolist-app-router ÇÁ·ÎÁ§Æ®¿¡ axios Àû¿ëÇϱâ
__11.7.2 Áö¿¬ ½Ã°£¿¡ ´ëÇÑ Ã³¸®
_11.8 Suspense Àû¿ëÇϱâ
12Àå ¸®´ö½º¸¦ ÀÌ¿ëÇÑ »óÅ °ü¸®
_12.1 ¸®¾×Æ®ÀÇ »óÅ °ü¸® ¸®ºä
_12.2 Ç÷°½º ¾ÆÅ°ÅØó¿Í ¸®´ö½º
__12.2.1 Ç÷°½º
__12.2.2 ¸®´ö½º Ư¡
__12.2.3 ¸®´ö½º »ó¼¼ º¸±â
_12.3 ¸®´ö½º Àû¿ëÇϱâ
__12.3.1 ¿¹Á¦ ¾ÆÅ°ÅØó
__12.3.2 ÇÁ·ÎÁ§Æ® ¼³Á¤°ú ¼³°è
__12.3.3 ¸®´ö½º ±¸¼º ¿ä¼Ò ÀÛ¼º
__12.3.4 ¸®´ö½º ±¸¼º ¿ä¼Ò¸¦ »ç¿ëÇÏ´Â ÄÄÆ÷³ÍÆ®·Î º¯°æ
__12.3.5 ¸®´ö½º ÅøŶ ÀÌ¿ëÇϱâ
_12.4 ´ÙÁß ¸®µà¼
__12.4.1 ´ÙÁß ¸®µà¼¶õ?
__12.4.2 ´ÙÁß ¸®µà¼ Àû¿ë
_12.5 ¸®´ö½º ¹Ìµé¿þ¾î
__12.5.1 ¸®´ö½º ¹Ìµé¿þ¾î¶õ?
__12.5.2 Å×½ºÆ®¿ë ¹Ìµé¿þ¾î Àû¿ëÇϱâ
__12.5.3 °£´ÜÇÑ ÄÜ¼Ö ·Î°Å ¹Ìµé¿þ¾î
_12.6 redux-thunk ¹Ìµé¿þ¾î
__12.6.1 ¸®´ö½º¿Í ºñµ¿±â ó¸®
__12.6.2 redux-thunk¶õ?
__12.6.3 redux-thunk Àû¿ëÇϱâ
__12.6.4 redux-thunk¿Í @reduxjs/toolkit ÇÔ²² »ç¿ëÇϱâ
__12.6.5 redux-thunk¿Í axios¸¦ »ç¿ëÇÏ´Â ¿¹Á¦
_12.7 redux-saga ¹Ìµé¿þ¾î
__12.7.1 redux-saga¶õ?
__12.7.2 redux-saga¸¦ ½ÃÀÛÇϱâ Àü ¾Ë¾Æ¾ß ÇÒ °Íµé
__12.7.3 redux-saga ¾ÆÅ°ÅØó
__12.7.4 redux-saga Àû¿ëÇϱâ
_12.8 react-redux°¡ Á¦°øÇÏ´Â ÈÅ
_12.9 ¸®´ö½º °³¹ß µµ±¸
__12.9.1 ¸®´ö½º °³¹ß µµ±¸¶õ?
__12.9.2 ¸®´ö½º °³¹ß µµ±¸ »ç¿ëÇغ¸±â
13Àå ¸®¾×Æ® 18 ´õ ¾Ë¾Æº¸±â
_13.1 ReactDOM.createRoot( ) API
_13.2 ÀÚµ¿ ¹èÄ¡ ó¸® ±â´É
_13.3 Àüȯ ±â´É
_13.4 Áö¿¬µÈ °ª
_13.5 ±âŸ Ãß°¡µÈ ±â´É
-
-
|
¿øÇü¼· [Àú]
|
|
-
2001³â±îÁö »ï¼ºÁ¾ÇÕ±â¼ú¿ø HCILAB¿¡¼ ÀÏÇÏ´Ù 2001³âºÎÅÍ ÇöÀç±îÁö Å©·¹µà ¸ÖƼķÆÛ½º(±¸ »ï¼º ¸ÖƼķÆÛ½º)¿¡¼ ÇÁ·Î±×·¡¹Ö, ºòµ¥ÀÌÅÍ, NOSQL ºÐ¾ß ÀüÀÓ ±³¼ö·Î È°µ¿ÇÏ°í ÀÖ´Ù. ¶ÇÇÑ °ÀÇ¿Í º´ÇàÇÏ¿© ¢ß¿ÀÇ¿¡½ºÁö¿¡¼ ¼ö¼® ÄÁ¼³ÅÏÆ®·Î ÀçÁ÷ ÁßÀÌ¸ç »ï¼ºÁß°ø¾÷, »ï¼ºµð½ºÇ÷¹ÀÌ µî¿¡¼ ÇÁ·ÎÁ§Æ®¸¦ ÁøÇàÇÏ¿´´Ù. React, Angular, Vue.js µîÀÇ ÇÁ·±Æ®¿£µå ÇÁ·¹ÀÓ¿öÅ©¿Í Open API, MSA(Micro Service Architecture)¿¡ °ü½ÉÀÌ ¸¹À¸¸ç DB¿¡¼ ¹é¿£µå, ÇÁ·±Æ®¿£µå±îÁö ¼··ÆÇÏ´Â Ç®½ºÅà °³¹ßÀÚ¸¦ ÁöÇâÇÑ´Ù. ÃÖ±Ù¿¡´Â AWS¿Í °°Àº Ŭ¶ó¿ìµå ȯ°æ°ú ÄÁÅ×ÀÌ³Ê ±â¹Ý ±â¼ú¿¡ ´ëÇÑ ¿©·¯ °¡Áö ½Ãµµ¸¦ ÇÏ°í ÀÖÀ¸¸ç ÇöÀç èÇǾð AWS °øÀΰ»ç(AAI: AWS Authorized Instructor)·Îµµ È°µ¿ ÁßÀÌ´Ù.
-
-
Àüü 0°³ÀÇ ±¸¸ÅÈıⰡ ÀÖ½À´Ï´Ù.
|
ÀÎÅÍÆÄÅ©µµ¼´Â °í°´´ÔÀÇ ´Ü¼ø º¯½É¿¡ ÀÇÇÑ ±³È¯°ú ¹ÝÇ°¿¡ µå´Â ºñ¿ëÀº °í°´´ÔÀÌ ÁöºÒÄÉ µË´Ï´Ù.
´Ü, »óÇ°À̳ª ¼ºñ½º ÀÚüÀÇ ÇÏÀÚ·Î ÀÎÇÑ ±³È¯ ¹× ¹ÝÇ°Àº ¹«·á·Î ¹ÝÇ° µË´Ï´Ù. |
|
±³È¯ ¹× ¹ÝÇ°ÀÌ °¡´ÉÇÑ °æ¿ì |
»óÇ°À» °ø±Þ ¹ÞÀº ³¯·ÎºÎÅÍ 7ÀÏÀ̳» °¡´É
°ø±Þ¹ÞÀ¸½Å »óÇ°ÀÇ ³»¿ëÀÌ Ç¥½Ã, ±¤°í ³»¿ë°ú ´Ù¸£°Å³ª ´Ù¸£°Ô ÀÌÇàµÈ °æ¿ì¿¡´Â °ø±Þ¹ÞÀº ³¯·ÎºÎÅÍ 3°³¿ù À̳», ȤÀº ±×»ç½ÇÀ» ¾Ë°Ô µÈ ³¯ ¶Ç´Â ¾Ë ¼ö ÀÖ¾ú´ø ³¯·ÎºÎÅÍ 30ÀÏ À̳»
»óÇ°¿¡ ¾Æ¹«·± ÇÏÀÚ°¡ ¾ø´Â °æ¿ì ¼ÒºñÀÚÀÇ °í°´º¯½É¿¡ ÀÇÇÑ ±³È¯Àº »óÇ°ÀÇ Æ÷Àå»óÅ µîÀÌ ÀüÇô ¼Õ»óµÇÁö ¾ÊÀº °æ¿ì¿¡ ÇÑÇÏ¿© °¡´É |
|
±³È¯ ¹× ¹ÝÇ°ÀÌ ºÒ°¡´ÉÇÑ °æ¿ì |
±¸¸ÅÈ®Á¤ ÀÌÈÄ(¿ÀǸ¶ÄÏ»óÇ°¿¡ ÇÑÇÔ)
°í°´´ÔÀÇ Ã¥ÀÓ ÀÖ´Â »çÀ¯·Î »óÇ° µîÀÌ ¸ê½Ç ¶Ç´Â ÈÑ¼ÕµÈ °æ¿ì
(´Ü, »óÇ°ÀÇ ³»¿ëÀ» È®ÀÎÇϱâ À§ÇÏ¿© Æ÷Àå µîÀ» ÈѼÕÇÑ °æ¿ì´Â Á¦¿Ü)
½Ã°£ÀÌ Áö³²¿¡ µû¶ó ÀçÆǸŰ¡ °ï¶õÇÒ Á¤µµ·Î ¹°Ç°ÀÇ °¡Ä¡°¡ ¶³¾îÁø °æ¿ì
Æ÷Àå °³ºÀµÇ¾î »óÇ° °¡Ä¡°¡ ÈÑ¼ÕµÈ °æ¿ì |
|
´Ù¹è¼ÛÁöÀÇ °æ¿ì ¹ÝÇ° ȯºÒ |
´Ù¹è¼ÛÁöÀÇ °æ¿ì ´Ù¸¥ Áö¿ªÀÇ ¹ÝÇ°À» µ¿½Ã¿¡ ÁøÇàÇÒ ¼ö ¾ø½À´Ï´Ù.
1°³ Áö¿ªÀÇ ¹ÝÇ°ÀÌ ¿Ï·áµÈ ÈÄ ´Ù¸¥ Áö¿ª ¹ÝÇ°À» ÁøÇàÇÒ ¼ö ÀÖÀ¸¹Ç·Î, ÀÌÁ¡ ¾çÇØÇØ Áֽñ⠹ٶø´Ï´Ù. |
|
Áß°í»óÇ°ÀÇ ±³È¯ |
Áß°í»óÇ°Àº Á¦ÇÑµÈ Àç°í ³»¿¡¼ ÆǸŰ¡ ÀÌ·ç¾îÁö¹Ç·Î, ±³È¯Àº ºÒ°¡´ÉÇÕ´Ï´Ù. |
|
¿ÀǸ¶ÄÏ »óÇ°ÀÇ È¯ºÒ |
¿ÀǸ¶ÄÏ»óÇ°¿¡ ´ëÇÑ Ã¥ÀÓÀº ¿øÄ¢ÀûÀ¸·Î ¾÷ü¿¡°Ô ÀÖÀ¸¹Ç·Î, ±³È¯/¹ÝÇ° Á¢¼ö½Ã ¹Ýµå½Ã ÆǸÅÀÚ¿Í ÇùÀÇ ÈÄ ¹ÝÇ° Á¢¼ö¸¦ ÇϼžßÇϸç, ¹ÝÇ°Á¢¼ö ¾øÀÌ ¹Ý¼ÛÇϰųª, ¿ìÆíÀ¸·Î º¸³¾ °æ¿ì »óÇ° È®ÀÎÀÌ ¾î·Á¿ö ȯºÒÀÌ ºÒ°¡´ÉÇÒ ¼ö ÀÖÀ¸´Ï À¯ÀÇÇϽñ⠹ٶø´Ï´Ù. |
|
|
|
¹è¼Û¿¹Á¤ÀÏ ¾È³» |
ÀÎÅÍÆÄÅ© µµ¼´Â ¸ðµç »óÇ°¿¡ ´ëÇØ ¹è¼Û¿Ï·á¿¹Á¤ÀÏÀ» À¥»çÀÌÆ®¿¡ Ç¥½ÃÇÏ°í ÀÖ½À´Ï´Ù.
|
<ÀÎÅÍÆÄÅ© Á÷¹è¼Û »óÇ°> |
»óÇ°Àº ¿ù~Åä¿äÀÏ ¿ÀÀü 10½Ã ÀÌÀü ÁÖ¹®ºÐ¿¡ ´ëÇÏ¿© ´çÀÏ Ãâ°í/´çÀÏ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÏ´Â »óÇ°ÀÔ´Ï´Ù. |
»óÇ°Àº ¼¿ïÁö¿ª/ÆòÀÏ ÁÖ¹®ºÐÀº ´çÀÏ Ãâ°í/ÀÍÀÏ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇϸç,
¼¿ï¿ÜÁö¿ª/ÆòÀÏ ÁÖ¹®ºÐÀÇ °æ¿ì´Â ¿ÀÈÄ 6½Ã±îÁö ÁÖ¹®ºÐ¿¡ ´ëÇÏ¿© ÀÍÀÏ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÏ´Â »óÇ°ÀÔ´Ï´Ù.
(´Ü, ¿ù¿äÀÏÀº 12½Ã±îÁö ÁÖ¹®¿¡ ÇÑÇÔ)
|
»óÇ°Àº, ÀÔ°í¿¹Á¤ÀÏ(Á¦Ç°Ãâ½ÃÀÏ)+Åùè»ç¹è¼ÛÀÏ(1ÀÏ)¿¡ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÕ´Ï´Ù. |
~
»óÇ°Àº À¯ÅëƯ¼º»ó ÀÎÅÍÆÄÅ©¿¡¼ Àç°í¸¦ º¸À¯ÇÏÁö ¾ÊÀº »óÇ°À¸·Î ÁÖ¹®ÀÏ+±âÁØÃâ°íÀÏ+Åùè»ç¹è¼ÛÀÏ(1ÀÏ)¿¡ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÕ´Ï´Ù.(Åä/°øÈÞÀÏÀº ¹è¼Û±â°£¿¡ Æ÷ÇÔµÇÁö ¾Ê½À´Ï´Ù.)
¡Ø±âÁØÃâ°íÀÏ:ÀÎÅÍÆÄÅ©°¡ »óÇ°À» ¼ö±ÞÇÏ¿© ¹°·ùâ°í¿¡¼ Æ÷Àå/Ãâ°íÇϱâ±îÁö ¼Ò¿äµÇ´Â ½Ã°£
|
|
<¾÷ü Á÷Á¢¹è¼Û/¿ÀǸ¶ÄÏ »óÇ°> |
~
»óÇ°Àº ¾÷ü°¡ ÁÖ¹®À» È®ÀÎÇÏ°í, Ãâ°íÇϱâ±îÁö °É¸®´Â ½Ã°£ÀÔ´Ï´Ù. ÁÖ¹®ÀÏ+±âÁØÃâ°íÀÏ+Åùè»ç¹è¼ÛÀÏ(2ÀÏ)¿¡ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÕ´Ï´Ù.(Åä/°øÈÞÀÏÀº ¹è¼Û±â°£¿¡ Æ÷ÇÔµÇÁö ¾Ê½À´Ï´Ù.)
¡Ø5ÀÏÀ̳» Ãâ°í°¡ ½ÃÀÛµÇÁö ¾ÊÀ»½Ã, ¿ÀǸ¶ÄÏ »óÇ°Àº ÀÚµ¿À¸·Î ÁÖ¹®ÀÌ Ãë¼ÒµÇ¸ç, °í°´´Ô²² Ç°Àýº¸»ó±ÝÀ» Áö±ÞÇØ µå¸³´Ï´Ù.
|
|
|
¹è¼Ûºñ ¾È³» |
µµ¼(Áß°íµµ¼ Æ÷ÇÔ)¸¸ ±¸¸ÅÇϽøé : ¹è¼Ûºñ 2,000¿ø (1¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û) À½¹Ý/DVD¸¸ ±¸¸ÅÇϽøé : ¹è¼Ûºñ 1,500¿ø (2¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û)
ÀâÁö/¸¸È/±âÇÁÆ®¸¸ ±¸¸ÅÇϽøé : ¹è¼Ûºñ 2,000¿ø (2¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û)
µµ¼¿Í À½¹Ý/DVD¸¦ ÇÔ²² ±¸¸ÅÇϽøé : ¹è¼Ûºñ 1,500¿ø 1¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û)
µµ¼¿Í ÀâÁö/¸¸È/±âÇÁÆ®/Áß°íÁ÷¹è¼Û»óÇ°À» ÇÔ²² ±¸¸ÅÇϽøé : 2,000¿ø (1¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û)
¾÷üÁ÷Á¢¹è¼Û»óÇ°À» ±¸¸Å½Ã : ¾÷üº°·Î »óÀÌÇÑ ¹è¼Ûºñ Àû¿ë
* ¼¼Æ®»óÇ°ÀÇ °æ¿ì ºÎºÐÃë¼Ò ½Ã Ãß°¡ ¹è¼Ûºñ°¡ ºÎ°úµÉ ¼ö ÀÖ½À´Ï´Ù.
* ºÏÄ«Æ®¿¡¼ ¹è¼Ûºñ¾ø¾Ö±â ¹öÆ°À» Ŭ¸¯Çϼż, µ¿ÀϾ÷ü»óÇ°À» Á¶±Ý ´õ ±¸¸ÅÇϽøé, ¹è¼Ûºñ¸¦ Àý¾àÇÏ½Ç ¼ö ÀÖ½À´Ï´Ù.
|
|
Çؿܹè¼Û ¾È³» |
ÀÎÅÍÆÄÅ©µµ¼¿¡¼´Â ±¹³»¿¡¼ ÁÖ¹®ÇϽðųª ÇØ¿Ü¿¡¼ ÁÖ¹®ÇÏ¿© ÇØ¿Ü·Î ¹è¼ÛÀ» ¿øÇÏ½Ç °æ¿ì DHL°ú Ư¾àÀ¸·Î Ã¥Á¤µÈ ¿ä±ÝÇ¥¿¡
ÀÇÇØ °³ÀÎÀÌ ÀÌ¿ëÇÏ´Â °æ¿ìº¸´Ù ¹è¼Û¿ä±ÝÀ» Å©°Ô ³·Ã߸ç DHL(www.dhl.co.kr)·Î Çؿܹè¼Û ¼ºñ½º¸¦ Á¦°øÇÕ´Ï´Ù.
Çؿܹè¼ÛÀº µµ¼/CD/DVD »óÇ°¿¡ ÇÑÇØ ¼ºñ½ºÇÏ°í ÀÖÀ¸¸ç, ´Ù¸¥ »óÇ°À» ºÏÄ«Æ®¿¡ ÇÔ²² ´ãÀ¸½Ç °æ¿ì Çؿܹè¼ÛÀÌ ºÒ°¡ÇÕ´Ï´Ù.
ÇØ¿ÜÁÖ¹®¹è¼Û ¼ºñ½º´Â ÀÎÅÍÆÄÅ© µµ¼ ȸ¿ø °¡ÀÔÀ» Çϼž߸¸ ½Åû °¡´ÉÇÕ´Ï´Ù. |
|
¾Ë¾ÆµÎ¼¼¿ä!!! |
µµ¸Å»ó ¹× Á¦ÀÛ»ç »çÁ¤¿¡ µû¶ó Ç°Àý/ÀýÆÇ µîÀÇ »çÀ¯·Î Ãë¼ÒµÉ ¼ö ÀÖ½À´Ï´Ù.
¿ÀǸ¶ÄϾ÷üÀÇ ¹è¼ÛÁö¿¬½Ã ÁÖ¹®ÀÌ ÀÚµ¿À¸·Î Ãë¼ÒµÉ ¼ö ÀÖ½À´Ï´Ù.
Ãâ°í°¡´É ½Ã°£ÀÌ ¼·Î ´Ù¸¥ »óÇ°À» ÇÔ²² ÁÖ¹®ÇÒ °æ¿ì Ãâ°í°¡´É ½Ã°£ÀÌ °¡Àå ±ä ±âÁØÀ¸·Î ¹è¼ÛµË´Ï´Ù.
À¯ÅëÀÇ Æ¯¼º»ó Ãâ°í±â°£Àº ¿¹Á¤º¸´Ù ¾Õ´ç°ÜÁö°Å³ª ´ÊÃçÁú ¼ö ÀÖ½À´Ï´Ù.
Åùè»ç ¹è¼ÛÀÏÀÎ ¼¿ï ¹× ¼öµµ±ÇÀº 1~2ÀÏ, Áö¹æÀº 2~3ÀÏ, µµ¼, »ê°£, ±ººÎ´ë´Â 3ÀÏ ÀÌ»óÀÇ ½Ã°£ÀÌ ¼Ò¿äµË´Ï´Ù. |
|
|
|
|