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

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

 

flutter

 

아직까지는 주로 안드로이드와 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' 메뉴를 실행하자.

Preference - Settings

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

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

Edit in settings.json

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

organization

 

2. New Project

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

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

  - 'Flutter: New Project' 선택

Flutter: New Project

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

Application

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

select folder

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

project name

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

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

build.gradle

 

 

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

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

 

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

 

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

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

 

반응형

라떼는 ... Python 버전이 2.x 인지 아니면 3.x 인지만 따지면 됐었는데,

요즘은 ... 3.6 이어도 충분한지 3.7 또는 3.8 호환인지도 따져야 하는 (더러운까지는 아니고) 아주 머리아픈 세상이다.

 

그래서 지금까지는 Ubuntu 환경으로 구축해놓은 개발PC 에서

기존에 JDK에서 사용하던 방식처럼 Python도 alternative 방식으로 원하는 버전을 선택해서 사용했었다.

 

  - https://www.whatwant.com/entry/update-alternatives-여러-버전의-패키지-관리하기

 

 

가볍게 사용하기에는 alternative 방식도 나름 괜찮은 방법이다.

하지만, Python에서는 JDK에서는 만나지 못했던 문제 상황이 발생한다.

작성한 프로그램에서 필요로 하는 패키지들이 있고, 서로간의 dependency까지 신경을 써줘야 한다.

 

패키지 관리에 대한 것은 다음 기회에 살펴보기로 하고,

지금은 일단 여러 버전의 Python을 편하게 사용할 수 있는 방법에 대해서 알아보도록 하겠다.

 

 

[ pyenv ]

  - https://github.com/pyenv/pyenv

 

pyenv

 

왜 이제서야 이 아이를 알게 되었을까!?

진작 알았더라면 훨씬 편하게 살 수 있었을 텐데...

 

이하 과정은 `Ubuntu 18.04` 운영체제에서 `zsh` 쉘환경을 기준으로 진행했다.

일부 차이가 나는 부분에 대해서는 pyenv 사이트에 나오는 가이드를 참고하면 된다.

 

 

1. Environment

 

Ubuntu 패키지로 제공되는 Python2, Python3 모두 설치되어 있으며,

버전 관리를 위해 update-alternatives 설정이 되어 있다.

❯ python --version
Python 3.6.9

❯ sudo update-alternatives --list python

/usr/bin/python2
/usr/bin/python3

❯ sudo update-alternatives --list pip   
/usr/bin/pip3

 

 

2. Prerequisites

 

① remove alternative

alternative가 설정된 상태에서 pyenv는 정상 동작하지 않기에 설정을 지워야 한다.

❯ sudo update-alternatives --remove python /usr/bin/python

❯ sudo update-alternatives --remove pip /usr/bin/pip

 

② install the Python build dependencies

Python build를 위해 필요한 의존성 패키지들을 설치해주자. 좀 많이 설치된다.

❯ sudo apt install make build-essential libssl-dev zlib1g-dev \ 
                        libbz2-dev libreadline-dev libsqlite3-dev wget curl llvm \
                        libncursesw5-dev xz-utils tk-dev libxml2-dev libxmlsec1-dev libffi-dev liblzma-dev

 

 

3. Basic GitHub Checkout

 

여러 설치 방법 중에서 가장 깔끔하고 무난한 방법이라서 선택했다.

 

① git clone

❯ git clone https://github.com/pyenv/pyenv.git ~/.pyenv

 

② build

꼭 해야하는 과정은 아니지만, 성능 향상을 위해서 추천한다.

❯ cd ~/.pyenv && src/configure && make -C src
make: 디렉터리 '/home/chani/.pyenv/src' 들어감
gcc -fPIC     -c -o realpath.o realpath.c
gcc -shared -Wl,-soname,../libexec/pyenv-realpath.dylib  -o ../libexec/pyenv-realpath.dylib realpath.o 
make: 디렉터리 '/home/chani/.pyenv/src' 나감

 

③ Configure your shell's environment for Pyenv

여기에서는 zsh 환경에 대해서만 진행한다. 다른 쉘을 사용한다면 GitHub 사이트 방문해서 참고하면 되겠다.

아! MacOS의 zsh 환경에서는 .profile 부문만 빼고 진행하면 된다.

> echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zprofile
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zprofile
echo 'eval "$(pyenv init --path)"' >> ~/.zprofile

echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.profile
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.profile
echo 'eval "$(pyenv init --path)"' >> ~/.profile

echo 'eval "$(pyenv init -)"' >> ~/.zshrc

 

④ 재로그인 / 재부팅

로그아웃 후에 다시 로그인 하거나, 재부팅을 해야 이하 과정이 제대로 진행된다.

 

⑤ 확인

제대로 설치되었는지 확인해보자. 아래 결과가 나오지 않으면 위의 과정을 다시 한 번 점검해보기 바란다.

❯ pyenv versions
* system (set by /home/chani/.pyenv/version)

 

 

4. Python Install

 

이제 새로운 버전의 Python을 설치해보자.

현재 다운로드 받을 수 있는 버전들을 확인하고 싶으면 아래 사이트를 참고하기 바란다.

  - https://www.python.org/downloads/

 

① Python Install

❯ pyenv install 3.8.12
Downloading Python-3.8.12.tar.xz...
-> https://www.python.org/ftp/python/3.8.12/Python-3.8.12.tar.xz
Installing Python-3.8.12...
Installed Python-3.8.12 to /home/chani/.pyenv/versions/3.8.12

 

② 확인

방금 설치한 3.8.12 버전을 볼 수 있다. (하지만 현재 설정된 것은 system에 설치된 버전이다)

