¸ð´ø ¸®¾×Æ® ÇÁ·Î±×·¡¹Ö - React 18, Next.js 14, JavaScript, TypeScript, React Router 6, React Redux 8
Á¤°¡ : 39,000 ¿ø
ÀÛ°¡¸í :
ÃâÆÇ»ç : ¸®¾óµ¥ºê·¯´×
Ãâ°£ÀÏ : 2024-01-22
ISBN : 9791193469040 / K112938087
±¸¸Åó
Ã¥ ¼Ò°³
¸ð´ø ¸®¾×Æ® ÇÁ·Î±×·¡¹Ö - React 18, Next.js 14, JavaScript, TypeScript, React Router 6, React Redux 8
¸®¾×Æ® µé¾î°¡±â¿¡¼´Â ´ÜÀÏ ÆäÀÌÁö ¾ÖÇø®ÄÉÀ̼ǰú ¸®¾×Æ®¿¡ ´ëÇÑ °³¿ä¸¦ ¼³¸íÇÑ´Ù. ±×¸®°í ¸®¾×Æ® ÇÔ¼öÇü ÄÄÆ÷³ÍÆ®ÀÇ Æ¯Â¡°ú ÇÔ²² ÀÚ¹Ù½ºÅ©¸³Æ® ÇÔ¼ö ÇÁ·Î±×·¡¹Ö¿¡ ´ëÇØ¼µµ ¼³¸íÇÑ´Ù.JSX ÄÄÆ÷³ÍÆ®¿¡¼´Â JSX ±¸¹®À» »ç¿ëÇÏ´Â ¸®¾×Æ® ÄÄÆ÷³ÍÆ®¿¡ ´ëÇØ »ìÆìº»´Ù. ±×¸®°í HTML À¥ ¾ÖÇø®ÄÉÀ̼ǿ¡¼ ¸®¾×Æ® ÄÄÆ÷³ÍÆ®¸¦ ½Äº°ÇÏ°í ºÐÇÒÇÏ¿© ±¸ÇöÇÏ´Â ÀÛ¾÷À» °æÇèÇÑ´Ù.
ÀÌ Ã¥Àº ¸ðµÎ 14°³ÀÇ ÀåÀ¸·Î ±¸¼ºµÇ¾î ÀÖ´Ù. ±×¸®°í °¢ ÀåÀº ±½Á÷ÇÑ ¸®¾×Æ® ÇÁ·Î±×·¡¹Ö ±â¼ú ¿ä¼ÒµéÀ» »ó¼¼È÷ ¼³¸íÇÑ´Ù.
1Àå ¸®¾×Æ® µé¾î°¡±â¿¡¼´Â ´ÜÀÏ ÆäÀÌÁö ¾ÖÇø®ÄÉÀ̼ǰú ¸®¾×Æ®¿¡ ´ëÇÑ °³¿ä¸¦ ¼³¸íÇÑ´Ù. ±×¸®°í ¸®¾×Æ® ÇÔ¼öÇü ÄÄÆ÷³ÍÆ®ÀÇ Æ¯Â¡°ú ÇÔ²² ÀÚ¹Ù½ºÅ©¸³Æ® ÇÔ¼ö ÇÁ·Î±×·¡¹Ö¿¡ ´ëÇØ¼µµ ¼³¸íÇÑ´Ù. 2Àå JSX ÄÄÆ÷³ÍÆ®¿¡¼´Â JSX ±¸¹®À» »ç¿ëÇÏ´Â ¸®¾×Æ® ÄÄÆ÷³ÍÆ®¿¡ ´ëÇØ »ìÆìº»´Ù. ±×¸®°í HTML À¥ ¾ÖÇø®ÄÉÀ̼ǿ¡¼ ¸®¾×Æ® ÄÄÆ÷³ÍÆ®¸¦ ½Äº°ÇÏ°í ºÐÇÒÇÏ¿© ±¸ÇöÇÏ´Â ÀÛ¾÷À» °æÇèÇÑ´Ù. 3Àå ½ºÅ¸ÀÏÀº CSS ¼¿·ºÅÍ¿Í ÀζóÀÎ ½ºÅ¸ÀÏ, CSS ¸ðµâ, ±×¸®°í CSS-in-JS ¹æ½ÄÀ» Áö¿øÇÏ´Â À̸ð¼Ç°ú ½ºÅ¸ÀÏ ÄÄÆ÷³ÍÆ®¸¦ »ç¿ëÇÏ¿© ¸®¾×Æ® ÄÄÆ÷³ÍÆ®¸¦ ½ºÅ¸ÀϸµÇÏ´Â ¹æ¹ý¿¡ ´ëÇØ¼ »ìÆìº»´Ù.
4Àå »óÅÂ¿Í À̺¥Æ®, ¶ó¿ìÅÍ¿¡¼´Â useState() ÈÅÀ» »ç¿ëÇÏ¸é¼ ¸®¾×Æ® ÄÄÆ÷³ÍÆ®ÀÇ ÈÅ(hook) ¸ÞÄ¿´ÏÁòÀÇ ÇÙ½É °³³ä¿¡ ´ëÇØ »ìÆìº»´Ù. ±×¸®°í ¸®¾×Æ®¿Í ÇÔ²² »ç¿ëÇÒ ¼ö ÀÖ´Â ¶ó¿ìÅÍ ¶óÀ̺귯¸®ÀÎ ¸®¾×Æ® ¶ó¿ìÅÍ¿¡ ´ëÇØ¼µµ »ìÆìº»´Ù. 5Àå ÀÌÆåÆ®, ÄÁÅØ½ºÆ®, ¸®µà¼¿¡¼´Â useStat() ÈŰú ÇÔ²² ¸®¾×Æ® ¶óÀ̺귯¸®ÀÇ ¹é¹Ì¶ó°í ÇÒ ¼ö ÀÖ´Â useEffect() ÈŰú useContext(), useReducer() ÈÅ¿¡ ´ëÇØ¼ »ó¼¼È÷ »ìÆìº»´Ù. ±×¸®°í 6Àå Ä¿½ºÅÒ ÈŰú ÃֽЏ®¾×Æ®¿¡¼´Â Ä¿½ºÅÒ ÈÅÀ» ±¸ÇöÇÏ´Â ¹æ¹ý°ú ¸®¾×Æ® ¹öÀü 18¿¡¼ Á¦°øÇÏ´Â ÃֽЏ®¾×Æ® ±â´É¿¡ ´ëÇØ¼ ¼³¸íÇÑ´Ù.
7Àå¿¡¼ºÎÅÍ´Â ÀÚ¹Ù½ºÅ©¸³Æ® ´ë½Å¿¡ ŸÀÔ½ºÅ©¸³Æ®°¡ »ç¿ëµÈ´Ù. µû¶ó¼ 7Àå¿¡¼´Â ¸®¾×Æ® ŸÀÔ½ºÅ©¸³Æ® °³¿ä¿Í ÇÔ²² ÀÚ¹Ù½ºÅ©¸³Æ®·Î ±¸ÇöµÈ ÇÁ·ÎÁ§Æ®¸¦ ŸÀÔ½ºÅ©¸³Æ®·Î ¸¶À̱׷¹À̼ÇÇÏ´Â ¹æ¹ý¿¡ ´ëÇØ¼ »ìÆìº»´Ù. 8Àå ¸®¾×Æ® ¸®´ö½º¿¡¼´Â ¸¹Àº »ç¶÷µéÀÌ ´Ù¼Ò ¾î·Á¿öÇÏÁö¸¸ ½Ç¹«¿¡¼ Ȱ¿ë °¡Ä¡°¡ ¸¹Àº ¸®´ö½º¿¡ ´ëÇØ¼ »ìÆìº»´Ù. Ưº°È÷ Á¶±ÝÀÌ¶óµµ ¸®´ö½º¸¦ ÀÌÇØÇϱ⠽±µµ·Ï ¼ø¼öÇÏ°Ô Å¸ÀÔ½ºÅ©¸³Æ®¸¸À» »ç¿ëÇÏ¿© ¸®´ö½º¸¦ Ȱ¿ëÇÏ´Â ÇÁ·Î±×·¥À» ÀÛ¼ºÇÏ¸é¼ ÇÙ½É °³³ä°ú ±â´ÉÀ» ¼³¸íÇϰí, Á¡Â÷ÀûÀ¸·Î °í±Þ ±â´ÉÀÎ RTK ÁúÀDZîÁö Â÷±ÙÂ÷±Ù ¸®¾×Æ® ¸®´ö½º¸¦ Ȱ¿ëÇÏ´Â ¹æ¹ýÀ» ¼³¸íÇÏ¿´´Ù. ±×¸®°í 9Àå GraphQL Ŭ¶óÀÌ¾ðÆ®¿¡¼´Â REST API¿Í ÇÔ²² ¸¹ÀÌ »ç¿ëµÇ´Â ¶Ç ´Ù¸¥ ¹é¿£µå ¼ºñ½ºÀÎ GraphQL API¸¦ »ç¿ëÇÏ´Â GraphQL Ŭ¶óÀÌ¾ðÆ® ¾ÖÇø®ÄÉÀ̼ÇÀ» ±¸ÇöÇÏ´Â ¹æ¹ýÀ» ¼³¸íÇÑ´Ù.
10Àå¿¡¼ºÎÅÍ´Â ÁÖÁ¦¸¦ ³Ø½ºÆ® ÇÁ·¹ÀÓ¿öÅ©·Î ÀüȯÇÑ´Ù. 10Àå ³Ø½ºÆ® µé¾î°¡±â¿¡¼´Â ³Ø½ºÆ® ÇÁ·¹ÀÓ¿öÅ©°¡ Á¦°øÇÏ´Â ÆäÀÌÁö ¶ó¿ìÅÍ¿Í ¾Û ¶ó¿ìÅ͸¦ Áß½ÉÀ¸·Î ³Ø½ºÆ® ÇÁ·¹ÀÓ¿öÅ©¸¦ °³°üÇÑ´Ù. 11Àå ÆäÀÌÁö ¶ó¿ìÅÍ¿¡¼´Â ÆÄÀÏ ½Ã½ºÅÛ ±â¹Ý ¶ó¿ìÆÃ°ú ÇÔ²² ¼¹ö Ãø ·»´õ¸µ ±â´É°ú API ¶ó¿ìÅÍ¿¡ ´ëÇØ »ó¼¼ÇÏ°Ô »ìÆìº»´Ù. ±×¸®°í ÆäÀÌÁö ¶ó¿ìÅͰ¡ Á¦°øÇÏ´Â ±â´ÉÀ» »ç¿ëÇÏ¿© ¿Â¶óÀÎ ÁÖ¹® °ü¸® ¿¹Á¦ ½Ã½ºÅÛÀÇ ¸ðµç ÄÄÆ÷³ÍÆ®¸¦ ±¸ÇöÇÏ´Â ½Ç½ÀÀ» ¼öÇàÇÑ´Ù. 12Àå ¾Û ¶ó¿ìÅÍ´Â °¡Àå ÃÖ½ÅÀÇ ¶ó¿ìÆÃ ¹æ½ÄÀÎ ¾Û ¶ó¿ìÆÃ°ú ÇÔ²² ¸®¾×Æ® ¼¹ö ÄÄÆ÷³ÍÆ®¿Í ¶ó¿ìÆ® Çڵ鷯¿¡ ´ëÇØ »ó¼¼ÇÏ°Ô »ìÆìº»´Ù. ¶ÇÇÑ ¾Û ¶ó¿ìÅͰ¡ Á¦°øÇÏ´Â ±â´ÉÀ» »ç¿ëÇÏ¿© ¿Â¶óÀÎ ÁÖ¹® °ü¸® ¿¹Á¦ ½Ã½ºÅÛÀÇ ¸ðµç ÄÄÆ÷³ÍÆ®¸¦ ±¸ÇöÇÏ´Â ½Ç½ÀÀ» ¼öÇàÇÑ´Ù.
13Àå Tailwind CSS¿¡¼´Â ³Ø½ºÆ® ÇÁ·¹ÀÓ¿öÅ©°¡ ÃßõÇÏ´Â Tailwind CSS¸¦ »ç¿ëÇÏ¿© ¸®¾×Æ® ÄÄÆ÷³ÍÆ®¸¦ ½ºÅ¸ÀϸµÇÏ´Â ¹æ¹ý¿¡ ´ëÇØ¼ »ìÆìº»´Ù. ±×¸®°í ¸¶Áö¸· 14Àå ÀÎÁõ°ú ¼¼¼Ç¿¡¼´Â ·Î±×ÀÎÀ» ÅëÇÑ JWT ÀÎÁõ°ú ÇÔ²², ±¸±ÛÀ̳ª ±êÇãºê, ¾ÖÇÃ, īī¿À, ³×À̹ö µîÀ» ÅëÇØ¼ »ç¿ëÀÚ ÀÎÁõÀ» ¹Þ´Â OAuth2 »ç¿ëÀÚ ÀÎÁõ ¹æ¹ý¿¡ ´ëÇØ ¼³¸íÇÑ´Ù.
°³¹ßÀÚ¿Í ¾ÆÅ°ÅØÆ®, ÄÁ¼³ÅÏÆ®·Î¼ 30¿© ³â°£ Çö¾÷¿¡¼ ´Ù¾çÇÑ ÇÁ·ÎÁ§Æ®¸¦ ¼öÇàÇÏ¸ç ¾òÀº °æÇè°ú 30¿© ±ÇÀÇ Àú¼¿Í 7±ÇÀÇ ¹ø¿ª¼¸¦ Àú¼úÇÏ°í °ÀÇÇÏ¸é¼ ½×Àº Áö½Ä°ú ³ëÇϿ츦 ¹ÙÅÁÀ¸·Î »õ·Î¿î 10³âÀ» ÁغñÇϸé¼, ÀÌÁ¦ ¸· °³¹ßÀÚ¿Í ÇÁ·Î±×·¡¸Ó·Î¼ ù°ÉÀ½À» ½ÃÀÛÇÏ´Â »ç¶÷µéÀÌ ½Ç¹« ÇÁ·ÎÁ§Æ®¿¡¼ ÀÛ¾÷À» ÇÒ ¼ö ÀÖÀ» ¸¸ÅÀÇ ´É·ÂÀ» °®Ãâ ¼ö ÀÖµµ·Ï ÇÙ½É Áö½Ä°ú ±â¼úÀ» ²Ú²Ú ´·¯ ´ã¾Æ ¸ÕÀú ´Ù¼¸ ±ÇÀÇ Ã¥À¸·Î ¹¾ú´Ù. ¿©±â¿¡´Â ÀÚ¹Ù½ºÅ©¸³Æ®¿Í ÀÚ¹Ù ±×¸®°í SQL µî ÇÙ½É ÇÁ·Î±×·¡¹Ö ¾ð¾î 3Á¾ ¼¼Æ®¿Í JSP ¼ºí¸´°ú ½ºÇÁ¸µ ÇÁ·¹ÀÓ¿öÅ©¸¦ Ȱ¿ëÇÏ´Â À¥ ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ßÀÇ ÇÙ½É ±â¼úÀÌ Æ÷ÇԵȴÙ. ±×¸®°í ´Ù¼¸ ±ÇÀÇ Ã¥¿¡¼ À̵é ÇÁ·Î±×·¡¹Ö ¾ð¾î¿Í ±â¼úÀ» °¢°¢ µ¶¸³ÀûÀ¸·Î ÇнÀÇÒ ¼ö ÀÖÀ» »Ó¸¸ ¾Æ´Ï¶ó À¯±âÀûÀ¸·Î °áÇÕÇÏ¿© ü°èÀûÀ¸·Î ÇнÀÇÒ ¼ö ÀÖ°Ô ÇÏ¿´´Ù. ±×¸®°í À̵é Ã¥À» ±³Àç·Î ¿Â¶óÀο¡¼ ÀúÀÚÀÇ À¯·á °ÀǸ¦ ¼ö°ÇÏ¿© ÇÁ·Î±×·¡¹Ö Áö½ÄÀÇ ¿Ï¼ºµµ¸¦ ´õ¿í´õ ³ôÀÏ ¼ö ÀÖ°Ô ÇÏ¿´´Ù.
¿Â¶óÀÎ °ÀÇ »çÀÌÆ®: www.realdev-learning.com
À̸ÞÀÏ : realdev.learning@gmail.com
À¯Æ©ºê : www.youtube.com/@realdev.learning



