[DO it! 1인 개발로 플러터 앱 만들기] 1장 - 플러터와 다트 기초 다지기

01 플러터 준비하기

01-1 플러터에 주목하는 이유

플러터란?

 플러터는 구글이 개발한 크로스 플랫폼 프레임워크로, 오픈 소스로 제공한다. 

 

플러터의 장점은?

 1. 높은 개발 효율

    플러터를 이용해 코드를 작성하면 안드로이드와 ios 모바일 앱 모두 한 번에 개발할 수 있어 효율적이다.

플러터로 개발한 앱은 어떤 운영체제에서도 똑같은 UI/UX 를 제공한다. 또한 플러터의 핫 리로드 기능 덕분에

소스를 수정한 후 번거러운 빌드 과정 없이 화면에 수정한 결과를 바로 표현하므로 개발 시간을 줄일 수 있다.

 

2.역동적이고 유연한 UI

   역동적이고 유연한 UI는 플러터의 큰 장점이다. 플러터는 다양한 위젯을 제공하므로 사용자 맞춤형 앱을 쉽게 만들 수 있다. 

 위젯이란 UI를 선언하고 구성하는 방법이다. 위젯은 현재 구성과 상태에 따라 뷰에서 어떻게 보일지를 설명한다. 상태가 바뀌면 위젯은 설명을 다시 작성하고 프레임워크는 이전 설명과 차이를 비교하여 다음 상태로 전환하는 데 필요한 최소 변경 사항을 결정한다. 플러터의 위젯을 활용하면 ios에서 구글의 머티리얼 디자인을 적용한 앱을 만들거나, 반대로 안드로이드에서 ios 스타일 앱을 개발할 수도 있다.

