Dart와 Flutter 맛보기

Hayoung Lee
bgpworks
Published in
4 min readSep 20, 2021

목표

이제까지 객체 지향 개념을 제대로 알고 적용할 기회가 없었던 것과 UI 개발이 좀더 편할 수는 없을까 해서 google이 밀고 있는 Dart와 Flutter를 추석을 맞아 한번 경험해보기로 했다.

Dart와 Flutter 시작하기

나는 우선 Dart부터 좀 보려고 했는데, 위의 페이지를 가보면 Flutter SDK가 full Dart SDK를 포함하고 있다고 해서 Flutter만 설치하려고 한다.

여기가 Flutter의 설치 페이지다 . 시키는대로 sdk 설치하고 flutter doctor를 실행하면 뭐 빠진거 있다는 것을 알려준다.

나는 대충 이렇게 나왔는데, ios랑 macos용은 필요가 없어서(안드로이드 개발만 해보려고 하는중), Android toolchain의 조건사항만 맞춰주었다.

설치를 해보니 딱히 어렵지도 않고 좋았다.

Dart까지 성공적으로 설치가 완료 되었다.

Fluter와 Dart 실제 사용기

실제 App Prototype

Flutter와 Dart를 익히기 위해서 엄청 간단하게만 만들었다. 느낀 점은 아래와 같았다.

  1. Widget 이 제공되는게 확실히 좋았다. react-native는 엄청 예전에 하긴 했지만 뭘 되게 하려면 icon도 설치를 해야하고 이것저것 번잡했는데, flutter는 widget이 딱 준비가 되어있어서 뭐가있는 줄만 알면 갖다 쓰면 된다는건 좋았다.
Academind 강의: https://www.youtube.com/watch?v=x0uinJvhNxI&t=20066s

Widget은 종류가 다양한데, 여기에 적응하는것이 오래 걸릴 것 같다.

2. vs code extension이 잘되어있다. vscode의 flutter extension을 통하면 emulator를 실행하고, debuggin하고, 스니펫까지 다 잘 지원된다.

3. 문법이 Java같기도, JavaScript같기도한 것이 묘하다. 개인적으로 Strongly Typed언어라 익숙해서 좋았다. Promise 대신 Future라는 개념으로 비동기 처리하는 것만 제외하면 JavaScript와도 비슷한점이 많다.

4. React-Native 는 내부적으로 native componenet를 사용한다. React Native에서 View라는 컴포넌트를 쓰는게 Android의 ViewGroup, Ios의 UIView를 쓰는 것과 같다고 한다. 그런데 Flutter는 자체적으로 렌더링을 한다. Platform의 Canvas만을 이용하고, 걔를 통해서 widget을 랜더링한다. 앱쪽을 잘 모르지만 rendering이 app자체에서 통제되는게 아주 Big deal인 것 같다. React Native를 할때도 Native Component가 뭐가 쓰이고 있는지 몰라도 됐었지만, Flutter는 아예 Native Component를 안쓴다는 점이 개인적으로는 더 좋은 것 같다.

https://flutter.dev/docs

앞으로?

결론적으론 React Native보다 언어도 정갈하고, 전반적으로 번잡한 느낌이 적어서 이번에 Stack을 React Native로 하려다가 바꿨는데, 지금까지 느낀 바로는 잘한 선택인것 같다. 어차피 React Native도 한번밖에 안해봤는데 이번에는 Flutter로 한번 진행해봐야겠다. 아직 Flutter의 구체적인 동작원리는 잘 적응이 안되지만 이번에 하는 토이 프로젝트가 끝나고 나서 다시한번 글을 정리해보려고 한다.

--

--