머가필요해

Flutter는 Google이 출시한 Cross-Platform GUI Application Framework이다.

그냥 쉽게 말하자면, 소스코드 하나로 안드로이드, iOS, Web, Windows, macOS, Linux 어플리케이션을 만들 수 있는 것이다.

아직까지는 주로 안드로이드와 iOS 앱을 같이 만들기 위해 사용한다.

하지만, Flutter SDK만 가지고 가능한 것은 아니고,

Android Studio와 Xcode도 같이 필요하기 때문에

Windows 개발환경에서는 Xcode를 설치할 수 없어서 안드로이드 앱만 빌드 가능하고,

macOS 개발환경이어야지 안드로이드 앱과 iOS 앱을 같이 빌드 할 수 있다.

그러면 실제 코딩을 하는 IDE는 뭘 써야 할까?!

이론적으로 메모장으로 코딩을 해도 무관하지만,

IDE를 이용한 다양한 편의 기능을 위해 Android Studio 환경을 사용하는 것을 권장한다.

하지만, 왠지 쓰라는대로 쓰기에는 자존심이 상한다. (왜?)

우리의 만능 IDE 도구인 Visual Studio Code를 사용하면 안될까!?

된다 !

그것도 아주 잘 된다.

다만 몇 가지 Android Studio와 차이점이 있어서 좀 찾아보기는 해야 한다.

-----------------------------------------

Flutter 개발환경 구축하는 것은 아래 포스팅을 참고하도록 하자.

- Windows 환경에서 Flutter 설치하기 : https://www.whatwant.com/entry/Flutter-Install-Flutter-설치하기-Windows

- macOS 환경에서 Flutter 설치하기 : https://www.whatwant.com/entry/Flutter-Install-MacOS

- VSCode를 Flutter 개발환경으로 만들기 : https://www.whatwant.com/entry/Flutter-with-Visual-Studio-CodeVSCode

이번 포스팅에서 설명하고자 하는 것은 Flutter 신규 프로젝트를 생성하는 방법이다.

1. Organization 등록

  - 앱을 만들 때에는 앱의 고유 domain을 사용해야 한다.

  - 웹 주소가 반대로 되어 있는 형태로 사용된다 (예: com.whatwant.www)

    . 이 때, 'com.whatwant' 부분이 organization(또는 company) 영역이고

    . 'www' 부분이 앱의 명칭이 된다.

  - 신규 프로젝트(앱)을 생성하기에 앞서서 organization 정보를 미리 설정을 해놓지 않으면 나중에 엄청 귀찮다.

  - 'Preference - Settings' 메뉴를 실행하자.

  - 검색 필드에 'flutter create organization'을 타이핑 하면 검색된 설정 항목이 보인다.

  - 하단 링크로 보이는 'Edit in settings.json'을 클릭하자.

  - 'dart.flutterCreateOrganization' 부분에 원하는 내역으로 입력하고 저장하면 된다.

2. New Project

  - 이제 프로젝트를 생성하면 된다.

  - 'Command Palette (Command+Shift+p / Ctrl+Shift+p)'를 실행한 뒤

  - 'Flutter: New Project' 선택

  - 프로젝트 유형으로는 'Application'을 고르면 된다 (앱 개발이 아니라면, 적합한 것으로 고르면 된다)

  - 저장 위치는 프로젝트를 저장할 디렉토리가 생성될 위치를 고르면 된다 (프로젝트 디렉토리는 자동으로 생성한다)

  - 그리고, 프로젝트 이름을 지어주면 된다

  - 'android - app - build.gradle' 파일을 열어보면

     앞에서 설정한 organization 이름과 프로젝트 이름이 잘 반영되어 있는 것을 볼 수 있다.

만약에 organization 설정을 미리 해놓지 않으면 어떻게 될까?!

'com.example'과 같은 기본값으로 반영이 되었을 것이다.

나중에 앱스토어 등에 등록하고자 한다면 문제가 될 것이다.

그러면, 수정을 해줘야 할텐데... 문제는 여러 곳에 있는 내용을 찾아서 전부 변경을 해줘야 하는 불편함이 발생한다.

물론, 하면 되는데 ... 깔끔하게 미리 설정해서 반영하는 것이 보다 편하지 않을까!?

