¡ß Ä«Ä«¿ÀÆäÀÌ Å©·çµéÀÇ À̾߱⵵ È®ÀÎÇØÁÖ¼¼¿ä.

Ä«Ä«¿ÀÆäÀÌ ¼­ºñ½º ÀÚ¼¼È÷ º¸±â

- Ä«Ä«¿ÀÆäÀÌ Å©·ç°¡ ÀÏÇÏ´Â ¹æ¹ý ÀÚ¼¼È÷ º¸±â

Ä«Ä«¿ÀÆäÀÌ °³¹ß ¹®È­ º¸·¯°¡±â

Ä«Ä«¿ÀÆäÀÌ ±â¼ú ºí·Î±×(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 µî ¼ºÀåÀ» À§ÇØ ³ë·ÂÇϼ̴ø ºÎºÐÀ» Âü°íÇÒ ¼ö ÀÖ´Â ³»¿ëÀÌ ÀÖ´Ù¸é ÀÛ¼ºÇØ ÁÖ¼¼¿ä.


À¯ÀÇ»çÇ×

¡Ø Ä«Ä«¿ÀÆäÀÌ Á÷¿ø Áß ÃßõÀÎÀÌ ÀÖÀ» °æ¿ì, ÃßõÀΠ¼º¸íÀ» ±âÀçÇØÁÖ¼¼¿ä.

¡Ø ÇØ´ç °ø°í´Â »ó½Ã ¿µÀÔÀ¸·Î, ä¿ë ¿Ï·á ½Ã Á¶±â¸¶°¨µÉ ¼ö ÀÖ¾î¿ä.

¡Ø ÀÔ»çÁö¿ø ¼­·ù¿¡ ÇãÀ§±âÀç »ç½ÇÀÌ ¹ß°ßµÉ °æ¿ì, ºÒÇÕ°Ý ¶Ç´Â ÀԻ簡 Ãë¼ÒµÉ ¼ö ÀÖ¾î¿ä.

¡Ø °æ·Â»çÇ×Àº Áö¿ø¼­¿¡ ±âÀçÇÏ¿© ÁֽŠ³»¿ë ±âÁØÀ¸·Î ÀÎÁ¤µÇ¹Ç·Î, ´©¶ô¾øÀÌ ±âÀçÇÏ¿© ÁÖ¼¼¿ä.