개발/Flutter

VS Code 기반으로 Flutter 개발환경 셋팅

kkap999 2023. 10. 4. 17:10
728x90

0. 플러터란?

Dart 언어 기반의 크로스 플랫폼 앱 개발용 프레임워크

  • 네이티브 방식 : AOS, iOS와 같은 플랫폼 자체에서 제공하는 개발 환경. OS에 최적회된 방식으로 성능은 보장하지만, 각각의 OS별로 따로 개발해야한다는 단점이 있음
  • 하이브리드 방식 : 웹 기술로 앱 화면을 만든 후 네이티브 기술로 감싸서 포장. 웹 기술을 기반으로 앱으로 변환할 수 있기 때문에 빠른 앱개발이 가능하지만 네이티브 방식에 비해 성능이 떨어지며 UI도 별도로 만들어야함
  • 크로스 플랫폼 방식 : 한 번 구현하여 AOS와 iOS 등 각 플랫폼용 앱을 만든다. 빌드 과정에서 네이티브 코드로 변환되기 때문에 네이티브 방식과 거의 비슷한 성능을 보장한다.

⇒ 성능이 크게 중요하지 않고, 혼자 개발하기 때문에 생산성 측면에서 다양한 OS를 지원하는 방식이 필요하였음. 어차피 웹기술이나 앱기술이나 모두 공부가 필요한 단계이고, 웹보다는 앱 특화 프로젝트를 진행하고 싶었기 때문에 크로스 플랫폼 방식의 플러터를 이용해서 진행하기로 하였다.

1. 설치부터 해보자

1.1. Flutter SDK 설치

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

macOS에 설치

개인 개발용 설치 경로는 이곳으로 : /Users/ggg/dev

다운로드 받은 zip파일 압축 해제하여 위 경로로 옮긴다.

mv /Users/ggg/Downloads/flutter /Users/ggg/dev

# 환경변수 등록
export PATH="$PATH:/Users/ggg/dev/flutter/bin"

# 등록된 환경변수 확인 및 버전 확인
flutter --version

# Flutter : 3.13.6
# Dart : 3.1.3
# DevTools : 2.25.0

1.2. IDE

IDE는 프론트 개발이기도 하고, 플러그인 설치나 지원이 InteliJ보다는 VS Code코드가 나을 것 같다고 생각됨

VS Code에서 Flutter 플러그인 설치

1.3. 프로젝트 생성

https://docs.flutter.dev/tools/vs-code

이 링크 참고

  1. View > Command Palette….
  2. Type flutter.
  3. Flutter: New Project.
  4. Application

example이라는 이름의 Application으로 생성하였다.

1.3. 실행

Run > Start Debugging

아래와 같은 에러 발생

ProcessException: Process exited abnormally:
xcrun: error: unable to find utility "xcodebuild", not a developer tool or in PATH
  Command: xcrun xcodebuild -list -project Runner.xcodeproj
# xcode 빌드 도구 설치 경로 확인 후
xcode-select -p

# PATH에 등록해준다
vi ~/.bash_profile

####
export PATH="/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/X11/bin:/Users/ggg/dev/flutter/bin:/Library/Developer/CommandLineTools"
####

source ~/.bash_profile

xcode 는 애플 앱스토어에서 다운로드 하려고 했는데,, 버전 안맞대서 아래 링크에서 14.2버전으로 다운로드

https://developer.apple.com/download/all

다운받아서 이것도 /Users/ggg/dev 로 옮겨주고

sudo xcode-select --switch /Users/ggg/dev/

flutter doctor 다시 실행해봤는데, 이번엔 뭐 딴게 또 없단다…

# 에러메시지
CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on
        the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see <https://flutter.dev/platform-plugins>
      To install see <https://guides.cocoapods.org/using/getting-started.html#installation> for instructions.

링크에서 시키는대로 설치하려했는데 또 에러발생

sudo gem install cocoapods

ruby 버전이 2.7.X 이하여서 설치가 안됨

# 에러메시지
ERROR:  Error installing cocoapods:
        The last version of activesupport (>= 5.0, < 8) to support your Ruby & RubyGems was 6.1.7.6. Try installing it with `gem install activesupport -v 6.1.7.6` and then running the current command again
        activesupport requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210.

시키는대로 진행

sudo gem install activesupport -v 6.1.7.6
sudo gem install cocoapods

드디어 다 깔렸다!

flutter doctor
# [✓] Xcode - develop for iOS and macOS (Xcode 14.2)

다시 Run

Run > Start Debugging

드디어 데모 앱이 열렸다!!

앱 한 번 실행하기 힘들구려

이어서 다트 문법 공부하며 데모 앱을 만들어보도록 하겠다.

 

'개발 > Flutter' 카테고리의 다른 글

2-1. 다트 기본 문법1  (2) 2023.10.07