(플러터에서는 ios 스타일 위젯을 쿠퍼티노(cupertino)스타일이라고 한다.

 

3.네이티브 앱만큼 빠른 속도

    플러터는 전체 화면을 그릴 때 스키아(skia)엔진을 이용한다. 플러터 3.10 버전에서는 임펠러(impeller) 엔진을 새로 발표하여 더 빠르게 렌더링할 수 있는 환경을 만들었다. (skia는 C++로 개발한 2D 그래픽 엔진 오픈 소스로, 플러터뿐만 아니라 크롬,안드로이드,파이어폭스,리브레오피스 등 다양한 플랫폼과 제품에서 사용한다.) 이전에느 2번 할 작업을 플러터에서 한 번에 수행한다. 그래서 초당 60프레임 이상의 속도로 화면을 빠르게 변경할 수 있다. 이처럼 빠르고 자연스러운 화면 전환 덕분에 네이티브 앱과 속도 차이를 거의 느낄 수 없다.

 

 

01-2 카멜레온 같은 언어, 다트!

다트란?

  다트는 구글이 웹 프런트엔드를 구현할 목적으로 개발한 프로그래밍 언어로, 2011년 10월에 공개되었다. 다트는 마치 주변 환경에 따라 색이 바뀌는 카멜레온처럼 서버, 웹 앱, 모바일 앱 등을 만들 때 다양하게 이용할 수 있다.

 

다트 언어의 10가지 특징

다트는 다른 언어와 비교해 볼 때 다음 10가지 특징이 있다.

 

1. 다트는 main()함수로 시작한다.

printInteger(int aNumber){
	print('The number is $aNuber.'); //콘솔에 출력하기
}

//프로그램의 시작점은 main() 함수
main() {
	var number = 42; //동적 타입 변수 저장하기
    printInteger(number); //함수 호출하기
}

The number is 42.

 

main() 함수 내용을 살펴보면 먼저 number라는 이름의 변수 하나를 선언하고 숫자 42를 넣었다. 이때 var 키워드는 자료형을 특정하지 않고 변수를 선언할 때 사용한다. 자료형을 정하고 싶다면 int,String,double 등 다트가 제공하는 자료형으로 선언한다.

 

그리고 number 변수를 인수로 printInteger()함수를 호출한다. 이 함수는 int형 변수를 매개변수로 받아서 콘솔 화면에 출력하는 사용자 정의 함수이다. 콘솔 화면에 출력할 때는 다트 내장 함수인 print()를 사용했다. 다트에서 문자열을 표현할 때는 큰따옴표나 작은따옴표를 이용하는데, 이때 따옴표 안에 $(표현식)과 같은 형태로 사용하면 표현식에서 변수를 직접 넣을 수 있다.

 

2.다트는 어디에서나 변수를 선언하고 사용할 수 있다.

3.다트에서 모든 변수는 객체이므로 Object 클래스를 상속한다.

4.다트는 자료형이 엄격한 언어이다.

5.다트는 제네릭 타입을 이용해 개발할 수 있다.

6.다트는 public, protected 같은 키워드가 없다.

7.다트에서 변수나 함수는 밑줄(_)이나 영문자로 시작하고, 숫자를 포함할 수 있다.

 

8.다트는 삼항 연산자를 사용할 수 있다.

var visibility = isPublic ? 'public' : 'private';
String playerName(String name) => name ?? 'Guest';

다음 코드에서 첫 번째 줄을 보면 isPublic이 참이면, 'public'을 , 아니면 'private'를 반환하여 visibility에 저장한다. 두 번쨰 줄은 매개변수로 전달받은 name이 null이면 'Guest'를 아니면 매개변수로 전달받은 값을 그대로 반환한다.

 

9.다트는 널 안정성(null saftely)을 지원한다.

 

널 안정성이란?

널 안전성이란 변수를 선언할 때 사용하는 기능으로, 컴파일하기 전에 널 예외를 확인하여 널 오류가 발생하지 않도록 합니다. 다트 2.0 버전에 새롭게 추가된 이 기능을 이용하면 컴파일하기 전에 널 예외 (null exception)을 알 수 있으므로 널 오류가 발생하지 않도록 작업할 수 있다. 예릘 들어 자료형 다음에 ?를 붙이면 널(null)이 가능하고, 반대로 ?를 붙이지 않으면 널이 불가능하다. 그리고 식 다음에 !를 붙여 널이 아님을 직접 나타낼 수 있다.

int? couldReturnNullButDoesnt() => -3; //null을 넣을 수 있음

void main() {
	int? couldBeNullButInst = 1; //null로 변경할 수 있음
    List<int?> listThatCouldHoldNulls = [2, null, 4]; //List의 int에 null 포함 가능
    List<int?> nullsList; //List 자체가 null일 수 있음
    int a = couldBeNullButInst; //null을 넣으면 오류
    int b = listThatCouldHoldNulls.first; //int b는 ?가 없으므로 오류
    int b = listThatCouldHoldNulls.first!; //null이 아님을 직접 표시
    int c = couldReturnNullButDoesnt().abs(); //null일 수도 있으므로 abs()에서 오류
    int c = couldReturnNullButDoesnt()!.abs //null이 아님을 직접 표시
    print('a is $a. ');
    print('b is $b. ');
    print('c is $c. ');

}

 

널 안정성을 사용하는 이유는 프로그램을 실행할 때 널 예외가 발생하면 도중에 중지하는데 이를 코드 단계에서 구분하여 작성할 수 있도록 하기 위해서 이다. 이런 이유로 최근에는 널 안정성을 제공하는 프로그래밍 언어가 많다.

 

10.다트는 비동기 처리 방식을 지원한다.

 다트 언어는 비동기 처리 방식을 지원한다. 

 비동기란?

  비동기란 언제 끝날 지 모르는 작업을 기다리지 않고 다음 작업을 처리하게 하는 것을 의미한다. 비동기를 지원하지 않고 동기 방식으로만 처리한다면 어떤 작업을 하는데 시간이 오래 걸릴 경우 사용자는 실행이 멈춘 것으로 생각하고 프로그램을 종류할 수 있다. 일반적으로 네트워크에서 데이터를 가져오거나 데이터베이스 쓰기, 파일 읽기 등의 작업은 상황에 따라 언제 끝날지 알 수 없으므로 비동기로 처리한다. 다음 첫 번째 그림은 작업을 순서대로 처리하는 방식을, 두 번째 그림은 어떤 작업이 끝나기를 기다리지 않고 다른 작업을 처리하는 비동기식 방식을 나타낸 것이다.

 

 

다트는 async와 await 키워드를 이용해 비동기 처리를 구현한다. 먼저 함수 본문 앞에 async 키워드를 붙인 다음, 언제 끝날지 모르는 작업을 await 키워드로 지정한다. 이때 값을 여러 개 반환한다면 Future 클래스를 값이 연속적이라면 Stream 클래스를 활용한다. 다음 코드는 비동기 처리 방식을 구현한다.

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

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

int lookUpVersion() {
	return 12;
}

end process
12

 

먼저 checkVersion() 함수를 보면 이름 앞뒤로 Future의 async가 붙었다. 이렇게 하면 checkVersion()함수를 비동기로 동작하도록 처리하겠다는 의미이다. 즉 checkVersion()함수 안에 await가 붙은 함수를 따로 처리해서 그 결과를 Future 클래스에 저장해 둘 테니 먼저 checkVersion()함수를 호출한 main() 함수의 나머지 코드를 모두 실행하라는 의미이다.