Android
2018.06.18 / 09:59

Cordova vs React Native vs Xamarin ºñ±³

¸®¾ó¸®
Ãßõ ¼ö 164

Cordova vs React Native vs Xamarin ºñ±³

±è½ÂÁø ÁøÅ©·Ò 2017.03.12 01:46

2017³â 4¿ù 29ÀÏ ¾÷µ¥ÀÌÆ®


ÃÖ±Ù React Native °³¹ßÀ» °æÇè ÇÒ ±âȸ°¡ »ý°Ü React Native³»¿ëÀ» ÀϺΠ¾÷µ¥ÀÌÆ®ÇÕ´Ï´Ù.


----------------------------------------------------------------------------------

¾Æ·¡ ±ÛÀº Á¶±Ý ¹Î°¨ ÇÒ ¼öµµ ÀÖ´Â ±ÛÀ̱⿡ ¸î°¡Áö »çÇ×À» ¹Ì¸® ¹àÈü´Ï´Ù.

Àú´Â Cordova, React Native¿¡ ´ëÇÑ °³¹ß °æÇèÀ» °®°í ÀÖÁö ¾Ê½À´Ï´Ù. 

ÀϺΠÇнÀÀ» ¸ñÀûÀ¸·Î Á¤º¸ ¼öÁý ¹× ÁÖº¯ °³¹ß °æÇèÀÚ¸¦ ÅëÇØ ÀÇ°ßÀ» Á¤¸® ÇÑ °ÍÀÔ´Ï´Ù. 

»ç½Ç °ü°è°¡ ´Ù¸¥ ºÎºÐÀÌ ÀÖ´Ù¸é ÀÇ°ß ÁÖ½Ã¸é ¼öÁ¤Çϵµ·Ï ÇÏ°Ú½À´Ï´Ù.


¶ÇÇÑ ¾Æ·¡ ±ÛÀ» ´Ü¼ø ¹ø¿ª ÇÑ °ÍÀº ¾Æ´ÏÁö¸¸ Á¦ °³ÀÎÀû ÀÇ°ßÀ» ÅëÇØ °¢»ö ¹× ÆíÁýµÈ ³»¿ëµéÀÌ ÀÔ´Ï´Ù.

http://noeticforce.com/mobile-app-development-cordova-vs-react-native-vs-xamarin


¾È³çÇϼ¼¿ä. ±è½ÂÁøÀÔ´Ï´Ù.


¸ð¹ÙÀÏ ¾ÛÀ» ¸¸µé±â À§ÇÑ ¹æ¹ýÀº ¿©·¯°¡Áö ¹æ¹ýÀÌ ÀÖ½À´Ï´Ù.  °¡Àå ±âº»Àº µð¹ÙÀ̽ºº° Æ¯È­µÈ ±â¼úÀ» ¹è¿ì´Â °ÍÀÔ´Ï´Ù. 

iOS ¶Ç´Â Android Á¦Á¶»çÀÇ °³¹ß ±â¼úÀ» ¹è¿ì´Â °ÍÀÌ °¡Àå Ã¹¹ø° ÀÏ °ÍÀÔ´Ï´Ù. 

¿¹¸¦ µé¸é iOS(Swift, objective C), Android(Java), Windows(.Net) µîÀÇ Æ¯Á¤ ÇÁ·Î±×·¡¹Ö ¾ð¾î¿Í µµ±¸¿¡ Àͼ÷ÇØ Áö´Â °ÍÀÔ´Ï´Ù.  

ÇÏÁö¸¸ ¸ð¹ÙÀÏ ½ÃÀåÀÇ ±Ø½ÉÇÑ º¯È­¿¡ µû¶ó ÇѸ¶¸® Åä³¢¸¸ Àâ´Â °ÍÀº ÁÁÀº Àü·«ÀÌ ¾Æ´Ò ¼ö ÀÖ½À´Ï´Ù. 

 

