¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸®(RTL)¸¦ »ç¿ëÇØ React ¾ÖÇø®ÄÉÀ̼ÇÀ» Å×½ºÆ®ÇÏ´Â ±â¼úÀ» ¸¶½ºÅÍÇϱâ À§ÇÑ Á¾ÇÕ °¡À̵åÀÎ "¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸®"¿¡ ¿À½Å °ÍÀ» ȯ¿µÇÕ´Ï´Ù. ÀÌ Ã¥¿¡¼´Â ¾ÖÇø®ÄÉÀ̼ÇÀÇ ¾ÈÁ¤¼º°ú Ç°ÁúÀ» º¸ÀåÇϱâ À§ÇØ React ÄÄÆ÷³ÍÆ®¿¡ ´ëÇÑ È¿°úÀûÀÎ Å×½ºÆ®¸¦ ÀÛ¼ºÇϱâ À§ÇØ ¾Ë¾Æ¾ß ÇÒ ¸ðµç °ÍÀ» »ìÆ캾´Ï´Ù.
1Àå, '¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸® ¼Ò°³'¿¡¼´Â ¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸®°¡ ¹«¾ùÀÌ°í ¼ÒÇÁÆ®¿þ¾î °³¹ßÀÇ ¸Æ¶ô¿¡¼ ¿Ö ÇʼöÀûÀÎÁö¿¡ ´ëÇÑ °³¿ä¸¦ Á¦°øÇÕ´Ï´Ù. ¾ÖÇø®ÄÉÀÌ¼Ç ¾ÈÁ¤¼ºÀ» º¸ÀåÇÏ´Â µ¥ ÀÖ¾î Å×½ºÆ®ÀÇ Á߿伺°ú React Testing Library°¡ Á¦°øÇÏ´Â ±¸Ã¼ÀûÀÎ ÀÌÁ¡¿¡ ´ëÇØ ¼³¸íÇÕ´Ï´Ù.
2Àå, '¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸®¸¦ À§ÇÑ È¯°æ ¼³Á¤Çϱâ'¿¡¼´Â ¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸®¸¦ À§ÇÑ °³¹ß ȯ°æÀ» ¼³Á¤ÇÏ´Â °úÁ¤À» ¾È³»ÇÕ´Ï´Ù. RTLÀ» ¼³Ä¡ÇÏ°í, ÃÖÀûÀÇ ÄÚµå Ç°ÁúÀ» À§ÇØ Jest, Babel, ESLint, Prettier¸¦ ±¸¼ºÇÏ°í, ½Ç½ÀÀ» À§ÇÑ »ùÇà ÇÁ·ÎÁ§Æ®¸¦ ¼³Á¤ÇÏ´Â ¹æ¹ýÀ» ´Ù·ì´Ï´Ù.
3Àå, '¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸®ÀÇ ÇÙ½É °³³ä ÀÌÇØ'¿¡¼´Â ¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸®ÀÇ ±âº» °³³ä°ú Å×½ºÆ® öÇÐÀ» »ìÆ캾´Ï´Ù. RTL ·»´õ¸µ ¸Þ¼µå, ¿ä¼Ò¿¡ ¾×¼¼½ºÇϱâ À§ÇÑ Äõ¸® ¹æ¹ý, ºñµ¿±â ÄÚµå Å×½ºÆ®¿¡ ´ëÇØ ¾Ë¾Æº¾´Ï´Ù.
4Àå, 'RTL·Î ù Å×½ºÆ® ÀÛ¼ºÇϱâ'¿¡¼´Â ¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸®¸¦ »ç¿ëÇØ Ã¹ Å×½ºÆ® ÀÛ¼ºÀ» ½ÃÀÛÇÕ´Ï´Ù. Å×½ºÆ® ÄÉÀ̽º »ý¼º, ¾î¼³¼Ç ÀÛ¼º, React ÄÄÆ÷³ÍÆ®°¡ ¿¹»ó´ë·Î µ¿ÀÛÇÏ´ÂÁö Å×½ºÆ®ÇÏ´Â ¹æ¹ýÀ» ´Ù·ì´Ï´Ù.
5Àå, '°í±Þ Å×½ºÆ® ½Ã³ª¸®¿À'¿¡¼´Â ÄÄÆ÷³ÍÆ® »óÈ£ÀÛ¿ë, Æû Å×½ºÆ®, »ç¿ëÀÚ À̺¥Æ®¸¦ »ç¿ëÇÑ ÅëÇÕ Å×½ºÆ®¿Í °°Àº °í±Þ Å×½ºÆ® ½Ã³ª¸®¿À¸¦ »ìÆ캾´Ï´Ù. ¶ÇÇÑ ¾÷µ¥ÀÌÆ® Àü¹Ý¿¡¼ UI ÀÏ°ü¼ºÀ» º¸ÀåÇϱâ À§ÇÑ ½º³À¼¦ Å×½ºÆ®¿¡ ´ëÇؼµµ ´Ù·ì´Ï´Ù.
6Àå, '¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸®¿¡¼ ¸ðÅ·Çϱâ'¿¡¼´Â ¸ðÅ·ÀÇ ±âº» »çÇ×°ú RTL°ú ÇÔ²² Jest¸¦ »ç¿ëÇØ API È£Ãâ°ú ¸ðµâÀ» ¸ðÅ·ÇÏ´Â ¹æ¹ýÀ» ´Ù·ì´Ï´Ù.
7Àå, '¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸® »ç¿ëÀÇ ÇÁ·Î ÆÁ°ú ¸ð¹ü »ç·Ê'¿¡¼´Â Å×½ºÆ® ÄÚµå ±¸¼º, µ¥ÀÌÅÍ Å×½ºÆ® ¼Ó¼º ¹× Á¢±Ù¼º °í·Á »çÇ× È°¿ë, Å×½ºÆ® ¼º´É ÃÖÀûÈ¿¡ ´ëÇÑ À¯¿ëÇÑ ÀλçÀÌÆ®¸¦ Á¦°øÇÕ´Ï´Ù.
8Àå, '¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸®¸¦ ³Ñ¾î¼'¿¡¼´Â Cypress¸¦ »ç¿ëÇÑ ¿£µåÅõ¿£µå Å×½ºÆ®, RTLÀ» »ç¿ëÇÑ ¼¹ö Ãø Å×½ºÆ®, RTLÀ» ´Ù¸¥ Å×½ºÆ® ÇÁ·¹ÀÓ¿öÅ©¿Í ÅëÇÕÇÏ´Â ¹æ¹ýÀ» »ìÆ캽À¸·Î½á Å×½ºÆ®ÀÇ ÁöÆòÀ» ³ÐÈú ¼ö ÀÖ½À´Ï´Ù.
9Àå, 'RTL¿¡¼ Å×½ºÆ® ¹®Á¦ ÇØ°á ¹× µð¹ö±ë'¿¡¼´Â Å×½ºÆ® Áß ¹ß»ýÇÏ´Â ÀϹÝÀûÀÎ ¿À·ù¸¦ ÇØ°áÇϱâ À§ÇÑ Àü·«°ú RTLÀÇ µð¹ö±× ±â´ÉÀ» »ç¿ëÇÏ¿© Å×½ºÆ®¸¦ È¿°úÀûÀ¸·Î µð¹ö±ëÇÏ´Â ¹æ¹ýÀ» ¾Ë¾Æº¾´Ï´Ù.
10Àå, '°í±Þ ÁÖÁ¦ Ž»öÇϱâ'¿¡¼´Â Redux·Î React ¾ÖÇø®ÄÉÀÌ¼Ç Å×½ºÆ®Çϱâ, RTL·Î React Hook Å×½ºÆ®Çϱâ¿Í °°Àº °í±Þ ÁÖÁ¦¸¦ »ìÆ캾´Ï´Ù.
React ¾ÖÇø®ÄÉÀÌ¼Ç Å×½ºÆ®¸¦ ½ÃÀÛÇÏ·Á´Â Ãʺ¸ÀÚµç Å×½ºÆ® ±â¼úÀ» Çâ»ó½ÃÅ°·Á´Â ¼÷·ÃµÈ °³¹ßÀÚµç ÀÌ Ã¥À» ÅëÇØ ¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸®¸¦ »ç¿ëÇØ °·ÂÇÏ°í À¯Áö °ü¸®°¡ °¡´ÉÇÑ Å×½ºÆ®¸¦ ÀÛ¼ºÇÒ ¼ö ÀÖ½À´Ï´Ù. ÀÌ Ã¥°ú ÇÔ²² React Å×½ºÆ®¸¦ ¸¶½ºÅÍÇÏ´Â ¿©Á¤À» ½ÃÀÛÇϼ¼¿ä!
1Àå : ¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸® ¼Ò°³
___1. ¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸®¶õ?
___2. ¼ÒÇÁÆ®¿þ¾î °³¹ß¿¡¼ Å×½ºÆ®ÀÇ Á߿伺
___3. ¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸®ÀÇ ÀåÁ¡
2Àå : ¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸® ȯ°æ ¼³Á¤Çϱâ
___1. ¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸®(RTL) ¼³Ä¡Çϱâ
___2. ¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸®·Î Jest ¼³Á¤Çϱâ
___3. Jest ¹× ¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸®¸¦ À§ÇÑ Babel ¼³Á¤Çϱâ
___4. ÄÚµå Ç°Áú Çâ»óÀ» À§ÇÑ Eslint¿Í Prettier ¼³Á¤Çϱâ
___5. RTL ½Ç½ÀÀ» À§ÇÑ »ùÇà ÇÁ·ÎÁ§Æ® ¼³Á¤
3Àå : ¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸®ÀÇ ÇÙ½É °³³ä ÀÌÇØÇϱâ
___1. RTLÀÇ Å×½ºÆ® öÇаú °¡À̵å¶óÀÎ
___2. RTL ·»´õ¸µ ¹æ¹ý ÀÌÇØ
___3. RTLÀÇ Äõ¸® ¹æ¹ý ÀÌÇØ
___4. RTL·Î ºñµ¿±â ÄÚµå Å×½ºÆ®Çϱâ
4Àå : RTL·Î ù Å×½ºÆ® ÀÛ¼ºÇϱâ
___1. ù Å×½ºÆ® ÄÉÀ̽º »ý¼ºÇϱâ
___2. ¾î¼³¼Ç ÀÛ¼ºÇϱâ
___3. ¸®¾×Æ® ÄÄÆ÷³ÍÆ® Å×½ºÆ®Çϱâ
5Àå : °í±Þ Å×½ºÆ® ½Ã³ª¸®¿À
___1. ÄÄÆ÷³ÍÆ® »óÈ£ÀÛ¿ë Å×½ºÆ®Çϱâ
___2. RTL°ú Jest·Î Æû Å×½ºÆ®Çϱâ
___3. RTL ¹× »ç¿ëÀÚ À̺¥Æ®¸¦ »ç¿ëÇÑ ÅëÇÕ Å×½ºÆ®
___4. RTLÀ» »ç¿ëÇÑ ½º³À¼¦ Å×½ºÆ®
6Àå : ¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸®¿¡¼ ¸ðÅ·Çϱâ
___1. ¸ðÅ·ÀÇ ±âÃÊ
___2. RTL¿¡¼ API È£Ãâ ¸ðÅ·Çϱâ
___3. Jest·Î ¸ðµâ ¸ðÅ·Çϱâ
7Àå : ¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸® »ç¿ëÀÇ ÇÁ·Î ÆÁ°ú ¸ð¹ü »ç·Ê
___1. ÄÚµå ±¸¼º ¹× Å×½ºÆ® ±¸Á¶
___2. µ¥ÀÌÅÍ Å×½ºÆ® ¼Ó¼º ¹× Á¢±Ù¼º
___3. Å×½ºÆ® ¼º´É ÃÖÀûÈÇϱâ
8Àå : ¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸® ±× ÀÌ»ó
___1. Cypress¿Í RTLÀ» »ç¿ëÇÑ ¿£µåÅõ¿£µå Å×½ºÆ®
___2. RTLÀ» »ç¿ëÇÑ ¼¹ö Ãø Å×½ºÆ®
9Àå : RTL¿¡¼ Å×½ºÆ® ¹®Á¦ ÇØ°á ¹× µð¹ö±ëÇϱâ
___1. ÀϹÝÀûÀÎ ¿À·ù ¹× ÇØ°á ¹æ¹ý
___2. RTL µð¹ö±× ÇÔ¼ö »ç¿ëÇϱâ
10Àå : °í±Þ ÁÖÁ¦ »ìÆ캸±â
___1. Redux¸¦ »ç¿ëÇÑ ¸®¾×Æ® Å×½ºÆ® ¶óÀ̺귯¸®
___2. RTL·Î React Hook Å×½ºÆ®Çϱâ