이번에 좋은 기회가 생겨서 드디어 고대하던 flutter를 공부하게 되었다.
flutter는 하이브리드 앱 개발을 위한 SDK(Software Development Kit)로, 기존 네이티브 방식으로 각각 Android, iOS, web 개발을 나누어서 진행하던 불편함을 flutter 하나로 해결할 수 있다는 큰 장점이 있다.
여기서 네이티브 앱, 하이브리드 웹, PWA 웹의 차이점을 간단히 정리하자면 다음과 같다.
네이티브(Native) 앱이란?
Android 또는 iOS 같은 어떤 구체적인 플랫폼만을 위해 만들어진 어플리케이션
대표적으로 Android는 Java, Kotlin을 이용하여 개발, iOS는 Swift를 이용해서 네이티브 앱을 개발할 수 있음
장점: 네이티브 기능 사용 가능, 성능 면에서 안정적
하이브리드(Hybrid) 웹이란?
네이티브 앱과 웹 앱을 결합한 것으로, 따로 개발을 하지 않아도 다양한 플랫폼에서 사용이 가능함
특정 네이티브 기능(블루투스나 GPS 모듈 등)을 다루는 데 문제나 제약이 있을 수도 있음
장점: 인건비 절약 가능, 빠른 배포 가능, 다양한 플랫폼 지원
프로그래시브 웹 앱(Progressive Web App)이란?
하이브리드 앱과 비슷하지만 특별한 다운로드, 설치 과정 없이 네이티브 앱처럼 사용할 수 있는 특징을 가짐
리액트, 앵귤러가 이에 속함
장점: https를 통해 배포되므로 안정적, 검색 엔진을 통해 접근 가능, 다양한 플랫폼에서 접근 가능
flutter는 전용 언어인 Dart를 사용해야 한다.
낯선 언어를 또 공부해야 하나 부담감이 생겼지만, 문법은 Java, Python과 유사하다!
IDE는 보통 안드로이드 스튜디오를 많이 사용하나, 난 이번에 vscode 기준으로 환경설정을 해 보려고 한다.
준비
- vscode 설치
- jdk 설치(최소 1.8 이상) 및 환경변수 설정
- 안드로이드 SDK 설치(안드로이드 스튜디오 설치 후 SDK Manager에서 설치)
절차
1. flutter SDK 설치
아래 git repository에서 다운받을 수 있다.
git이 설치되어 있다면 아래 명령어로 다운받자!
다운받은 sdk는 적절한 장소(난 c드라이브 아래에 따로 개발용 폴더가 있는데, 거기에 넣어줌)에 위치시킨다.
# git clone https://github.com/flutter/flutter
2. flutter 환경변수 설정
시스템 환경변수 - Path에 [SDK가 위치한 경로]/flutter/bin 형태로 추가한다.
3. cmd창을 열어서 flutter doctor 실행
위 2번에서 환경변수 설정이 잘 되었다면 cmd에서 flutter doctor를 실행할 수 있다.
처음 flutter doctor를 실행하면 아래 사진처럼 X 표시가 되어있는 경우가 있는데, 해당 X 오류들을 전부 해결해야 정상적으로 flutter 개발환경을 셋팅할 수 있다.
아래에 내가 겪은 오류와 해결 방법을 정리했다.
①
오류
Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
해결
(윈도우) 시스템 환경변수에 이름: CHROME_EXECUTABLE / 경로: 내 크롬 설치경로~\chrome.exe로 추가
(리눅스는 export CHROME_EXECUTABLE=내 크롬 설치경로~\chrome.exe 명령어 실행)
②
오류
Android toolchain - develop for Android devices (Android SDK version 30.0.3) X cmdline-tools component is missing Run `path/to/sdkmanager --install "cmdline-tools;latest"` See https://developer.android.com/studio/command-line for more details.
해결
C:\Users\사용자 이름\AppData\Local\Android\Sdk\tools\bin\sdkmanager.bat --install "cmdline-tools;latest" 혹은 C:\Users\사용자 이름\AppData\Local\Android\Sdk\cmdline-tools\latest\bin\sdkmanager.bat --install "cmdline-tools;latest" 실행
만약 해당 경로에 sdkmanager.bat 파일이 없다면 Android Studio - SDK Manager - SDK Tools로 들어가셔서 Android SDK Command-line Tools를 체크 후 다운로드하면 됩니다.
③
오류
Android license status unknown. Run `flutter doctor --android-licenses` to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.
해결
flutter doctor --android-licenses 실행
X가 써져있는 문제를 다 해결하고 다시 flutter doctor 명령어를 실행하면 다음과 같은 화면을 확인할 수 있다!
④ 'flutter'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.
→ flutter 환경변수가 올바르게 설정되지 않았습니다. 환경변수 설정을 확인해 주세요!
4. vscode 마켓플레이스에서 flutter extension 설치
flutter 검색 후 아래 익스텐션을 설치합니다.
5. flutter 프로젝트 생성
view - command palette 혹은 ctrl+shift+p를 누르고 flutter 검색 - flutter: new application project를 클릭하면 프로젝트 이름을 작성하는 팝업이 뜹니다.
프로젝트 이름 작성 후 enter를 눌러주면 flutter 프로젝트가 생성됩니다.
6. flutter 프로젝트 실행
usb 연결을 통해 직접 스마트폰에서 flutter를 실행하려면 view - command palette 혹은 ctrl+shift+p를 누르고 flutter: Select devices 로 실행하면 됩니다.
에뮬레이터를 사용하시는 경우에는 flutter: Launch Emulator 로 에뮬레이터를 실행해 줍니다.
에뮬레이터 추가는 안드로이드 스튜디오에서 하시면 됩니다.
프로젝트 실행은 F5(디버깅 모드) 혹은 ctrl+F5(노 디버깅 모드) 키를 누르면 실행할 수 있습니다.
참고로, flutter는 핫 리로드(코드 고치면 일일이 빌드를 하지 않아도 자동으로 반영)를 지원합니다.
핫 리로드 기능을 사용하시려면 디버깅을 하지 않고 실행하셔야 가능합니다!
혹시 핫 리로드 기능이 작동하지 않는다면?
Ctrl+, 키를 눌러서 설정 창을 연 뒤, flutter hot reload 검색 후 manual을 always로 변경해주면 된다.
다음 시간에는 본격적으로 flutter 문법을 익히고 pubspec 사용법, firebase 연동에 대해서 정리할 것이다!