⚙️Flutter 개발환경

1. Flutter

1.1 윈도우 개발환경 구축하기

플러터 SDK(software development kit, 소프트웨어 개발도구)를 내려받고 환경변수를 설정하겠습니다.

1.1.1 SDK 내려받기

01. 플러터 공식 페이지 https://docs.flutter.dev/get-started/install 로 이동합니다. 02. Windows 버튼을 클릭합니다.

03. 'Get the Flutter SDK'에 있는 [flutter_windows_{버전}.zip] 버튼을 클릭합니다.

04. 내려받은 압축 파일을 원하는 위치에 풀어줍니다.

1.1.2 환경 변수 설정

플러터 SDK를 사용해서 모든 플러터 명령을 실행하려면 윈도우에 플러터 SDK 위치를 등록해주어야 합니다. 이 과정을 '환경 변수 설정' 이라고 부릅니다.

01. 윈도우 검색창에 '환경' 이라고 검색하고 '시스템 환경 변수 편집' 을 클릭합니다.

02. [환경변수(N)...] 버튼을 클릭해주세요.

03. Path 라는 변수가 존재하는지 확인합니다. Path 변수가 존재하지 않으면 04. 번으로 이동해주세요.

• Path 변수가 존재하면 Path 변수를 선택하고 → [편집(E)...] 버튼을 클릭합니다.

• 팝업창에서 [찾아보기(B)...] 버튼을 눌러서 압축을 푼 [flutter] 폴더 안의 [bin] 폴더를 선택해주세요.

• 그러면 플러터 SDK 환경 변수가 생성됩니다.

모든 설정이 끝났으니 [확인]버튼을 연이어 눌러 환경 변수 설정을 마칩니다.

04. Path 변수가 없으니 Path 변수를 새로 생성해주어야 합니다.

• [새로만들기(w)...] 버튼 클릭 → 팝업창에서 변수 이름으로 Path 입력 → [디렉터리 찾아보기(D)...] 버튼을 클릭합니다.

• 팝업창에서 압축을 푼 [flutter] 폴더 속의 [bin] 폴더를 선택합니다. 확인 버튼을 클릭해 환경 변수 설정을 마무리 합니다.

모든 설정이 완료되었습니다. Visual Studio Code와 Android Studio 설치 단계를 진행해주세요.

1.2 Mac OS 개발환경 구축하기

1.2.1 SDK 내려받기

01. 플러터 공식 페이지 https://docs.flutter.dev/get-started/install 로 이동합니다. 02. macOS 버튼을 클릭합니다.

03. 'Get the Flutter SDK'로 이동하면 두 가지 SDK가 보입니다. 인텔 기반 CPU를 장착한 맥이라면 첫번째를, M1 등 M으로 시작하는 계열의 CPU를 장착한 맥이라면 두번째를 클릭해 내려받습니다.

1.2.2 환경설정

01. 맥OS에 플러터 SDK 위치를 알려주어야 합니다. 다운받은 위 flutter_macos_arm64_3.xx.x-stable.zip 압축파일을 해제해 주세요.

02. 맥OS는 2가지 종류의 셀(shell)을 사용하는데, 터미널에서 다음 명령어를 통해 어떤 셀을 사용하는지 알아냅니다.

echo $SHELL

• /bin/bash 라는 출력이 나오면 Bash를 사용중이고 /bin/zsh 라는 출력이 나오면 Z Shell을 사용중입니다.

03. 시스템 PATH 변수에 플러터 SDK의 위치를 등록해야 합니다. 본인이 셀 환경에 맞는 명령어를 실행합니다

• Bash를 사용 중일 때는 다음 두 명령 중 하나를 실행해주세요.

vi ~/.bash_profile
vi ~/.bashrc

• Z Shell을 사용 중일 때는 다음 명령을 실행하세요.

vi ~/.zshrc

04. 이제 vi 환경에서 프로파일 파일을 수정합니다. j를 눌러서 커서를 가장 아래로 움직인 다음에 i 를 눌러서 insert 모드로 변경한 후 파일의 가장 아래에 다음 코드를 추가해주세요.

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

export PATH = "" 처럼 빈 공간을 두면 안됩니다. 빈 공간 없이 입력해주세요.

• 예를 들어 $HOME/Documents 폴더에 압축을 풀었다면 다음과 같은 코드를 작성해줍니다.

export PATH="$PATH:$HOME/Documents/flutter/bin"

2. Visual Studio Code (Editor)

01. https://code.visualstudio.com/download 에 접속하여 운영체제 시스템에 맞는 VS Code를 설치합니다.

02. VS Code를 실행하여 EXTENSIONS에서 Flutter 설치합니다. Flutter를 설치하면 Dart는 자동으로 설치됩니다.

3. Android Studio (Android emulator)

안드로이드 스튜디오는 플러터를 개발하는 IDE(통합개발환경)입니다. 안드로이드 스튜디오를 받는 과정은 운영체제와 관계 없이 같습니다.