❯ pyenv versions
* system (set by /home/chani/.pyenv/version)
  3.8.12

 

③ 추가

3.9 버전도 추가로 설치해보자.

❯ pyenv install 3.9.10
Downloading Python-3.9.10.tar.xz...
-> https://www.python.org/ftp/python/3.9.10/Python-3.9.10.tar.xz
Installing Python-3.9.10...
Installed Python-3.9.10 to /home/chani/.pyenv/versions/3.9.10

❯ pyenv versions
* system (set by /home/chani/.pyenv/version)
  3.8.12
  3.9.10

 

 

5. command

 

전체 명령어에 대한 가이드는 아래 링크를 참조하기 바란다.

  - https://github.com/pyenv/pyenv/blob/master/COMMANDS.md

 

주로 사용할 것은 local / global / shell 이지 않을까 싶다.

❯ cd /srv/workspace/pyenv-test

❯ pyenv versions
  system
* 3.8.12 (set by /home/chani/.pyenv/version)
  3.9.10

❯ ls -al
합계 8
drwxrwxr-x 2 chani chani 4096  3월 14 23:01 .
drwxr-xr-x 4 chani chani 4096  3월 14 23:00 ..

❯ pyenv local 3.9.10

❯ ls -al
합계 12
drwxrwxr-x 2 chani chani 4096  3월 14 23:03 .
drwxr-xr-x 4 chani chani 4096  3월 14 23:00 ..
-rw-rw-r-- 1 chani chani    7  3월 14 23:03 .python-version

❯ pyenv versions
  system
  3.8.12
* 3.9.10 (set by /srv/workspace/pyenv-test/.python-version)

❯ pyenv local --unset

❯ ls -al
합계 8
drwxrwxr-x 2 chani chani 4096  3월 14 23:04 .
drwxr-xr-x 4 chani chani 4096  3월 14 23:00 ..

❯ python --version
Python 3.8.12

❯ pyenv versions
  system
* 3.8.12 (set by /home/chani/.pyenv/version)
  3.9.10

 

이제 Python 버전의 괴로움에서 벗어나자~~~!!!

 

반응형

 

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

Android Studio Download

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

Agree

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

compatibility

 

 

2. Xcode

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

  - 오래 걸린다.

Xcode

 

3. Chrome

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

 

4. VSCode

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

 

5. Flutter SDK

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

flutter sdk

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

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

Rosseta 2

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

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

flutter sdk path

 

6. VSCode Extension - Flutter

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

Flutter Extension

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

Dart Extension

 

 

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

이제는 환경 설정을 하자.

 

 

7. PATH 설정

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

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

edit PATH

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

source ~/.zshrc

 

8. Run Flutter Doctor

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

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

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

Run Flutter Doctor

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

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

Set Flutter SDK folder

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

flutter doctor

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

doctor issues

 

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

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

android-licenses errors

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

    . 일단 Android Studio를 실행하고

    . Preferences 메뉴를 고르자

Android Studio

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

Android SDK command-line Tools

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

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

android-licenses

 

 

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가 없음을 확인하자

no issues

 

 

여기까지~

반응형

 

개인적인 취향으로 Windows 환경에서

개발 비스무리한 것을 하는걸 별로 좋아하지 않지만

이번에 뭔가 해볼 일이 있어서... ^^

 

일단 Python 3.6 이상의 버전 설치가 필요하니 Go! Go! (여기에선 최신 버전은 3.9.7을 설치할 예정임!)

 

 

1. Download and Install

   - 아래 경로에 접속하면 알아서 현재 운영체제에 맞는 버전을 링크해준다.

   - https://www.python.org/downloads/

   - 다운로드 받은 후, 그냥 추천해주는대로 클릭 클릭 하면 설치 완료

 

 

2. PATH 설정

  - 설치가 완료되었지만, 제대로 사용하려면 PATH 설정을 해줘야 한다.

 

  ① 제어판

      - 시작 메뉴의 기어 모양 버튼을 통해 "제어판" 실행

 

   ② 고급 시스템 설정

      - 검색창에서 `고급 시스템 설정`을 타이핑 해서 나오는 결과를 클릭

 

   ③ 환경 변수

      - 속성창에서 `환경 변수` 선택

 

   ④ 시스템 변수 - PATH

      - 하단에 있는 `시스템 변수`에서 `PATH` 항목 찾으면 된다.

 

   ⑤ PATH - 새로만들기

      - `새로만들기`로 추가하면 된다.

      - 21-10-02 기준 Python 3.9.7 에서는 아래 경로였다. (2개 추가해야 한다)

      - 물론 사용자 명칭은 각자 환경에 따라서...

C:\Users\<사용자>\AppData\Local\Programs\Python\Python39\
C:\Users\<사용자>\AppData\Local\Programs\Python\Python39\Scripts

 

3. 동작 테스트

   - 잘 되었는지 테스트 해보자 ~

 

   - 시작 메뉴에서 `cmd`라고 타이핑을 한 뒤, `명령 프롬프트` 클릭

 

   - 명령어를 넣어보고 그림과 같은 결과가 나오면 성공이다.

> python --version

> pip --version

   - 위 2개 명령어만 잘되면 된다 ^^

 

반응형

 

매번 귀찮게 찾는 것이 귀찮아서 정리하고자 포스팅 해본다.

 

 

1. Python3 설치하기

$ sudo apt install python3 python3-pip

 

2. update-alternative 설정하기

$ sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 1
$ sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 2
$ sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1

 

3. select

$ sudo update-alternatives --config python
$ sudo update-alternatives --config pip

 

아~ 속 시원하다~!!

반응형


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 파일로 만들어두면 편하다.

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


반응형

+ Recent posts