Chat-gpt와 함께하는 앱 개발(7) - flutter 공부 목록

Flutter로 앱을 직접 만들기 위해 시도해보았지만, ChatGPT에서 제공하는 코드를 단순히 복붙하는 것만으로는 원하는 수준의 앱을 구현하는 데 한계가 있다는 것을 깨달았습니다. 따라서, ChatGPT를 활용해 Flutter 언어와 프레임워크를 체계적으로 학습해 볼 계획입니다.

1. Flutter 학습 목차 만들어줘 (to chat-gpt)

Flutter 학습 목차

1. Flutter 소개
   • Flutter란 무엇인가?
   • Flutter의 장점
   • Flutter 설치
   • 개발 환경 설정 (VS Code/Android Studio)
2. Dart 언어 기초
   • Dart 개요
   • 기본 문법
   • 변수와 데이터 타입
   • 함수
   • 제어문 (if, switch, for, while)
   • 예외 처리
   • 클래스와 객체
   • 컬렉션 (리스트, 세트, 맵)
   • 비동기 프로그래밍 (Futures, async, await)
3. Flutter 기본
   • 위젯 이해하기
   • Stateless 위젯과 Stateful 위젯
   • 기본 Flutter 앱 만들기
   • 위젯 트리 이해
   • MaterialApp과 Scaffold 사용
   • Flutter 레이아웃 (Container, Row, Column, Stack)
4. 레이아웃 만들기
   • 자주 사용하는 레이아웃 위젯 (Padding, Align, Center, SizedBox)
   • Flex와 Expanded 사용
   • BoxDecoration을 통한 레이아웃 커스터마이징
   • ListView와 GridView 사용
   • TextField와 Form을 통한 사용자 입력 처리
5. Flutter UI 구성 요소
   • 버튼 (FlatButton, RaisedButton, IconButton, FloatingActionButton)
   • 이미지와 아이콘
   • 사용자 제스처 처리 (onTap, onLongPress)
   • 내비게이션과 라우팅 (Navigator, named routes)
   • 탭과 드로어 사용
   • 커스텀 위젯 만들기
6. 상태 관리
   • Flutter에서 상태 관리 이해
   • setState와 로컬 상태 관리
   • InheritedWidget 사용
   • Provider 패키지
   • Riverpod (선택 사항)
   • Bloc 패턴 (선택 사항)
7. 네트워킹 및 데이터
   • 인터넷에서 데이터 가져오기 (http 패키지)
   • JSON 파싱
   • FutureBuilder와 StreamBuilder 사용
   • 로컬 저장소 사용 (SharedPreferences, SQLite)
8. 애니메이션 및 전환
   • AnimatedContainer를 통한 기본 애니메이션
   • Animation 및 AnimationController 클래스 사용
   • Hero 애니메이션
   • 커스텀 애니메이션
9. 사용자 입력 처리
   • 폼 검증
   • FocusNode와 FocusScope 사용
   • GestureDetector를 통한 커스텀 터치 인터랙션
10. 플랫폼 기능 통합
    • 디바이스 기능 접근 (카메라, 위치 정보 등)
    • 플랫폼 채널을 통한 네이티브 코드 통합 (안드로이드, iOS)
    • pub.dev에서 패키지 사용
11. 테스트
    • 단위 테스트 작성
    • 위젯 테스트
    • 통합 테스트
12. 디버깅 및 성능 최적화
    • Flutter DevTools를 통한 디버깅
    • 성능 프로파일링 및 최적화
    • 오류 처리 및 로깅
13. 배포 및 배포 준비
    • 앱 배포 준비
    • Google Play 스토어에 배포
    • Apple App Store에 배포
    • 지속적 통합/지속적 배포 (CI/CD) 실습
14. 고급 주제
    • CustomPaint와 Canvas를 통한 커스텀 렌더링
    • 플러그인 개발
    • 고급 상태 관리 솔루션 (Redux, MobX)
    • Flutter 내부 구조 탐구
