본문 바로가기

study

RN vs Flutter

 처음 어플 프로젝트에 참여하고, 프레임워크를 Flutter 로 진행하면서 dart 라는 새로운 언어와 코드구조를 접하게 되었다.
기존에 React 웹개발을 주로 했어서 어플의 구조에 대해서도 깊게 이해할 수 있었지만,
이런 표면적인 문법의 차이 말고도 다른 프레임워크와는 어떻게 다른지 궁금했다.
특히 RN 과 많이 비교되었던 것으로 알고 있었기 때문에 좀더 깊게 알아둔다면
크로스 플랫폼 프레임 워크에 대해서 좀더 깊게 이해할 수 있을 것 같아 포스팅을 하게 되었다.

1. 탄생

- ReactNative (2015) _by facebook

- Flutter (2019) _by Google


2. UI 렌더링 엔진

- RN

 Javascript bridge 는 js 언어를 여러 플랫폼으로 컴파일을 하려는 시도와 과정에서 탄생한 개념이다

클라이언트에서 서버로 요청을 보낼때, 주로 json 이나 xml 형식으로 활용하는 점에서 착안되었다고 한다.

이를 js 에 적용하여 해당 언어를 네이티브(ios / android)로 완전히 전환시키는 것이 아닌

js 엔진이 코드를 해석하여 네이티브 모바일 api 를 호출하고 ui 를 구성하게끔 만드는 것이다.

ex) 로딩 indicator를 삽입하면 양쪽 네이티브에서 각 환경에 맞게끔 다르게 나옴.

 

그렇기 때문에 각 네이티브 ui 컴포넌트가 필요한 파라미터를 해당 js 코드에 모두 포함시켜놓아야 한다.

이러한 특징은 디버깅 이슈를 불러오는데 특정 ui에 필요한 요소가 부족하다면 어느 한쪽에서만 버그가 생길 수도 있다.

그래서 ui 구현을 반드시 양쪽 플랫폼에서 모두 확인해야 한다.

 

- Flutter

 Skia Engine 은 코드를 직접 네이티브 환경에 그린다.

canvas ui 컴포넌트를 활용하기 때문에 직접 그릴 수 있고, 그래서 어느 한쪽에서만 ui 가 구현되지 않는 경우가 거의 없다.

그리고 두가지 종류의 위젯이 제공되는데 Material(android), Cupertino(ios) 어느 한쪽을 선택하게 되면

양쪽 네이티브에서 같은 디자인의 ui 가 보이게 되는 것이다.

ex) 로딩 indicator를 삽입하면 양쪽 네이티브에서 같은 디자인으로 나옴


2. 레퍼런스

- RN

 생긴지 오래 되었고, 오픈소스로 운영하다보니까 생태계 굉장히 발달되어 있다.

기능과 관련된 예제도 많고 네이티브 환경에 필요한 서드파티 플러그인이 안정된 버전으로 마련되어 있는 편이다.

하지만 facebook 에서 직접 RN을 관리하는 편은 아니어서 그런 외부 라이브러리에 꽤 의존해야 한다는 점이 있다.

 

- Flutter

 신생 프레임워크이기 때문에 레퍼런스가 부족한 편이다(한국어 자료 또한 아직 많지 않다).

공식문서는 굉장히 잘 정리되어 있으나 아직까지 필요한 기능과 플러그인을 지원하지 않는 경우가 있다고 한다.


3. 언어

- JS vs Dart

 원래 js를 쓰던터라 바로 비교해보자면 dart는 상대적으로 강타입의 언어라고 한다.

코드 구조를 짤때 들어가는 인자가 거의 모두 타입이 정해져있고 객체 지향 언어라서 대부분의 데이터 모델을 지정해놓고 활용한다.

이런 점에서 js가 좀더 자유롭지만 dart 같이 타입을 미리 지정해놓으면 로직이 명확해져서 좋은 점도 있다.


4. 크로스플랫폼의 한계

https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a 
 

Sunsetting React Native

Due to a variety of technical and organizational issues, we will be sunsetting React Native and putting all of our efforts into making…

medium.com

 초기 RN이 출시되고 airbnb 개발 프레임워크로 활용되었으나 2018년 그 한계로 인해 네이티브로 전환하기로 결정되었다

분명히 아직까진 네이티브 개발만큼 크로스플랫폼이 따라가지 못하는 것 같다.

그리고 페이스북도 점차 RN 활용도를 줄이고자 하는 움직임이지만, 구글은 크로스 플랫폼의 중심이 되고자 하는 의지가 강하다.

Flutter는 ios, android, web, desktopApp 모두 호환될 수 있게 하였다. 하지만 구글은 이런 아이템을 추진하다가도 살짝 어긋나면 바로 중단하던 전례가 있어서 철저한 관리 이면에는 이런 위험성도 있다는걸 인지하고 있어야겠다.

모바일 개발자가 되고 싶다면 네이티브앱을 선행적으로 알아야 하는 것 같고,

크로스 플랫폼은 효율적인 운영을 위한 차선책이라는 점도 알아야할 것이다.

 

 

- 참고 영상 링크
https://youtu.be/nyHIau1shc0
https://youtu.be/siow15Yn8r8
https://youtu.be/2AS0WAOX8_8

'study' 카테고리의 다른 글

boj 13300 javascript  (0) 2022.06.18
C 언어 기초  (0) 2022.06.17
컴퓨팅 사고  (0) 2022.06.15
Flutter 하이브리드 환경에서 PASS 앱 연동  (6) 2022.01.05
envoy proxy 에 대하여  (0) 2021.10.23