플러터 – 꿈꾸는 개발자 https://studioys.me #개발 #일상생활 #생각 Mon, 20 Jan 2025 00:19:59 +0000 ko-KR hourly 1 https://wordpress.org/?v=6.8 https://studioys.me/wp-content/webpc-passthru.php?src=https://studioys.me/wp-content/uploads/2024/09/cropped-그림1-32x32.png&nocache=1 플러터 – 꿈꾸는 개발자 https://studioys.me 32 32 [Flutter] Flutter 프로젝트 구성 및 가상 디바이스 https://studioys.me/how-to-set-up-a-flutter-project-and-a-virtual-device/ https://studioys.me/how-to-set-up-a-flutter-project-and-a-virtual-device/#respond Tue, 14 Jan 2025 04:03:52 +0000 https://studioys.me/?p=1245 더 보기[Flutter] Flutter 프로젝트 구성 및 가상 디바이스]]> 플러터(Flutter)는 크로스 플랫폼으로 하나의 코드 베이스로 다양한 앱을 만들 수 있습니다. 이번 포스팅에서는 Android 및 iOS 앱을 대상으로 Flutter 프로젝트 구성하고 가상 디바이스를 통해서 앱을 실행시켜보겠습니다.

사전 준비 사항

맥북에서 인텔리제이(IntellIJ) 기반으로 개발하기 때문에 개발 환경 구성이 되어 있어야 합니다.

만약 환경 구성이 안되어 있다면 다음 포스트를 참고하여 개발 환경 구성을 해주세요.

Flutter 프로젝트 구성

프로젝트 생성

Flutter 프로젝트를 생성하고, Platforms에서 AndroidiOS를 선택합니다.

Dart 패키키 이름은 소문자와 _ 만 허용하기 때문에 소문자와 _ 를 사용하여 프로젝트 이름을 생성해주세요.

Android SDK 설정

[설정] 메뉴로 들어가서 [언어 및 프레임워크] > [Android SDK 업데이트 관리자] 항목을 선택합니다. 아래와 같이 Android SDK 위치가 지정되어있지 않다면 Android SDK 위치를 지정합니다.

Android 패싯 추가

[파일] > [프로젝트 구조] 메뉴로 들어가서 [패싯] 항목을 선택 후 Andriod를 추가합니다.

가상 디바이스

정상적으로 개발 환경이 구성되었고, 프로젝트에 SDK 및 패싯을 정상적으로 추가했으면 아래와 같이 iOS Simulator와 Android Emulator를 확인할 수 있습니다.

인텔리제이 가상 디바이스 선택
인텔리제이 가상 디바이스 선택

iOS Simulator 또는 Android Emulator을 선택하면 가상 디바이스가 실행되고, 해당 디바이스를 선택하고 디버그 버튼을 누르면 가상 디바이스에 연결하여 디버깅을 할 수 있습니다.

인텔리제이(IntelliJ) iOS Simulator 실행
인텔리제이(IntelliJ) iOS Simulator 실행화면

마치며

이제 프로젝트를 구성하고, 가상 디바이스를 실행해보았습니다. 본격적으로 앱을 만들어보겠습니다.

]]>
https://studioys.me/how-to-set-up-a-flutter-project-and-a-virtual-device/feed/ 0
[Flutter] Flutter 개발 환경 설정 ( 맥북, macOS ) https://studioys.me/how-to-set-up-flutter-development-env-on-macbook/ https://studioys.me/how-to-set-up-flutter-development-env-on-macbook/#respond Mon, 13 Jan 2025 13:33:13 +0000 https://studioys.me/?p=1219 더 보기[Flutter] Flutter 개발 환경 설정 ( 맥북, macOS )]]> 플러터(Flutter)는 구글에서 출시한 크로스 플랫폼으로 Dart 언어를 기반으로 하나의 코드 베이스로 Linux, Windows, Android, macOS, iOS 및 웹 브라우저에서 모두 동작하는 앱을 만들 수 있습니다. 주로 Android 및 iOS 앱을 만들기 위한 용도로 많이 사용하고 있습니다.

이번 포스팅에서는 맥북에서 Android 및 iOS 앱을 만들기 위한 Flutter 개발 환경 및 인텔리제이 설정에 대해서 알아보겠습니다.

시스템 요구 사항

