- Ä«Ä«¿ÀÆäÀÌ ¼ºñ½º ÀÚ¼¼È÷ º¸±â
- Ä«Ä«¿ÀÆäÀÌ Å©·ç°¡ ÀÏÇÏ´Â ¹æ¹ý ÀÚ¼¼È÷ º¸±â
- Ä«Ä«¿ÀÆäÀÌ °³¹ß ¹®È º¸·¯°¡±â
- Ä«Ä«¿ÀÆäÀÌ ±â¼ú ºí·Î±×(FE) º¸·¯ °¡±â
Ä«Ä«¿ÀÆäÀÌ FE ±æµå
Ä«Ä«¿ÀÆäÀÌÀÇ ÇÁ·ÐÆ®¿£µå °³¹ßÀÚ´Â ¡°Å¬·£¡°À̶ó ¸ñÀûÁ¶Á÷°ú ÇÁ·ÐÆ®¿£µå °³¹ßÀÚµéÀÇ ¸ðÀÓÀÎ ¡°±æµå¡± ¶ó´Â Á¶Á÷¿¡ ÇÔ²² ¼ÓÇØ ´Ù¾çÇÑ ¾÷¹«¸¦ ÇÔ²² ÁøÇàÇÏ°í ÀÖ¾î¿ä.
ÀÚ»ê°ü¸®, ´ëÃâ, °áÁ¦, Ç÷§Æû ¼ºñ½º µî ¸¹Àº °÷¿¡¼ °¢ Ŭ·£ÀÌ ¿î¿µÇÏ´Â ¼ºñ½º¿¡¼ À¥ ÇÁ·ÐÆ®¿£µå ±â¼úÀ» ÅëÇØ »ç¿ëÀÚ¿¡°Ô ÃÖ°íÀÇ °æÇèÀ» ÁÖ±â À§ÇØ ³ë·ÂÇØ¿ä.
ÁÖ±âÀûÀ¸·Î ±æµå¸ðÀÓÀ» ÅëÇÏ¿© ÇÔ²² ÇÔ²² °¢ÀÚ°¡ °¡Áö°í ÀÖ´Â °í¹ÎµéÀ» ÇÔ²² ÇØ°áÇØ¿ä.
¶ÇÇÑ, ¡®Àͳ²¸ð(ÀÍÇô¼ ³²ÁÖ´Â ¸ðÀÓ)¡¯¸¦ ÅëÇؼ °¢ÀÚ°¡ °í¹ÎÇÏ°í ÇØ°áÇß´ø ¹æ¹ýµé, »õ·Î¿î ±â¼ú µµÀÔ¿¡ ´ëÇÑ È¸°í µîÀ» ÅëÇØ °¢ÀÚÀÇ °æÇèµéÀ» °øÀ¯ÇÏ¿© ¼·ÎÀÇ ¼ºÀåÀ» µµ¿Í¿ä.
º¸ÇèÇãºêÆÄƼ
º¸ÇèÇãºêÆÄƼ´Â Ä«Ä«¿ÀÆäÀÌ º¸ÇèÀÇ Áß½ÉÀÌ µÇ´Â º¸Çè Ȩ°ú ½Å±Ô ¼ºñ½º¸¦ ´ã´çÇÏ°í ÀÖ¾î¿ä.
¼ºÀåÇÏ´Â ÆÀÀ̶ó »õ·Î¿î ½Å±Ô ¼ºñ½º¸¦ ÁÖµµÀûÀ¸·Î ´ã´çÇÒ ¼ö ÀÖ¾î¿ä.
¾÷¹«³»¿ë
- »õ·Î¿î ½Å±Ô ¼ºñ½º¸¦ °³¹ßÇϱ⠶§¹®¿¡, ¼ºñ½º ½ÃÀÛºÎÅÍ ¿ÀDZîÁö A to Z¸¦ ´ã´çÇÒ ¼ö ÀÖ¾î¿ä.
- º¸Çè °¡ÀÔ³»¿ª, º¸Àå³»¿ëÀ» º¸¿©ÁÖ´Â º¸Çè ȨÀÇ UI/FE°³¹ßÀ» ´ã´çÇØ¿ä.
- °ø°øµ¥ÀÌÅÍÀÎ ¸¶À̵¥ÀÌÅ͸¦ È°¿ëÇÑ °³¹ßÀ» °æÇèÇغ¼ ¼ö ÀÖ¾î¿ä.
- »õ·Ó°Ô ¼ºÀåÇÏ´Â ÆÀ¿¡¼ ´Ù¾çÇÑ ¼ºñ½º¸¦ °æÇèÇÏ¸é¼ ºü¸£°Ô ¼ºÀåÇÒ ¼ö ÀÖ¾î¿ä.
- Á¦ÈÞ»ç/ÀÚȸ»ç¿Í ÇÔ²² ÀÏÇÏ¸é¼ Ä¿¹Â´ÏÄÉÀÌ¼Ç ½ºÅ³À» Çâ»óÇÒ ¼ö ÀÖ¾î¿ä.
¿ì¸®´Â ¾Æ·¡¿Í °°Àº ±â¼ú ½ºÅÃÀ» ÁÖ·Î ÀÌ¿ëÇÏ°í ÀÖ¾î¿ä.
- Typescript¸¦ »ç¿ëÇÑ React¸¦ ÇÁ·ÐÆ®¿£µå °³¹ß¿¡ »ç¿ëÇÏ°í ÀÖ¾î¿ä.
- Client Side Rendering ÆäÀÌÁö¸¦ Vite¸¦ »ç¿ëÇÏ¿© ±¸¼ºÇÏ°í ÀÖ°í, Server Side Rendering ÆäÀÌÁö´Â Next.js¸¦ »ç¿ëÇؼ ±¸¼ºÇÏ°í ÀÖ¾î¿ä.
- ¼¹ö¿ÍÀÇ Åë½ÅÀº React-query¸¦ Àû±ØÀûÀ¸·Î È°¿ëÇÏ°í ÀÖ¾î¿ä. »óÅ°ü¸®°¡ ÇÊ¿äÇÑ °æ¿ì Recoil / Zustand µî »óȲ¿¡ ¸Â´Â ¶óÀ̺귯¸®¸¦ »ç¿ëÇÏ°í ÀÖ¾î¿ä.
- ½ºÅ¸ÀÏÀº SassÀ» »ç¿ëÇؼ ±¸¼ºÇÏ°í Àִµ¥ ¸¹Àº ºÎºÐÀ» Á÷Á¢ °³¹ßÇϱ⠺¸´Ù´Â Ä«Ä«¿ÀÆäÀÌ ¡°µðÀÚÀÎ ½Ã½ºÅÛ¡°À» »ç¿ëÇÏ°í ÀÖ¾î¿ä.
Áö¿øÀÚ°Ý
- 3³â ÀÌ»óÀÇ ÇÁ·ÐÆ®¿£µå °³¹ß °æÇèÀÌ ÀÖÀ¸½Å ºÐÀ» ¿øÇØ¿ä.
- React¿Í Typescript¸¦ »ç¿ëÇÑ ¸ð´ø ÇÁ·ÐÆ®¿£µå °³¹ß °æÇèÀÌ ÀÖÀ¸½Å ºÐÀ» ¿øÇØ¿ä.
- HTML, CSS µî W3C À¥ Ç¥ÁØ ±Ô°Ý¿¡ ´ëÇÑ ÀÌÇØ°¡ ÀÖÀ¸½Å ºÐÀ» ¿øÇØ¿ä.
- »ý»ê¼º Çâ»óÀ» À§ÇÑ ½Ã½ºÅÛ°ú °³¹ß ¹®È¿¡ ´ëÇØ °í¹ÎÀ» Çغ¸½Å ºÐÀ» ¿øÇØ¿ä.
- ´Ù¾çÇÑ ºÐ¾ßÀÇ µ¿·áµé°ú ºÎµå·´°Ô Ä¿¹Â´ÏÄÉÀÌ¼Ç ÇÒ ¼ö ÀÖ´Â ºÐÀ» ¿øÇØ¿ä.
¿ì´ë»çÇ×
- webview ȯ°æ¿¡¼ÀÇ °³¹ß °æÇèÀÌ ÀÖÀ¸½Å ºÐÀÌ¸é ´õ¿í ÁÁ¾Æ¿ä.
- Server Side Rendering ȯ°æÀÇ °³¹ß°æÇèÀÌ ÀÖÀ¸½Ã¸é ´õ¿í ÁÁ¾Æ¿ä.
- webpack, rollup, vite µîÀÇ µµ±¸¿¡ Àͼ÷ÇϽŠºÐÀÌ¸é ´õ¿í ÁÁ¾Æ¿ä.
- ¹®¼ ÀÛ¼º¹ßÇ¥ µî °³¹ß Áö½ÄÀ» °øÀ¯ÇÏ´Â È°µ¿ °æÇèÀÌ ÀÖÀ¸½Å ºÐÀÌ¸é ´õ¿í ÁÁ¾Æ¿ä.
- ÀÚ±â ÁÖµµÀûÀ¸·Î ¾÷¹«¸¦ ÁøÇàÇÏ°í °³¼±À» »ý°¢ÇϽô ºÐÀ» ȯ¿µÇØ¿ä.
ÀüÇü ÀýÂ÷
¼·ùÀüÇü - »çÀü°úÁ¦ ÀüÇü - 1Â÷ ÀÎÅͺä - 2Â÷ ÀÎÅͺä - ó¿ìÇùÀÇ - ÃÖÁ¾ ÇÕ°Ý
Áö¿ø¼ ÀÛ¼º tip
- ÇÁ·ÎÁ§Æ®¸¦ Á÷Á¢ ÁÖµµÇÏ°í, Çù¾÷Çϼ̴ø °æÇèÀÌ ÀÖÀ¸½Ã¸é ¾Ë·ÁÁÖ¼¼¿ä.
- ¾î¶² °³¹ß °æÇèÀ» °¡Áö°í ÀÖ´ÂÁö °æÇèÇϼ̴ø ±â¼ú ½ºÅÿ¡ ´ëÇؼ ¾Ë·ÁÁÖ¼¼¿ä.
- Á÷Á¢ ¹®Á¦Á¡À» µµÃâÇؼ, À̽´¸¦ ÇØ°áÇسª°¡°í ºÐ¼®Çß´ø °æÇèÀ» ¾Ë·ÁÁÖ¼¼¿ä.
- °³ÀÎ ±â¼ú ºí·Î±×, github µî ¼ºÀåÀ» À§ÇØ ³ë·ÂÇϼ̴ø ºÎºÐÀ» Âü°íÇÒ ¼ö ÀÖ´Â ³»¿ëÀÌ ÀÖ´Ù¸é ÀÛ¼ºÇØ ÁÖ¼¼¿ä.
À¯ÀÇ»çÇ×
¡Ø Ä«Ä«¿ÀÆäÀÌ Á÷¿ø Áß ÃßõÀÎÀÌ ÀÖÀ» °æ¿ì, ÃßõÀÎ ¼º¸íÀ» ±âÀçÇØÁÖ¼¼¿ä.
¡Ø ÇØ´ç °ø°í´Â »ó½Ã ¿µÀÔÀ¸·Î, ä¿ë ¿Ï·á ½Ã Á¶±â¸¶°¨µÉ ¼ö ÀÖ¾î¿ä.
¡Ø ÀÔ»çÁö¿ø ¼·ù¿¡ ÇãÀ§±âÀç »ç½ÇÀÌ ¹ß°ßµÉ °æ¿ì, ºÒÇÕ°Ý ¶Ç´Â ÀԻ簡 Ãë¼ÒµÉ ¼ö ÀÖ¾î¿ä.
¡Ø °æ·Â»çÇ×Àº Áö¿ø¼¿¡ ±âÀçÇÏ¿© ÁֽŠ³»¿ë ±âÁØÀ¸·Î ÀÎÁ¤µÇ¹Ç·Î, ´©¶ô¾øÀÌ ±âÀçÇÏ¿© ÁÖ¼¼¿ä.