15. 추가 학습 자료 및 리소스
    • 공식 Flutter 문서
    • 커뮤니티 리소스 및 포럼
    • 추천 도서 및 강의
    • 오픈 소스 Flutter 프로젝트 공부

이 목차를 따라가면서 Flutter를 체계적으로 학습할 수 있습니다. 각 항목에 대해 깊이 있게 공부하고 실습해 보세요!

 

2. 학습 내용

chat-gpt에게 물어보고 제 생각을 빨간 글씨로 추가 해보았습니다.

 

(1) Flutter 설치 및 개발 환경 셋팅은 이미 셋팅하였으므로 이전 포스팅으로 대체합니다.

2024.06.30 - [개발 이야기/앱 개발] - Chat-gpt와 함께하는 앱 개발(2) - 개발 환경 셋팅

Chat-gpt와 함께하는 앱 개발(2) - 개발 환경 셋팅

 

(2)  Dart 언어 기초 (to chat-gpt)

Dart 개요

Dart는 Google에서 개발한 객체 지향 프로그래밍 언어로, 주로 Flutter 프레임워크와 함께 사용되어 모바일, 웹, 데스크톱 애플리케이션 개발에 널리 쓰입니다. Dart는 빠른 실행 속도와 높은 생산성을 제공하며, 정적 타입 언어로서 컴파일 시 타입 검사를 통해 오류를 잡아냅니다.

기본 문법

Dart의 기본 문법은 C, Java, JavaScript와 유사합니다. Dart 프로그램은 main 함수부터 실행됩니다.

void main() {
  print('Hello, Dart!');
}​

주석은 // 또는 /* ... */로 작성할 수 있습니다.

-> 이 코드는 c++의 메인 함수와 유사합니다.

변수와 데이터 타입

Dart에서는 var, final, const 키워드를 사용해 변수를 선언합니다. var는 타입을 추론하며, final과 const는 값을 변경할 수 없는 변수를 만듭니다.

var name = 'Alice'; // 타입 추론
String name = 'Bob'; // 명시적 타입 지정
final age = 30; // 변경 불가 변수
const pi = 3.14; // 컴파일 타임 상수

기본 데이터 타입으로는 int, double, String, bool 등이 있습니다.

-> var는 c++의 auto와 유사합니다.

-> final과 const은 둘 다 값을 변경할 수 없다는 점에서 유사하지만 차이가 있습니다.

    const 는 컴파일 타임에 상수로 결정되어야하며 c++의 constexpr과 유사합니다.

    final은 값을 한 번만 설정 가능하며, 실행 중에 단 한 번 초기화 됨을 의미합니다. c++의 const와 비슷합니다.

함수

Dart에서 함수는 returnType functionName(parameters) 형태로 정의됩니다.

int add(int a, int b) {
  return a + b;
}

-> 함수 형태는 c++과 유사합니다.

 

익명 함수(람다)와 화살표 함수도 지원합니다.

var multiply = (int a, int b) => a * b;

-> c++도 c++11부터 지원합니다. (=> 대신 -> 사용)

제어문 (if, switch, for, while)

Dart는 일반적인 제어문을 지원합니다.

 

void main() {
  int score = 85;

  // if-else 문
  if (score >= 90) {
    print('A');
  } else if (score >= 80) {
    print('B');
  } else {
    print('C');
  }

  // switch 문
  var grade = 'B';
  switch (grade) {
    case 'A':
      print('Excellent');
      break;
    case 'B':
      print('Good');
      break;
    default:
      print('Need improvement');
  }

  // for 문
  for (var i = 0; i < 5; i++) {
    print(i);
  }

  // while 문
  int count = 0;
  while (count < 5) {
    print(count);
    count++;
  }
}

-> c++과 유사합니다.

예외 처리

