안녕하세요 욱승입니다 🙇🏻♂️
큰맘 먹고 Flutter 포스팅을 시작해보려고 합니다..
사실은 진작에 해봤어야 했는데 귀차니즘이 온몸에 퍼져버렸읍니다..
(게으른 나 자신 반성해)
들어가기에 앞서..
Flutter란?
Flutter는 Google에서 개발한 오픈 소스 UI 소프트웨어 개발 키트입니다. 단일 코드베이스로 Android, iOS, Linux, macOS, Windows, Google Fuchsia 및 웹과 같은 플랫폼용 애플리케이션을 개발하는 데 사용됩니다.
단일 코드베이스로 여러가지 플랫폼에서 활용 가능한 점이 가장 큰 장점인 언어입니다.
Flutter의 장단점
눈에 띄는건 장점으로는 빠른 개발이 있겠고 단점으로는 러닝 커브가 있다는 점이 있겠네용
Native 개발 보다는 조금 기능적 성능적으로 떨어질 수 있겠지만 스타트업이나 빠른 개발을 요하는 기업 및 프로젝트는 크로스 플랫폼을 자주 사용합니다.
Flutter와 React-Native의 차이점
Flutter와 항상 비교되는 React Native입니다.
차이점이 뭐가 있을까?
큰 차이로는
React Native는 JavaScript 브리지를 이용하여 네이티브 모듈과 통신하고
Flutter는 Dart코드를 네이티브 코드로 직접 컴파일 함..
네 뭐.. 성능은 Flutter가 더 좋다고 합니다?
1. Flutter SDK 설치
VSCode에서 ⌘ + ⇧ + P -> New Proejct 실행
그러면 오른쪽 하단에 Flutter SDK를 찾을수 없으니 다운로드를 받거나 이미 다운로드가 되어있다면 SDK의 위치를 임의 설정 해달라라는 문구 노출
이미 받아놓은 SDK가 있다면 Locate SDK 그렇지 않다면 Download SDK
나처럼 Flutter가 처음인 개발자들 맞춤 포스팅이기에.. Download SDK 클릭
적절한 곳에 Clone Flutter
SDK 다운로드가 완료되면, Flutter SDK의 Path를 외부 터미널에서도 접근 가능하도록 도와줌
(친절해 Flutter..)
2. Flutter 프로젝트 만들기
그럼 이제 진짜 New Project
그러면 이렇게 어느 Template을 이용해서 프로젝트를 생성할건지 선택지를 줌 나는 Application을 선택하겠음
일 잘하네 ㅋ
3. Run Flutter Doctor
플러터 의사님 실행..?
'flutter doctor'를 실행하면 Flutter 개발 환경에 문제가 있는지 확인할 수 있습니다. 설치된 Flutter, Android Studio, Xcode 등의 상태를 점검하고, 필요한 추가 설치 또는 설정 변경에 대한 보고서를 제공합니다.
실행하면 아래와 같이
[flutter] flutter doctor -v
[!] Flutter (Channel stable, 3.29.2, on macOS 15.2 24C101 darwin-arm64, locale ko-KR) [1,266ms]
• Flutter version 3.29.2 on channel stable at /Users/incross0915/flutter
! The flutter binary is not on your path. Consider adding /Users/incross0915/flutter/bin to your path.
! The dart binary is not on your path. Consider adding /Users/incross0915/flutter/bin to your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision c236373904 (3주 전), 2025-03-13 16:17:06 -0400
• Engine revision 18b71d647a
• Dart version 3.7.2
• DevTools version 2.42.3
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [6.5s]
• Android SDK at /Users/incross0915/Library/Android/sdk
• Platform android-35, build-tools 34.0.0
• Java binary at: /Library/Java/JavaVirtualMachines/temurin-17.jdk/Contents/Home/bin/java
This JDK is specified in your Flutter configuration.
To change the current JDK, run: `flutter config --jdk-dir="path/to/jdk"`.
• Java version OpenJDK Runtime Environment Temurin-17.0.6+10 (build 17.0.6+10)
• All Android licenses accepted.
[!] Xcode - develop for iOS and macOS (Xcode 16.3) [3.9s]
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16E140
! CocoaPods 1.13.0 out of date (1.16.2 is recommended).
CocoaPods is a package manager for iOS or macOS platform code.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/to/platform-plugins
To update CocoaPods, see https://guides.cocoapods.org/using/getting-started.html#updating-cocoapods
[✓] Chrome - develop for the web [29ms]
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.3) [28ms]
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
[✓] VS Code (version 1.99.0) [25ms]
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.102.0
[✓] Connected device (4 available) [8.9s]
• iPhoneXS (mobile) • 00008020-001B78813A62002E • ios • iOS 18.3.2 22D82
• macOS (desktop) • macos • darwin-arm64 • macOS 15.2 24C101 darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 15.2 24C101 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 135.0.7049.41
! Error: Browsing on the local area network for 욱. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources [1,304ms]
• All expected network resources are available.
! Doctor found issues in 2 categories.
exit code 0Flutter와 Xcode 빼고는 문제 없어보임
4. Flutter 프로젝트를 Chrome 브라우저에서 실행
flutter run -d chrome해당 명령어로 실행 가능..!
환경에 따라 다르겠지만 쥔장 PC로는 처음에 약 20초 정도 소요 되었고 이후에는 10~12초 정도 소요되었읍니다 ㅋ
5. Flutter 프로젝트를 iOS Simulator에서 프로젝트 실행
Xcode와 Simuator가 Local 환경에 있다는 가정하에 진행 해볼게요..(만약 없으시다면 댓글로 남겨주세요 힘이 닿는 곳까지 도움 드릴게요 아마도)
open -a Simulator시뮬레이터 구동, 시뮬레이터가 켜짐
flutter devices연결 가능한 디바이스를 출력해줌
flutter run -d B3A52143-738E-4BA1-8C77-5099909F610Aflutter run -d {시뮬레이터 UUID}
incross0915@incross0915-MacBook-Air flutter_demo % flutter run -d B3A52143-738E-4BA1-8C77-5099909F610A
Downloading ios tools... 8.3s
Downloading ios-profile tools... 6.5s
Downloading ios-release tools... 13.1s
Launching lib/main.dart on iPhone 16 Pro Max in debug mode...
Running Xcode build...
└─Compiling, linking and signing... 15.7s
Xcode build done. 38.1s
Syncing files to device iPhone 16 Pro Max... 160ms
Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
A Dart VM Service on iPhone 16 Pro Max is available at: http://127.0.0.1:65138/9n5RrKvI0HY=/
The Flutter DevTools debugger and profiler on iPhone 16 Pro Max is available at: http://127.0.0.1:9101?uri=http://127.0.0.1:65138/9n5RrKvI0HY=/터미널 로그
Chrome과 동일하게 'R' 혹은 'r' 키워드로 새로고침이 바로 가능하..네?
계속 컴파일을 해줘야 하는 줄 알았는데 빠르게 개발이 가능해보임
6. Flutter 프로젝트를 Android Emulator에서 프로젝트 실행
안드로이드 스튜디오 Open -> 에뮬레이터 실행
flutter devicesVSCode에서 명령어 실행
flutter run -d emulator-5554
안드로이드도 동일하게 'R' 혹은 'r' 키워드로 새로고침이 바로 가능함
결론
flutter 초기셋팅을 진행해봤는데 크게 어려움은 없었다.
아키텍처 패턴인 MVVM을 예시로 진행해볼 예정입니다..!
그럼 20000
안녕하세요 욱승입니다 🙇🏻♂️
큰맘 먹고 Flutter 포스팅을 시작해보려고 합니다..
사실은 진작에 해봤어야 했는데 귀차니즘이 온몸에 퍼져버렸읍니다..
(게으른 나 자신 반성해)
들어가기에 앞서..
Flutter란?
Flutter는 Google에서 개발한 오픈 소스 UI 소프트웨어 개발 키트입니다. 단일 코드베이스로 Android, iOS, Linux, macOS, Windows, Google Fuchsia 및 웹과 같은 플랫폼용 애플리케이션을 개발하는 데 사용됩니다.
단일 코드베이스로 여러가지 플랫폼에서 활용 가능한 점이 가장 큰 장점인 언어입니다.
Flutter의 장단점
눈에 띄는건 장점으로는 빠른 개발이 있겠고 단점으로는 러닝 커브가 있다는 점이 있겠네용
Native 개발 보다는 조금 기능적 성능적으로 떨어질 수 있겠지만 스타트업이나 빠른 개발을 요하는 기업 및 프로젝트는 크로스 플랫폼을 자주 사용합니다.
Flutter와 React-Native의 차이점
Flutter와 항상 비교되는 React Native입니다.
차이점이 뭐가 있을까?
큰 차이로는
React Native는 JavaScript 브리지를 이용하여 네이티브 모듈과 통신하고
Flutter는 Dart코드를 네이티브 코드로 직접 컴파일 함..
네 뭐.. 성능은 Flutter가 더 좋다고 합니다?
1. Flutter SDK 설치
VSCode에서 ⌘ + ⇧ + P -> New Proejct 실행
그러면 오른쪽 하단에 Flutter SDK를 찾을수 없으니 다운로드를 받거나 이미 다운로드가 되어있다면 SDK의 위치를 임의 설정 해달라라는 문구 노출
이미 받아놓은 SDK가 있다면 Locate SDK 그렇지 않다면 Download SDK
나처럼 Flutter가 처음인 개발자들 맞춤 포스팅이기에.. Download SDK 클릭
적절한 곳에 Clone Flutter
SDK 다운로드가 완료되면, Flutter SDK의 Path를 외부 터미널에서도 접근 가능하도록 도와줌
(친절해 Flutter..)
2. Flutter 프로젝트 만들기
그럼 이제 진짜 New Project
그러면 이렇게 어느 Template을 이용해서 프로젝트를 생성할건지 선택지를 줌 나는 Application을 선택하겠음
일 잘하네 ㅋ
3. Run Flutter Doctor
플러터 의사님 실행..?
'flutter doctor'를 실행하면 Flutter 개발 환경에 문제가 있는지 확인할 수 있습니다. 설치된 Flutter, Android Studio, Xcode 등의 상태를 점검하고, 필요한 추가 설치 또는 설정 변경에 대한 보고서를 제공합니다.
실행하면 아래와 같이
[flutter] flutter doctor -v
[!] Flutter (Channel stable, 3.29.2, on macOS 15.2 24C101 darwin-arm64, locale ko-KR) [1,266ms]
• Flutter version 3.29.2 on channel stable at /Users/incross0915/flutter
! The flutter binary is not on your path. Consider adding /Users/incross0915/flutter/bin to your path.
! The dart binary is not on your path. Consider adding /Users/incross0915/flutter/bin to your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision c236373904 (3주 전), 2025-03-13 16:17:06 -0400
• Engine revision 18b71d647a
• Dart version 3.7.2
• DevTools version 2.42.3
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [6.5s]
• Android SDK at /Users/incross0915/Library/Android/sdk
• Platform android-35, build-tools 34.0.0
• Java binary at: /Library/Java/JavaVirtualMachines/temurin-17.jdk/Contents/Home/bin/java
This JDK is specified in your Flutter configuration.
To change the current JDK, run: `flutter config --jdk-dir="path/to/jdk"`.
• Java version OpenJDK Runtime Environment Temurin-17.0.6+10 (build 17.0.6+10)
• All Android licenses accepted.
[!] Xcode - develop for iOS and macOS (Xcode 16.3) [3.9s]
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16E140
! CocoaPods 1.13.0 out of date (1.16.2 is recommended).
CocoaPods is a package manager for iOS or macOS platform code.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/to/platform-plugins
To update CocoaPods, see https://guides.cocoapods.org/using/getting-started.html#updating-cocoapods
[✓] Chrome - develop for the web [29ms]
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.3) [28ms]
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
[✓] VS Code (version 1.99.0) [25ms]
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.102.0
[✓] Connected device (4 available) [8.9s]
• iPhoneXS (mobile) • 00008020-001B78813A62002E • ios • iOS 18.3.2 22D82
• macOS (desktop) • macos • darwin-arm64 • macOS 15.2 24C101 darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 15.2 24C101 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 135.0.7049.41
! Error: Browsing on the local area network for 욱. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources [1,304ms]
• All expected network resources are available.
! Doctor found issues in 2 categories.
exit code 0Flutter와 Xcode 빼고는 문제 없어보임
4. Flutter 프로젝트를 Chrome 브라우저에서 실행
flutter run -d chrome해당 명령어로 실행 가능..!
환경에 따라 다르겠지만 쥔장 PC로는 처음에 약 20초 정도 소요 되었고 이후에는 10~12초 정도 소요되었읍니다 ㅋ
5. Flutter 프로젝트를 iOS Simulator에서 프로젝트 실행
Xcode와 Simuator가 Local 환경에 있다는 가정하에 진행 해볼게요..(만약 없으시다면 댓글로 남겨주세요 힘이 닿는 곳까지 도움 드릴게요 아마도)
open -a Simulator시뮬레이터 구동, 시뮬레이터가 켜짐
flutter devices연결 가능한 디바이스를 출력해줌
flutter run -d B3A52143-738E-4BA1-8C77-5099909F610Aflutter run -d {시뮬레이터 UUID}
incross0915@incross0915-MacBook-Air flutter_demo % flutter run -d B3A52143-738E-4BA1-8C77-5099909F610A
Downloading ios tools... 8.3s
Downloading ios-profile tools... 6.5s
Downloading ios-release tools... 13.1s
Launching lib/main.dart on iPhone 16 Pro Max in debug mode...
Running Xcode build...
└─Compiling, linking and signing... 15.7s
Xcode build done. 38.1s
Syncing files to device iPhone 16 Pro Max... 160ms
Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
A Dart VM Service on iPhone 16 Pro Max is available at: http://127.0.0.1:65138/9n5RrKvI0HY=/
The Flutter DevTools debugger and profiler on iPhone 16 Pro Max is available at: http://127.0.0.1:9101?uri=http://127.0.0.1:65138/9n5RrKvI0HY=/터미널 로그
Chrome과 동일하게 'R' 혹은 'r' 키워드로 새로고침이 바로 가능하..네?
계속 컴파일을 해줘야 하는 줄 알았는데 빠르게 개발이 가능해보임
6. Flutter 프로젝트를 Android Emulator에서 프로젝트 실행
안드로이드 스튜디오 Open -> 에뮬레이터 실행
flutter devicesVSCode에서 명령어 실행
flutter run -d emulator-5554
안드로이드도 동일하게 'R' 혹은 'r' 키워드로 새로고침이 바로 가능함
결론
flutter 초기셋팅을 진행해봤는데 크게 어려움은 없었다.
아키텍처 패턴인 MVVM을 예시로 진행해볼 예정입니다..!
그럼 20000