M1 맥북을 경품으로 받았다.

할아버지 맥북(2011)밖에 없었는데, 나에게도 최신 맥북이 생겼다! 앗싸!!

그런데, 새로운 나의 맥북이 오자마자 생존의 위협을 받고 있다.

Windows 노트북 2대, 맥북 2대, 안드로이드 태블릿 2대, Windows 데스크탑 1대 ... 등짝 스매싱 각이다.

마나님이 새로 생긴 맥북을 어디에 쓸거냐며 스마트폰에서 당근 마켓을 살펴보고 있다.

새로 생긴 맥북에 쓰임새를 주지 않으면 팔려가게 생겼다.

flutter 개발 환경을 어서빨리 구축해서

개발 용도로 아주 중요한 아이라고, 꼭 필요한 아이라고 증명해야겠다.

Flutter 개발환경 구축을 위해서는 설치해야할 것들이 많다.

1. Android Studio

2. Xcode

3. Chrome

4. VSCode

5. Flutter SDK

6. VSCode Extension - Flutter

한 번만 고생하면 된다. 하나씩 진행해보자.

1. Android Studio

  - https://developer.android.com/studio

  - 우리 M1은 `Apple chip`을 선택해야 한다.

  - 그런데, 아직은 호환성이 완벽하지 않은 것 같지만 그래도 나아지겠지 ...

2. Xcode

  - `App Store`를 통해서 설치하면 된다.

  - 오래 걸린다.

3. Chrome

  - 사실 M1 처음 셋팅할 때 바로 설치를 해서 별도의 스냅샷이 없다 ^^

4. VSCode

  - 마찬가지로 처음 셋팅할 때 바로 설치를 해서 ...

5. Flutter SDK

  - https://docs.flutter.dev/get-started/install/macos

  - 우리 M1은 Rossetta 2 사용이 가능해야 한단다.

    . https://github.com/flutter/flutter/wiki/Developing-with-Flutter-on-Apple-Silicon

  - 다운로드 받은 후에 압축 풀고 임의의 디렉토리에 위치 시키면 된다.

    . 필자는 `$HOME/install/flutter` 경로에 위치 시켰다.

6. VSCode Extension - Flutter

  - VSCode에서 Flutter Extension을 설치하자.

  - Flutter Extension만 설치해도 Dart Extension은 자동으로 같이 설치 된다.

많은 것들을 설치하느라 고생했다.

이제는 환경 설정을 하자.

7. PATH 설정

  - 필자는 ZSH을 사용하기에 `~/.zshrc` 파일을 수정했다.

  - 앞에서 설치한 `Flutter SDK`의 `/bin` 디렉토리를 추가해주면 된다.

  - 추가한 경로를 로딩시키기 위해 `source ~/.zshrc` 실행하자

8. Run Flutter Doctor

  - Flutter가 잘 설치되어있는지 점검을 해주는 doctor를 실행해보자

    . `Shift+Command+P` 단축키로 Pallete를 실행하자

    . `Flutter: Run Flutter Doctor`를 선택해서 실행하면 된다. (몇 글자 치면 추천 뜬다!)

  - SDK 경로를 못찾겠다고 나오면 경로 찾아서 Set 해주면 된다.

    . 여기에서는 `~/install/flutter/bin` 경로로 해주면 된다.

  - OUTPUT 영역에 doctor 실행 과정이 나온다.

  - Android toolchain 부분과 Xcode 부분에서 issue가 있다고 알려준다

9. Android Licenses (+ Android SDK command-line Tools)

  - `flutter doctor --android-licenses`를 실행하면 되는데, 아래와 같이 에러메시지가 나올 수 있다.

  - `Android SDK command-line Tools`를 설치해야 한다.

    . 일단 Android Studio를 실행하고

    . Preferences 메뉴를 고르자

    . Android SDK - SDK Tools 메뉴에서 `Android SDK command-line Tools`를 체크하고 Apply 하면 된다.

  - 이제 다시 `flutter doctor --android-licenses`를 터미널에서 실행하면 된다.

    . Accept에서 `y`를 타이핑하면 된다.

