[Flutter] Road Map - 개인적인 생각

안녕하세요.

안드로이드 하다가 플러터로 넘어간 초보 개발자입니다.

플러터를 독학으로 배웠을 당시에는 한국어든 영어든 워낙 자료도 없고 해서 꽤나 애를 먹은 기억이 나네요

(Flutter SDK 설치하는데만 3일 날린 삽질이 아직도 생생합니다 ㅠㅠ)

 

이 블로그를 작성하고 있는 2021년 3월 30일 기준으로 워낙 다양한 자료, 블로그, 유튜브, 강의 등등등이 나와있지만

아직도 한국어로 된 로드맵이 거의 없거나 덜 알려진 좋은 자료들이 널리 알려지지 않았던 것과 같이

아직 불편한 점들이 여러 가지 있어서 이 글을 작성하려 합니다. ㅎㅎ

 

*주의*

이 글은 개념 설명이 아닌 하나의 로드맵을 작성한 글이기 때문에 모든 내용을 설명하지 않는다는 점 참고 바랍니다.

 

 

 

 

Dart

---

먼저 플러터 하기 전에 해당 프레임워크가 사용하는 언어부터 배워야겠죠?

dart가 뭔가요? 전자공시시스템, 다트 말고 플러터에서 사용하는 프로그래밍 언어입니다.

Dart programming language

 

그럼 이제 이 언어를 어떻게 배우는 게 좋을까요? 사실 정답은 없고요. 아무 책, 블로그, 강의를 들으셔도 무방합니다.

그래도 제가 dart를 배우는데 도움되었던 블로그, 강의 링크를 남기겠습니다.

 

블로그

Dart 다트언어에 대하여 알아보기

영상

 

 

마지막으로 언어를 배우시려면 툴이 필요하겠죠?

