React Native로 앱 개발하다가 갑자기 Flutter 공부를 시작한 이유
만들고 싶은 앱이 생겨서 기존에 공부했던 리액트 네이티브로 앱을 만들어 보기로 했다. 그런데 리액트 네이티브로 앱 개발을 하면서 수많은 어려움에 부딪혔다.
- 일단 리액트 네이티브 사용 경험이 부족했다. 약 1년 전에 간단하게 토이 프로젝트 하나를 만들어 본 정도.
- 리액트 네이티브를 사용한 앱 개발은 Expo와 CLI 두 가지 방법으로 나뉘기 때문에 원하는 자료를 찾기가 더욱 어려웠다.
- 라이브러리 설치 시 네이티브 코드를 수정하거나, 안드로이드 에뮬레이터를 빌드하는 과정에서 수많은 에러를 경험하면서 낭비되는 시간이 많았다.
그럼에도 불구하고 앱을 기획하면서 리액트 네이티브로 개발을 진행하려고 했던 이유는 아예 새로운 언어와 프레임워크를 배우는 것보다는 익숙한 프레임워크를 사용하는 게 더 효율적일 거라는 생각에서였다.
하지만 매번 새로운 에러를 마주하며 진도를 나가지 못하고 있었기 때문에 갑자기 플러터를 사용한 앱 개발은 어떨까 궁금해졌다. 아직 개발 초기 단계라 둘 다 경험해 보고 어떤 프레임워크를 사용할지 결정하는 것도 좋을 거 같아서 일단 플러터도 한번 공부해 보기로 했다!
Flutter는 어떻게 공부했는데?
일단 인프런에서 Flutter로 강의를 검색해 봤는데 강의가 너무 다양해서 고르기 어려웠고, 무엇보다도 백수에게는 부담스러운 가격이었다. 그래서 예전에 Next.js 강의를 들었던 노마드코더에서도 Flutter 강의를 찾아봤는데 Dart 시작하기와 Flutter로 웹툰 앱 만들기 두 개의 강의가 "무료"로 제공되고 있었다! Dart 언어 기초부터 쌓고 실제로 Flutter로 앱 개발하면서 공부할 수 있는, 딱 내가 원하던 과정이었다.
당장 공부하고 싶어서 4월 20일부터 시작해서 3일 동안 Dart 강의를 듣고, 그 후 약 2주 동안 Flutter 강의를 들었다. 예전에도 Flutter가 궁금해서 Dart 공식문서를 읽어본 적이 있는데, 그때는 너무 어려워 보여서 포기했었다. 근데 노마드코더는 실습을 통해 진행되는 강의 스타일이 나랑 잘 맞아서 Dart와 Flutter 모두 완전 처음인데도 잘 따라가면서 재밌게 공부할 수 있었다.
노마드코더의 Flutter 강의를 들으면서 다음 세 개의 앱을 만들었다.
| Digital Wallet | Pomodoro | Toonflix |
 |
 |
 |
Flutter는 신세계다!
플러터를 공부하면서 플러터가 대단한 프레임워크라는 생각을 했다. 특히 DX를 신경 쓴 부분들에 감동했다. 강의를 들으면서 틈틈이 메모했던 플러터가 좋은 이유는 다음과 같다.
-
감동의 DX
-
Dev Tools가 굉장히 잘 되어 있다. 별도의 프로그램 설치 없이도 VSC 디버깅 모드에서 Dev Tools를 바로 사용할 수 있고,
Widget Tree,Layout Explorer,Overlay Guidelines등 다양한 기능을 제공한다.
-
Code Actions 클릭 한 번으로 현재 위젯을
Padding위젯으로 감싸거나, 메소드, 위젯 등을 추출할 수 있다. 또한 Code Actions을 통해StatelessWidget와StatefulWidget을 간단하게 전환할 수 있다.
-
클래스를 작성할 때도 Code Actions로 빠르게
constructor를 생성할 수 있다.
-
기본적으로 다양한 코드스니펫을 제공해서 효율을 높여준다. 예를 들면
st를 입력해서 바로StatelessWidget또는StatefulWidget을 생성할 수 있다.
-
Dart는 객체지향언어로서 강력한 타입 시스템을 제공하기 때문에 위젯 생성 시에도 위젯에 마우스만 올리면 어떤 속성을 제공하는지와 해당 속성의 타입을 바로 알 수 있어서 좋았다.
-
Flutter는 운영체제별 built-in widget을 사용하지 않기 때문에 안도로이드, iOS 등 운영체제가 다르더라도 동일한 UI를 제공할 수 있다고 한다. 따라서 운영체제에 따라 별도로 UI를 구현해야 하는 수고로움이 줄어들 거 같다.
-
강의를 들으면서 Flutter에서
Hero라는 위젯을 사용해 봤다. (스크린을 이동할 때 각 스크린의 요소 간에 매끄러운 이동 애니메이션을 제공한다.) 간단한 코드만 추가해서 이렇게 멋진 애니메이션을 구현할 수 있다는 점에 너무 놀랐다. Flutter에서 또 어떤 멋진 위젯들을 제공할지 기대가 된다. -
개인적으로 JavaScript를 공부하면서 클래스를 많이 사용해 보지 않아서 이 부분이 약점이라고 생각했는데 Dart와 Flutter를 공부하면서 클래스에 대한 이해도가 높아져서 좋았다.
물론 단점도 있다
class WebtoonDetailModel {
final String title, about, genre, age;
WebtoonDetailModel.fromJson(Map<String, dynamic> json)
: title = json['title'],
about = json['about'],
genre = json['genre'],
age = json['age'];
}
class ApiService {
static Future<WebtoonDetailModel> getToonById(String id) async {
final url = Uri.parse('$baseUrl/$id');
final response = await http.get(url);
if (response.statusCode == 200) {
// String 타입인 body를 JSON 형태로 디코딩
final webtoon = jsonDecode(response.body);
// JSON 데이터를 Dart Class로 변환
return WebtoonDetailModel.fromJson(webtoon);
}
throw Error();
}
}Flutter를 사용하면서 API fetching을 할 때, 엔드포인트마다 데이터 모델을 생성하고, 데이터를 클래스화하는 메소드를 생성해줘야 한다는 점이 귀찮았다.
아직까지는 불편한 점이 하나밖에 없었지만 당연히 계속 사용하다보면 단점들 또한 점점 늘어날 거라고 생각한다.
그래서 앱 개발은 뭐로 할 거야?
플러터를 배우면서 너무 재미있었고 본격적으로 앱 개발을 시작하면 어떤 경험을 제공해 줄지 기대되기 때문에 리액트 네이티브가 아닌 플러터로 앱을 개발하려고 한다. 실제로 리액트 네이티브로 개발했을 때보다 에러가 현저하게 줄어들었고, 플러터에서 DX를 고려한 기능들이 많았기 때문에 더욱 효율적으로 앱을 개발할 수 있을 거 같다.
일단은 MVP 위주로 나만의 앱을 만들어서 스토어에 출시까지 해보는 게 목표다! 조만간 앱 출시 게시물을 올릴 수 있기를 바란다.🥹
