Do it! 플러터 개념부터, Dart 기본까지

실전코드로 배우는 플러터 기본과 활용

Do it! 플러터 앱프로그래밍

오픈API활용, 파이어베이스, 구글맵까지 배울 수 있는 크로스 플랫폼. Flutter에 입문하기 위해 위 플러터 앱프로그래밍 책을 가지고 3주 이내로 공부하려고 합니다. 배우고 정리해서 최종적으로 간단하고 필요한 앱들이 3개 정도 만들 수 있는 수준까지 올라가는 것이 목표입니다. 코틀린이 발전하기 전, 안드로이드 스튜디오에서 Java로 만들때는 디자인이 너무 어려워서 포기도 했었는데, Flutter는 디자인 기반이라 개발자도 쉽게 괜찮은 수준으로 외관을 만들 수 있다고 해서 도전해 보려고 합니다. 

플러터 등장 배경

모바일OS는 안드로이드와 iOS가 대부분 점유하고 있습니다. 애플은 오브젝트-C에서 스위프트(Swift) 언어를를 추가 지원하고 있으며, 안드로이드는 자바에서 Kotlin을 밀고 있습니다.(오라클에서 Java 이용에 대한 라이선스 비용 이슈. 아직 Java기반의 앱들이 많아 Kotlin으로 모두 대체되는데는 시간이 상당 필요) 이런 각 모바일 운영체제에 맞는 언어로 개발한 앱을 네이티브 앱(native app)이라고 합니다.

최근 전세계 iOS와 안드로이드의 시장점유율. 출처 : statista

하지만, 두 운영체제의 언어로 개발하면 2source 1서비스라서 관리가 어려워, 웹앱이나 하이브리드앱이 등장하였습니다. 최근 Progressive 웹앱에서는 알림도 받을 수 있다고합니다. 하지만 이런 하이브리드 앱은 속도 측면에서 느리다는 단점이 있습니다. 

그래서 나왔던게 페이스북의 리액트, 구글의 플러터입니다.

구분	리액트 네이티브	플러터
개발주체	페이스북	구글
언어	자바스크립트	다트
성능	빠르지만, 네이티브 앱보단 느림	네이티브 앱에 근접한 속도
학습 곡선	높음(네이티브 앱 개발자 수준)	낮음(네이티브 앱 개발자 수준)
대표 앱	페이스북, 인스타그램, 핀터레스트, 토스	알리바바, 구글애드센스, 네이버 지식in
장점	• 웹 개발자의 접근성(코딩을 잘해야 함) • 많은 패키지 이용 가능	• 다양한 위젯(디자인 구성이 편함) • 강력한  애니메이션 등
단점	• 기본 위젯이 부족해 커스텀해 사용 • 안드로이드/iOS 네이티브 위젯을 이용하기에 OS 판올림에 따른 업데이트 필요 • 블루투스 등 네이티브 커스텀해 통신하는 부분 개발이 어려움	• 플로터 SDK로 앱 크기가 큼(네이티브 대비) • 업데이트 주기가 빠름(책, 인터넷의 예제에 deprecated(폐기) 된 항목들이 종종 있음)

개발해보면 아시겠지만, hot reload 기능으로 소스 수정하면 별도 빌드과정없이 바로 결과 화면(가상디바이스화면, 웹화면)에 바로 표시해 주어 개발 효율이 높고, 앱을 만들더라도 웹화면에서 개발 결과를 확인해도 됩니다.

개발 환경 구축

