M1 Mac Flutter 앱 만들어보기(feat. homebrew)

Cross Platform Dev(IOS, Android) - Flutter의 장점

 

• Flutter는 실제 Native Code로 컴파일하며 크롬이 사용하는 렌더링 엔진(스키아-Skia)을 사용하므로 실행 시 다트를 변환하지 않는다. 즉 사용자의 디바이스에서 플러터 앱을 실행하면 성능이나 생산성이 저하되지 않는다
• Flutter는 JavaScript가 아닌 디버깅이 용이하고 컴파일 타임이 빠르다

brew 설치는 생략

[brew로 설치를 하지 않으면 bash shell 실행 PATH를 등록해줘야 하기때문에 귀찮다]

윈도우의 PATH 설정과 비슷한 개념이다. 리눅스나 맥도 터미널 전역에서 명령어를 입력해서 실행하려면 bin 폴더를 경로로 잡아줘야 한다 - 기본G식

brew install flutter

난 이전에 다트를 설치한 적이 있기 때문에 already ~~ /opt/homebrew/bin/dart ~~ 에러가 났다

그래서 터미널로 경로를 이동해서 open . 으로 finder를 열고 파일을 지워주고

다시 brew install flutter를 실행했다

초보자분들은 터미널에 뜨는 에러 메세지를 잘 살펴보길 바란다

나와는 다 같은 에러메세지를 겪지는 않을테니…

Success, Successfully 등등이 나와서 설치가 완료되었다면 터미널에 명령어를 입력해보자

flutter

command not found가 아닌 아래의 그림이 나오면 잘 설치가 되었다

flutter 개발을 하기 위해선 설치해야 될 툴들이 많다

내 컴퓨터에 설치되지 않은 툴들을 알아보자

flutter doctor

설치하지 않은 경우라면 초록색 체크표시가 아닌 ! 로 경고를 알려준다

필수로 설치해야될 목록들은

- Chrome
- Android Studio
- Vs Code
- Xcode

인데… Mac Update를 한번이라도 해본 분들이라면, 가끔 Xcode를 업데이트 안해준다면 개발툴이 먹통될때가 있다(Git 등등)

그 이유로 나는 Xcode를 진즉에 설치하고 업데이트 한 상태이고…

Xcode가 설치가 안된분들은 App Store에서 설치하는 것을 권장한다

VsCode는 오픈소스 Editor라서 많은 기업들에서 사용한다. 나는 젯브레인의 노예라서 VsCode를 사용하지는 않지만,, 설치를 했다

크롬은 당연히 있겠고..

안드로이드 스튜디오를 다운받자!

https://developer.android.com/studio

Download Android Studio & App Tools - Android Developers

M1은 Apple chip or Silicon chip이라고 명시된 것을 항상 다운로드 받으면 된다

intel 꺼를 다운받아도 내부적으로 rosetta가 돌겠지만, 최적화가 안되어있다고 보면 된다

 

두번째 ! 로 떠있던 Android toolchain을 해결해보자

안드로이드 스튜디오를 연다

 

More Actions -> SDK Manager 클릭

두번째 SDK Tools 탭에서

Android SDK Command-line Tools 체크 후 Apply 로 설치하자

installed라고 표시됨

flutter doctor로 확인..

아까랑은 다른 메세지가 뜬다

저기 영어로 친절하게 써 있다 - To resolve this, run: flutter doctor --android-licenses

동의사항 Y를 계속 입력하게 한다 ㅡㅡ...

다 하고, 다시 flutter doctor로 확인해보자

이제 Xcode의 코코아팟을 설치하러 가자

brew install cocoapods

이건 홈브류로 설치할래...

다 설치가 되었다면.. 마지막으로 flutter doctor로 확인해보자

너무 깔끔하게 다 설치완료~!!!!

그럼 이제 테스트 앱을 만들어보자

맥 사용자니깐 터미널로 하자

난 바탕화면 대신 문서(Document)에 프로젝트를 만들었다

cd ~/Document
flutter create counter_app # 플러터로 프로젝트 생성
cd counter_app && flutter pub get # 다트의 패키지 의존성을 가져오는 명령어

- pub get
    다트의 패키지 의존성을 가져오는 명령이다
    플러터 앱에서는 flutter 뒤에 이 command를 추가한다
    
이제 플러터를 실행하자

flutter run # 플러터 실행

이후에 MacOS로 실행시킬지, 크롬에서 실행시킬지 선택할 수 있다

아무거나 해도 상관 없다. 난 1번을 택했다

조금 기다리면 플러터 앱이 실행된다

더하기를 누르면 카운터가 증가하는 디폴트 앱이다

잠깐 위에 터미널로 돌아와서 r, R, h, d, c, q라는 명령어를 볼 수 있다

잠깐 설명하면 프론트엔드 또는 앱 개발을 처음 하는 분이 아니라면 Hot Reload라는 것을 알텐데,

소스코드에서 변경감지된 파일을 재컴파일해서 실행중인 프로그램에 반영되도록 하는 것을 말한다

맨 아래에 동작하는 포트도 확인이 가능하다

그리고 안드로이드 스튜디오를 설치한 김에 써보자고~!

기본적으로 라이센스 동의와 필수 SDK를 설치하라고 한다
체크할수있는건 다 체크하고 설치하자
그리고 New Project가 아닌, Open을 눌러서 아까 만들어준 counter_app을 열어보자
그러면 Android Studio(앞으로 AS)에서 Framework 를 감지했다고
플러터 플러그인을 설치하라고 한다
우측 하단에 뜨는 알림을 다 Yes눌러주자
그러면 다트와 플러터 플러그인이 설치된 것을 볼 수 있다

그리고 플러터 아키텍처를 탐지했다면 안드로이드 스튜디오에서 우측상단에

아까 터미널에서 봤던 MacOS에서 실행할건지, Web(Chrome)에서 실행할 것인지 선택할 수 있다

MacOS를 선택하고 저기 실행버튼을 누르자

그럼 아까 터미널에서 CLI(Command Line Interface)로 실행한것처럼 실행이 되는 것을 확인할 수 있다!

이번엔 Web으로 바꿔서 실행해본다

크롬 창에서 실행이 된 모습

또 다트언어나 플러터에 대해 적을 기회가 있다면 올리겠다