크로스플랫폼 어플리케이션... 뭐가좋을까?

//아직 비공개인데 일단 게시판에다 임시저장..

안드로이드앱과 iOS앱을 만들려면 각각의 플랫폼에 맞는 언어로 앱을 만들어야합니다.

안드로이드는 Java 또는 Kotlin

iOS 는 Objective-C 또는 Swift 로요

이렇게 Native로 만들어진 앱은 각각의 플랫폼에 맞는 최대한의 성능을 끌어올릴수 있다는 장점이 있죠.

하지만 저 둘을 다른언어로 만든다는건 그만큼의 시간과 비용이 더 들어간다는 것이 되겠죠,,

저는 앱이 어떤 언어로 만들어지든 사용자경험에 악영향을 미치지 않는다면 괜찮다고 생각하는 사람입니다.

그래서 굳이 저 어려운 Java나 배울생각없는 Swift를 사용할 필요가 없다고 생각합니다.

더 이상 저 언어 없이 여러분이 쉽게 할 수 있는 JavaScript로 모든것을 이제 할 수 있게되었습니다.

1. 모바일 앱을 만들어보자.

일단 성능상으로는 각각의 플래폼에 맞는 앱이 가장 빠릅니다. 이 성능은 사실상 완전히 따라잡기는 힘듭니다.

- 웹 기술로 앱을 만들기

1. HTML, CSS, JavaScript로 앱을 만들 수 있습니다.
2. Cordova나 Ionic 같은 도구를 사용하면 Html, CSS, JavaScript 를 WebView로 보여주기 때문에 이걸로 앱을 만들 수 가 있어요.
3. 제가 직접 만들어 봤는데 성능이 낮거나 한건 못느꼈습니다. 순도 100%웹페이지이기 때문에 ReactJS, VueJS 같은것도 당연히 올려서 쓸 수 있고요.
4. CSS만 잘 올려주면 이게 웹으로 만들어진건지.. 아님 네이티브 안드로인드인지 모릅니다. Angular의 Onsen UI나 Vue의 Vuetify또는 React의 material-ui이것도 아니라면 material.io 로 만들면 완벽한 앱의 UI 뚝딱 완성됩니다.
5. 근데 저도 처음에 material.io 쓰다가 너무 무거운거 같아서 material.io디자인을 모방한 디자인을 만들었는데 Ripple을 도저히 네이티브앱처럼 구현을 못하겠어서 React의 material-ui로 넘어갔습니다. Onsen-UI는 Ripple의 반응성이 너무 늦고, Vuetify는 스크롤시 Ripple이 무조건적으로 표시되서 맘에 안들고 React material-ui가 가장 맘에 들더라구요. 
6. 아 그리고 이렇게 만들면 저장소나 카메라나 배터리 정보 같은걸 읽지 못하느냐 하실 수도 있는데 Cordova의 Plugin 을 이용하면 가능합니다.
7. JavaScript다 네이티브 자원에 접근할수 있도록 브릿지를 제공해줘요.
8. 하지만 저는 성능을 위해 이런 브릿지사용을 최소화합니다. 
9. 시대가 지나면서 웹브라우저도 많이 발전했습니다. 안드로이드의 WebView는 대부분 크로미움기반인데 요즘 크로미움 기반 브라우저들은 navigator 객체에 기기의 상당히 많은 정보들을 제공하더군요. 
10. 만약 배터리 정보를 얻고싶다 하면 navigator.getBattery()를 사용하면 정보를 돌려주겠다고 약속합니다. then에다가 배터리 정보가 담긴 BatteryManager객체를 인자로 넣어줍니다.
11. 위치정보를 얻고싶다면? GeoLocation API를 사용하면 됩니다.
12. 저장공간이 필요하다면? IndexDB나 FileSystem, WebSQL, 간단한 텍스트 정보라면 localStorage를 사용하면 되겠군요.
13. 블루투스연결? navigator.bluetooth.requestDevice를 사용하면 됩니다.
14. 이제는 웹이 많은것을 할 수 있게되었습니다..

- JavaScript 를 네이티브로! NativeScript 를 사용.

이건 웹기술이 아니라 자체 언어를 사용하는겁니다.

저는 잘 모르겠지만, 웹의 DOM 을 변경하는건 매우 비싸다고 하더군요 그래서 나온게 필요한 최소한의 돔을 업데이트시키는 ReactJS인데 여기에다가 조금 더해서 이걸 네이티브로 만들어서 극적인 성능을 꾀하자 라는게 React Native입니다. ReactJS 와 React Native의 철학은 같지만 이 둘은 엄연히 다릅니다. 

이 React Native 는 Java로된 React Native 코어 소스가 index.android.bundle안의 번들링된 JS를 읽어들이고 안드로이드의 위젯을 가져와서 렌더링합니다.

위의 하이브리드앱과 다른점은... 이건 진짜 안드로이드 네이티브위젯을 가져다 쓴다는겁니다. 

근데 이게 어떻게 JS가 네이티브 위젯을 쓰냐면 JS파일을 읽어들이는 React Native 코어 소스가 JS파일을 읽어들이고 해석해서 알맞게 코어가 실행합니다.

그래서 React Native가 성능저하가 없느냐? 

그건 아닙니다. 위에서 말했듯이 JS가 직접 네이티브에서 실행되는건 아니기 때문에 코어소스를 거쳐야 하기 때문에 성능저하가 발생합니다.

그래서 RN은 네이티브 위젯을 사용하기 때문에 뷰 스택이 쌓이면 쌓일수록 성능이 감소해요. 

한번 스와이프할때도 위젯의 상태를 업데이트하기 위해서 초당 수십수백번의 네이티브 브릿지를 거쳐간 통신이 이루어집니다.

당연히 이건 React Native 뿐만이 아닌 비슷한 방식을 가진 Vue Native, Angular Native 같은 NativeScript도 동일한 문제입니다.

그리고 이건 JS가 아니긴 하지만 Flutter와 Xamarin이라는 프레임워크도 있습니다.

Flutter는 Dart 기반이고 Xamarin은 C# 기반입니다. 

Dart는 JS하고 좀 비슷해요.  배워볼만합니다.

Flutter도 크로스플랫폼 네이티브개발가능 언어인데 구글이 만들었죠 React Native에서 영감을 얻었다고 하네요,

React Native와는 달리 크로미움이 사용하는 렌더링엔진인 Skia를 뷰스크린에 전체적으로 올려놓고 UI는 자체 내장된 UI를 사용합니다. 

WebView하고 비슷하다고 할순.... 있을까 싶겠지만 Webview하고는 다르다네여.. UI부분에서는 네이티브 위젯을 사용하지 않고 자체적으로 Dart 코드에 따라 렌더링하기 때문에 여기에서는 그냥 네이티브라고 봐도 무방하답니다. 그냥 기능부분만 브릿지를 통하기 때문에 성능저하가 거의 없다고 봐도 됩니다.

Xamarin도 .NET Framework에다가 각각의 플렛폼에 맞는 모든 API를 우겨넣었기 때문에 네이티브 앱 개발이 가능합니다. 이게 가장 성능상으로는 빠르다는 이야기가 있어요.. 다만 그만큼 용량은 Hello, World 앱 하나에 60MB나 됩니다. 알아서 생각해보시기를요.