Flutter 개발을 위한 최소 시스템 요구사항은 다음과 같습니다.

  • 운영 체제: MacOS 11 (Big Sur) 이상 ( 최신 버전 권장 )
  • CPU: 최소 4 Core ( 8Core 권장 )
  • RAM: 최소 8GB ( 16GB 권장 )
  • 디스크 공간: 최소 44GB의 여유 공간 ( 70GB 이상 권장 )
  • 해상도: 최소 WXGA(1366×768) 이상의 화면 해상도 ( 1928×1080 권장 )

Flutter SDK 설치

Flutter SDK 다운로드 및 설치

Flutter를 설치하려면 다운로드 페이지에서 Flutter SDK 파일을 다운로드하고 원하는 폴더에 압축을 해제합니다.

  1. 최신 버전 또는 프로젝트에서 사용하는 버전을 다운로드 합니다.
  2. 원하는 위치에 폴더를 생성 후 해당 폴더에 압축을 풀면 설치가 완료됩니다.
    공식 가이드에서는 ~/development 폴더를 권장합니다.

Flutter 경로 추가

터미널에서 Flutter 명령을 실행하기 위해서 ~/.zshrc 파일 맨 뒤에 PATH 환경 변수에 Fultter 경로를 추가하고, source ~/.zshrc 명령으로 새로고침 합니다.

export PATH=$HOME/development/flutter/bin:$PATH

정상적으로 PATH 경로가 등록 되었는지 확인해보겠습니다.

flutter --version
실행 결과
Flutter 3.19.6 • channel stable • https://github.com/flutter/flutter.git

Flutter 개발 환경 구성 – Android

안드로이드(Android) 앱을 개발하기 위해서는 Android Studio를 먼저 설치해야 합니다.

Android 앱 개발을 위해서 다음 포스트를 참고하여 Android Studio 설치 및 설정을 해주세요.

Flutter 개발 환경 구성 – iOS

iOS 앱을 개발하기 위해서는 XcodeCocoaPods를 설치해야 합니다.

iOS 앱 개발을 위해서 다음 포스트를 참고하여 Xcode 및 CocoaPods 설치 및 설정을 해주세요.

인텔리제이(IntelliJ) 설정

Flutter 개발을 위한 인텔리제이(IntelliJ) 설정을 해보겠습니다. ( IntelliJ IDEA 2024.3.3.1 버전 기준 )

플러그인 설치

[설정] > [플러그인] 메뉴에서 Dart, Flutter를 설치합니다.

인텔리제이(IntelliJ) 플러그인
IntelliJ 플러그인

플러그인 설치 완료 후 IntelliJ를 재시작합니다.

신규 프로젝트 생성

IntelliJ에서 신규 프로젝트를 생성하면 아래 그림과 같이 Flutter이 추가된 것을 확인할 수 있습니다. Flutter SDK Path에 Flutter 경로를 설정하고, 프로젝트를 생성하면 됩니다.

인텔리제이(IntelliJ) Flutter 프로젝트
IntelliJ에서 Flutter 프로젝트 생성 화면

기존 프로젝트 추가

기존 Flutter 프로젝트가 있는 경우 [설정] > [언어 및 프레임워크] > [Flutter] 메뉴에 가면 Flutter SDK Path를 설정할 수 있습니다.

인텔리제이(IntelliJ) Flutter SDK 경로 설정
IntelliJ Flutter SDK 경로 설정

마치며

맥북에서 Flutter 개발 환경 설정을 완료했습니다. 이제 크로스 플랫폼으로 Android 앱 개발 및 iOS 앱 개발을 시작해보겠습니다.

]]>
https://studioys.me/how-to-set-up-flutter-development-env-on-macbook/feed/ 0
[Flutter] iOS 앱 개발 환경 설정 ( Xcode 및 CocoaPods ) https://studioys.me/how-to-set-up-an-ios-app-development-env-for-flutter/ https://studioys.me/how-to-set-up-an-ios-app-development-env-for-flutter/#respond Sun, 12 Jan 2025 12:37:20 +0000 https://studioys.me/?p=1222 더 보기[Flutter] iOS 앱 개발 환경 설정 ( Xcode 및 CocoaPods )]]> 이 글은 Flutter 개발 환경 설정 가이드의 하위 포스트로, Flutter로 iOS 앱을 개발하기 위한 환경을 설정하는 방법을 설명합니다.

