[Flutter] EnvSet

회사에서 어쩌다보니 하이브리드 앱개발을 하게 될 것 같아서 Flutter / React Native 두가지 환경에 대해서 요즘 알아보는 중이다.

아무래도 앱개발이라는거 자체가 이번이 내 인생 최초라 환경 세팅부터 차근차근 기록을 남겨둬볼까 한다. 

오늘은 플러터 환경 세팅부터 할건데 플러터에 대한 기본 정보나 이런건 따로 APP 카테고리 파서 남겨둘 예정이고 오늘은 환경 세팅만 정리해둘 예정임.

 

1. Android Studio(Android) / Xcode(IOS) 설치

 

일단 뭐 React Native를 하든 Flutter를 하든 이 두개는 무조건 깔려있어야한다. 아무래도 하이브리드 앱을 만든다는게 각 OS 환경에 따라 빌드가 진행되어야하기 때문에 필요하다고 보면 되겠다. 

난 지금 윈도우 컴퓨터를 가지고 있지 않기 때문에 모든 과정은 MacOS 환경이라고 가정하고 진행하도록 하겠다. 

 

1) Xcode 설치 

Xcode는 그냥 Mac AppStore에 가서 Xcode를 검색하면 설치할 수 있다. (이게 설치가 진짜 오래 걸림)

 

2) Android Studio 

https://developer.android.com/studio 

Download Android Studio & App Tools - Android Developers

이 홈페이지에 방문한 뒤 누가봐도 클릭해야할 것 같은 버튼 클릭하면 알아서 .dmg 파일 다운받아지고 실행시켜서 Applications에 추가시켜주면 되겠다.

Xcode도 마찬가지지만 안드로이드 스튜디오를 설치한 뒤에도 저걸 실행시켜서 Android SDK도 설치해줘야하는데 일단 그건

이후에 플러터 환경 세팅하면서 플러터가 알아서 에러를 뱉어주기 때문에 그때 정리해보자. 

 

2. Flutter 설치하기 

 

https://docs.flutter.dev/get-started/install/macos

macOS install

이 링크를 타고 들어가서 Flutter 를 다운로드 받아주면 되는데, 일단 나는 M1 Mac을 사용하고 있어서 Apple Silicon 버전으로 받았다. 또 애플 실리콘 버전으로 받는 경우에 로제타를 업데이트 해줘야한다는 주의사항이 있는데 위 페이지에 가이드가 적혀있으니 Apple Silicon Mac을 사용하고 있다면 꼭 가이드를 따라서 로제타를 설치해주면 되겠다. 

이렇게 Flutter를 받아주고 압축 푼 다음 대충 그냥 내가 넣어두고 싶은 디렉토리에다가 넣어주면 된다.  

 

그리고 Path를 잡아줘야하는데

(학원에서 자바 배울 때 이후로 일단 프론트만 주구장창 팔 생각이었던터라 Path 잡아줄 일 없을 줄 알았건만.. 여기서 다시 만났다..)

$ touch ~/.zshrc
$ open ~/.zshrc

이렇게 작성해주면 텍스트 에디터가 하나 열릴거임

그리고 그 텍스트 에디터에다

export PATH="$PATH: 플러터들어있는디렉토리/flutter/bin"

 이렇게 작성해주면 Flutter Path 잡기가 끝이 난다. 그럼 이제 그냥 터미널 열어서 flutter 어쩌고  쓰면 알아서 플러터가 알아듣는다.

(뭐 vi 편집기 쓸 줄 알면 그냥 vi 편집기 쓰면 된다.)

 

이제 플러터가 제대로 설치됐는지 확인하기 위해서 

$ flutter doctor

터미널에 이렇게 입력해주면 지금 현재 flutter 개발환경이 잘 갖춰졌는지 확인을 해주는데,

대충 이렇게 나오면 플러터 자체는 잘 설치 됐다고 보면 되고, 그 이후로 나오는게 중요하다. 

 

요런식으로 뭔가 미비한걸 정리해서 알려주는데 위에 X 하면서 뜨는 애들이 지금 뭔가 잘못 된거다. 

체크리스트 하나하나 보면서 확인해보자. 

 

1) Java 관련 에러메세지

난 원래 회사에서 하는거 때매 서버돌릴 일이 있어서 Java 가 깔려있는데 만일 그냥 완즈이 개발자체를 처음하거나 Java 해본적 없는 사람이라면 관련 에러메세지가 뜬다고 한다. 그러면 openJDK 설치 해주면 되니까 그건 알아서 구글링 해주면 좋겠다. 

