나의 발자취
Google Cloud Study Jam:: Flutter Development 본문
제일 처음 해보고 싶었던 것은 플러터 공부이다. 그래서 Flutter Development 튜토리얼을 따를것인데, 하나의 스터디 주제 아래에는 여러개의 랩들로 구성되어있고 이것을 다 완주하면 뱃지를 얻을 수 있다.
구글에서 제공하는 스터디를 하면, 공부할 때 필요로 할 경우 구글에서는 left pane에 그 스터디에 해당하는 credit ID들을 제공한다. 이 크레딧들은 해당 스터디에 따라 바뀐다. 이메일과 비번이 될 수도 있고, 링크가 될 수도 있고 뭐 그런 식이다. 오늘의 주제인 플러터를 공부하기 위해서는 IDE와 Live Server가 필요한가보다. 메인 페이지에 안내되는 튜토리얼대로 left pane의 개인용 크레딧을 복붙하여 쓰면서 튜토리얼을 따라가면 된다.
Getting started with Flutter Development의 학습목표는
- Flutter + Dart extensions 설치
- 초간단 Flutter web application 만들기
- hot reload feature 사용법 익히기
- web device에 코드 업데이트 테스트해보기
이다.
IDE은 VS code web 버전이다, 몇달 전에 vs code가 웹서비스를 시작하게 되었는데 알기만 알고 이것을 한번도 써보지는 않았다. 편리한것같다.
시키는대로 하면 되는데, 일단 모든 언어나 플랫폼을 처음 할 때 하는것처럼 extension에서 flutter 찾아서 설치하고, 터미널을 열어서 flutter create 프로젝트명 이런식으로 입력을 한다. 그러면 아래와 같이 생성완료되었고, 그다음 잘 생성되었는지 디렉터리로 이동 후 exit 한다.
그리고 해당 프로젝트를 열어서 코드를 좀 탐색해볼거다. 특히 ```lib/main.dart``` 과, ```pubspec.yaml``` 파일들을 잘 둘러본다.
플러터 프로젝트 실행시키기
startup_namer directory 로 가서 ```fwr``` 라고 터미널에 입력한다.
근데... mac m1 max의 문제인지 vs code web의 문제인지 모르겠지만 자꾸 터미널에서 아무 글씨도 뜨지 않는 오류가 나서 그냥 크롬에서 vs code web을 실행했더니 잘 된다.
그리고 구글에서 제공한 live server의 링크를 브라우저 탭에 복붙해서 확인한다.
그러면
오...! 모바일 화면이 잘 나타난것을 알 수 있다. 우측 하단의 플러스 버튼을 누를때마다 카운트가 되어 가운데 숫자에 반영된다.
Flutter Hot reload
플러터는 변경이 동적으로 반영되는 기능인 hot reload를 제공한다. 크로스 플랫폼이 가능하다는것이 제일 큰 장점이다.
main.dart에서 페이지 제목을 변경하고, 터미널에서 'r'을 누르면 recompile이 되면서 refresh가 된다.
이런식으로 해서 몇 분만에 튜토리얼이 끝났는데, end lab을 눌러서 수료를 하면 된다.