안드로이드 스튜디오를 설치한 후, 플러터 SDK를 설치합니다. (https://docs.flutter.dev/get-started/install) 

정상적으로 설치가 되었다면, CMD창에서 flutter 폴더로 가셔서 flutter doctor 명령어로 개발 환경을 점검할 수있습니다.

flutter 개발환경 점검을 위해 flutter doctor 실행 결과 화면

그리고 안드로이드 스튜디오로 "Create New Flutter Project"를 생성하면서, "Flutter" 플로그인도 설치합니다.

Dart 핵심 요약 

• 다트 언어의 6가지 특징
• 비동기 처리 방식
• JSON 데이터 처리 방식
• 스트림 통신(순서 보장)

다트언어의 6가지 특징

1. main()함수로 시작
2. 변수는 어디에서나 선언 및 사용 가능
3. 자료형이 엄격하여 선언한 타입외 다른 유형의 값 입력 불가. 선언하고 나중에 타입을 정하려면 var를 이용하고, 동일 변수에 여러 자료형을 허용하려면 dynamic 타입으로 이용 가능
4. 제네릭 타입 이용 개발 가능 List<int>, List<dynamic> 등
5. public, protected 같은 키워드 없음. 다만, 외부로 노출하고 싶지 안핟면, 변수나 함수 앞에 언드스코어( _ )를 이용해 표시. _hiddenValue, _hideValue
6. 삼항 연산자를 자주 사용 (예 : var visibility = isPublic ? 'public' : 'private';)

비동기 처리 방식

다트는 async와 await 키워드를 이용해서 비동기 처리를 구현합니다.

1. 함수 이름 뒤, 본문이 시작하는 중괄호 { 앞에 async 키워드를 붙여 비동기를 선언
2. 비동기 함수 안에 언제 끝날지 모르는 작업 앞에 await 키워드를 붙임
3. 2번 작업을 마친 결과를 받기 위해 비동기 함수 이름 앞에 Future(값이 여러개면 Stream) 클래스를 지정

void main() {
    checkVersion();
    print('end process');
}

Future checkVersion() async {
    var version = await lookUpVersion();
    print(version);
}

int lookUpVersion() {
    return 12;
}

#실행결과#
end process
12

비동기 함수가 반환하는 값을 처리하면, then() 함수를 이용

void main() async {
	await getVersionName().then( (value) => {
    	print(value)
    });
    print('end process');
}

다트는 단일 스레드로 동작하는 프로그래밍 언어

void printTwo() async {
	Future.delayed(Duration(seconds: 1), () {
    	print('Future');
    });
    print('Two');
}

JSON 데이터 주고 받기

Convert라는 라이브러리를 활용하여 쉽게 이용 가능하며, jsonDecode 반대는 jsonEncode() 함수입니다. 

import 'dart:convert';

void main () {
    var jsonString = '''
    [
    	{"lotto" : 5},
        {"lotto" : 15},
     ]
     ''';
     
	var lottos = jsonDecode(jsonString);
    print (lottos is List); // true 출력
    var lottoOne = lottos[0];
    print(lottoOne is Map);  // true 출력
    print(lottoOne['lotto'] == 5); //true
}

스트림 통신하기 

데이터를 주고 받을 때 순서 보장이 필요하다면, 스트림(stream)을 이용합니다. return은 한번 반환하면 함수가 종료되지만, yield 키워드는 반환 후에도 계속 함수를 유지합니다.(계속 반환) 그리고 async* 명령어는 yield를 이용해서 지속적으로 데이터를 전달하겠다는 의미입니다. 

import 'dart:async';

Future<int> sumStream(Stream<int> stream) async {
    var sum = 0;
    await for (var value in stream) {
    	print ('sumSteam : $value');
        sum += value;
    }
    return sum;
}

Stream<int> countStream(int to) async* {
    for (int i = 1; i <= to ; i++) {
    	print('countStream : $i');
        yield i;
    }
}

main() async {
    var stream = countStream(10);
    var sum = await sumStream(stream);
    print(sum);
}

다음처럼 then() 함수를 이용할 수있습니다. 다만, 스트림은 소모하면 사라지므로, first, last, length 등 한번만 실행해야 할 경우 이용합니다. 동일 스트림에 first, last를 같이 사용한다면 오류가 발생할 수 있습니다. 

main() {
    var stream = Stream.fromIterable([1,2,3,4,5]);
    
    //첫번째 값 출력
    stream.first.then((value)=> print('first: $value'));
    //마지막 값 출력
    stream.last.then((value)=> print('last: $value'));
    //스트림 비었는지 출력
    stream.isEmpty.then((value)=> print('isEmpty: $value'));
    //스트림 길이 출력
    stream.length.then((value)=> print('length: $value'));

요약(플러터 시작, 다트를 알면..)
• Flutter는 iOS, 안드로이드용 앱을 한번에 개발할 수 있는 개발 플랫폼
• Dart의 특징
 - proteced처럼 하려면 변수와 함수명 앞에 언드스코어( _ ) 추가
 - async-await-Future를 이용한 비동기 지원
 - 통신 과정에서 순서보장이 필요하면, async*-yield를 이용한 stream(스트림)