[Flutter] 맥에 플러터 작업 환경 세팅하기

ekil·2023년 6월 12일
0

2023년 3월, 회사에서 받은 맥북 m1 프로에 처음 플러터 작업 환경 세팅을 하고 3개월만에 m2 에어에 다시 환경 세팅을 하게 되었다.

플러터로 웹을 개발하면서 게임 엔진 플레임을 써서, 그동안 쓰던 맥북에서 버벅임과 발열 증상이 있었다.
CTO님이 개발을 도와주시면서 그 현상을 몇 번 보셔서, 배터리 성능 최대치가 더 좋은 맥을 다시 받았다.

3월에 처음 세팅할 때는 새벽 4시까지 했던 것 같다.
별 생각 없이 회사에서 하다가 이거 생각보다 안 되는데? 하면서 집에 들고 가서 그냥 될 때까지 했다.
flutter doctor 실행했을 때 2개만 덜 됐고 나머지 다 됐길래 금방 다 할 줄 알았는데, 그렇지 않았다...
그때는 안드로이드 스튜디오, java 설치에서 애먹었던 기억이 있다.
집 와서 열심히 서치하고 어떤 파일명을 직접 수정해서 결국에 세팅을 완료했었기 때문에 이번에는 또 얼마나 걸리려나... 하는 마음으로 세팅을 시작했다.

결론부터 말하자면, 이번에는 금방 다 했다!
밤을 새지도 않았고, 첫날 조금 하다가 둘째날 이어서 하고 문제 없이 잘 끝냈다.
이래서 경험이 중요한 건가 싶고, 그리고 모르는 부분을 팀장님께 여쭤본 것도 큰 도움이 됐다.
(물론 3월에도 사수님한테 이것저것 많이 여쭤봤지만, 그때는 맥 자체가 처음이기도 했고 낯선 게 더 많아서 헤맸던 것 같다.)

그래서 아마 다음에 하게 되더라도 금방 하겠지만, 그래도 세팅하면서 도움받았던 좋은 글들을 적어놓으려고 오랜만에 벨로그를 켰다.

미래의 내가 언제 다시 세팅을 할지 모르겠지만 그때도 도움이 될 것 같고,
플러터 작업 환경 세팅을 처음 해보는 다른 분들한테도 도움이 되지 않을까 싶다.

내가 했던 것들 목록과, 하면서 막혔던 부분 해결하는 데 도움 받은 블로그 글들 링크를 공유한다.


설치한 것들

  • vscode
  • git
  • github desktop
  • flutter sdk
  • android studio
  • xcode
  • java
  • homebrew

(그 외 작업해야 해서 설치한 것들은

  • 피그마
  • 노션
  • 크롬
  • node (-> Homebrew 이용함)
  • ms office)

0. home 폴더 바로가기 finder에 추가

cmd + shift + H 눌러 찾고, 드래그 앤 드랍으로 왼쪽에 고정
홈 디렉토리 찾는 단축키 설명한 글

1. PATH 등록

일단 플러터 sdk 다운 받은 뒤, flutter 명령어를 언제 어느 터미널에서나 쓸 수 있게 하기 위해서는 환경변수(PATH) 등록을 해야 한다! (터미널은 cmd + space 눌러서 terminal 검색해 열었다. 이전 맥에서는 iterms2 깔았었는데, 내가 사용하는 정도에서는 기본 터미널과 차이를 못 느꼈다.)

이때 참고한 글을 첨부한다. 팀장님이 공유해주신 정보!
환경변수 등록 설명 잘 해준 블로그 글 링크

그리고 위 글을 보고 하면서 나는 기본 터미널이 zsh로 되어있어서 bash로 바꿨는데, 그거 바꿀 때 참고한 글 링크도 첨부한다.
기본 터미널 변경 명령어 설명 잘 해준 블로그 글 링크

위 두 글 보고 bash 터미널에서 .bash_profile 파일 편집, 저장했다.

2. homebrew 설치

git을 설치하기 위해서 홈브루를 깔아준다.
처음 세팅할 땐 얘를 많이 활용하진 않았는데, java 깔 때 이거 썼더니 전에 났던 문제가 아예 발생하지 않아서 너무 좋았다.