ÃÖ±Ù Àü¼¼°è ¸ð¹ÙÀÏ ½ÃÀåÀÇ 60% ÀÌ»óÀ» Â÷ÁöÇÏ´Â Android ½ÃÀåÀº OracleÀÇ Google¿¡ ´ëÇÑ JAVA ÁöÀûÀç»ê±Ç ħÇØ ¼Ò¼Û¿¡ µû¶ó À§Ãà µÇ°í ÀÖ½À´Ï´Ù. »ï¼ºµµ Galaxy ¿Í º°µµ·Î TizenÀ̶ó´Â º°µµÀÇ OS¸¦ °³¹ßÇÏ°í ÀÖ½À´Ï´Ù. ½ÃÀåÀÌ º¯ÇÏ°í ÀÖ½À´Ï´Ù. 

 

ÀÌ¿¡ ¸ð¹ÙÀÏ Å©·Î½º Ç÷§Æû °³¹ß Àü·«ÀÌ µÉ ¼ö ÀÖ´Â 3°¡Áö ±â¼ú¿¡ ´ëÇØ ¾Ë¾Æ º¸µµ·Ï ÇÏ°Ú½À´Ï´Ù.  

 

  • Cordova ±â¹ÝÀÇ ÇÏÀ̺긮µå ¾Û °³¹ß 

  • React Native ±â¹ÝÀÇ ¾Û °³¹ß 

  • Xamarin ±â¹ÝÀÇ ¾Û °³¹ß


¿Ã¹Ù¸¥ °³¹ß ¹æ¹ýÀÇ ¼±ÅÃÀº ¸Å¿ì Áß¿äÇÕ´Ï´Ù. Çѹø ½ÃÀÛµÈ °³¹ß ¹æ¹ýÀº ¾÷µ¥ÀÌÆ®, ¹ö±×ÆÐÄ¡°³¹ß ¸®¼Ò½º, »ý»ê¼º µî ¾Û ±â´É ÀÌ»óÀÇ ¹üÀ§¿¡¼­ ¿µÇâÀ» ¹ÌÄ¡°Ô µË´Ï´Ù. ¶ÇÇÑ °áÁ¤ÀûÀ¸·Î Çѹø ¼±ÅÃÇÑ °³¹ß ¹æ¹ýÀº µ¹¾Æ °¥ ¼ö ¾ø½À´Ï´Ù.(Àü¸é »õ·Ó°Ô °³¹ß ÇÏ¸é °¡´ÉÇÕ´Ï´Ù.) 

 

°³¹ß ¹æ¹ýÀ» ¼±ÅÃÇÏ´Â Áß¿äÇÑ º¯¼ö´Â ¾Æ·¡¿Í °°½À´Ï´Ù. 

 

  • °³¹ßÆÀÀÇ ±â¼ú ¿ª·®/°æÇè 

  • °³¹ßÆÀÀÇ Àü·« ¹× ºñÁ¯ 

  • ¾ÛÀǠƯȭµÈ ¿ä±¸»çÇ× 

  • »ç¿ëÀÚ ±×·ìÀÇ Æ¯Â¡(½º¸¶Æ®Æù ºñÀ² µî) 


    1. Cordova ±â¹ÝÀÇ ÇÏÀ̺긮µå ¾Û °³¹ß 

Cordova ±â¹ÝÀÇ °³¹ßÀº Javascript, HTML5, CSS¸¦ ±â¹ÝÀ¸·Î °³¹ß ÇÒ ¼ö À־ À¥ °³¹ßÀڵ鿡°Ô Àαâ ÀÖ´Â ¿É¼Ç Áß ÇϳªÀÔ´Ï´Ù. 

Javascript, HTML5, CSS¸¸À¸·Îµµ °³¹ßÀÌ °¡´ÉÇÏÁö¸¸ Ionic, Kendo UI, jQuery Mobile µîÀÇ ÇÁ·¹ÀÓ¿öÅ©¸¦ È°¿ëÇÏ¸é °³¹ß ½Ã°£À» ÁÙÀÏ ¼ö ÀÖ½À´Ï´Ù. 

 