01. 안드로이드 스튜디오 개발자 홈페이지에 접속합니다. https://developer.android.com/studio

02. [Download Android Studio]를 클릭합니다.

인텔 칩과 애플 실리콘 환경에 따른 설치 애플 맥은 크게 두 가지 칩 규격을 사용합니다. 인텔 CPU를 사용하는 맥과 ARM 아키텍처의 애플 실리콘(Apple Silicon)을 사용하는 맥입니다. M1 이상의 칩을 장착한 맥은 애플 실리콘(Apple Silicon) 또는 애플 칩(Apple Chip) 관련 소프트웨어를 다운받아야 더욱 빠르고 리소스 사용에 최적화된 프로그램을 실행할 수 있습니다. - 인텔 기반의 맥은 [Mac with Intel chip] 버튼 - 애플 실리콘 기반의 맥(M1 이상)은 [Mac with Apple Chip] 버튼

을 눌러 하드웨어에 최적화된 버전의 안드로이드 스튜디오를 다운받습니다.

MacOS

03. 다운로드가 완료되면 기본값으로 설치해주세요.

3.1 Dart/Flutter 플러그인 설치

01. 안드로이드 스튜디오 설치가 끝나면 안드로이드 스튜디오를 실행해주세요.

02. 왼쪽 [Plugins] 버튼 클릭 → [Marketplace] 탭 → 검색창에 Flutter를 검색합니다. 검색된 플러터 플러그인의 [Install] 버튼을 눌러서 플러터 플러그인을 설치합니다.

03. 플러그인 설치 후 [Restart IDE]를 클릭해 안드로이드 스튜디오를 재실행해야 플러그인이 반영됩니다.

04. Android Studio 메인으로 돌아와 [More Actions] → [SDK Manager]를 클릭합니다.

05. 왼쪽의 [Android SDK] → [SDK Tools] 탭 → Android SDK Command-line Tools 를 체크 후 OK 버튼을 눌러주세요.

06. Android Studio 메인으로 돌아와 [More Actions] → [Virtual Device Manager] 클릭합니다.

07. [Create Device]를 통해 원하는 emulator의 해상도와 사양을 설정하고 생성합니다.

08. VS Code에서 Test App 실행시 정상적으로 작동되는지 확인합니다.

4. Xcode (IOS Simulator, Mac OS에서만 실행 가능)

01. 앱 스토어에 접속해 Xcode를 검색 후 다운로드하여 실행합니다.

02. 설치가 완료되었으면 설치한 Xcode 버전을 시스템에서 사용할 Xcode 버전으로 실행합니다. 다음 명령어를 실행해주세요.

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

명령어 실행 후 안내에 따라 설치를 완료해주세요.

03. 터미널에서 Cocoapods를 설치합니다.

sudo arch -x86_64 gem install ffi
sudo arch -x86_64 gem install cocoapods
pod --version    // 버전을 확인하여 설치되었는지 확인

04. VS Code에서 Test App 실행시 정상적으로 작동되는지 확인합니다.

5. 설치 문제 해결하기

위 과정을 모두 잘 따라왔다면 큰 문제가 없어야 하나 예상치 못한 문제가 생길 수 있습니다. 구글에서는 환경 설정의 어려움을 최소화해줄 플러터 닥터(Flutter doctor)를 제공합니다. 문제를 어떻게 해결해야 하는지 개발자에게 알려주는 도구 입니다.

플러터 닥터로 문제 확인하기

01. 터미널(명령 프롬프트)을 열어서 flutter doctor를 입력하세요.

flutter doctor

'cmdline-tools component is missing' 문제 해결하기

Android SDK Command Line Tools가 설치되지 않아서 생기는 문제입니다.

01. [Customize] -> [All settings...] 를 클릭합니다

02. [Appearacne&Behavior] -> [System Settings] -> [Android SDK] -> [SDK Tools] 탭 클릭 → [SDK Command-line Tools(latest)] 체크박스 선택 → [Apply] 클릭 → 팝업창에서 [OK]를 클릭해 설치를 완료합니다.

'Android license status unknown.' 문제 해결하기

안드로이드 스튜디오를 사용하려면 라이센스를 동의해야 합니다.

01. 터미널(명령프롬프트)에서 'flutter doctor --android-license' 명령을 실행합니다.

02. 이후 나오는 모든 물음에 y를 입력하세요.

Android Studio를 설치했음에도 'Android Studio [not installed]' 문제 해결하기

01. 환경변수 설정

• Android Studio의 bin 디렉토리가 시스템 PATH에 추가되어 있는지 확인하세요

02. 'flutter config' 명령어 사용

• 'flutter config' 명령어를 사용하여 Android Studio의 경로를 직접 설정합니다.

flutter config --android-studio-dir="/Applications/Android Studio.app"

[... end]