[코드팩토리의 플러터 프로그래밍] 0장. 플러터(flutter) 개발 환경 구축

 

모바일 개발을 하고 싶었는데 시작도 안 해보고 있었다가,

최근에 플러터에 관심이 생겨서 플러터를 배워보려고 합니다.🤓

처음엔 공식문서만 보면서 하려고 했는데 빠르게 배우고 싶어서 도서를 구입했어요.

교보문고에서 플러터 책을 검색하면서 그냥 가장 최근에 나온 책으로 선택했고요. 😅

 

코드팩토리의 플러터 프로그래밍이라는 책인데요. 아이패드로 보려고 이북으로 구입했습니다.

https://product.kyobobook.co.kr/detail/S000200473539

코드팩토리의 플러터 프로그래밍 | 최지호(코드팩토리) - 교보문고

이 책은 플러터 생초보를 위한 책인 것 같아요.

인프런에 저자분이 직접 강의하시는 코드팩토리 플러터 중급 강좌도 있던데 평이 괜찮았어요.

강좌는 이 책을 읽어보고 괜찮으면 다음에 들어보는 것으로 :)

플러터 책은 2주내로 끝내는 것을 목표로 블로그에 정리해 가면서 공부해 보려고요.

그리고 만들고 싶은 앱이 있는데 첫 앱까지 만들어보는 것을 목표로 해볼게요.😆

 

 

 

오늘은 간단하게 플러터 개발 환경 설정을 하겠습니다.

 

 

플러터 공식사이트입니다.

한국어도 지원되서 이해 안 되는 부분은 같이 보면서 공부하면 좋을 것 같아요.

https://flutter.dev/

Flutter - Build apps for any screen

https://flutter-ko.dev/

Flutter - 가장 빠른 아름다운 네이티브 앱

 

 

 

1.  SDK 내려받기

공식홈페이지 우측 상단에 Get started 버튼을 누르면 아래와 같이 나오고, 운영체제를 선택합니다.

저는 macOS를 선택하였어요.

맥은 iOS, 안드로이드 둘 다 개발이 가능하고, 윈도우는 안드로이드만 가능하다고 합니다.

 

저는 M1이기 때문에 Apple Silicon으로 받습니다.

터미널을 열고 방금 내려받은 파일의 압축을 풉니다.

다운로드 폴더에 플러터 SDK 압축을 풀었지만, Documents 폴더에 옮겨놓도록 할게요.

처음부터 그냥 문서로 파일 옮겨서 거기서 푸셔도 됩니다.😄

 

 

 

 2. 환경 설정

환경 설정을 하기 위해 맥 OS에서 사용하는 셸의 종류를 알아내야 하는데요.

/bin/bash 는 Bash이고 /bin/zsh는 Z Shell입니다.

Bash를 사용중일 때는 다음 두 명령 중에 하나를 실행하면 된다고 합니다.

vi ~/.bash_profile
vi ~/.bashrc

 

Z shell은 아래 이미지와 같이 입력하시면 됩니다.

vi 편집기를 열고 방금 압축 푼 플러터 폴더의 경로를 bin까지 입력하고 저장합니다.

export PATH="$PATH:{압축을 푼 플러터 폴더 위치}/bin"

 PATH를 입력할 때 = 양 옆으로 공백을 넣지 않도록 주의해 주세요.

flutter 환경변수 PATH 설정

그리고 방금 설정한 환경변수를 반영하기 위해 터미널을 새로고침 합니다.

아니면 기존 터미널을 끄고 다시 새로운 터미널을 열면 자동으로 반영됩니다.

source $HOME/.<rc file>

echo $PATH를 해서 플러터 환경 변수가 잘 잡혔는지 확인해 봅니다.

그리고 which flutter로 flutter 명령어의 위치를 확인할 수 있습니다.

flutter 환경 변수 확인

 

 

 

3. Xcode 설치하기

앱스토어에서 Xcode를 설치해 줍니다. 플러터 앱을 iOS용으로 빌드하기 위해서 반드시 Xcode가 필요합니다.