Cordova´Â °¢ µð¹ÙÀ̽ºÀÇ ±¸¼º¿ä¼Ò¸¦ ÄÁÆ®·Ñ ÇÒ ¼ö ÀÖ´Â JavaScript API ¸¦ Á¦°øÇÕ´Ï´Ù. 

Cordova´Â JavaScript, CSS, WebView°¡ Æ÷ÇÔµÈ HTML¸¦ ÇÔ²² ÄÄÆÄÀÏÇÏ¿© ¾ÛÀ» ¸¸µì´Ï´Ù. 

 

JavaScript API´Â µð¹ÙÀ̽ºÀÇ ±¸¼º¿ä¼Ò¿Í ¾ÛÀ» ¿¬°áÇØ ÁÖ´Â ´Ù¸® ¿ªÇÒÀ» ÇÕ´Ï´Ù. 

À¥ °³¹ßÀÚÀÎ °æ¿ì ½Å±â¼úÀ» ¹è¿ìÁö ¾Ê°íµµ ±âÁ¸ ±â¼úÀ» ÃÖ´ëÇÑ È°¿ëÇÏ¿© °³¹ß ¹× À¯Áö °ü¸® ÇÒ  ¼ö ÀÖ´Ù´Â Á¡ÀÌ ¸Å·ÂÀûÀÔ´Ï´Ù.. 

 

¶ÇÇÑ Áß¿äÇÑ Á¡Àº ¾ÛÀÌ OS°¡ WebView ¾È¿¡¼­ ½ÇÇàµÈ´Ù °ÍÀÌ´Ù. 

 

ÀÌ°ÍÀº Å« ÀåÁ¡ÀÌÀÚ Å« ´ÜÁ¡ÀÌ µÉ ¼ö ÀÖ½À´Ï´Ù. 

µð¹ÙÀ̽º Á¾¼Ó¼ºÀÌ ¾ø´Ù´Â À̾߱âÀε¥ µð¹ÙÀ̽ºÀÇ Æ¯¼öÇÑ ±â´ÉÀ» È°¿ëÇϴµ¥ Á¦¾àÀÌ Àְųª ¼º´ÉÀ» ÃÖ´ëÇÑ È°¿ë ÇÒ ¼ö ¾ø´Ù´Â ÀǹÌÀ̱⵵ ÇÕ´Ï´Ù. ¹Ý¸é ¿À·¡µÈ µð¹ÙÀ̽º¿¡¼­µµ ¼º´É ¿µÇâÀ» ÃÖ¼ÒÈ­µÈ »óÅ¿¡¼­ ½ÇÇà µÉ ¼ö ÀÖ´Ù´Â Á¡ÀÔ´Ï´Ù. 

 

    2. React Native ±â¹ÝÀÇ ¾Û °³¹ß 

React Native´Â iOS¿Í Android ±â¹ÝÀÇ ¸ð¹ÙÀÏ ¾ÛÀ» °³¹ß ÇÒ ¼ö ÀÖ´Â ÃÖ°íÀÇ ¿É¼Ç Áß ÇϳªÀÔ´Ï´Ù. 

Facebook¿¡¼­ ¸¸µé¾îÁø ¿ÀǼҽº ÇÁ·¹ÀÓ¿öÅ©ÀÔ´Ï´Ù. ÇöÀç(2017³â 4¿ù) ±âÁØÀ¸·Î 0.43¹öÀüÀ¸·Î À¸·Î Á¤½Ä ¹öÀüÀÌ ¾Æ´Ï±â ¶§¹®¿¡ ¿©·¯°¡Áö º¯È­°¡ ¸¹ÀÌ ÀÖ½À´Ï´Ù.

 

