mac에서 flutter 개발 환경 세팅

 
윈도우 버리고 맥에서 하겠뜸니다..
 
 
 
flutter.dev 에서 mac os 선택 -> ios 선택하면 권장 사양이랑 설치해야될 앱 나와있음 

 
그니까 앱스토어에서 xcode 설치 ㄱㄱ 좀 오래걸림
 

 
그러면 이제 저 아래 코드를 복사해서 터미널에 복붙해서 rosetta2를 설치합니다

설치했으면 이제 flutter sdk를 설치해야되는데요 기본 home에다가 flutter 폴더 압축해제 합니다

 
맥에서는 flutter sdk 위치를 지정해주려면 zshrc라는 파일을 따로 생성해야하므로 sublime text 에디터를 사용하겠음
sublime text 실행시키고 아래 코드를 복붙해주고 save 해준다

export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin"

 
[PATH]부분에는 flutter sdk 폴더 위치를 넣어주면 된다 
나는 홈에다가 넣어줬으니까 $HOME/flutter 로 지정해준다 ~~
 

 
저장할때 유의할 점은 이름은 .zshrc로 하고 위치는 내 홈 디렉토리에하는 것
그리고 .zshrc는 숨김파일이므로 파일을 확인하려면 shift+cmd+. 단축키 사용하면 됨
 
여기까지 하면 터미널에서 flutter 명령어 사용하기 위한 준비가 끝남
 

 
which flutter 명령어로 확인해봤습니다 flutter 경로가 잘 출력되면 잘 작동된다는 의미
이제 flutter doctor 실행해보는데 flutter doctor란 flutter sdk에 포함되어있는 도구고 개발자가 플러터 앱 개발하기 위한 도구와 연결상태 설정이 잘 설치되어있는지 자동으로 확인해줌

 
실행시키게 되면 문제가 있는 부분을 알려주는데 이 문제 해결을 위해서는 안드로이드 스튜디오를 설치해야 함 
https://developer.android.com/studio?hl=ko

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

 
용량이 커서 좀 걸리네요 ..
 

 
설치 다 했으면 more actions 에서 sdk manager 누르면 이곳에서 아까 flutter doctor가 지적했던 android toolchain 오류 해결 가능 
 

 
android sdk command line tools 를 apply 눌러서 설치해줌
그리고 터미널에서 flutter doctor 재실행해주면 toolchain은 설치되었지만 몇몇 라이센스를 더 얻어야된다고 나오고 명령어도 알려주는데 그 명령어 복붙해서 해준다

 
계속 y 눌러서 동의해주면 된다
이제 flutter doctor 실행하면 안드로이드 관련 문제는 다 해결되었다고 나옴
 
그러면 남은 코코아팟을 설치해야되는데, 코코아팟이란 ios 앱 개발에 사용되는 종속성 관리 도구임
코코아팟은 Ruby라는 언어로 작성되어있는데 맥은 기본적으로 설치되어있으므로 쉽게 설치 ㄱㄴ
터미널에서 루비 버전 확인하는 명령어는 ruby -v 이고, 확인해보면 나는 2.6.10p210이다
근데 이 버전으로 하면, 특히 m2칩에서 에러가 발생한다. 그러므로 다른 버전을 직접 설치할 것이다
 
이를 위해서 먼저 homebrew를 설치하겠습니다. 얘는 오픈 소스 패키지 관리자인데 얘로 ruby 버전을 쉽게 관리할 수 있는 rbenv라는 걸 설치할 것임.
근데~~ 또 homebrew를 설치하려면 먼저 맥에 command line tools를 설치해야한다
 

xcode-select --install

 
위 코드를 터미널에서 복붙한다
설치했으면 이제 아래의 homebrew 설치 명령어 ㄱㄱ

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

 

 
설치를 끝마치면 path에 추가하기 위해서 세 줄의 코드를 실행하라는 안내가 나오는데 하나씩 복붙해서 실행한다
(복붙해도 별다른 프로세스가 보여지지는 않음)
이제 다 설치가 잘 되었나 확인하기 위해 brew doctor라는 명령어 실행 ㄱ
잘 되었으면 Your system is ready to brew.라는 문장이 나옵니다
 