brew로 받을 수도 있고, 인텔리제이를 쓰고 있다면 아마 인텔리제이가 알아서 깔아주는 기능도 있던걸로 기억하는데, 잘 모르겠음..

 

2) Android SDK 관련 메세지 

이게 안드로이드 스튜디오 깔아만 두고 실행안시켜보면 뜨는데, 실행시키면서 Android SDK 도 설치하고 SDK Manager로 각종 툴체인을 설치하기 때문에 안드로이드 스튜디오 실행만 하면 어지간하면 다 설치가 되고, 그 외에도 만약에 "!" 표시가 뜨면서 뭐 설치하라고 하면

이르케 안드로이드 스튜디오 켜서 More Actions 클릭 해보면 SDK Manager라는게 보인다. 저거 클릭해서 설치하라는거 찾아서 고르고 Apply 눌러주기만 하면 알아서 설치 싹 해주니까 이렇게 설치하면 된다.

그리고 Android license status unknown.

이런 메세지가 뜨는데 이건 그냥 커맨드 하나로 끝난다.

$ flutter doctor --android-licenses

요거 한줄 실행시켜주면 알아서 해결해줌!

 

3) Xcode 관련 에러메세지 

이게 상당히 골이 좀 아픈데 막 어렵다 이게 아니라 그냥 귀찮다. 일단 

Xcode installation is incomplete; a full installation is necessary for iOS and macOS development.

요런 메세지가 하나 뜰텐데 이건 그냥 밑에서 해결방법 같이 알려준다. 

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch

이거 그냥 복붙해다가 실행 시키면 해결 된다.

 

이제 여기가 귀찮은 부분인데

CocoaPods not installed.

이런 에러가 하나 있을거다. React Native 설치 관련해서는 구글링 해보면 다 설치하도록 사전에 설명해주는 게시물이 많았는데 플러터는 아무래도 플러터 닥터가 있어서 그런가 사전에 언급을 안해주는 게시물이 좀 있었다. React Native 든 Flutter 든 저 코코아팟이 필요하니까 설치하면 되는데 에러가 안내해주는 페이지에 방문해보면 

$ sudo gem install cocoapods

이렇게 하라는데,, 이거 저 gem을 보면 알겠지만 Ruby관련 커맨드인데 저대로 실행하면 문제가 있다. 

The last version of activesupport (>= 5.0, < 8) to support your Ruby & RubyGems was 6.1.7.3.

 이런 문제가 발생하는데, 이 문제를 해결해주기 위해서

저 activesupport 의 버전을 올려주겠다고 

 

gem install activesupport -v 6.1.7.3이라고 입력하면 이제 Ruby 버전이 낮아서 안된다고 한다. 

구글링 해보니 sudo 를 붙여주면 어쨌든 된다고는 하는데 보안상의 이슈로 권장하지 않는다고 하고, 

그냥 Ruby 최신버전을 받은 뒤에 실행시켜주면 될 것 같다. 

그 과정은 이렇다.

$ brew update
$ brew install rbenv ruby-build

 일단 brew update 한번 해준 다음에 rbenv, ruby-build를 설치해준다. 그리고

$ rbenv install -l
$ rbenv install 3.2.2

커맨드로 받을 수 있는 버전들을 쭉 확인해본다음에 가장 최신 버전 받으면 될 것 같다. (2023.06.07 기준 3.2.2)

그리고 마지막으로 이제 글로벌 Ruby 버전을 아래처럼 내가 설치한 최신 버전으로 바꿔주기만 하면 설치는 끝!

$ rbenv global 3.2.2

그리고 Path를 잡아줘야하는데 앞에서 .zshrc 파일 텍스트 에디터로 열었던 거 다시 열어서 

[[ -d ~/.rbenv  ]] && \
  export PATH=${HOME}/.rbenv/bin:${PATH} && \
  eval "$(rbenv init -)"

이거까지 추가해주면 된다. 

 

그럼 앞서 설명했던 커맨드들이 무리없이 실행이 되고 cocoaPods 설치까지 문제없이 끝난다.

 

4) 크롬 관련 에러메세지

그냥 크롬 안깔려있으니 크롬 깔아라는 뜻임!

 

이렇게 좀 중요한 문제들을 다 해결하고나면 어지간하면 

요런 영롱한 초록 체크들이 뜬다. 이러면 플러터 개발 세팅 끝!