React Native °¡ ¼Ò°³µÈÁö ¿À·¡µÇÁö ¾Ê¾ÒÁö¸¸ À̹̠¼¼°èÀÇ ¸¹Àº °³¹ßÀÚ¿Í Á¶Á÷ÀÌ Å©·Î½ºÇ÷§Æû ¸ð¹ÙÀÏ °³¹ß ¹æ¹ýÀ¸·Î È°¿ëÇÏ°í ÀÖ½À´Ï´Ù. 

¿¹·Î´Â SoundCloud Pulse, Discovery VR, FaceBookAds Manager, Bit Wallet, Squad, Myntra and Running ÀÌ ÀÖ½À´Ï´Ù. 


React Native ¿ª½Ã JavaScript ±â¹ÝÀÌÁö¸¸ ¹è¿ì´Âµ¥ ¾à°£ÀÇ ½Ã°£À» ÅõÀÚÇØ¾ß ÇÕ´Ï´Ù. »ç½Ç ECMAScript6 ±âÁØÀ̱⠶§¹®¿¡ °ú°ÅÀÇ JavaScript¿Í ºñ±³Çϱâ´Â ¾î·Á¿ï °ÍÀ¸·Î º¸ÀÔ´Ï´Ù.(°³ÀÎÀûÀ¸·Î´Â TypeScript¸¦ Áö¿øÇÏÁö ¾Ê´Â °ÍÀÌ ¾Æ½±½À´Ï´Ù.)


¶ÇÇÑ React¿¡ ´ëÇÑ ÀÌÇØ°¡ ÇÊ¿äÇÕ´Ï´Ù. React´Â À¥ ¾îÇø®ÄÉÀ̼ǠÇÁ·¹ÀÓ¿öÅ©ÀÔ´Ï´Ù. 

React Native´Â ReactÀÇ È®ÀåÀÌ¸ç µ¿ÀÏÇѠöÇÐÀ» »ç¿ëÇÕ´Ï´Ù. 

 

React ÇÁ·¹ÀÓ¿öÅ© ¿Ü¿¡µµ JSX¸¦ ÀÌÇØÇØ¾ß ÇÕ´Ï´Ù. 

JSX¸¦ ÇнÀÇÏ°í ³ª¸é React Native UI ±¸¼º¿ä¼Ò¸¦ ½±°Ô ¾µ ¼ö ÀÖ½À´Ï´Ù. 

 

XCode, iOS Simulator¿Í Android¸¦ ºôµåÇϱâ À§ÇÑ ¸í·ÉÁÙ µµ±¸¸¦ ÀÌ¿ëÇÕ´Ï´Ù. 

¶ÇÇÑ Flux¿Í Redux°°Àº ¾ÆÅ°ÅØÃÄ ÇÁ·¹ÀÓ¿öÅ© Áö½ÄÀº ¾Û °³¹ßÀÇ ±¸¼º ¹× ¼Óµµ¸¦ ³ôÀ̴µ¥ µµ¿òÀÌ µË´Ï´Ù. 


React Native´Â JavaSciprt¸¦ ÀÌ¿ëÇÏ¿© ÇÁ·Î±×·¡¹ÖÇÏÁö¸¸ ½ÇÁ¦ XCode¿Í Andorid Studio¸¦ ÅëÇØ °¢ OSÀÇ ³×ÀÌƼºê Äڵ带 È®ÀÎ ÇÒ ¼ö ÀÖ°Ô µË´Ï´Ù.(°á°úÀûÀ¸·Î ÄÚµå Á¦³Ê·¹ÀÌÆ® ¹æ½Ä°ú À¯»ç) ´Ü¼øÇÑ AppÀ» °³¹ß ÇÒ ¶§´Â »ó°üÀÌ ¾ø°ÚÁö¸¸ º¹ÀâÇÏ°í °¢ ³×ÀÌƼºê Ư¼º¿¡ ¸ÂÃçÁø ±â´É µéÀº °³º° ³×ÀÌÆ®ºê¿¡¼­ ÇØ°áÇØ¾ß ÇÏ´Â °æ¿ìµµ ÀÖ½À´Ï´Ù.


