| 작성자 | 임혜진 |
| 일 시 | 2024. 3. 7 (목) 18:00 ~ 21:00 |
| 장 소 | 복지관 b128-1호 |
| 참가자 명단 | 임혜진, 이재영, 성창민, 김명원, 장원준 |
| 사진 |  |
본 글은 'Do it! 플러터 앱 프로그래밍'이라는 책으로 공부하며 정리한 내용입니다.
플러터(Flutter)는 다트(Dart)라는 프로그래밍 언어로 개발되었다. 플러터가 구글이 개발한 크로스 플랫폼 프레임워크인만큼 구글에서 개발한 프로그래밍 언어인 다트를 사용한다. 다트라는 새로운 언어를 배워야 하는 만큼 플러터를 공부하는데에 있어서 진입 장벽이 되기도 하지만, 다트는 자바와 비슷하기 때문에 다른 언어를 공부해 본 사람이라면 상대적으로는 쉽게 배울 수 있다.
다트 언어의 9가지 특징은 아래와 같다.
1. 다트는 main() 함수로 시작한다.
2. 다트는 어디에서나 변수를 선언하고 사용할 수 있다.
3. 다트에서는 모든 변수가 객체이다. 모든 객체는 Object 클래스를 상속받는다.
4. 다트는 자료형이 엄격한 언어이다. 따라서 여러 자료형을 허용하려면 dynamic 타입을 이용할 수 있다.
5. 다트는 제네릭 타입을 이용해 개발할 수 있다.
6. 외부로 노출하고 싶지 않은 변수나 함수는 이름 앞에 언더스코어(_)를 이용해 표시할 수 있다.
7. 변수나 함수의 시작은 언더스코어 또는 문자로 시작해야 한다.
8. 다트는 삼항연산자를 사용할 수 있다.
9. 다트는 Null Safety를 지원한다.
다트의 비동기 처리 방식에 대해서도 알아보자.
비동기(ansynchronous)란 언제 끝날지 모르는 작업을 기다리지 않고 다음 작업을 처리하게 하는 것을 말한다.
위 그림에서 오른쪽은 비동기처리 방식, 왼쪽은 동기처리 방식이다.
오른쪽처럼 동기로만 처리하는 경우, 시간이 오래 걸리게 된다. Proccess A에서 Process B에 요청을 보낸 후 Process A는 B의 응답을 기다리는 동안 아무것도 하지 않고 대기 중인 것을 확인할 수 있다. 하지만 왼쪽처럼 비동기로 처리하는 경우, Process B의 응답을 기다리지 않고 바로 다음 작업을 처리한다. Process A의 일을 하고 있다가 Process B의 응답을 받으면 그에 관련한 작업을 다시 진행한다. 비동기 처리 방식은 이러한 원리를 통해 총 처리시간을 줄인다.
다트에서 비동기 처리를 구현하기 위해서는 async와 await 키워드를 사용한다.
먼저 코드를 통해 비동기처리를 이해해보자. 아래의 코드에서는 어떻게 출력될까?
void main() {
print('start process');
FirstFunction();
print('end process');
}
Future FirstFunction() async {
var myNum = await SecondFunction();
print(myNum);
}
int SecondFunction() {
return 94;
}
main 함수 내부에서 순차적으로 실행된다면 출력값은 start process, 94, end process 가 줄마다 출력되어야 할 것 같다.
하지만 실제 실행 결과는 아래와 같다.
왜 가장 마지막 코드인 end process가 먼저 실행되었을까?
다트의 비동기처리 때문이다.
FirstFunction()을 보면 다른 함수들과 다르게 Future과 async 키워드가 붙어있다. 이는 FirstFunction() 함수를 비동기로 만들겠다는 의미이다. 즉 FirstFuction() 함수 안에 await가 붙은 함수를 따로 처리한 다음 그 결과는 Future 클래스에 저장해 둘 테니, 먼저 FirstFunction() 함수를 호출한 main() 함수의 나머지 코드를 모두 실행하라는 의미이다. 따라서 FisrtFunction() 함수가 비동기로 따로 처리될 동안(SecondFunction() 함수를 호출해 myNum 변수에 저장하고 출력할 동안), main() 함수 안의 남은 작업인 'end process'가 먼저 출력되는 것이다.
이렇게 하여 지연이 발생하는 동안 애플리케이션이 멈춰 있지 않고 다른 동작을 하게 할 수 있다.
또한 비동기 함수가 반환하는 값을 처리하려면 then() 함수를 이용한다. 비동기 함수가 작업을 완료한 다음 그 값을 반환하게 하고 싶다면, await 키워드를 붙여놓은 함수 뒤에 then() 함수를 붙인다.
이를 활용한 코드를 보자.
void main() async {
print('start process');
await FirstFunction().then((value) => {print(value)});
print('end process');
}
Future FirstFunction() async {
var myNum = await SecondFunction();
return myNum;
}
int SecondFunction() {
return 94;
}
then 함수를 이용해 value 즉, myNum의 값을 출력할 수 있다. 그렇다면 실행 결과 출력값은 어떻게 될까?
위 이미지처럼 start process, 94, end process 가 한 줄씩 출력된다.
그 이유는 main() 함수도 async 키워드가 붙은 비동기 함수이기 때문이다. 비동기 함수 안에 await 키워드가 붙은 함수를 호출하면, 호출한 쪽(main())에서는 프로세스가 끝날 때까지 기다려야 한다. 따라서 'end process'를 출력하는 코드가 먼저 실행되지 않고, 그 윗줄의 코드 실행이 끝날 때까지 기다린 것이다.
모각코를 통해 다같이 공부하고 내용을 정리할 수 있는 기회가 되어 좋았다. 앞으로도 꾸준히 블로깅을 하고 싶다.