스파르타 1억 챌린지가 시작되면서 웹개발 종합반 다음으로 앱개발 종합반 강의를 수강해보기로 했다. React-native와 함께 크로스 플랫폼 앱을 개발할 수 있도록 하는 것이 Flutter! 요즘 핫하다는 이야기는 많이 들어왔기 때문에 나만의 앱을 만들어보고 싶어 시작했다.
앱 개발 방법은 크게 두가지로 나눌 수 있는데 네이티브 앱과 크로스 플랫폼 앱으로 나뉜다.
네이티브 앱은 Android와 IOS로 나누어 개발을 해야하는데 Android는 Kotlin, IOS는 Swift라는 언어를 통해 개발한다. 반면에 크로스 플랫폼 앱은 하나의 코드로 Android와 IOS를 둘 다 개발할 수 있게 해준다. React-native는 javascript, Flutter는 Dart라는 언어를 사용한다.
스파르타 앱개발종합반 강의에서는 Flutter를 사용하고 있기 때문에 이를 설치하는 것부터 차근차근 진행해보고자 한다.
1. Flutter 설치하기 (Mac 환경)
먼저 flutter를 설치할 폴더를 만들어주고 flutter를 설치했다. 맥북에 flutter SDK를 설치할 때는 두가지로 나뉘는데 인텔칩을 사용하느냐와 애플칩을 사용하느냐에 따라 설치해야할 SDK가 달라진다. 왼쪽 상단의 사과모양 아이콘을 클릭 -> 이 Mac에 관하여를 클릭하면 내 노트북이 어떤 칩을 사용하고 있는지 친절하게 알려준다. 각각의 칩 유형에 맞춰 flutter SDK를 설치하면 된다.
설치 후, 내가 기존에 만들어 놓은 development 폴더로 해당 zip 파일을 옮긴 후 그 안에서 압축을 해제했더니 flutter라는 하위 폴더가 생성되는 것까지 확인했다.
2. 터미널에서 환경변수 영구적으로 셋팅
원하는 폴더에 flutter 폴더를 정상적으로 위치시켰다면 그 이후에는 flutter를 사용할 수 있도록 셋팅해주는 작업이 필요하다. 이 또한 macOS 버전과 사용하는 터미널에 따라 설정 방법이 다른데 앞서 말했던 것처럼 사과 모양 아이콘 -> 이 mac에 관하여를 클릭하면 어떤 버전을 사용하는지도 친절하게 알려준다. 나는 macOS Monterey 버전이었는데 각각의 버전마다 터미널 기본 셋팅이 bash인지 zsh인지에 따라 설치방법이 달라지게 되는 것이다.
기본적으로 가장 최신버전부터 나열한 macOS Monterey, macOS Big Sur, macOS Catalina 세 가지는 zsh를 사용하고, 그 하위 버전인 macOS Mojave, macOS High Sierra, macOS Sierra는 bash를 사용하도록 설정되어있다. 나는 macOS Monterey인 가장 최신 버전이지만 계속해서 bash를 사용하고 있었기 때문에 강의에서 알려준대로 따라하니 제대로 실행되지 않을 수밖에 없었다.
계속해서 경로를 찾지 못하는 문제 발생, 터미널 shell을 zsh로 바꿔줬는데도 unmatched 문제 발생! 그래서 강의자료 말고 공식문서를 조금 더 살펴보고자 공식문서로 향했다!
공식문서를 살펴보니 Flutter SDK 경로를 업데이트 해주는 방법이 나와있었는데 zsh shell에 맞춰져있는 것 같았다. 그래서 해당 명령어를 차례로 입력해줬다. 가장 먼저 PATH 경로를 설정해주는 명령어를 입력했고,
export PATH="$PATH:$HOME/development/flutter/bin"
아래의 명령어를 통해 PATH 가 제대로 설정되었는지를 확인해봐야했다. 경로가 제대로 나오는 것을 확인하고 마지막으로 which flutter를 입력해줬다.
echo $PATHwhich flutter
이제는 제대로 설치가 되었는지, flutter 버전이 제대로 나오는지를 확인해보기 위해 flutter --version을 입력해줬는데 잘 나온다~!
$flutter --version
Flutter 3.3.10 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 135454af32 (2 weeks ago) • 2022-12-15 07:36:55 -0800
Engine • revision 3316dd8728
하지만 여기서 끝이 아니었다. 해당 설정은 영구적으로 설정해준 것이 아니기 때문에 터미널을 종료하면 그대로 사라진다는 것. 그래서 flutter를 사용할 때마다 매번 번거롭게 설정해줘야하는 문제가 발생하는 것이다. 그래서 영구적으로 설정할 수 있는 방법을 찾아봤는데 생각보다 간단했다. 이 또한 zsh, bash에 따라 설정 방법이 다르다.
나는 zsh로 바꿔줬기 때문에 open ~/.zshrc를 통해 PATH 경로를 .zshrc 파일에 등록해주었다.
// zsh 사용, 텍스트 편집기 열기
open ~/.zshrc
// bash를 사용한다면
open ~/.bash_profile// 텍스트 편집기에 추가해줄 것
export PATH=$PATH:$HOME/development/flutter/bin
이렇게 추가하고 터미널을 종료한 후 다시 실행시켜주면 적용이 되어있을 것이다. PATH 경로가 제대로 설정되었는지 확인해보기 위해 echo $PATH를 실행하면 해당 경로가 잘 나오는 것을 확인할 수 있었다.
그 후, flutter doctor 와 flutter --version을 실행시키면 제대로 실행되는 것을 확인할 수 있다. 이제는 터미널을 재부팅해도 영구적으로 실행된다.
3. zsh: command not found: flutter 플루터 실행 안됨
flutter doctor 명령어를 실행했는데 zsh: command not found: flutter 에러가 발생한다면 이는 zshrc 파일에서 PATH 경로 설정이 잘못되어있다는 것을 의미한다고 한다. 나 역시 .zhhrc 에서 PATH 경로를 설정해주며 만났던 에러이다.
PATH 경로에서 따옴표가 제대로 닫혀있지 않아 발생했던 문제, 따옴표가 제대로 닫혀있는지, 아니면 따옴표를 제거하던지 등의 경로 오타 파악 후 다시 실행하니 제대로 실행되는 것을 확인할 수 있었다. 오타나 제대로 입력했는지 등을 다시한번 꼼꼼하게 확인하자!
