Skip to main content

2 posts tagged with "flutter"

View All Tags

Flutter vs React Native - 2023

· 4 min read

image

모바일 앱을 개발하는 방법은 보통 3가지로 나뉜다.

1. 네이티브 앱

2. 하이브리드 앱

3. 크로스플랫폼 앱

image

네이티브앱은 예전부터 앱 개발 시에 aos(android), ios 에 맞춰 다른 언어로 그 언어에 맞게 각각 개발하는 방법이 있다.

이 방식은 1개의 앱을 개발하기 위해 두 개의 언어를 모두 할 줄 알아야 해서 보통 개발자를 2명 뽑아 운영하게 되고 동일한 화면을 구글플레이, 앱스토어에 각각 배포하기 위해 모두 새로 만들어줘야 하는 중복 작업이 필요하다.

대신 os 언어에 맞게 개발하기 때문에 좀 더 deep한 기능을 넣어줄 수 있다고 하는데 요새는 그게 그렇게 중요한가 싶다.

image

하이브리드 앱은 각각의 os 별로 웹 페이지를 보여주기 위한 웹뷰 기능을 제공하는데 이 기능을 이용하는 방식이다.

실제 모바일 앱의 화면을 모두 웹싸이트로 구현하고 앱 개발은 웹뷰로 보여주는 정도로만 개발한다. 네이티브 기능이 필요하다면 이 또한 웹뷰 또는 백엔드와 상호작용해 얻을 수 있어 개발이 간편하다.

초기 셋팅을 해 둔다면 웹 개발자만으로 앱을 운영할 수 있고 웹페이지를 보여주기 때문에 스토어에 배포를 자주하지 않고 웹싸이트만 따로 배포해도 업그레이드 할 수 있는 장점이 있다. 하지만 웹뷰앱은 스토어에서 관리하기 힘든 단점이 있어 앱스토어나 구글플레이에서 좋아하는 방식이 아니다. 그래서 점점 불리하게 업그레이드 되는 것 같다.(개인적 생각..)

image

대망의 크로스플랫폼 앱은 하나의 코드 베이스로 대부분의 네이티브 기능들을 사용할 수 있도록 만들어진 방식이다.

하이브리드 앱도 하나의 코드베이스로 운영되긴 하지만 네이티브 요소들이 필요할 때는 native app 언어를 공부해야 하고 가끔 웹으로 앱을 구현할 때 있어서의 UI 또는 기능적 한계에 부딪친다.

크로스플랫폼 앱은 네이티브를 사용하기 때문에 하이브리드 앱 보다 유용하고 하나의 언어와 플랫폼을 사용하기 때문에 코드를 중복해서 만들어야 하는 불편함도 줄여준다.

기업에서도 개발자 2명 뽑을 걸 1명만 뽑아도 되서 이득, 개발자도 개발산출물의 코드 베이스가 하나이기 때문에 관리도 편하고 모두에게 이득이 아닌가 싶다.

이렇게 좋은 크로스플랫폼의 가장 인기있는 RN(react-native)와 flutter에 대해 알아보려고 한다.

image

우선 RN은 2015년에 meta(구 facebook)에서 개발했고 웹 개발자들에게 친숙한 react 프레임워크와 거의 비슷하게 사용할 수 있다.(js만 사용해 모바일 앱 개발 가능 👍)

웹 개발자만 있으면 web, aos, ios앱도 모두 만들 수 있으니 매우 효율적이다. 물론 기존 react와 똑같지는 않고 사용하는 라이브러리나 html, css 방식이나 UI 구성 방식은 다르지만 그래도 웹개발자들에게 친근해 많이들 사용했다.

image

flutter는 2017년에 google에서 개발했고 dart 언어를 활용해 aos, ios, web, window, mac 등 거의 모든 플랫폼 앱에 대한 개발이 가능하도록 되어 있다. dart 언어를 이해하고 flutter 사용 방법만 익숙해 진다면 더 많은 혜택을 누릴 수 있다. 하지만 상대적으로 js사용자가 많은 개발자 생태계에서 dart 언어의 경쟁력이 좀 떨어지고 친근함도 떨어져 RN보다는 초기 진입장벽이 있다고 볼 수 있다.

image

비교를 시작하자면 개발자들 간 지식인 싸이트인 Stack Overflow에서 보면 RN이 먼저 출시했고 친근함을 무기로 많은 성장을 했지만 사람들의 관심도가 점점 flutter로 옮겨가는 것을 볼 수 있다. 결국 2019~2020년 사이에 flutter가 더 많이 관심 받기 시작한 걸로 보인다.

이미 여러 그래프들에서 개발자들이 사용하고 싶은 프레임워크부터 인기 그래프 등에서 flutter가 2021년 이후로는 확실히 앞서기 시작하는데 왜 이런 변화가 일어났을까?

둘 다 사용해 본 경험을 말해보자면 우선 언어적으로는 js가 더 친근하지만 dart가 어려운 언어가 아니기에 접근하기가 어렵지 않았다는 것이 있고 초기 셋팅 시 flutter가 cli가 훨씬 잘 되어 있어 셋팅이 편리했고 심지어는 초기 셋팅만 cli가 편한 것이 아니라 라이브러리 설치부터 개발까지도 친숙하지 않은 것일 뿐 훨씬 더 편리하다는 것.

RN을 이용하면서 가장 불편했던 건 라이브러리 설치 적용, 초기 셋팅 등이다. 친숙한 언어와 프레임워크가 개발에 있어 속도를 낼 수 있게 해주지만 셋팅할 때마다 생기는 오류들로 벌어둔 시간을 다 까먹게 된다.