10. Xcode (+ cocoapods)

  - Xcode 관련해서 issues들을 해결해야 하는데, 캡쳐해놓은 것들이 날라가서 그냥 텍스트로 공유하겠다.

  - `cocoapods` 설치는 다음과 같이 하면 된다.

$ sudo gem install cocoapods -n /usr/local/bin

$ pod setup

  - 그리고 아래 것들도 마저 실행해보자.

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

$ sudo xcodebuild -runFirstLaunch

11. 최종 확인

  - 다시 flutter doctor를 실행해서 issues가 없음을 확인하자

여기까지~

Flutter로 인증을 구현하려고 하는데,

각종 Social Service를 통해 가입을 할 수 있도록 하려면 왠지 힘들것 같다.

그런데, Firebase를 이용하면

이 부분을 손쉽게 할 수 있다고 해서 한 번 알아보고자 한다.

1. Flutter Project 생성

   - 기본 환경 구축은 아래 링크를 통해서 진행했다고 가정하고...

      - Flutter 설치 : https://www.whatwant.com/entry/Flutter-Install-Flutter-설치하기-Windows

      - Flutter with VSCode : https://www.whatwant.com/entry/Flutter-with-Visual-Studio-CodeVSCode

   - Flutter로 로그인 페이지를 꾸밀 프로젝트를 하나 생성하자.

   - 이름 정해주고, 위치 잡아주면 열심히 기본 프로젝트 생성된다.

   - 일단 여기까지만 해놓고... Firebase로 넘어가자.

2. Firebase Project 생성

   - 가입/로그인은... Google 계정으로 가뿐하게 하시면 되고...

   - 시작하고 프로젝트 만들기에 들어가보자.

   - 이름은 마음에 드는 것으로...

   - 당장은 애널리틱스에 대해서 고려하지 않을거지만, 왠지 안하면 섭섭하니...

   - 아직 뭔지 모르겠지만... 뭐 그냥 해보자.

   - 이제 마무리다~ 고고!! 고고!!

   - 그러면, 예쁜 페이지가 짠~!!

3. Android App에 Firebase 추가

   - Flutter와 Firebase 사이에 연결고리를 추가하는 과정이다.

   - 위 홈페이지 프로젝트 이름 밑에 동그란 아이콘 3개가 보일 것이다. 가운데에 있는 안드로이드를 클릭하자

   - 응?! 패키지 이름 정해준 적 없는데?!

   - command-line으로 Flutter 프로젝트를 생성했으면 명시했겠지만, VSCode에서는 그냥 이름으로 생성했는데...

   - 찾아보자.

   - 아까 생성한 Project에서 android - app - src - main 경로에 있는 "AndroidManifest,xml" 파일을 보면 package 이름이 보인다.

   - 패키지 이름은 그렇게 넣어주면 되고... 닉네임은 그냥 마음대로 넣으면 되고... 어?! 인증서?!

   - 물음표에 마우스 올리면 위와 같이 설명이 나온다. 참조할 페이지 클릭!

   - 개발용으로 쓰이는 key값은 이미 있기에 그걸로 불러오면 된다.

   - 위와 같이 사용자 계정 폴더에 있는 .android 디렉토리 밑에 보면 위와 같이 파일들이 주르륵 있는 것이 보일 것이다.

   - PowerShell 실행해서 위의 홈페이지에 있는 명령어를 실행해야 하는데...

   - 아뿔사~ JDK가 없다. ㅋㅋㅋ

   - OpenJDK 접속

      - https://github.com/ojdkbuild/ojdkbuild

   - 일단 LTS 버전 중에서 11 버전의 msi 다운로드 받아서 설치했다.

   - PowerShell 재시작 하고...

   - 잘된다 !!!

