[Flutter] Mac에 개발 환경 세팅하기 🛠️

서로·2024년 1월 7일
4

Flutter

목록 보기
1/2
post-thumbnail

서론

노트북 초기화할 때마다 개발 환경 세팅하는 법을 까먹어
애먹는 저를 위해 플러터 개발 환경을 구축하는 법을 정리하고자 합니다.

개발 환경 세팅

(vscode, git이 이미 설치되어 있다고 가정합니다.)
직접 플러터 SDK 파일을 내려받아 설치하는 방법 대신 Homebrew를 사용하여 flutter를 손쉽게 설치하려고 합니다!

1. Homebrew 설치

https://brew.sh/ko/ ← Homebrew 공식 사이트

터미널을 열어 홈페이지에 나와있는 위 코드를 붙여넣기하고 실행합니다.
그 결과 터미널에 다음과 같이 출력됩니다.

그런데 brew가 제대로 설치되었는지 확인하기 위해

brew --version

을 터미널에 입력한 결과 brew을 찾을 수 없다고 하네요.
터미널에 출력된 결과를 자세히 보면 두 명령문을 터미널에 입력하라고 합니다.
터미널에서 코드를 긁어 시키는 대로 합니다.

두 코드를 실행한 결과 이제 brew의 버전을 정상적으로 확인할 수 있습니다 😎

2. 플러터 설치

이제 homebrew를 이용하여 flutter를 설치할 차례입니다.
다음의 코드를 터미널에 복붙하여 실행합니다.

brew install --cask flutter

플러터 앱 개발시 사용되는 언어인 Dart까지 함께 설치되는 것을 볼 수 있어요!

이제 또 무엇을 설치해야 할까요? 🤔
flutter doctor을 터미널에 입력하면
친절하게도 현재 개발환경 세팅이 어디까지 되어있는지 알려줍니다.
저는 어떻게 뜨냐면요?

음, 플러터와 크롬, vscode 등은 잘 깔려있으나
Android toolchain, Xcode, Android Studio가 필요하다고 하네요.
저는 안드로이드, ios에서 모두 돌아가는 앱을 만들고 싶기 때문에 전부 설치하도록 하겠습니다!

3. ios 앱 개발을 위한 환경 구축

플러터 공식 문서를 참조하면 Xcodecocoapods를 설치하라고 합니다.
https://docs.flutter.dev/get-started/install/macos/mobile-ios

(↑ 출처 | macOS에서 Flutter iOS 앱 구축 시작하기)

ios 환경 구축을 위해 앱스토어에 들어가 Xcode를 설치해줍니다!
시간이 조꼼 걸립니다...

IOS를 체크해줍니다 ☑️

Xcode 설치가 완료되었다면 다음으로 cocoapods를 설치합니다.
brew를 이용하여 설치하기 위해 아래의 코드를 터미널에 입력하여 실행합니다.

그리고 다시 flutter doctor를 실행한 결과
아래처럼 Xcode가 정상적으로 설치되었다고 표시됩니다!

여기까지 ios 앱 개발을 위한 환경 구축이 완료되었습니다! 😎

4. Android 앱 개발을 위한 환경 구축

먼저, 안드로이드 스튜디오를 설치해줍니다.
Homebrew를 이용하여 쉽게 설치할 수 있습니다!
터미널에 아래의 코드를 입력하여 실행합니다.

brew install --cask android-studio

설치가 완료되었으면 안드로이드 스튜디오를 실행해줍니다.
다음과 같은 창이 나타납니다.
OK를 누르고 기본설정으로 계속 설치를 진행해줍니다.

이제 모든 설치가 완료되면 다음과 같은 창이 나타납니다.

안드로이드 스튜디오가 정상적으로 설치되었습니다!
flutter doctor 명령을 다시 실행해볼까요?

터미널에 출력된 결과 cmdline-tools;latest를 설치하라고 하네요!
또한 flutter doctor --android-licenses를 실행하라고 합니다.
이를 위해 안드로이드 스튜디오를 실행하여 아래의 빨간색 네모박스 버튼을 클릭해줍니다.

SDK Manager를 클릭합니다.

SDK Tools 탭에 들어가서 원하던 Command-line Tools(latest)를 설치합니다.

다음으로 터미널에 아래의 명령어를 입력하여 실행합니다.

flutter doctor --android-licenses

y를 입력하며 모두 동의를 해줍니다.
다시 flutter doctor를 실행하면

모두 설치되었다고 출력이 됩니다!
후 긴 여정이었습니다. 개발 환경 세팅하는데 몇 시간이 걸렸네요!
이제 새로운 플러터 프로젝트를 시작할 수 있습니다
새로운 사이드 프로젝트를 시작하는 건 매번 설레네요 😚

-끗-
잘못된 정보, 오탈자를 발견하면 편하게 댓글로 말씀해주시면 감사하겠습니다!

위 글은 노마드코더 Flutter로 웹툰 앱 만들기 강의와 플러터 공식 문서를 참고하여 정리한 글입니다.

profile
완벽주의가 아닌 꾸준한 대충주의 🐢

0개의 댓글