up ¹öư
down ¹öư

¸ð´ø ¸®¾×Æ® ÇÁ·Î±×·¡¹Ö - React 18, Next.js 14, JavaScript, TypeScript, React Router 6, React Redux 8

Á¤°¡ : 39,000 ¿ø

ÀÛ°¡¸í :

ÃâÆÇ»ç : ¸®¾óµ¥ºê·¯´×

Ãâ°£ÀÏ : 2024-01-22

ISBN : 9791193469040 / K112938087

±¸¸Åó

  • ÃâÆÇ»ç
  • ¿¹½º24
  • ¾Ë¶óµò
  • ±³º¸
  • ÀÎÅÍÆÄÅ©
  • ¹Ýµð¾Ø·çÀ̽º
  • ¿µÇ³¹®°í

Ã¥ ¼Ò°³

¸ð´ø ¸®¾×Æ® ÇÁ·Î±×·¡¹Ö - 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

ÀÛ°¡ÀÇ ´Ù¸¥Ã¥

 

ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·Î±×·¡¹Ö - ECMAScript 6


28,000 ¿ø

¸®¾óµ¥ºê·¯´×

ÃâÆÇ»çÀÇ ´Ù¸¥Ã¥

 

ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·Î±×·¡¹Ö - ECMAScript 6


28,000 ¿ø

¸®¾óµ¥ºê·¯´×