> keytool -list -v -alias androiddebugkey -keystore C:\Users\xxx\.android\debug.keystore

   - 비밀번호를 갑자기 물어본다고 당황하지 말고... 위의 홈페이지에 친절하게 쓰여져있다. "android"

   - 우리에게 필요한 값은? SHA1 값 !!!

   - 드디어 넣을 것 다 넣었다... 앱 등록 !!!

   - json 파일 다운로드 받아서 쩌~기 위치에 넣으란다.

   - android - app 밑에다가 넣어주면 된다.

   - 실제로 잘 들어가 있는 모습을 볼 수 있다.

   - 이제 다음~

   - 위 화면에서 녹색으로 보이는 부분을 복사해서 build.gradle 파일에 붙여넣기 하면 된다.

   - 주의할 점은 android 경로 바로 밑에 있는 build.gradle 파일의 dependencies 부분에 넣어줘야 한다.

   - 밑에 있는 것들도 마찬가지로 진행하면 된다.

   - 주의할 점은 밑에 있는 것들은 android - app 밑에 있는 build.gradle에 반영해야 된다는 점!!!

   - 첫번째 녹색 라인은 이미 반영되어 있으니, 2/3번째 녹색 라인만 위치에 맞게 넣어주면 된다.

   - 알맞게~

   - Sync는 뭐 넘어가고 이제 다음 단계로 가자!

   - 어?! 확인을 해야 한단다.

   - 놀고 있는 폰을 연결하고... (당연히 개발자 모드 열어서 USB 디버그 모드 설정해서)

   - flutter: select device 열어서

   - 연결한 스마트폰 설정하고

   - 왼쪽 4번째 아이콘 클릭해서... Run and Debug 눌러주면 된다.

   - false 뜬다고 당황하지 말고... 좀 기다리면 된다.

   - 그러면 위와 같이 수고했다는 메시지를 볼 수 있다.

에고 에고... 힘들었다.

기본적인 Flutter 개발환경은 아래 글을 통해 설치해보았다.

  - https://www.whatwant.com/entry/Flutter-Install-Flutter-설치하기-Windows

하지만, 요즘 유행인 Visual Studio Code를 이용하고픈 사람들도 있을 것이다.

이런 요구사항이 높았는지... Flutter에서도 공식적으로 가이드를 제공해주고 있다.

  - https://flutter.dev/docs/development/tools/vs-code

그래서 직접 한 번 해보았다.

1. Visual Studio Code 설치

  - https://code.visualstudio.com/

2. Install Extension

  - Flutter Extension을 설치해주면 된다.

    - 유사품에 주의하고 'Dart Code'에서 제공해주는 것을 install 하면 된다.

    - 자동으로 Dart Extension도 같이(몰래) 설치된다.

  - Restart VSCode

3. Check

  - "Ctrl+Shift+P" 또는 "View > Command Palette..." 실행해서 'flutter'를 타이핑 해보자

  - "Flutter: Run Flutter Doctor" 고르면 된다.

  - 그런데, 아래와 같이 2번째 항목에서 [!] 발견 !!!

4. Accept Android Licenses

  - 위 메시지에서 보이는바와 같이 친절하게 해결 방법도 알려 준다.

  - "View -> Terminal" 또는 "Ctrl+`", 아니면 그냥 TERMINAL 탭 선택

  - "> flutter doctor --android-licenses" 실행

    - 무조건 y 엔터

5. New Project

  - 이제 아래와 같이 Flutter Project를 생성하면 된다.

Flutter 개발환경을 만들어봤었다.

   - https://www.whatwant.com/entry/Flutter-Install-Flutter-설치하기-Windows

그런데, 개발환경 中 에뮬레이터 설치에서 어려움을 겪었었다.

필자의 PC가 AMD CPU를 사용하다보니... AMD에서도 설치가 가능하다고는 하던데... 잘 안되었다.

그래서 에뮬레이터는 포기하고, 필자의 노트8을 연결해서 테스트를 하면서 아쉬움이 있었는데,

정작 에뮬레이터를 설치해도 느려서 사용하기에 불편하다는 글을 보고는 기분이 살짝 좋아졌다(^).

Flutter 특성상 코딩을 하면서 즉시 결과를 확인할 수가 있다.

핫 리로드(Hot Reload)라는 기능인데,

개발중에 JIT 컴파일러를 사용하여 1초안에 코드를 다시 로드하고 계속 실행할 수 있다.

코드를 잘못 작성하여 에러가 발생했더라도 수정을 하면 리로딩이 되어 바로 살아난다.

이런 좋은 기능이 있기에 에뮬레이터에 대한 그리움(?)이 있던 와중...

Nox라는 정말 훌륭한 도구를 알게 되었다.

   - https://kr.bignox.com/

절대 게임 사이트가 아니다!!! ^^

