[Flutter] Flutter에 대한 소개 & 개발 환경 설정

 

Flutter는 구글에서 개발한 모바일 앱 개발 프레임워크로, 하나의 코드 베이스로 안드로이드, 리눅스, Windows, macOS, iOS 및 웹 브라우저에서 모두 동작되는 앱을 빠르게 개발할 수 있도록 지원합니다.

Flutter는 대화형 디자인 및 애니메이션을위한 다양한 위젯 라이브러리를 제공합니다. 이를 사용하여 다양한 디자인 패턴을 구현하고, UI 구성 요소를 구성하여 사용자 경험을 향상시킬 수 있습니다.

Flutter는 Dart 언어를 사용하며, Android 및 iOS와 같은 모바일 플랫폼 외에도 웹, 데스크톱 및 임베디드 장치에서도 사용할 수 있습니다.

Dart는 크로스 플랫폼 애플리케이션을 위해 디자인된 프로그래밍 언어로, 기본적으로 C언어의 문법과 유사하면서도 Java, C#, JavaScript의 특성을 지닌 언어입니다. 이전에 Java, C#와 같은 언어를 학습하신 경험이 있으면 쉽게 배우실 수 있습니다.

Dart 바로 사용하기: https://dartpad.dev/

Dart와 Java는 모두 객체 지향 프로그래밍 언어인 만큼 공통적인 특정을 지니만, 몇 가지 차이점이 있습니다.

1. 타입 시스템: Dart는 선택적 타이핑을 사용합니다. 이것은 변수에 대해 타입을 지정하지 않아도 되지만, 필요한 경우 타입을 지정할 수 있습니다. 반면, Java는 강력한 타입 시스템을 가지고 있어 모든 변수와 함수에 대해 명시적으로 타입을 지정해야 합니다.
2. 비동기 프로그래밍: Dart는 비동기 프로그래밍을 위한 내장 지원을 제공합니다. 이를 통해 비동기 코드를 작성하고 실행할 수 있으며, Future와 Stream 클래스 등의 API를 통해 이를 처리할 수 있습니다. 반면, Java는 비동기 코드를 작성하기 위해 별도의 라이브러리를 사용해야 합니다.
3. 실행 환경: Dart는 별도의 가상 머신을 사용하지 않으며, AOT(Ahead-of-Time) 컴파일러 및 JIT(Just-in-Time) 컴파일러를 사용하여 코드를 실행합니다. 반면, Java는 Java 가상 머신(JVM)을 사용하여 코드를 실행합니다.
4. null 값 처리: Dart는 null 값을 다루기 위해 Null-Safety 기능을 제공합니다. 이를 통해 null 값을 명시적으로 다룰 수 있습니다. Java는 null 값을 처리하기 위해 예외를 발생시키거나, null 처리를 위한 별도의 라이브러리를 사용해야 합니다.
5. 확장 함수: Dart는 확장 함수(extension function)를 지원합니다. 이를 통해 기존 클래스에 새로운 함수를 추가할 수 있습니다. 반면, Java는 이러한 기능을 지원하지 않습니다.
6. 라이브러리: Dart는 모든 코드가 라이브러리로 구성되어 있습니다. 이는 코드의 재사용성을 높이고, 모듈화를 강화합니다. 반면, Java는 이러한 기능을 지원하지 않습니다.
7. 문법: Dart는 Java와 달리 세미콜론(;)을 필요로 하지 않습니다. 또한 Dart는 함수를 정의할 때 함수 이름 뒤에 괄호를 사용하지 않습니다. 이러한 문법적 차이점은 Dart 코드의 가독성을 높이고 코드 작성하는 속도를 높입니다.

Dart-Java의 차이점으로 인해 대체로 Dart로 작성한 코드는 Java로 작성한 것에 비해 간결한 편에 속합니다. 하지만 어느 프로그래밍 언어든 코드의 가독성과 유지 보수성을 고려하여 코드를 작성해야 질 좋은 코드가 나온다는 것을 잊지 말아 주세요!

 

