ÀÌ Ã¥Àº ¸ðµÎ 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 »ç¿ëÀÚ ÀÎÁõ ¹æ¹ý¿¡ ´ëÇØ ¼³¸íÇÑ´Ù.