1. Android Studio
2. IntelliJ
3. Visual Studio Code
4. DartPad (https://dartpad.dev)

DartPad 설치 없이 웹에서 바로 사용하실 수 있습니다.

 

Dart에 대한 오해 (TMI 주의)

아직도 Dart를 최악의 언어라고 생각하시는 분들이 계실까 봐 적습니다....

 

Dart는 2011년 10월에 공개된 언어로서 구글에서 개발되었습니다.

원래 Dart를 만든 목적은 JS, 자바스크립트를 대체하기 위해 만들어졌는데

자바스크립트가 유명해진 이유는 그냥이 아니겠죠....

 

결국엔 2018년까지 제대로 쓰인 적이 한 번도 없으며

2018년 최악의 언어라는 굴욕(?)을 맛 본 언어입니다.

 

그런데 플러터가 2018년 말에 공식 릴리즈가 되면서 Dart도 공식 언어로 채택이 되었습니다.

근데 왜 Dart가 채택이 되었을까요?

 

다트는 모바일, 데스크톱, 서버 및 웹 애플리케이션을 구축하는데 용이하고 신속하게 네이티브로 컴파일하는 AOT(After Of Time)를 사용은 등

이 외에 여러 장점이 있어 사용했겠지만 글이 길어질까봐 PASS~

 

Dart, 어디까지 배워요?

독특한 문법들이 여러 가지 있지만 mixin, Future, Stream까지 배우셨으면 충분히 Dart를 사용하시는 데에 지장이 없는 수준이라고 생각하시면 됩니다.

 

 

 

 

 

Flutter

---

플러터를 배우는데 순서는 딱히 상관없지만 주로 아래와 같이 배우시는 것을 추천합니다.

 

1. Flutter SDK 설치
2. Counting App(처음 프로젝트 만들면 자동으로 생성되는 카운팅 코드)
3. MaterialApp, Scaffold
4. Stateful vs Stateless + 생명주기
5. 기본 위젯
6. 부모 위젯(또는 View Group)
7. 상태 트리
8. 에셋 & 패키지
9. 상태 관리
10. etc.

1. Flutter SDK 설치

우선 공식문서에서 자신의 OS와 맞는 플러터 SDK를 설치하세요.

설치

그다음 설치하시다가 에러가 발생하면 구글링~

 

2. Counting App

자 플러터를 설치하셨으면 이제 프로젝트를 생성하실 수 있으실 겁니다.

프로젝트를 생성하시면 샘플 코드로 Counting App이 생성되실 겁니다.

이제 에뮬레이터 켜고 한 번 실행해보세요.

 

이걸 왜 해야 하냐고요? 딱히 큰 이유는 없고 제대로 실행되는지 확인하기 위해 실행하는 것입니다.

할 필요가 없으시다면 안 해도 되겠지만 그래도 첫 앱 실행인데 해보시면 꽤 좋은 경험이 되겠죠?

 

스타디 - 구글 플러터 Flutte... : 네이버 카페

 

3. MaterialApp, Scaffold

 

카운팅 앱까지 실행하시고 코드를 보시면 혼란스러워하기 시작할 겁니다.

우선 진정하시고 카운팅 앱을 천천히 분석해보시길 바랍니다.

그다음 MaterialApp과 Scaffold가 무슨 역할을 하고 좀 더 자신만의 스타일로 커스텀해보시는 것을 추천드립니다.

 

추가로 MaterialApp과 Scaffold를 요약하자면

MaterialApp: App

Scaffold: Page

응?

 

4. Stateful vs Stateless + 생명주기

Stateful과 Stateless의 차이점을 알아오시고 Stateful의 생명주기를 숙지하시길 바랍니다.

 

5. 기본 위젯

Text, Image, Button....

여러 가지 있는데 전부 알아보는 것은 사실 불가능입니다.

천천히 필요한 위젯을 찾아보시고 조금씩 습득하세요.

 

6. 부모 위젯

위젯을 감싸는 위젯을 부모 위젯이라고 부릅니다.

부모 위젯은 자식의 속성, 상태, 크기 등을 제어할 수 있습니다.

부모 위젯도 여러 가지 있는데 가장 중요한 Container, SizedBox, Row, Coulmn, Center를 익히시고

그 외에 다른 여러 부모 위젯들을 익히시면 좀 더 원활한 코딩이 가능하시겠죠?

 

7. 상태트리

이번 건 좀 중요합니다.

플러터에서 어떻게 동작하는지 알기 위해선 상태 트리를 알아야 합니다.

 

 

[Flutter] Key란 무엇인가?

 

8. 에셋 & 패키지

에셋(이미지, 폰트를 저장한 공간)과 패키지(외부 라이브러리)를 사용하기 위해서 pubspec.yaml에 원하는 패키지와 리소스를 추가하시면 되겠습니다.

 

Dart packages

 

9. 상태 관리

• setState
• Provider
• Bloc
• GetX
• RiverPod
• etc.

List of state management approaches

 

10. 끝!

여기까지 오셨으면 이미 플러터를 사용해서 웬만한 앱들을 만들 수 있습니다.

하지만 아직 모르는 것들 투성이기 때문에 로드맵에 적혀있지 않은 것들도 배워가며 더 많은 앱을 개발하셨으면 합니다.

이걸로 로드맵을 마치고 아래 도움되는 사이트 링크를 남기며 끝내겠습니다.

 

 

 

 

 

 

 

 

 

---

Flutter 배울 때 도움되는 사이트

Flutter Gems (패키지들을 카테고리 별로 보기 좋게 정리한 사이트)

Flutter Gems - A Curated Package Guide for Flutter

 

 

Effective Dart:Style (다트 코딩 스타일을 규칙을 지정한 사이트)

Effective Dart: Style

 

Flutter Awesome (플러터로 만든 앱 모음)

Flutter Awesome

 

Flutter Awesome (Github)

 

Solido/awesome-flutter

 

한국 플러터 개발자 모임(카톡 채팅방)

Flutter 개발자 모임

 

스타디 (네이버 카페)

스타디 - 구글 플러터 Flutte... : 네이버 카페

 

플러터에서 레이아웃이란?

Layouts in Flutter

플러터 무료 서적

파닥파닥 Flutter

 

그 외 기타

플러터 공식문서

flutter-ko.dev/

 

플러터 스튜디오

flutterstudio.app/

 

패키지 모음

pub.dev/