설치를 진행해 주시고요.

다음 명령들을 실행해서 새로 설치된 버전의 Xcode를 사용하도록 합니다. 

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

 

 

 

4. 안드로이드 스튜디오 설치하기

안드로이드 스튜디오(IDE)는 저도 이번에 처음 설치를 해보는데요.

최신의 안정화된 버전을 받도록 합니다.

https://developer.android.com/studio

Download Android Studio & App Tools - Android Developers

다운로드를 클릭하면 아래와 같은 화면이 뜨는데 동의 체크를 하고, Mac with Apple chip을 선택했어요.

Standard 기본값으로 설치를 하시면 됩니다.

테마도 선택해 주고요.

설정 내용 확인하라고 합니다. Next 클릭.



라이선스에 동의하라고 하는데 Accept에 체크해 줍니다.

그럼 설치가 완료되었다고 하면서 확인을 누르면, 아래와 같은 창이 뜨면서 설치가 완료됩니다.

 

 

 

 5. 다트/플러터 플러그인 설치

이제 다트 언어와 플러터 플러그인을 설치해 봅시다.

안드로이드 스튜디오에서 왼쪽 목록들 중에 Plugins을 선택하고 Marketplace에서 Flutter를 검색하고 Install 합니다.

 

Install이 끝나면 Restart IDE버튼으로 바뀌는데 이것을 클릭하여 안드로이드 스튜디오를 재시작하면 플러그인이 반영됩니다.

 

 

 

6. 설치 오류 해결하기

터미널에 flutter doctor 명령을 쳐보면 오류를 확인할 수 있습니다.

저는 3가지나 뜨네요.😭 하나하나씩 해결해 보도록 하겠습니다.

(1) Android toolchain - cmdline-tools component is missing

Android SDK Command Line Tools 가 설치가 안되어 있어서 설치를 해야 한다고 합니다.

설치하는 방법은 굉장히 간단한데요.

안드로이드 스튜디오 첫 화면에서 [Customize] -> [All settings...]를 클릭합니다.

그리고 [Appearance & Behavior] -> [System Settings] -> [Android SDK] ->SDK Tools 탭 선택을 하고 Android SDK Command-line Tools (latest) 를 체크 한 후 Apply를 누릅니다.

OK를 누르면 설치가 진행됩니다.

(2) Unable to find bundled Java version

flutter doctor -v를 치면 더 자세한 정보들이 출력되는데요.

(1)번 문제는 이제 해결이 되었고, 자바 버전을 결정할 수가 없다고 합니다.

구글링을 해보니 Android Studio - Electric Eel 버전은 Android Studio의 Contents 폴더 내의 jre가 jbr로 이름이 바뀌었다고 합니다.

아래와 같이 심볼릭 링크를 걸어주면 정상적으로 작동하게 됩니다. 

cd /Applications/Android\ Studio.app/Contents
ln -s jbr jre

다시 flutter doctor를 쳐보면 문제가 해결되었습니다.

그러나 아까는 안 보이던 안드로이드 라이선스 몇 개들이 동의가 안되었다고 하네요.😂

하라는 대로 해야 하니 flutter doctor --android-licenses 명령어를 그대로 복사 붙여 넣기 한 후 y를 누릅니다.

y를 연타합니다...🤣

껄끄러운 느낌표가 줄었습니다. :)

(3) CocoaPods not installed

flutter doctor가 설치 링크까지 친절하게 알려줍니다.

https://guides.cocoapods.org/using/getting-started.html#installation

CocoaPods Guides

이곳에 들어가니 CocoaPods이 무엇인지 설명을 해주네요.😆

Xcode 프로젝트의 라이브러리 종속성을 관리한다고 합니다.

 

sudo gem install cocoapods

이렇게 한 줄을 입력하면 한방에 설치가 완료됩니다.

마지막으로 flutter doctor로 확인해 보면 모든 것이 정상적으로 설치가 된 것을 확인할 수 있어요. 😆

이것으로 플러터 개발 환경 설정을 완료했습니다. 😄