(2025년 01월 12일 기준) Flutter로 iOS 앱을 개발하려면 Xcode 16 버전 및 CocoaPods 1.16 버전이 필요합니다. 이번 포스팅에서는 맥북(macOS)에서 iOS 앱 개발 환경 설정 방법에 대해서 알아보겠습니다.

iOS 앱 개발 환경 설정

Xcode 설치 및 환경 설정

iOS 앱 개발을 위해 Xcode를 설치해야 합니다.

Xcode 설치

  1. App Store를 열고, Xcode를 검색하여 설치합니다.
  2. 설치가 완료되면 Xcode를 실행하여 필요한 구성 요소를 다운로드합니다.

Xcode 라이선스 동의

Xcode를 처음 사용할 때는 사용 라이선스에 동의해야 합니다. Xcode 실행 후 라이선스 동의하거나 터미널 명령어를 통해 라이선스 동의할 수 있습니다.

터미널을 열고 아래 명령을 입력하고 라이선스 내용을 확인한 뒤, agree를 입력하여 라이선스에 동의합니다.

sudo xcodebuild -license

명령줄 도구(Command Line) 설정

설치된 Xcode 버전을 명령줄 도구(Command Line)로 설정하기 위해 터미널에서 아래 명령어를 입력합니다.

sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'

루비(Ruby) 버전 확인 및 업데이트

CocoaPods를 설치하려면 최신 버전의 Ruby가 필요합니다.

루비 버전 확인

터미널에서 아래 명령어로 현재 설치된 Ruby 버전을 확인합니다.

ruby -v
실행 결과
ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin24]

(2025년 01월 12일 기준) CocoaPods 1.16버전은 Ruby 3.1.0 버전이 필요합니다.Homebrewrbenv를 사용하여 Ruby 3.1.0을 설치합니다.

Homebrew가 설치되어 있지 않다면 Homebrew 설치 가이드를 참고하세요.

1. rbenv 설치

brew install rbenv

2. ruby 3.1.0 설치

rbenv install 3.1.0
rbenv global 3.1.0

3. ruby 버전 확인

ruby -v

환경 변수 설정

루비 버전이 반영되지 않았다면 환경 변수를 설정합니다.
~/.zshrc 파일에 아래 내용을 추가하고 source ~/.zshrc 명령을 입력하여 적용합니다.

eval "$(rbenv init -)"

CocoaPods 설치

CocoaPods는 iOS 프로젝트의 의존성을 관리하는 도구입니다.

CocoaPods 설치

터미널에서 아래 명령을 입력하여 CocoaPods를 설치합니다. 관리자 패스워드를 입력하고, 시간이 조금 지나면 설치가 시작됩니다.

sudo gem install cocoapods

환경 변수 설정

CocoaPods 설치 후, 환경 변수를 추가합니다.
~/.zshrc 파일에 아래 내용을 추가하고 source ~/.zshrc 명령을 입력하여 적용합니다.

export PATH=$HOME/.gem/bin:$PATH

iOS 시뮬레이터 설정

가상 디바이스 다운로드

아래 명령어로 필요한 iOS 플랫폼 파일을 다운로드합니다.

xcodebuild -downloadPlatform iOS

시뮬레이터 실행

터미널에서 아래 명령어로 iOS 시뮬레이터를 실행합니다.

open -a Simulator

시뮬레이터가 정상적으로 실행되면 설치가 완료된 것입니다.

개발 환경 체크

Flutter Doctor 실행

터미널에서 아래 명령을 실행하여 환경 구성이 정상적으로 완료되었는지 확인합니다.

flutter doctor
실행 결과
Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.27.0, on macOS 15.2 24C101 darwin-arm64, locale ko-KR)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
[!] Chrome - develop for the web
[✓] Android Studio (version 2024.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2024.3.1.1)
[✓] Connected device (1 available)
[✓] Network resources

Xcode - develop for iOS and macOS (Xcode 16.2) 항목이 정상적으로 체크되었다면 iOS 앱 개발 환경 설정이 완료된 것입니다.

마치며

Flutter에서 iOS 앱 개발을 시작하기 위해 필요한 환경 설정을 마쳤습니다. 이제 Flutter로 iOS 앱 개발을 시작해보세요.!!

참고 자료

]]>
https://studioys.me/how-to-set-up-an-ios-app-development-env-for-flutter/feed/ 0