Dart에서 예외는 throw로 발생시키고, try-catch로 처리합니다.

dart

void main() {
  try {
    int result = 10 ~/ 0;
  } catch (e) {
    print('Exception caught: $e');
  } finally {
    print('This is always executed.');
  }
}

-> c++과 유사합니다.

 

클래스와 객체

Dart는 객체 지향 언어로, 클래스와 객체를 사용합니다.

class Person {
  String name;
  int age;

  Person(this.name, this.age);

  void introduce() {
    print('My name is $name and I am $age years old.');
  }
}

void main() {
  var person = Person('Alice', 30);
  person.introduce();
}

 

상속, 다형성, 인터페이스 구현 등 객체 지향 개념을 지원합니다.

-> c++과 class 선언부는 유사하지만, 상속 받을때는 extends를 사용합니다. super()를 사용하는 부분은 python과 유사해 보입니다. (아래 코드는 추가 질문에서 받은 예제 코드 입니다.)

-> 자식 class에서 부모 class의 멤버 함수를 덮어 쓸 때는 @override를 표시해서 사용합니다.

class Dog extends Animal {
  Dog(String name) : super(name);

  void bark() {
    print('$name is barking.');
  }

  // 부모 클래스의 메서드를 재정의할 수 있습니다.
  @override
  void eat() {
    print('$name is eating dog food.');
  }
}

컬렉션 (리스트, 세트, 맵)

Dart는 다양한 컬렉션 타입을 제공합니다.

 

void main() {
  // 리스트
  List<String> fruits = ['Apple', 'Banana', 'Cherry'];
  fruits.add('Date');

  // 세트
  Set<int> numbers = {1, 2, 3};
  numbers.add(1); // 중복된 값은 추가되지 않음

  // 맵
  Map<String, int> scores = {'Alice': 90, 'Bob': 85};
  scores['Charlie'] = 88;
}

-> c++과 유사합니다. (c++의 .push_back(), .insert(), python의 .append() 대신에 .add()를 사용합니다.)

비동기 프로그래밍 (Futures, async, await)

Dart는 비동기 프로그래밍을 지원하여 장기 실행 작업을 비동기적으로 수행할 수 있습니다.

Future<void> fetchData() async {
  await Future.delayed(Duration(seconds: 2));
  print('Data fetched');
}

void main() async {
  print('Fetching data...');
  await fetchData();
  print('Done');
}

 

Future는 미래의 값을 나타내며, async와 await 키워드는 비동기 함수를 정의하고 호출하는 데 사용됩니다.

이와 같이, Dart 언어의 기본적인 요소들을 학습하면 Flutter와 같은 프레임워크를 활용하여 더욱 효과적으로 앱을 개발할 수 있습니다. 각 항목을 실습하면서 개념을 익히는 것이 중요합니다.

-> 비동기 프로그래밍은 별로 접해보지는 못했지만, c++에서 std::future, std::async, .get()를 통해 유사한 기능이 구현 가능한 것으로 보입니다. 

-> c++20부터는 co_await 기능이 추가되어 사용 가능합니다.

 

3. 후기

오늘은 dart 기초 문법에 대해 살펴보았습니다. 어디서부터 공부해야할지 막막했는데 chat-gpt를 통해 공부할 내용을 빠르게 좁힐 수 있었습니다. 다만, 코딩을 모르는 사람이 공부하기에는 답변이 많이 생략되어 있다는 느낌을 받습니다. dart 언어 자체는 처음 접하는데 문법은 c++과 상당히 유사하다는 느낌을 받았습니다. 다행히 저는 c++로 개발 진행해본 경험이 있어 기초 문법은 별도로 공부를 필요할 것 같지는 않습니다.

다음 시간에는 Flutter 기본에 대해 포스팅 해보겠습니다. 추후 시간이 되면 기본 문법에 대한 자세한 사항도 포스팅해보도록 하겠습니다.