플러터(Flutter) 설치하기 (With Mac Apple Silicon)

thumbnail

모바일 영역을 개발하려고…

최근 흑우집합소의 모바일 버전을 개발해야겠다고 마음 먹었다.
아직 메인 기능도 개발이 덜 되었지만…
유저를 늘리고, 사용자들이 보통 모바일을 많이 사용해서 모바일 앱이 필요해졌다.

원래 안드는 코틀린, iOS는 스위프트로 개발하려 했는데,
1인 개발이라 둘다 하기엔 너무 사이즈가 컸다.

그냥 앱만 개발하면 네이티브로 내려가서 개발해도 되지만…
현재 웹이 메인이라서 모바일까지 네이티브로 내려가면 1인으로써 감당이 안되었다.

그래서 크로스 플랫폼으로 개발하기로 했다.

react native vs flutter

리엑트 네이티브와 플러터 두 가지를 고려했는데…(사실 선택할게 저거 밖에…)
원래 리엑트를 쓰니까 리엑트 네이티브 쓸까 했는데, 플러터도 뭔가 좋아보였다.

그리고 새로운 것을 한번 써보고 싶었다.
뭐 속도나 기능 지원 등등은 내 생각엔 비슷한 것 같았다.

그래서 나는 새로운 것을 배워볼겸 플러터를 선택했다.
근데 이거 개발 끝나고 다른 모바일 개발에는 리엑트 네이티브도 한번 해보고 싶다.

설치 여정

먼저 Flutter 공식 페이지의 설치 항목에서 자신에게 맞는 OS를 설치해준다.
나는 Mac이라서 Mac으로…

img01

압축을 풀고 Fluuter 디렉토리가 뜬다.

img02

이것을 자신이 원하는 곳에 배치한다.
나는 그냥 home디렉토리에 배치했다.

그리고 환경 변수를 잡아줘야 한다.

export PATH="$PATH:`pwd`/flutter/bin"

나는 flutter 디렉토리가 있는 곳에서 위 명령어를 수행했다.

img03


그리고 나서 커맨드에 flutter를 입력해보면 아래와 같이 뜬다.

img04

일단 이렇게 뜨면 Flutter를 구동할 준비는 되었다.
다음은 시뮬레이터 부분이다.

아래의 명령어를 수행해보자.

> flutter doctor

img06

난 맥이라서 그런가 iOS쪽인 Xcode가 있었고, 이 부분에 문제가 있었다.
물론 안드로이드도…

Android

안드로이드 쪽은 해결하기 쉽다.


Android cmdline-tools component is missing

이거는 안드로이드 스튜디오를 열고 설정을 열어준다.

img07


그리고 저기에 보이는 항목처럼 이동한다.
Appearence & Behavior => System Settings => Android SDK

그리고 SDK Tools항목을 선택하고 저 항목 중 Android SDK Command-line Tools항목을 선택하고 설치해준다.

img08


Android license status unknown.

이거는 명령어를 통해서 아주 쉽게 처리할 수 있다.

> flutter doctor --android-licenses

이렇게 하면 안드로이드 쪽 문제는 끝난다.

iOS

img09

나는 이미 Xcode를 설치해둔 상태라서 다른 이슈는 없었는데 저 CocoaPods 이슈가 있었다.
저게 내가 알기론 iOS의 npm? 그런 역할을 하는걸로 아는데 저게 없어서 그랬다.

근데 여기서…난 m1을 사용한다.
그래서 저 CocoaPods 설치를 인텔 맥처럼은 설치가 불가능했다.

> brew install cocoapods

위 명령어를 수행하면 아래와 같이 아키텍쳐를 비꿔서 하라고 알려준다.

img10


> arch -arm64 brew install cocoapods

이 명령어를 하니 잘 설치가 되었다.

img11

이로써 이슈는 없고 이제 플러터를 개발할 준비는 완료되었다.

정리

뭐 기본적인거라 포스팅하기도 애매했는데 저 코코아팟 때문에 살짝 돌았다.
그래서 나중에 놋북 새로 사서 셋팅할 때 햇갈릴까봐 나를 위해 포스팅을 남겨둔다.


Written by@MHLab
로또는 흑우집합소 🎲
와인관리, 시음노트, 셀러관리는 마와셀 🥂

🫥 My Service|  📜 Contact|  💻 GitHub