앱 개발 방법에는 두가지가 있다.
첫 번째는 네이티브 앱(Native App)
- Android(java / Kotlin 사용)와 iOS(Objectiv-C / Swift 사용) 각각의 툴을 사용하여 따로 개발하는 것
장점: 성능이 가장 빠르고 최신 기능을 빠르게 적용할 수 있다. -> 최신기능을 적용해 성공한 사례(포토 위젯)
단점: 각각 다른 언어로 두 번 앱을 제작해야 한다.
두 번째는 크로스 플랫폼 앱 개발
- 하나의 프로그래밍 언어와 소스코드로 Android와 iOS를 모두 개발하는 방법이다.
장점: 하나의 언어로 두 플랫폼에서 모두 실행되는 앱을 빠르게 만들 수 있다.
단점: 네이티브 앱의 성능을 뛰어넘을 순 없다.
React Native
프로그래밍 언어: JavaScript
페이스북에서 출시한 오픈 소스 모바일 애플리케이션 프레임 워크
Flutter
프로그래밍 언어: Dart
구글에서 출시한 오픈 소스 모바일 애플리케이션 프레임 워크
Why Flutter
1. Cross Platform이 생산성이 월등하다.
2. Flutter가 훨씬 핫하다.( =커뮤니티&자료↑)
3. 공식 문서가 잘 되어 있다.
4. 성능이 뛰어나다.
Flutter 이해하기
1. 레고 같이 조립할 수 있는 위젯(Widget)
-위젯들을 조합해서 화면을 그리는데 이 위젯들의 조합이 나무와 비슷하다 하여 위젯트리라고 한다.
https://docs.flutter.dev/development/ui/widgets
Widget catalog
A catalog of some of Flutter's rich set of widgets.
docs.flutter.dev
메테리얼 위젯(Material Widget)은 Android에 기본 화면 구성 요소를 Flutter에서 그대로 재현한 위젯이다.
쿠퍼티노 위젯(Cupertino Widget)은 iOS에 기본적으로 내장된 화면 구성 요소를 Flutter에서 재현한 위젯이다.
Flutter는 특정 플랫폼에 종속되지 않은 고유의 디자인을 입힌 커스텀 위젯(Custom Widget)도 쉽게 만들 수 있다.
Flutter 프로젝트 생성
Scaffold & Text
건물을 지을 때 공사장에 먼저 비계(Scaffold)를 설치하고 작업을 시작한다.
앱에서도 화면을 그릴 때 Scaffold 위젯으로 시작한다.
Scaffold 위젯은 한 페이지의 특정 영역에 위젯을 쉽게 배치할 수 있도록 틀을 잡아주는 역할을 한다.
Scaffold(
appBar: 다른 위젯, // 상단 바
body: 다른 위젯, //화면 중앙에 가장 큰 면적
bottomNavigationBar: 다른 위젯, //하단 바
floatingActionButton: 다른 위젯, //우측 하단
),
저장시 에뮬레이터에 바로 반영되는 기능을 핫리로드(Hot Reload)라고 부른다.
변경 사항들이 바로바로 반영되기 때문에 빠르게 개발을 진행할 수 있다.
일부 코드는 핫리로드로 갱신이 안되는데, 이 때는 restart 버튼을 누르면 된다.
Column & TextField
Column 위젯은 세로 방향으로 여러 위젯을 나열할 때 사용한다.
TextField 위젯은 Flutter에서 텍스트 입력을 받을 때 사용한다.
비밀번호를 입력할 때 안 보이게 하는 속성은 obscureText: true, 라는 속성을 주면 된다.
Button
Flutter에서는 클릭 이벤트를 받는 다양한 Button을 제공한다.
// 위로 올라와 있는 듯한 버튼
ElevatedButton(
onPressed: () {},
child: Text('Elevated Button'),
),
// 텍스트 버튼
TextButton(
onPressed: () {},
child: Text('Text Button'),
),
// 아이콘 버튼
IconButton(
onPressed: () {},
icon: Icon(Icons.add),
),
Container
ElevatedButton 자체에는 width 속성이 없고, 부모 위젯에 크기를 이용해 조절 할 수 있다.
리펙터 기능을 이용해 Container 위젯으로 ElevatedButton 위젯을 감싸고 Container 위젯에 width: double.infinity,코드를 추가하게 되면 Container의 폭이 부모를 가득 채우게 되고 버튼도 함께 최대 크기로 늘어난다.
Image & SingleChildScrollView
Image.network("URL")을 이용하면 URL로 된 이미지를 보여줄 수 있다.
Flutter 공부 방법
Flutter 개발을 하려면, 어떤 Widget이 있는지 알아야 하기 때문에 밑에 있는 사이트들을 통해서 위젯들을 많이 보아야 한다.
https://docs.flutter.dev/development/ui/widgets -> Widget Catalog URL
https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG -> 구글에서 제공하는 위젯영상
Flutter Community 이용하기
Dart 문법
클래스(Class)
클래스는 변수와 함수를 모아둔 틀이다.
클래스 이름은 파스칼 케이스(PascalCase)를 따른다.
생성자는 반환 타입을 명시하지 않는다.
빵 틀에서 빵을 찍어내듯, 생성자 함수를 호출하여 클래스에서 정의해 둔 속성과 메소드를 가진 데이터 객체를 만들 수 있는데, 이를 인스턴스(Instance)라고 부른다.
상속(extends)
위 코드에서 10번째와 15번째 줄과 같이 class 클래스A extends 클래스B 라고 입력하면, 클래스 B의 변수와 함수를 클래스A에서 그대로 사용할 수 있다. 이를 클래스A가 클래스B의 기능을 그대로 물려받았다고 해서 상속(extends)받았다고 표현한다.
변수와 함수를 물려받은 클래스A를 자식(child), 기능을 물려준 클래스B를 부모(super)라고 부른다.
Dart의 모든 것은 Class이다.