¿©±â¼­ °¡Àå Å« ÀåÁ¡Àº ´ëÁßÀûÀÎ JavaScript ±â¹ÝÀ¸·Î ¸ð¹ÙÀÏ Å©·Î½º µð¹ÙÀ̽º°¡ °³¹ßÀÌ °¡´ÉÇÏ´Ù´Â Á¡ÀÔ´Ï´Ù. 

 

ÀÌ ºÎºÐ ¿ª½Ã ±Ô¸ð°¡ Å« ÇÁ·ÎÁ§Æ®¿¡¼­ °í¹Î½º·¯¿î ºÎºÐÀÌ ÀÖ½À´Ï´Ù. 

 

    3. Xamarin ±â¹ÝÀÇ ¾Û °³¹ß 


°³¹ß öÇÐÀº React Native¿Í ºñ½ÁÇÕ´Ï´Ù. 

´Ù¸¸ JavaScript ´ë½Å C# À» »ç¿ëÇÑ´Ù´Â Á¡ÀÌ Å« Â÷ÀÌÀÔ´Ï´Ù. 


óÀ½¿¡´Â React Native¿Í ºñ½ÁÇÑ Ã¶ÇÐÀ» °®°í ÀÖ´Ù°í »ý°¢Çߴµ¥ 2°¡Áö ±â¼úÀ» ¸ðµÎ °æÇèÇØ º» °á°ú ´Ù¸¨´Ï´Ù.

´Ü¼ø C#°ú JavaScript ¾ð¾î¸¦ ¾´´Ù´Â Â÷ÀÌ »Ó ¾Æ´Ï¶ó ±â¼ú ¾ÆÅ°ÅØÃÄ Ãø¸é¿¡¼­ ¸¹ÀÌ ´Ù¸£´Ù°í ÇÒ ¼ö ÀÖ½À´Ï´Ù.


React Native´Â JavaScript·Î °³¹ßÀ» ÇÏ°í °¢ ³×ÀÌƼºê¿¡ Ư¼öÇϱ⠿÷ÁÁø ºê¸´Áö¸¦ ÅëÇØ ³×ÀÌƼºê·Î º¯È¯µÇ´Â ±¸Á¶¶ó¸é

XamarinÀº °¢ ³×ÀÌƼºê¿¡ ´ëÀÀµÇ´Â ¸ðµç °´Ã¼°¡ C#¶óÀ̺귯¸®·Î ·¦ÇεǾî ÀÖ°í ÄÄÆÄÀÏ ½Ã ³×ÀÌƼºê °íÀ¯ÀÇ ¹ÙÀ̳ʸ®·Î º¯È¯µË´Ï´Ù. µû¶ó¼­ ¾Æ¹«¸® º¹ÀâÇÑ ±¸ÇöÀ» ÇÑ´Ù ÇÒÁö¶óµµ C# ¾ð¾îÀÇ ¹®¹ýÀû Ư¼ºÀ» À¯ÁöÇÏ¸ç °³¹ß ÇÒ ¼ö ÀÖ½À´Ï´Ù.

¹Ý¸é React Native´Â º¹ÀâÇÑ ±¸Çö ½Ã ³×ÀÌƼºê Äڵ尡 »ý¼ºµÇ¾î °¢ °¢ÀÇ ¾ð¾î·Î Á÷Á¢ ¼öÁ¤ÇØ¾ß ÇÏ´Â »óȲÀÌ »ý±æ ¼ö ÀÖ½À´Ï´Ù. (¹«¾ùÁö ´õ ÁÁÀ»Áö´Â °¢ÀÚ ÆÇ´ÜÇغ¸½Ã±æ ¹Ù¶ø´Ï´Ù.)

 