개발 환경 셋업하기

Flutter 셋업하기 전에 우선 Android Studio부터 설치하도록 하세요!

https://developer.android.com/studio

 

이제 Flutter를 셋업하도록 하겠습니다.

아래 링크를 통해서 Flutter SDK를 다운로드 받아 설치합니다. Windows, macOS, Linux 운영체제에서 사용 가능한 만큼, 현재 사용 중인 운영체제에 해당되는 파일을 다운로드하시면 됩니다.

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

Windows일 경우 압축파일을 다운로드하신 뒤 C:\src\flutter 디렉토리를 만들어서 flutter 폴데에 압축을 푸시면 됩니다.

 

Flutter를 사용하기 위해서는 Flutter SDK의 경로를 시스템 환경 변수를 설정하여 Path 리스트에 추가해야 합니다. Path 설정 방법은 각 운영체제별로 다르므로, Flutter 설치 후 나오는 안내문을 참고해 주세요.

Windows일 경우: 시스템 속성 > 환경 변수 > Path

 

정상적으로 시스템에 반영되었는지 확인하시려면 콘솔에 들어가서 "where flutter dart" 입력하시면 됩니다. 아래 스크린샷처럼 출력되면 정상적으로 반영된 것입니다.

이제 flutter doctor를 실행해서 정상적으로 동작할 수 있는 환경이 구성되었는지 확인하시면 됩니다.

 

 

 

자주 발생하는 오류 1: cmdline-tools

flutter doctor 실행 결과 cmdline-tools를 찾을 수 없음 (cmdline-tools component is missing)이 출력될 경우 Android Studio 설정을 통해서 "Andnroid SDK Command-line Tools" 를 설치하시면 됩니다.

 

 

자주 발생하는 오류 2: 안드로이드 라이선스 (Android license status unknown)

flutter doctor 실행 결과 안드로이드 라이선스 상태 알 수 없음 (Android license status unknown)이 출력될 경우 아래 명령어 입력을 통해서 안드로이드 SDK 라이선스를 동의하시면 됩니다.

flutter doctor --android -licenses

 

자주 발생하는 오류 3: 비주얼 스튜디오 관련 오류 (Visual Studio is missing necessary components)

flutter doctor 실행 결과 안드로이드 라이선스 상태 알 수 없음 (Android license status unknown)이 출력될 경우 비주얼 스튜디오 설치 프로그램을 통해서 Desktop development with C++를 설치하시면 됩니다.

참고: 윈도우용 앱으로 빌드하지 않으실 계획이면 해당 오류는 무시하셔도 괜찮습니다.

 

기타 오류 해결 방법

콘솔에 flutter doctor -v 입력하시면 구체적인 설명이 모두 출력되니 참고하시면 됩니다.

 

flutter doctor 실행 결과 아래 스크린샷처럼 모두 초록색 체크가 출력될 경우 바로 Flutter 앱을 개발하실 수 있습니다!

 

Android Studio로 개발 시작하기

참고: Visual Studio Code로 개발하고자 하신 분들은 아래로 스크롤해주세요.

Android Studio에서 Flutter 앱을 개발하고자 하시는 경우 설정을 통해서 Flutter 모듈을 설치하셔야 합니다.

정상적으로 셋업하신 경우 Android Studio 실행 시 New Flutter Project 버튼이 생깁니다.

Visual Studio Code로 개발 시작하기

VS Code로 Flutter 앱을 개발하기 위해서는 우선 Flutter Extensions를 설치해야 합니다.

Extensions 설치 후 VS Code에 내장된 명령어 팔레트 (Command Palette)를 통해서 프로젝트 생성하실 수 있습니다.

생성한 Flutter 프로젝트를 시작하실 때는 디버그 시작하기 (단축키 F5)를 통해서 하실 수 있습니다. VS Code 하단에서 Flutter 프로젝트 구동환경을 설정하실 수 있으니 참고하시길 바랍니다.