flutter는 그에 반해 dart 언어, 프레임워크 사용법만 익혀두면 그 이후 개발은 훨씬 더 편하다. flutter 자체에서 대부분의 라이브러리를 지원하고 문서도 간소화 되어 읽기 편하게 되어 있다.  그리고 요즘 개발에 맞게 react가 컴포넌트 단위의 개발을 하는 것처럼 flutter는 widget 단위로 개발해 재사용하기도 편리하다.

게다가 RN은 js를 활용한 브리지를 통해 기본 구성 요소에 연결하므로 개발 속도나 실행 시간이 flutter 보다 느린 편이고 flutter는 브리지에 의존하지 않고 전용 그래픽 머신을 통해 앱과 상호작용하기 때문에 네이티브 코드로 컴파일해 성능이 훨씬 빠르다.

그리고 디버깅도 쉽게 할 수 있도록 완전히 지원되어 있어 개발 중 수 많은 디버깅에 있어서도 유리합니다.

너무 flutter 편향적으로 적긴 했지만 이런 flutter 움직임에 RN도 자극을 받았는지 성능 업그레이드도 되었고 여러 문제들이 개선되고 있고 기존의 많은 회사들이 채택해 사용하고 있기 때문에 사실 결국에 누가 우위를 점할지는 알 수 없는 상황이긴 하다.

하지만 그 간 RN을 하며 겪었던 고생들을 flutter를 통해 해소하고 나니 RN에 대한 감정이 남아 있다.

다시 좋은 감정을 가지고 RN을 겪어보고 싶은 마음도 남아 있다.

Deploy Flutter Web App With Netlify(Flutter Web App을 Netlify로 배포)

· 3 min read
Alex Han
Software Engineer

배경

그 동안 react, nextjs, hugo ... 등을 활용해 프론트엔드 개발을 진행하고 간단히 주변에 공유할 때 Netlify 를 자주 활용해 왔습니다. 하지만 요새 공부 중인 Flutter 는 웹도 앱도 모두 한번에 개발할 수 있는 신무기지만 Netlify 를 활용해 배포해 본 적이 없어 간단한 작업이지만 블로그에 남겨봅니다.

소개

Netlify는 웹 애플리케이션 및 정적 웹사이트를 위한 호스팅 및 서버리스 백엔드 서비스를 제공하는데 저의 경우 간단하게 프론트엔드를 배포할 때만 사용하고 있습니다.

Flutter는 모바일 앱과 웹 앱, 데스크톱 앱을 단일 코드 베이스로 개발할 수 있도록 Google이 개발한 프레임워크인데 Google 답게 Docs가 아주 잘 되어 있고 공부할 수 있도록 많은 지원을 해주고 있고 Flutter 자체가 가진 기능들이 많기 때문에 react-native 개발 때 느꼈던 dependency 지옥으로부터 조금이나마 해방된 느낌입니다.

팀원들에게 Flutter를 이용해 웹, 앱 모두 간단하게 개발된다는 것을 보여주기 위해 Netlify에 로그인 해 배포하려 했는데 이것을 몰라 찾아 봤고 금방 해답을 찾을 수 있었습니다.

수동 배포

우선 기본 전제는 Flutter 설치를 완전히 했다는 전제로 시작합니다.(공식문서 참고)

  1. 우선 Flutter 프로젝트를 생성합니다. flutter create [project_name]

  2. 프로젝트 폴더로 들어가서 flutter build web을 실행하면 build/web 폴더가 생성되고 배포용 js 빌드 파일들이 생성됩니다.(이것이 프론트엔드 배포용 소스)

  3. 아래와 같이 Netlify에 접속에 Deploy manually 를 클릭하면

    deploymanual

  4. 2번에서 생성한 배포용 폴더를 아래와 같이 Drag & Drop 하면 배포 성공!

    dragdrop

아주 간단해서 정리할 것도 많지 않았지만 그래도 정리해 두면 다음번에 생각을 덜해도 되니까 적어둬야지 😎

자동 배포

위에서 봤던 수동 배포로 해도 과정이 간단하고 실수로 자동으로 배포되는 것을 원치 않기 때문에 수동 배포를 좀 더 원하지만 자동 배포에 대해서도 알게 되어 이 또한 정리해 봅니다.

  1. 수동 배포의 1번을 완료하고 아래와 같이 Netlify에 접속 후 import an existing project 를 클릭합니다.

importexist

  1. 본인의 git repository를 선택하고 해당 레파지토리를 netlify에 공유할 수 있도록 설정합니다.

importexist2

  1. 이제 Deploy & Build 셋팅을 설정하는데, 명령과 셋팅은 아래와 같습니다.
  • Build command

아래와 같이 만약 flutter 폴더가 있으면 git pull을 통해 최신화 하고 없다면 git clone 을 통해 flutter를 가져오고 flutter 폴더에 있는 실행파일을 활용해 프로젝트에 웹을 적용하고 웹을 빌드해 배포합니다.

if cd flutter; then git pull && cd ..; else git clone https://github.com/flutter/flutter.git; fi && flutter/bin/flutter config --enable-web && flutter/bin/flutter build web --release
  • Publish directory

배포 폴더를 build/web으로 하여 Build command에서 생성한 배포 폴더로 설정합니다.

build/web

이렇게 설정하면 git에 푸시할 때마다 build command가 실행되고 설정된 publish directory설정에 따라 배포하게 되면서 자동 배포가 완성됩니다.

아직 공식 홈페이지에서 Deploy 셋팅 방법에 대해 Flutter는 다루고 있지 않지만 위와 같은 방식으로 처리가 가능합니다.

도움이 되는 포스팅이기를 빕니다. 🧑🏻‍💻