코드 기어 Code Gear - 개발 강좌

Dart로 첫 번째 프로그램을 만들고 실행하는 법에 대해 알아보겠습니다.
에디터는 Visual Studio Code(VSCode)를 사용합니다.
 

Flutter Extention 설치

VSCode에 Flutter extention을 설치합니다. Flutter extention을 설치하면 Dart도 같이 설치가 됩니다.
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

Dart Project 생성

VSCode에서 Command Pallete를 실행합니다.
VSCode의 메뉴에서 "보기-명령 팔레트"를 선택하거나, 단축키 Command+Shift+P를 누릅니다.

Command Pallete에 "Dart"를 입력합니다.

다음 화면에서 "Cosole Application"을 선택합니다.

다음 화면에서 프로젝트 폴더명을 입력 합니다.
저는 "dart_first_app"라는 폴더명을 사용했습니다.

입력 후 "Select a folder to create the projec in"을 클릭합니다.

폴더 생성 후 프로젝트 명을 입력합니다.
저는 "dart_first_app"이라고 입력하였습니다.

이제 첫번째 프로젝트가 완성되고 아래와 같은 화면이 나옵니다.

Dart 프로젝트 실행

프로젝트 우측 상단의 실행 버튼을 클릭합니다.

프로젝트가 정상적으로 실행되면 아래와 같이 "Hello World" 로그가 나옵니다.

 
이렇게 Dart 첫번째 프로젝트가 완료되었습니다.

Flutter의 개발 언어로 잘 알려진 Dart에 대해 알아보겠습니다.

이 글은 dart 의 공식 홈페이지를 참조하여 작성 하였습니다.

https://dart.dev/

Dart 의 장점

아래는 Dart 공식 홈페이지에 가면 가장 먼저 보이는 배너입니다.

"Instant hot reload" 라는 것을 강조하고 있습니다.

이것은 프로그램을 개발 할 때 코드가 변경되는 즉시 반영이 된다는 뜻입니다.

컴파일과 빌드를 요구하는 다른 언어들은 전체 코드를 빌드하는데 일정 시간이 소요됩니다.

개발시 UI 관련 코드를 변경하고 바로 확인할 수 있다는 것은 큰 장점입니다.

• 개발 효율의 증가 - 시간 단축
• 빠른 피드백 - 테스트나 디버깅에 유리

다른 장점들에 대해서도 설명하고 있습니다.

• Approachable
  • 친숙한 언어이다 - 다른 언어에서 사용한 문법과 유사한 형태를 가지고 있어 언어에 쉽게 접근할 수 있습니다.
  • 강력한 Type 언어이다 - 명확한 type 정의를 사용하여 사전에 오류를 막을 수 있습니다.
  • NULL Safe 언어이다 - 변수에 null을 할당할 수 없습니다. 따라서 실행 중 null point exception과 같은 오류에서 자유로워질 수 있습니다.
• Productive development
  • Dart는 개발 생산성을 높여주는 언어입니다.
  • Hot reload를 제공하여 개발 속도를 높이고, 빠르게 실험해 볼 수 있습니다.
  • 여러 Editor와 통합 환경을 제공함으로 개발 편의성을 높였습니다.
• Portable and fast on all platforms
  • 여러 platform에서 동일한 코드로 실행되는 언어입니다.
  • iOS, Android 같은 모바일 환경 뿐만 아니라, desktop, web, server등의 다양한 환경에서 작동 가능합니다.

Dart의 단점

• Native App과 똑같지는 않습니다. 즉 iOS, Android 등 Native 가 가지고 있는 고유한 형태의 app 보다는 범용적인 형태의 app 개발에 유리합니다.
• 개발 생태계가 크지 않습니다. 다른 성숙한 언어들에 비해 커뮤니티, 오픈소스, 플러그인 등이 많지 않습니다.
• 브라우저에서 개발시 transpile 해야 하므로 성능이나 디버깅에 제한이 있을 수 있습니다.

결론

• Flutter와의 통합으로 크로스플랫폼 개발을 할 수 있습니다. 복잡한 기능이 아니라면 적은 비용으로 iOS, Android용 앱을 모두 개발 할 수 있습니다.
• 간결한 문법으로 쉽게 접근이 가능하고, 다양한 Editor를 사용할 수 있습니다. 복잡하지 않은 기능의 앱을 빠르게 개발 하고자 한다면 Dart를 사용해 보는 것도 좋은 선택지가 될 것 같습니다.