이제 ruby를 설치 및 관리해줄 rbenv를 설치할 차례이다
명령어는 brew install rbenv 이다.
다했으면 rbenv 관련 설정을 zshrc 파일에 추가해주겠음

export PATH="$HOME/.rbenv/bin:$PATH"

 

eval "$(rbenv init - zsh)"

 
위 두 가지 명령어를 터미널에 복붙해준다~ 얘네도 실행해도 특별한 프로세스 안 보임
 
이제 루비의 최신 버전을 설치할 것이다
루비 버전을 검색하는 명령어는 rbenv install -l 이다.
rbenv install 3.4.1  명령어를 실행시켜서 설치해준다
 
설치다했으면 시스템의 기본 루비 버전을 현재 다운받은 3.4.1 으로 설정하기 위해서 rbenv global 3.4.1 이라는 명령어를 실행시켜준다
그러면~~ which ruby 라는 명령어로 경로 확인 ㄱㄱㄱ
 
다했으면,
이번에는 nano 에디터를 사용해서 환경 변수 설정을 한 번 더 해줄 것이다
nano ~/.zshrc 명령어를 복붙해서 실행하면 zshrc 파일이 열린다
그러면 나노 에디터 환경 변수 설정 명령어 eval "$(rbenv init -)"  를 복붙해서 flutter sdk 경로 아래에 추가해준다

 
저장할때는 이제 컨트롤이랑 x 눌러서 닫은 다음에 y를 눌러서 저장해준다
이제 수정이 끝났으니까 source ~/.zshrc 라는 명령어를 통해서 파일을 새로고침 해준다
 
이제 마지막으로 cocoapods를 설치해보겠다

sudo gem install cocoapods

 

 
설치되면 이렇게 update 명령어 나오는데 복붙해서 업뎃해준다
 
이제 코코아팟까지 설치했으니까 flutter doctor 해서 확인하면 아무런 문제가 없다고 나옵니다 
 
이제 개발 환경 구축 끝 ~~~~
 
 
 
그러면 이제 안드로이드 스튜디오에서 ios 시뮬레이터로 앱을 실행해볼것입니다
문제 없이 잘 되야됩니다 왜냐면 내 윈도우 노트북에서 시뮬레이터가 안 돌아가서 걍 맥북을 새로 샀기 때문입니다
 
먼저 플러터 앱 개발하려면 플러그인을 설치해줘야하므로 flutter plugin을 설치해줍니다
설치하고 재실행하면 아래처럼 new flutter project 메뉴가 생성이 됨

 
 
그러면 눌러서 generators 에서 flutter 선택하고, 경로 지정 잘 되었는지 확인 ㄱ

 
그 다음으로 프로젝트명 적어주고 생성 ㄱㄱ
 

 
open ios simulator 누르고, 저 초록색 재생버튼 run을 눌러서 앱을 실행해줍니다
 

 
데모 앱이 잘 실행이 됩니다
이번에는 안드로이드 에뮬레이터에서 앱을 실행시켜보겠습니다

 
근데 처음 실행시키면 문제가 에뮬레이터가 안드로이드 스튜디오 내에서 실행이 된다는 것이다
에뮬레이터를 밖에서 실행시키려면 settings에서 launch in the running devices tool window 여기서 체크 해제 ㄱ

 
 
그리고 안드로이드 스튜디오를 재실행해줍니다
그리고 run 눌러서 데모앱 실행해보면 안드로이드 스튜디오 밖에서 에뮬레이터가 잘 되는걸 볼 수 있음
 
이제 vs code 설치ㄱㄱㄱㄱ
실행하고 cmd+shift+p 단축키를 눌러서 path를 검색해서 install code command 이거 선택해서 눌러준다

 
이 과정으로 터미널에서도 vs code를 실행시킬 수 있다. 터미널에서 code 라는 명령어를 실행하면 vscode가 열림
그럼 이제 vscode에서도 flutter extension을 설치해준다

 
설치했으면 이제 cmd+shift+p 눌러서 flutter 검색해보면 new project 메뉴를 찾을 수 있다

 
new project 눌러서 프로젝트 만들어주고, flutter 검색해보면 select device가 있는데 이걸로 에뮬레이터를 실행해준다
 

 
start debugging 눌러서 앱 실행시켜보면 잘 된다

 
끝