다만, 안드로이드 환경에서 구동되는 게임들을 PC에서 즐기고픈 사람들에게 특화되어 있다보니...

여하튼, 다운로드 받아서 설치하자.

사용자지정 부분을 보면 알겠지만, 기본 설치 경로는 D드라이브이다.

바꾸고 싶으면 바꾸면 된다.

설치 주르륵 하고... 실행하면...

스마트폰 처음 설정하듯이 구글 플레이 로그인 하면...

그런데, 지금 필요한건 태블릿이 아니라 스마트폰이다.

설정 변경이 필요하다.

오른쪽 위에 있는 기어 모양의 설정 버튼을 눌러주자.

기본설정에서 "ROOT켜기" 체크하고,

성능설정에서 해상도를 "스마트폰", "720x1280" 정도로 변경해주자.

그리고나서, 설정저장을 하면 재실행을 해주면 된다.

이렇게 만든 아이를 Flutter 개발을 위한 에뮬레이터로 사용하기 위해서는 추가 설정을 조금 더 해줘야 한다.

Nox에서 설정을 선택해보자.

바탕화면(? 홈화면?)에 있는 Tools 안에 설정이 들어있다.

제일 밑에 보이는 태블릿 정보를 선택하고,

제일 밑에 있는 빌드 번호를 막 클릭하면 위와 같은 메시지가 보이면서 결국 개발자가 되었다는 메시지가 나온다.

그리고 나서 Back 해보면,

개발자 옵션이 나온다.

클릭해서 들어가 보자.

USB 디버깅을 허용해주자.

일단, Nox의 기본적인 설정은 끝났다.

이제, 전에 설치한 Android Studio + Flutter 환경을 실행하자.

짜잔... 예쁘게 잘 보인다~~~~~ 하지만,

디바이스 목록에 Nox가 보이지 않는다.

시작 메뉴를 통해서 PowerShell을 관리자로 실행하자.

관리자 권한으로 하지 않아도 된다고 하던데...

필자는 관리자 권한으로 해야했다.

(어!? 두번째로 했을 때엔 관리자 권한이 아니어도 되었다!!!)

위와 같이 명령어를 좀 타이핑 해주면... 된다.

> cd "D:\Program Files\Nox\bin"

> .\nox_adb.exe connect 127.0.0.1:62001

그러면 이제 디바이스가 보이고, Run을 클릭하면...

Nox 화면에 개발을 하던 앱이 짠~ 하고 나타난다.

매번 연결을 위한 타이핑이 하기 싫으면, Batch 파일로 만들어두면 편하다.

뭐, 그런건 각자 알아서~ ^^

Flutter 공식 사이트는 아래와 같다.

   - https://flutter.dev/

친절하게도 한글 사이트도 있다. 비교적 고퀄리티의 한글 번역이다!!!

   - https://flutter-ko.dev/

구글링으로 선배님(?)들이 먼저 설치해본 결과를 찾아서 따라하려다가

직접 공식 사이트에 있는 설치 방법을 따라해보기로 마음먹었다.

Flutter는 Windows/macOS/Linux 환경을 모두 지원한다.

습관처럼 Linux 환경에서 설치하는 것으로 하려다가

이번에는 그냥 한 번 Windows 환경에서 설치해보기로 마음을 바꿨다.

이유는... 없다. 그냥...

1. System requirements

   - 뭐 당연히 Windows 7 SP1 이상이어야 하고  설치할 하드 공간도 400MB 이상 필요하고... 뭐, 블라블라...

   ① PowerShell 5.0 이상

      - Windows10 사용하고, 최신 업데이트를 했다고 하면 당연히 맞출 수 있는 조건일텐데...

      - 버전 확인은 아래와 같이 할 수 있다.

     - 시작 메뉴를 통해 "powershell"을 찾아서 실행한 뒤에

     - "$PSVersionTable" 명령어를 실행하면 위와 같이 version을 확인할 수 있다.

   ② Git

     - Git도 미리 설치해놓아야 한다고 한다.

     - 아래 사이트를 통해 Git for WIndows 패키지를 설치하면 된다.

        . https://git-scm.com/

     - Git Bash 실행해서 "git --version"으로 확인해보자.