설치는 그냥 검색해서 나오는 공식 홈페이지에서 던져준 링크 그대로 복붙해서 했다.
설치했는데 brew 명령어 이해 못할 때는,
flutter doctor 다시 실행하고 거기서 알려주는 명령어 입력하면 된다.
관련 블로그 글 링크
여기 적혀있는 echo로 시작하는 명령어 입력해주면 되는데, 터미널에서 알려준 그대로 복붙했더니 괄호 때문에 잘 안 됐다.
그래서 귀찮지만 보면서 한 글자 한 글자 쳐줬다.

홈브루 이용해서 이것저것 설치하는 명령어가 잘 정리된 블로그 글이 있어 첨부한다.
홈브루로 설치하는 명령어 잘 정리된 블로그 글 링크

3. android studio

처음 세팅했을 때 애먹었던 안드로이드 스튜디오...
sdk로 설치한 뒤 열어주고,

터미널에 flutter doctor 입력해서 뭘 더 해야 하는지 확인한다.
sdk command-line tools를 설치해야 하는데, 아래 블로그 글 보고 따라하면 된다!
android sdk, sdk command-line tools 설치 방법 잘 정리된 블로그 글 링크

그리고 flutter doctor 했을 때 알려주는 명령어로 라이선스 동의도 해준다. 이것도 위 글에 설명되어 있다.

4. development 폴더 사용하고 싶다면

만약 홈 디렉토리에 development 폴더를 새로 만들어서 거기에 개발 관련 폴더와 파일들을 저장하고 싶다면, 1번에서 저장한 PATH 경로를 그에 맞게 적어줘야 한다.

나는 기본 경로였던 Download 폴더에 flutter가 저장되어 있었는데, 위와 같이 하고 싶어서 finder에서 드래그 앤 드랍으로 그냥 이동했었다.
그랬더니 vscode에서 플러터로 작업한 파일을 열었을 때 flutter sdk를 찾을 수 없다는 경고가 떴었다.

  1. 다시 open .bash_profile 해서 .bash_profile 파일을 열고, 경로를 수정해준다.
    나는 flutter, homebrew, java PATH를 저장해서 .bash_profile 파일을 아래와 같이 저장했다.
export PATH=${PATH}:~/development/flutter/bin
eval "$(/opt/homebrew/bin/brew shellenv)"
export PATH="/opt/homebrew/opt/openjdk@11/bin:$PATH"
  1. flutter 폴더와 GitHub 폴더를 함께 넣어주기
    github로 기존에 작업하던 파일을 클론한다.
    기본 경로로 저장하고 finder에서 드래그 앤 드랍해서 development 폴더에 옮겨도 되고, 애초에 저장할 때 development 폴더에 저장해도 상관 없다.

클론한 프로젝트를 vscode로 다시 열었을 때 여전히 flutter sdk 관련 경고 문구가 뜬다면 맥을 재시동해보자.

터미널에서 flutter doctor 실행하며 문제 없는지 확인하고,
뭔가 했는데 계속 안 된다고 하면 맥 재시동하고 다시 확인해보는 것도 좋다.
나는 xcode 설정하는 부분과 위 4번 부분에서 재시동했더니 잘 됐었다. 이미 설정 잘 됐는데 반영이 안 되었던 것 같다.

기록해 둘 내용은 이 정도!
다들 스트레스 없이 플러터 개발 환경 세팅하고 해피 코딩합시다~! :)

+)
firebase deploy를 하려면
firebase cli 설치도 필요하다!

아래 블로그 참고해서 cli 설치 후 로그인까지 했고,
기존에 작업하던 프로젝트가 있어서 firebase configure는 안 하고!
https://kanoos-stu.tistory.com/70

https://hdblog.tistory.com/entry/Firebase-%ED%98%B8%EC%8A%A4%ED%8C%85-%EC%B4%88%EA%B0%84%EB%8B%A8-%EC%85%8B%EC%97%85
요 블로그 참고해서 firebase init 실행했다
그 다음으로는 public 말고 우리 프로젝트 설정에 맞는 build/web 폴더를 퍼블릭으로 쓰겠다고 답하고 모두 엔터침

세팅 완료!

이제 hosting deploy 명령어를 사용할 수 있다

profile
좋아하는 일을 잘함으로써 먹고살고 싶은 프론트엔드 개발자입니다.

0개의 댓글