C# À» »ç¿ëÇϱ⠶§¹®¿¡ ÇöÁ¸ÇÏ´Â °¡Àå Áøº¸µÈ IDEÀÇ Visual Studio¸¦ ÀÌ¿ëÇÏ¿© ¾ÛÀ» °³¹ß ÇÒ ¼ö ÀÖ½À´Ï´Ù.  

¸Æ »ç¿ëÀÚ´Â Xamarin Studio ¶Ç´Â Visual Studio for Mac ¸¦ ÅëÇؼ­ µ¿ÀÏÇÏ°Ô °³¹ß ÇÒ ¼ö ÀÖ½À´Ï´Ù. 


Xamarin.Forms¿¡¼­´Â XAML(React NativeÀÇ JSX ¿Í ºñ±³´ë»ó) ¸¦ ÀÌ¿ëÇÏ¿©  °¢ ³×ÀÌƼºêÀÇ °øÅë UI¸¦ ¸¸µé ¼ö ÀÖ½À´Ï´Ù.


XamarinÀº Å©·Î½º Ç÷§ÆûÀ¸·Î iOS, Android, UWP(Windows Phone) ±âº»À¸·Î Ãß°¡ÀûÀ¸·Î tvOS, »ï¼º Tizen µîÀ» Áö¿øÇÕ´Ï´Ù(¾Æ¸¶ °¡Àå ³ÐÀº Å©·Î½º Ç÷§Æû Áö¿ø) 


2¹ø(React Native)°ú 3¹ø(Xamarin)ÀÇ °í¹Î


º¹ÀâÇÏÁö ¾Ê´Â ¾ÛÀ» ½Å¼ÓÇÏ°Ô Å©·Î½º Ç÷§ÆûÀ¸·Î °³¹ßÀÌ ÇÊ¿äÇÏ´Ù¸é React Native°¡ ¼±È£µÉ °ÍÀ¸·Î ¿¹»óµË´Ï´Ù.

ÇÏÁö¸¸ Àå±âÀû Ãø¸é¿¡¼­ ¾ÛÀÇ À¯Áö°ü¸®ÇØ¾ß ÇÏ´Â °í·Á»çÇ×°ú Å©·Î½ºÇ÷§ÆûÀÇ Ã¶ÇÐÀû Ãø¸é¿¡¼­´Â XamarinÀÌ ¼±È£µË´Ï´Ù.


½ÇÁ¦ React Native Ä¿¹Â´ÏƼ¿¡¼­ ÀÌ·ïÁö´Â ´ëÈ­ÀÇ ³»¿ëÀ» º¸¸é º¹Àâµµ°¡ ³ôÀº ¾Û °³¹ßÀ» À§Çؼ­ XCode¿Í Android Studio ¾øÀÌ´Â ºÒ°¡´ÉÇØ º¸ÀÔ´Ï´Ù. ¹Ý¸é XamarinÀº Visual Studio ¶Ç´Â Xamarin Studio¿¡¼­ ¸ðµç °³¹ßÀ» ³¡³¾ ¼ö ÀÖ½À´Ï´Ù. 


¶ÇÇÑ Å©·Î½ºÇ÷§Æû ±â¼úÀº ´Ü¼ø ¸ð¹ÙÀÏ Ç÷§Æû¸¸À» ´ë»óÀ¸·Î ÇÏÁö ¾Ê½À´Ï´Ù. TV, ³ÃÀå°í µî ´õ ´Ù¾çÇÑ ºÐ¾ß¿¡¼­ È®´ëµÉ ¼ö ÀÖ´Â ±â¼úÀÔ´Ï´Ù. 


ÀÌ·¯ÇÑ ºÎºÐ¿¡ ´ëÇÑ °í·Á¿Í ÇØ´ç ±â¼ú µÚ¿¡ ´©°¡(¼­Æ÷ÅÍ) ÀÖ´ÂÁö¸¦ Àß °í·ÁÇؼ­ ÆÇ´ÜÇÏ½Ã±æ ¹Ù¶ø´Ï´Ù.



Ãâó: http://blog.extox.me/56?category=650196 [Good To Great]