2. Install Flutter SDK

   - Flutter SDK를 다운로드 받아서 설치하면 되는데... 이왕이면 Git을 이용해서 해보겠다.

   - 위 내용을 보면 알겠지만... 보통 Application을 설치하는 "C:\Program Files\" 경로는 사용하지 말란다.

   - "C:\src" 디렉토리를 만든 다음에

   - "git clone https://github.com/flutter/flutter.git -b stable" 명령어를 이용해 Flutter SDK를 받아오면 된다.

3. Set Path

   - flutter를 막 실행하기 위해 PATH를 설정해보자

   - '시스템 속성'에서 '환경 변수' 부분을 찾으면 된다.

   - '환경 변수'에서 '시스템 변수'에 있는 'Path'를 찾아서 편집을 누르면...

   - 방금 설치(? 다운로드?)한 flutter의 bin 디렉토리를 추가해주면 된다.

   - Git Bash를 종료한 뒤에 다시 실행하고, "flutter --version"을 실행해보자.

   - 뭔가 오류처럼 나오는건 git bash 에서 실행해서 그렇다.

   - PowerShell에서 실행을 하면 갑자기 뭔가를 설치하고선 version 정보를 보여준다.

4. Doctor

   - flutter를 실행하기 위한 환경이 잘 갖춰져 있는지 검사를 해주는 기능이 있다.

   - "flutter doctor"를 실행하면 검사를 하게 되는데... 이런... Android Studio가 결국은 필요하다.

5. Android Studio

   - 아래 사이트에 접속해서 Download 및 설치를 진행하자

      . https://developer.android.com/studio/index.html

   - 설치 잘하고 나면 열심히 환경 설정을 해줘야 한다.

   - Configure의 "SDK Manager"를 선택하자

   - "SDK Tools" 탭 선택 후 오른쪽 하단에 있는 "Hide ..." 체크를 해제하면 나오는 "Android SDK Tools (Obsolete)"를 설치하자

   - 나중에 스마트폰 연결을 위해 "Google USB Driver"로 설치하자.

   - 스마트폰에서는 "Developer options"와 "USB debugging"을 열어줘야 한다.

      . Note8 에서는 설정-휴대전화 정보-소프트웨어 정보-빌드 번호 (7번 이상 연타) -> 개발자 모드

      . Note8 에서는 설정-개발자 옵션 -> USB Debugging On

6. Emulator

   - 에뮬레이터를 실행하기 위한 환경 설정을 해보자.

   - Configure에서 "AVD Manager"를 선택하자.

   - 가상 디바이스를 생성하는 것이다.

   - 원하는 디바이스를 고르면 된다

   - 가상 디바이스에 설치할 Android 버전을 골라서 Download 해주면 된다.

   - 그런데, 오른쪽에 Intel HAXM이 설치 안되었다고 나오는데... 필자는 AMD이다보니 설치에 애를 먹어서...

   - 그냥 드럽고 치사해서 실제 Device 물려서 테스트하기로 했다 !!!

7. Plugin

   - Android Studio에서 Flutter를 원활하게 사용하기 위해서는 그에 맞는 plugin을 설치해야 한다.

   - Plugins 메뉴를 통해서 설치할 수 있다.

   - flutter로 검색하면 바로 나온다. 설치하자.

   - 설치가 끝나면 IDE를 재시작할거냐고 물어본다. 그에 응하자~

8. Test App

   - 잘 되는지 한 번 해보자.

   - 위 화면의 두번째 항목을 선택하자 "Start a new Flutter project"

   - Flutter Application 으로 만들어보자.

   - 두번째 항목인 Flutter SDK Path는 앞에서 설치한 아이의 경로로 잡아주면 된다.

   - 아니면 새로운 경로로 설치를 해도 된다.

   - 개인적으로 뭐가 뭔지 아직은 잘 모르겠어서... 그냥 무조건 Go! Go!

   - 스마트폰을 연결하면 위와 같이 Target으로 등장하고, Run 시키면 빌드해서 폰에 앱 설치 후 실행까지 짠~ 하고 된다.

   - "+" 버튼을 누르면 숫자가 올라간다~

간단한 줄 알았는데... 뭔가 한 참 진행을 해야했지만, 스마트폰에 뭔가 짠~하고 뜨니 기분은 좋다~!!