플러터 개발 환경 구축 (Flutter Install) - MacOS

 

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

 

 

여기까지~