Flutter 개발 환경 설정에 대해 알아봅니다.

이 글은 Flutter 공식 홈페이지의 Get Started 문서를 참조하였습니다.

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

플랫폼 선택

환경에 맞게 선택하시면 됩니다.
저는 맥을 선택하였습니다.

Type of app

다음으로는 어떤 종류의 앱을 만들 것인지를 선택해야 합니다.

저는 iOS를 선택하였습니다.

Software 설치

• Apple Sillicon을 사용하는 Mac일 경우 Rosetta 2 translation process를 설치해야 합니다.
  • Mac에서 intel 기반의 app을 실행할 때 필요한 유틸리티입니다.

sudo softwareupdate --install-rosetta --agree-to-license

• XCode 설치
  •  Swift 와 ObjectC code를 컴파일하고 디버깅 하기 위해 XCode를 설치합니다.
  • https://developer.apple.com/xcode/

• CocoaPods 설치
  • Native앱에 Flutter plugin 컴파일이 가능하도록 CocoaPods을 설치합니다. 
  • https://cocoapods.org/

• 아래 명령어를 사용하여 cocoapods를 설치합니다

sudo gem install cocoapods

• cocoapods 설치시 다음과 같은 오류가 발생할 수 있습니다.

ERROR:  Error installing cocoapods:
	ERROR: Failed to build gem native extension.

• 이때는 xcode-select를 인스톨 하면 됩니다.
  • xcode-select는 XCode의 명령줄 관리 도구입니다.

xcode-select --install

• 간혹 xcode-select도 아래와 같이 설치가 안될 경우가 있습니다.

xcode-select: note: Command line tools are already installed. 
Use "Software Update" in System Settings or the softwareupdate 
command line interface to install updates

• 이때는 software update를 download 하여 설치하면 해결 할 수 있습니다.
  • software update는 운영 체제와 관련된 모든 소프트웨어 업데이트를 자동으로 설치하는 기능을 수행합니다.
  • 따라서 다운로드 및 설치 시간이 좀 많이 소요됩니다.

softwareupdate --install -a

• 다운로드가 완료되면 "시스템 설정"에 업데이트가 표시되고, 업데이트를 클릭 하시면됩니다.
  • 업데이트가 완료되면 다시 CocoaPods를 설치합니다.

sudo gem install cocoapods

• 설치가 완료되면 다음과 같이 메시지가 표시됩니다.

Text Editor Settings

• Text editor는 Visual Studio Code, Android Studio, IntelliJ IDEA등을 사용할 수 있습니다.
• 저는 Visual Studio Code를 선택하였습니다.
• Visual Studio Code를 설치하고, 실행합니다.
• 아래 링크에 있는 Dart Extention을 추가합니다.
• https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
• Command Palette를 실행합니다. 단축키는 Command+Shift+P 입니다.
• Command Palette에서 "flutter"를 입력합니다.

• "Flutter:New Project"를 선택합니다.
• 이때 Flutter SDK가 설치 되어 있지 않으면 다운로드하여 설치하시면됩니다.
• 설치가 되어 있다면 위치를 지정해주면 됩니다.
• SDK 설치 후에 Command Palette에서 "Flutter:New Project"를 선택하고 "flutter-first" 라는 프로젝트를 생성합니다.

iOS 개발환경 설정

• XCode를 설치합니다.
• XCode의 버전에 맞는 command line tool을 설치합니다.

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

• XCode license에 동의 서명을 합니다.

sudo xcodebuild -license

iOS Simulator 설치

• iOS Simulator를 설치합니다.

xcodebuild -downloadPlatform iOS

• Simulator를 실행합니다

open -a Simulator

• XCode를 실행합니다.
• 메뉴에서 Windows - Devices and Simulators를 선택합니다.
• simulator 탭을 클릭하면 사용 가능한 리스트가 나옵니다.

• XCode에서 flutter_first 프로젝트를 엽니다.

• 탐색 창에서 flutter_first 프로젝트 아래 있는 ios를 선택하면 됩니다.

• XCode 상단의 파란색 실행 버튼을 클릭합니다.

• 아래와 같이 simulator가 실행됩니다.