컴퓨터끼리 “실시간으로 대화”하려면? 바로 소켓(Socket)이 필요

🧭 목차

1. 소켓이란?
2. 왜 소켓을 사용할까?
3. WebSocket vs Socket.IO 차이
4. 소켓 관련 주요 패키지
5. Flutter에서 socket.io 사용하는 법
6. 소켓으로 만들 수 있는 기능 예시
7. 총정리

1. 소켓이란?

소켓(Socket)은 두 컴퓨터나 프로그램이 실시간으로 데이터를 주고받을 수 있게 해주는 통로

HTTP는 요청-응답 방식이고,
소켓은 전화처럼 계속 연결된 상태로 자유롭게 말할 수 있음

📞 비유하자면:

• HTTP = 편지
• Socket = 전화

2. 왜 소켓을 사용할까?

✅ 실시간 반응이 필요한 기능들

• ✅ 채팅 (보내자마자 바로 도착해야 하니까)
• ✅ 실시간 게임 (위치, HP, 점수 등 즉시 공유)
• ✅ 실시간 알림 (서버에서 사용자에게 즉시 메시지)

❌ HTTP로 하면?

• 계속 "새 소식 있나요?" 하고 물어봐야 함
• 연결을 매번 새로 해야 해서 느리고 비효율적

3. WebSocket vs socket.io 차이

📌 요약:

WebSocket은 “전화선”,
Socket.IO는 “전화선 + 자동다이얼 + 단축버튼 + 대화방 기능 다 있는 스마트폰”

4. 소켓 관련 주요 패키지 정리

5. Flutter에서 socket.io 사용법

1. 의존성 추가

dependencies:
  socket_io_client: ^3.1.2

2. 소켓 연결하기

import 'package:socket_io_client/socket_io_client.dart' as IO;

final socket = IO.io('http://localhost:3000', <String, dynamic>{
  'transports': ['websocket'],
  'autoConnect': false,
});

socket.connect();

3. 메시지 보내기

socket.emit('message', '안녕하세요!');

4. 메시지 받기

socket.on('message', (data) {
  print('서버로부터 받은 메시지: $data');
});

5. 연결 끊기

socket.disconnect();

6. 소켓으로 만들 수 있는 기능 예시

7. 총정리

비동기 처리(Asynchronous Processing)란 작업이 완료될 때까지 기다리지 않고, 다음 작업을 진행하는 방식을 의미합니다.

쉽게 말해, 우리가 음식을 주문하고 조리가 끝날 때까지 가만히 기다리는 것이 아니라, 다른 일을 하다가 음식이 나오면 다시 돌아와서 먹는 것과 같은 원리입니다.

Flutter에서는 네트워크 요청, 파일 읽기, 데이터베이스 조회 등 시간이 오래 걸리는 작업을 효율적으로 처리하기 위해 비동기 처리를 사용합니다.

2. 그럼 동기와 비동기의 차이는?

❌ 동기 처리 코드 예제

void main() {
  print("1. 데이터를 요청합니다.");
  fetchData(); // 시간이 오래 걸리는 작업
  print("3. 데이터를 화면에 출력합니다.");
}

void fetchData() {
  for (int i = 0; i < 1000000000; i++) {} // 시간이 걸리는 연산
  print("2. 데이터 요청 완료!");
}

출력 결과:

1. 데이터를 요청합니다.
2. 데이터 요청 완료!
3. 데이터를 화면에 출력합니다.

위와 같이 fetchData()가 완료될 때까지 다음 코드가 실행되지 않습니다.

✅ 비동기 처리 코드 예제 (async/await 사용)

void main() async {
  print("1. 데이터를 요청합니다.");
  await fetchData(); // 비동기 처리
  print("3. 데이터를 화면에 출력합니다.");
}

Future<void> fetchData() async {
  await Future.delayed(Duration(seconds: 2));
  print("2. 데이터 요청 완료!");
}

출력 결과:

1. 데이터를 요청합니다.
(2초 후)
2. 데이터 요청 완료!
3. 데이터를 화면에 출력합니다.

비동기 코드를 사용하면 작업이 끝날 때까지 기다리지 않고 다른 작업을 수행할 수 있습니다.

3. 비동기 처리 코드는 어떻게 작성해야 돼?

Flutter에서 비동기 처리는 주로 Future, async/await, 그리고 then을 사용하여 구현합니다.

✅ Future를 사용한 비동기 코드

Future<String> fetchData() {
  return Future.delayed(Duration(seconds: 2), () => "데이터 로드 완료");
}

📌 Future는 비동기 작업의 결과를 나타내는 객체입니다.

• Future는 한 번만 값을 반환하며, 해당 작업이 완료되면 값을 받을 수 있습니다.
• then 또는 await을 사용하여 결과를 처리할 수 있습니다.

✅ async/await을 사용한 비동기 코드

void main() async {
  print("데이터를 불러오는 중...");
  String data = await fetchData();
  print(data);
}

📌 async/await은 Future를 더 직관적으로 사용할 수 있도록 도와줍니다.

• async 키워드를 함수에 추가하면 비동기 함수가 됩니다.
• await 키워드를 사용하면 Future가 완료될 때까지 기다렸다가 실행됩니다.
• try-catch 블록을 사용하여 오류를 쉽게 처리할 수 있습니다.

✅ then을 사용한 비동기 코드

void main() {
  print("데이터를 불러오는 중...");
  fetchData().then((data) {
    print(data);
  });
}

📌 then() 메서드는 Future의 결과를 받아 처리할 때 사용됩니다.

• await을 사용할 수 없는 경우(예: 기존의 콜백 방식) 유용하게 사용됩니다.
• 하지만 코드가 길어질수록 then 체인이 복잡해지고 가독성이 떨어질 수 있습니다.

Future vs async/await vs then 비교

4. 그렇다면 언제 사용해야 될까?

비동기 처리는 다음과 같은 경우에 사용됩니다.

• 네트워크 요청 (API 호출): 데이터를 서버에서 가져올 때
• 파일 입출력 (File I/O): 기기 내부에서 파일을 읽고 쓸 때
• 데이터베이스 조회: SQLite나 Firebase와 같은 데이터베이스에서 데이터를 가져올 때
• 애니메이션 처리: 일정 시간이 걸리는 애니메이션을 실행할 때

비동기 처리는 사용자의 경험을 부드럽게 만들어주며, UI가 멈추지 않도록 도와줍니다.

5. 모든 코드를 다 비동기로 작성하면 안돼?

비동기 처리는 매우 강력하지만, 모든 코드를 비동기로 작성하면 오히려 불필요한 복잡성이 증가할 수 있습니다.

📌 주의해야 할 점

• 필요한 경우에만 비동기 처리 사용 (예: 네트워크 요청, 데이터 로드 등)
• UI 관련 작업은 동기적으로 유지 (예: 버튼 클릭 이벤트, 간단한 연산 등)
• Future를 남발하지 않기 (불필요한 Future 사용은 코드 가독성을 떨어뜨림)

따라서, 비동기 처리는 필요할 때만 신중하게 사용해야 합니다.

6. 추가적으로 알아두면 좋은 개념

비동기 처리와 관련하여 알아두면 좋은 개념들은 다음과 같습니다.

✅ Stream: 지속적인 데이터 흐름 처리

Future는 한 번의 작업을 처리하지만, Stream은 여러 개의 데이터를 순차적으로 처리할 수 있습니다.

Stream<int> countStream() async* {
  for (int i = 0; i < 5; i++) {
    await Future.delayed(Duration(seconds: 1));
    yield i;
  }
}

✅ Isolate: 멀티스레딩 활용

Flutter는 단일 스레드에서 실행되지만, Isolate를 사용하면 별도의 스레드에서 작업을 실행할 수 있습니다.

import 'dart:isolate';

void backgroundTask(SendPort sendPort) {
  sendPort.send("백그라운드 작업 완료!");
}

7. 마무리

비동기 처리는 Flutter 개발에서 필수적인 개념으로, 앱의 성능과 사용자 경험을 향상시키는 데 중요한 역할을 합니다.

• 동기 처리와 비동기 처리의 차이를 이해하고, 필요할 때 적절히 사용해야 하며,

• async/await, Future, Stream 등의 개념을 숙지하여 다양한 상황에서 비동기 처리를 활용할 수 있어야 합니다.

의존성 주입(Dependency Injection, DI)은 객체 간의 의존성을 외부에서 주입하는 설계 패턴입니다.

쉽게 말해, 클래스가 직접 다른 객체를 생성하는 것이 아니라, 외부에서 제공된 객체를 사용하는 것을 의미합니다. 이를 통해 코드의 유지보수성을 높이고, 결합도를 낮출 수 있습니다.

📌 예를 들어보자!

우리가 식당에서 음식을 먹을 때, 주방장이 모든 재료를 직접 구하고, 요리하고, 서빙까지 한다면 엄청 비효율적입니다. 하지만 주방장은 재료 공급업체(외부)에서 재료를 받아서 요리를 만들기만 하면 됩니다. 이와 마찬가지로, 코드에서도 클래스가 직접 필요한 객체를 만들지 않고, 외부에서 주입받으면 더 효율적으로 관리할 수 있습니다.

2. 그렇다면 의존성 주입을 왜 사용해야 하는 걸까?

의존성 주입을 사용하면 다음과 같은 장점이 있습니다.

• 유지보수성 향상: 객체 간의 결합도를 낮추어 코드 수정이 용이해집니다.
• 테스트 용이성: Mock 객체를 활용하여 단위 테스트를 쉽게 수행할 수 있습니다.
• 코드 재사용성 증가: 특정 기능을 여러 곳에서 쉽게 재사용할 수 있습니다.

3. 만약 의존성 주입을 사용하지 않게 되면 앱에 어떠한 영향을 끼칠까?

의존성 주입 없이 코드를 작성하면 다음과 같은 문제가 발생할 수 있습니다.

❌ 의존성 주입 없이 작성한 코드 예제

class ApiService {
  void fetchData() {
    print("Fetching data from API...");
  }
}

class HomeScreen {
  final ApiService apiService = ApiService(); // 직접 객체 생성
}

📌 문제점

• HomeScreen이 ApiService를 직접 생성하므로 두 클래스 간의 강한 결합(Tightly Coupled) 이 발생합니다.
• ApiService를 변경하면 HomeScreen도 함께 수정해야 하는 상황이 발생할 수 있습니다.
• 객체의 테스트가 어려워지고, 코드의 유지보수성이 떨어집니다.

🔍 강한 결합(Tightly Coupled)이란?

강한 결합이란, 한 클래스가 다른 클래스에 강하게 의존하고 있는 상태를 말합니다. 즉, 한 클래스가 변경되면, 이를 사용하는 다른 클래스도 변경해야 하는 상황을 의미합니다.

💡 그럼 강한 결합이 있으면 약한 결합도 있을까?

• 강한 결합(Tightly Coupled): 클래스 간의 의존성이 높아 변경이 어렵다.
• 약한 결합(Loosely Coupled): 클래스 간의 의존성이 낮아 변경이 용이하다.

의존성 주입을 활용하면 강한 결합을 약한 결합으로 바꿀 수 있어 코드의 유지보수성과 확장성이 높아집니다.

4. 의존성 주입을 하는 방법

의존성 주입을 구현하는 다양한 방법이 있습니다.

✅ 1) 생성자를 통한 주입 (Constructor Injection)

class ApiService {
  void fetchData() {
    print("Fetching data from API...");
  }
}

class HomeScreen {
  final ApiService apiService;

  HomeScreen(this.apiService); // 외부에서 객체를 주입
}

이제 HomeScreen이 ApiService를 직접 생성하는 것이 아니라, 외부에서 주입받도록 변경되었습니다. 이를 통해 클래스 간의 결합도를 낮추고, 코드의 유연성과 테스트 용이성이 높아집니다.

✅ 2) Provider를 활용한 주입

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class ApiService {
  void fetchData() {
    print("Fetching data from API...");
  }
}

void main() {
  runApp(
    MultiProvider(
      providers: [
        Provider(create: (_) => ApiService()), // ApiService 주입
      ],
      child: MyApp(),
    ),
  );
}

✅ 3) GetIt을 활용한 Service Locator 패턴

import 'package:get_it/get_it.dart';

final getIt = GetIt.instance;

void setupLocator() {
  getIt.registerLazySingleton<ApiService>(() => ApiService());
}

✅ 4) Injectable을 활용한 자동 의존성 주입

import 'package:get_it/get_it.dart';
import 'package:injectable/injectable.dart';

final getIt = GetIt.instance;

@InjectableInit()
void configureDependencies() => $initGetIt(getIt);

✅ 5) Riverpod을 활용한 의존성 주입

import 'package:flutter_riverpod/flutter_riverpod.dart';

final apiServiceProvider = Provider((ref) => ApiService());

5. 그렇다면 의존성 주입에 관련된 패키지는 어떠한게 있을까?

• Provider: Flutter에서 권장하는 상태 관리 및 의존성 주입 패턴
• GetIt: Service Locator 패턴을 활용한 전역적 객체 관리
• Injectable: GetIt 기반으로 DI 자동화를 지원하는 패키지
• Riverpod: Provider의 개선 버전으로 더 안전하고 강력한 기능 제공

6. 의존성 주입을 하기 편한 상태관리 패키지는 어떠한게 있을까?

• Provider: 기본적인 상태 관리 및 DI를 함께 지원
• Riverpod: Provider보다 더 강력한 기능을 제공
• GetX: 간단하고 직관적인 상태 관리 및 DI 지원
• Bloc: 대규모 프로젝트에 적합한 상태 관리 방식

7. 이런 것들을 응용해서 어떠한 이점이 있을까?

• 코드 유지보수성이 향상됨
• 테스트가 쉬워짐 (Mock 객체 사용 가능)
• UI와 비즈니스 로직을 분리하여 가독성 증가
• 재사용 가능한 코드 작성 가능

8. Provider, Riverpod, GetIt, Injectable 간단 비교

9. 마무리

Flutter에서 의존성 주입(Dependency Injection)은 코드의 유지보수성을 높이고, 확장성을 증가시키는 중요한 개념입니다.

코드의 결합도를 줄여 유지보수를 쉽게 하고, 테스트가 용이해지며, 재사용 가능한 구조를 만들 수 있습니다.

의존성 주입을 구현하는 방법에는 Provider, GetIt, Riverpod, Injectable과 같은 다양한 패키지가 있으며, 프로젝트의 규모와 필요에 따라 적절한 방법을 선택하는 것이 중요합니다.

Flutter에서는 외부 서버와의 통신을 위해 다양한 패키지를 사용할 수 있으며, 사용 목적에 맞게 선택할 수 있습니다.

API 통신은 서버로부터 데이터를 받아오거나 서버로 데이터를 전송하기 위해 사용됩니다. Flutter에서는 주로 다음과 같은 패키지를 사용합니다.

1. http 패키지

• Flutter에서 가장 기본적으로 사용하는 HTTP 클라이언트 패키지.
• 간단한 요청(GET, POST 등)에 적합.

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<void> fetchData() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    print(data);
  } else {
    throw Exception('Failed to load data');
  }
}

2. dio 패키지

• 고급 기능을 지원하는 강력한 HTTP 클라이언트.
• 인터셉터, 리퀘스트 취소, 타임아웃 설정, 파일 업로드/다운로드 지원.

import 'package:dio/dio.dart';

final dio = Dio();

Future<void> fetchData() async {
  try {
    final response = await dio.get('https://jsonplaceholder.typicode.com/posts/1');
    print(response.data);
  } catch (e) {
    print('Error: $e');
  }
}

3. GetX의 API 통신 기능

• 상태 관리, 라우팅, 의존성 주입과 함께 API 통신 기능도 제공.
• 간단한 앱에서는 빠르고 효율적이지만, 복잡한 네트워크 로직에는 한계가 있음.

4. graphql_flutter 패키지

• GraphQL API와 통신을 위한 패키지.
• 캐싱 및 실시간 데이터 업데이트 지원.

import 'package:graphql_flutter/graphql_flutter.dart';

final HttpLink httpLink = HttpLink('https://example.com/graphql');

ValueNotifier<GraphQLClient> client = ValueNotifier(
  GraphQLClient(
    link: httpLink,
    cache: GraphQLCache(store: HiveStore()),
  ),
);

✅ 장점:

• GraphQL API와의 통합이 용이함.
• 캐싱 및 실시간 데이터 업데이트 가능.

❗ 단점:

• REST API보다 설정이 복잡함.
• 프로젝트에 GraphQL 도입이 필요함.

5. chopper 패키지

• Retrofit 스타일의 HTTP 클라이언트.
• 인터셉터, 코드 생성을 통한 API 요청 간소화.

import 'package:chopper/chopper.dart';

part 'post_service.chopper.dart';

@ChopperApi()
abstract class PostService extends ChopperService {
  @Get(path: '/posts/{id}')
  Future<Response> getPost(@Path('id') int id);

  static PostService create() {
    final client = ChopperClient(
      baseUrl: 'https://jsonplaceholder.typicode.com',
      services: [
        _$PostService(),
      ],
      converter: JsonConverter(),
    );

    return _$PostService(client);
  }
}

✅ 장점:

• REST API 요청을 간결하게 작성 가능.
• 코드 자동 생성을 통한 유지보수 편리.

❗ 단점:

• 추가 설정이 필요하며 학습 곡선이 존재함.
• build_runner를 통한 코드 생성을 필요로 함.

6. retrofit 패키지

• Dart Retrofit 스타일의 HTTP 클라이언트.
• dio와 결합해 더욱 강력한 기능 제공.

import 'package:retrofit/retrofit.dart';
import 'package:dio/dio.dart';

part 'client.g.dart';

@RestApi(baseUrl: "https://jsonplaceholder.typicode.com")
abstract class RestClient {
  factory RestClient(Dio dio, {String baseUrl}) = _RestClient;

  @GET("/posts/{id}")
  Future<HttpResponse> getPost(@Path("id") int id);
}

✅ 장점:

• dio와 결합해 인터셉터, 에러 핸들링 등 강력한 기능 지원.
• Retrofit 스타일의 직관적인 API 작성.

❗ 단점:

• 코드 생성 도구(build_runner) 사용 필요.
• 추가적인 설정이 필요함.
• 상태 관리, 라우팅, 의존성 주입과 함께 API 통신 기능도 제공.
• 간단한 앱에서는 빠르고 효율적이지만, 복잡한 네트워크 로직에는 한계가 있음.

import 'package:get/get.dart';

Future<void> fetchData() async {
  final response = await GetConnect().get('https://jsonplaceholder.typicode.com/posts/1');
  if (response.statusCode == 200) {
    print(response.body);
  }
}

2️⃣ Flutter API 통신 패키지 비교 및 선택 이유

다양한 API 통신 패키지가 존재하지만, 프로젝트의 규모와 필요에 따라 적절한 패키지를 선택해야 합니다. 다음은 주요 Flutter API 통신 패키지의 비교입니다.

3️⃣ 사람들이 많이 사용하는 패키지와 그 이유

1. dio

• 가장 많이 사용되는 이유: 고급 기능(인터셉터, 요청 취소, 파일 업로드 등)을 폭넓게 지원.
• 유연성: 복잡한 네트워크 로직에도 유연하게 대처 가능.
• 유지보수 용이: 네트워크 레이어 분리가 쉬워 대규모 프로젝트에 적합.

2. http

• 간편함: Flutter 기본 패키지로 간단한 API 통신에 적합.
• 빠른 학습 곡선: 초보자도 쉽게 접근 가능.

3. GetX

• 통합 솔루션: 상태 관리, 라우팅, 의존성 주입, API 통신을 하나의 패키지로 해결.
• 빠른 개발: MVP나 프로토타입 앱 개발에 최적화.

4. retrofit

• 코드 일관성: dio와 결합해 효율적인 네트워크 레이어 구성.
• 직관적 API 작성: 코드 가독성이 뛰어나고 유지보수에 강점.

3️⃣ JSON 데이터 처리: json_serializable vs freezed

API 응답으로 받은 JSON 데이터를 모델로 변환하기 위해 Flutter에서는 **json_serializable**과 **freezed**를 많이 사용합니다.

1. json_serializable

• 자동 JSON 직렬화/역직렬화 지원.
• 코드 생성기로 간결한 데이터 모델 작성 가능.

✅ 사용 예시

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()
class User {
  final int id;
  final String name;

  User({required this.id, required this.name});

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
  Map<String, dynamic> toJson() => _$UserToJson(this);
}

🔧 의존성 추가

dependencies:
  json_annotation: ^4.8.1

dev_dependencies:
  build_runner: ^2.4.0
  json_serializable: ^6.6.1

⚡ 코드 생성

flutter pub run build_runner build

2. freezed

• 불변 객체(Immutable Object) 생성.
• 데이터 클래스, 복사(copyWith), 비교(equatable) 기능을 자동 생성.
• json_serializable과 함께 사용 가능.

✅ 사용 예시

import 'package:freezed_annotation/freezed_annotation.dart';

part 'user.freezed.dart';
part 'user.g.dart';

@freezed
class User with _$User {
  const factory User({
    required int id,
    required String name,
  }) = _User;

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
}

🔧 의존성 추가

dependencies:
  freezed_annotation: ^2.2.0

 dev_dependencies:
  build_runner: ^2.4.0
  freezed: ^2.3.2
  json_serializable: ^6.6.1

⚡ 코드 생성

flutter pub run build_runner build

4️⃣ json_serializable vs freezed 비교

5️⃣ 결론

• 간단한 API 통신은 http, 고급 네트워크 처리는 dio 사용.
• 복잡한 상태 관리나 데이터 처리는 freezed, 단순한 JSON 변환은 json_serializable 사용.

✅ 시스템 요구사항

🟣 macOS

• 운영체제: macOS (Intel 또는 Apple Silicon)
• 디스크 공간: 2.8 GB (IDE 및 기타 도구 제외)
• 도구: Git, Xcode (iOS 개발 시)

🔵 Windows

• 운영체제: Windows 10 이상 (64-bit)
• 디스크 공간: 1.64 GB (IDE 및 기타 도구 제외)
• 도구: PowerShell 5.0 이상, Git

2️⃣ Flutter SDK 설치

Windows

# 1. Flutter SDK 다운로드
https://flutter.dev/docs/get-started/install/windows

# 2. 압축 해제
C:\src\flutter

# 3. 환경변수 설정
setx PATH "%PATH%;C:\src\flutter\bin"

# 4. 설치 확인
flutter doctor

macOS

1. Flutter SDK 다운로드 및 설치

• Flutter 공식 SDK 다운로드

수동 설치 방법:

# 1. Flutter SDK 다운로드
https://docs.flutter.dev/get-started/install/macos

# 2. 압축 해제 및 이동
unzip ~/Downloads/flutter_macos_*.zip -d ~/development

# 3. PATH 설정
echo 'export PATH="$PATH:\$HOME/development/flutter/bin"' >> ~/.zshrc
source ~/.zshrc

# 4. 설치 확인
flutter doctor

2. Homebrew 설치

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

⚠️ Apple Silicon Mac에서 Homebrew 인식 오류 해결

• 설치 후에도 brew 명령어가 동작하지 않는 경우:

  echo 'export PATH="/opt/homebrew/bin:$PATH"' >> ~/.zshrc
  source ~/.zshrc

3. Flutter SDK 설치 (Homebrew 사용)

brew install --cask flutter

3. CocoaPods 설치 (iOS 빌드 시 필요)

sudo gem install cocoapods

⚠️ CocoaPods 설치 오류 해결

• 설치 중 오류가 발생할 경우:

  sudo arch -x86_64 gem install ffi
  pod install --repo-update

4. PATH 설정

echo 'export PATH="$PATH:\$HOME/flutter/bin"' >> ~/.zshrc
source ~/.zshrc

5. 설치 확인

flutter doctor

3️⃣ 개발 환경 설정

✅ macOS 환경변수 설정 파일

• 파일 위치: ~/.zshrc (기본 쉘이 Zsh인 경우)
• 숨김 파일 보기 단축키: Command + Shift + .

✅ VSCode로 숨김 파일 수정하기

code ~/.zshrc

✅ Android 개발 환경

• Android Studio 설치 (다운로드)
• Android SDK 설치 및 환경변수 설정
• Android Emulator 또는 실제 디바이스 연결

✅ iOS 개발 환경 (macOS)

• Xcode 설치 (Mac App Store)
• Xcode Command Line Tools 설치
• iOS 시뮬레이터 또는 실제 디바이스 연결

✅ 에디터(IDE)

• Visual Studio Code + Flutter/Dart 확장 프로그램 설치
• Android Studio + Flutter 플러그인 설치

4️⃣ Flutter Doctor 실행 및 문제 해결

flutter doctor 명령어를 사용해 Flutter 개발 환경이 올바르게 설정되었는지 확인합니다.

flutter doctor

출력 결과를 확인하고, 필요 시 추가 설치 및 설정을 진행합니다.

5️⃣ 첫 번째 Flutter 앱 실행

✅ 프로젝트 생성

flutter create my_first_app
cd my_first_app

✅ 앱 실행

# Android 에뮬레이터 또는 연결된 디바이스에서 실행
flutter run

✅ 코드 수정 및 핫리로드(Hot Reload)

• lib/main.dart 파일을 수정하고 Hot Reload로 즉시 결과 확인
• Ctrl + S 또는 r 키로 빠른 반영 가능

6️⃣ 자주 발생하는 설치 이슈 및 해결 방법

❗ ANDROID_HOME 오류

• 문제: Android SDK 경로를 찾을 수 없음
• 해결:

  export ANDROID_HOME=\$HOME/Library/Android/sdk
  export PATH=\$PATH:\$ANDROID_HOME/tools
  export PATH=\$PATH:\$ANDROID_HOME/platform-tools

❗ 디바이스 연결 안 됨

• 문제: 연결된 디바이스를 인식하지 못함
• 해결:

  flutter devices
  adb devices

❗ iOS 빌드 실패

• 문제: macOS에서 iOS 빌드가 실패함
• 해결:

  sudo xcode-select --install
  sudo xcodebuild -license

7️⃣ 마무리

🔗 참고 자료

• Flutter 공식 문서
• Dart 언어 공식 사이트

Flutter 시작! 🚀

Flutter 앱은 UI와 상태가 밀접하게 연결되어 있습니다. 사용자의 입력, API 호출 결과, 화면 전환 등 다양한 상황에서 UI가 동적으로 변경되어야 합니다. 이러한 변화를 효율적으로 관리하기 위해 상태 관리가 필요합니다.

단순 전역 변수의 한계

• 데이터 일관성 유지가 어렵다: 여러 위젯에서 데이터를 수정할 경우 예기치 않은 버그가 발생할 수 있음.
• UI 업데이트가 자동으로 이루어지지 않음: 전역 변수를 변경해도 UI가 자동으로 업데이트되지 않아, 수동으로 갱신해야 함.
• 복잡한 앱에서는 유지보수 및 확장성이 떨어짐: 화면이 많아질수록 상태 관리가 복잡해짐.

2. 상태(State)란?

상태(State)는 앱의 특정 시점에서의 데이터와 UI의 상태를 의미합니다.

• 사용자가 버튼을 눌렀는지 여부
• 리스트의 데이터
• API 호출 결과

이 모든 것이 상태에 해당합니다.

3. 상태 관리(State Management)란?

상태 관리는 상태의 변화를 감지하고 그에 따라 UI를 효율적으로 업데이트하는 것을 의미합니다.

• 변화 감지: 데이터가 변경되었는지 감지
• UI 업데이트: 변경된 데이터를 기반으로 UI를 갱신

4. Flutter의 주요 상태 관리 패키지

1️⃣ Provider

• Google에서 권장하는 상태 관리 패키지
• 간단하고 직관적이며 InheritedWidget을 기반으로 구현

2️⃣ Riverpod

• Provider의 개선 버전
• 전역적으로 상태를 관리하고 테스트하기 용이함

3️⃣ Bloc (Business Logic Component)

• 상태와 비즈니스 로직을 명확하게 분리
• 이벤트(Event)와 상태(State)를 기반으로 동작

4️⃣ GetX

• 간단하고 강력한 상태 관리, 라우팅, 의존성 주입을 하나의 패키지에서 제공
• 가장 인기 있는 패키지 중 하나로, 높은 성능과 쉬운 사용법이 특징

5️⃣ MobX

• 관찰 가능한 상태(Observable)를 기반으로 반응형 상태 관리
• 코드의 선언적 방식으로 직관적

5. GetX 패키지의 특징과 인기 이유

• 간편한 사용법: 코드가 간결하고, 상태 관리, 라우팅, 의존성 주입을 하나의 패키지로 해결 가능
• 고성능: 별도의 위젯 트리 리빌드 없이 UI 업데이트 가능
• 반응형 프로그래밍(Rx) 지원: 데이터의 변화를 자동으로 감지하고 UI 업데이트

6. GetX의 Rx 방식이란?

Rx(Reactive Extension)는 데이터의 변화를 실시간으로 감지하여 UI를 자동으로 업데이트하는 방식입니다.

예시

var count = 0.obs; // Rx 방식

Obx(() => Text("Clicked: \$count"));

// 버튼 클릭 시
count++;

• .obs: 데이터를 관찰 가능한 상태로 만듦
• Obx: 데이터가 변경되면 UI를 자동으로 업데이트

7. 반응형 프로그래밍이란?

반응형 프로그래밍(Responsive Programming)은 데이터의 흐름과 변화를 자동으로 감지하고 처리하는 프로그래밍 방식입니다.

• 자동 UI 업데이트: 상태 변화 시 자동으로 UI 반영
• 비동기 처리 최적화: 이벤트 스트림을 통해 효율적인 데이터 처리

7-1. 그렇다면 GetX로 모든 상태 관리를 해결하면 되지 않을까?

GetX는 빠르고 간편한 상태 관리, 라우팅, 의존성 주입을 통합적으로 제공하지만, 모든 상황에 최적의 선택은 아닙니다. 프로젝트의 규모와 복잡성에 따라 적절한 상태 관리 도구를 선택하는 것이 중요합니다.

🔎 GetX만으로 해결하기 어려운 상황

• 대규모 프로젝트: 팀원 간 역할 분담 및 비즈니스 로직과 UI의 명확한 분리가 필요할 때는 Bloc이나 Riverpod가 더 적합함.
• 테스트 용이성: GetX는 테스트 환경에서 제어가 다소 어렵고, 상태의 추적이 복잡해질 수 있음. 반면 Bloc과 Riverpod는 테스트가 용이함.
• 유지보수성: GetX는 빠른 개발에는 좋지만, 장기적으로는 코드 구조화가 필요한 프로젝트에서 한계가 있을 수 있음.

⚖️ 다른 패키지를 사용하는 이유

• Bloc: 명확한 로직 분리와 상태 추적이 중요한 프로젝트에서 선호됨.
• Provider/Riverpod: 유연성과 확장성이 뛰어나며, 다양한 커스텀 구현이 가능.
• MobX: 선언적 프로그래밍을 선호하거나 복잡한 상태 관리를 간결하게 처리하고자 할 때 적합.

결론적으로, GetX는 빠르고 간결한 개발에 유리하지만, 프로젝트의 특성과 규모에 따라 적합한 상태 관리 방식을 선택해야 합니다.

반응형 프로그래밍(Responsive Programming)은 데이터의 흐름과 변화를 자동으로 감지하고 처리하는 프로그래밍 방식입니다.

• 자동 UI 업데이트: 상태 변화 시 자동으로 UI 반영
• 비동기 처리 최적화: 이벤트 스트림을 통해 효율적인 데이터 처리

8. 다른 상태 관리 패키지는 왜 사용하는가?

• Bloc: 대규모 프로젝트에서 비즈니스 로직과 UI의 분리가 필요할 때 유용함
• Provider/Riverpod: 단순한 상태 관리나 유연성이 필요한 프로젝트에 적합
• MobX: 선언적 코드 스타일을 선호하는 개발자에게 적합
• GetX: 빠른 개발과 간결한 코드를 원하는 경우 적합

9. 총정리

✅ 결론

• 간단한 앱은 Provider나 GetX 사용
• 규모가 큰 앱이나 협업이 많은 프로젝트는 Bloc
• 유연성과 테스트 용이성을 원하면 Riverpod

상황에 맞는 상태 관리 패키지를 선택해 효율적인 Flutter 개발을 하자 🚀

fvm 설치:

dart pub global activate fvm

프로젝트 Flutter 버전 설치:

cd project
fvm install 3.16.9

해당 프로젝트 Flutter 버전 설정:

fvm use 3.16.9

Flutter 명령어 실행:

fvm flutter run

프로젝트 루트 폴더에 .flutter-version 파일 생성하여 해당 flutter version 명시:

echo "3.16.9" > .flutter-version

flutter version 바꾸기

which flutter

/bin/flutter 부분은 제외하고 해당 위치까지 간다.

안정버전 사용하기 :

flutter channel stable

특정 버전 사용하기:

git checkout 3.16.9

버전 확인하기:

flutter --version

최신 버전 업그레이드 하기:

flutter upgrade

현재 최신 버전의 직전 버전으로 다운 그레이드 하기:

flutter downgrade

BLoC Pattern 이란?

BLoC (Business Logic Component) Pattern 은 Flutter 애플리케이션에서 상태 관리를 위해 사용되는 디자인 패턴

⇒ UI 와 Business Logic 을 분리하여 사용되는 패턴

BLoC Pattern 구조

Event

사용자의 인터렉션이나 시스템 이벤트가 발생하면, 이러한 이벤트는 BLoC 로 전달

⇒ 이벤트는 버튼 클릭, 데이터 로드 요청 등 사용자 인터페이스에서 발생하는 다양한 액션

BLoC

애플리케이션의 비즈니스 로직 담당

⇒ 들어오는 이벤트를 받아 처리하고, 새로운 상태를 생성하여 애플리케이션의 UI 나 다른 BLoC 에 전달

State

BLoC 에 의해 생성되고 UI 에 전달되는 상태

⇒ 상태는 UI 가 사용자에게 보여줄 데이터의 현재 상태

BLoC Pattern 원리

1. 이벤트 발생

사용자 인터페이스에서 특정 액션이 발생하면, 관련된 이벤트가 BLoC 로 전달

2. 비지니스 로직 처리

BLoC 는 전달받은 이벤트를 기반으로 비즈니스 로직을 수행

⇒ 외부 데이터 소스와의 통신, 데이터 가공 등이 이루어 질 수 있다.

3. 상태 생성

BLoC 는 처리 결과를 바탕으로 새로운 상태 생성

⇒ 상태는 애플리케이션 UI 가 사용자에게 보여줄 데이터를 포함

4. 상태 전달

생성된 새로운 상태는 UI 로 전달

⇒ UI 는 이 상태에 따라 화면 갱신

BLoC Pattern 장점

비즈니스 로직과 UI 분리

비즈니스 로직을 UI 로 부터 분리

⇒ 비즈니스 로직이 UI 와 독립적으로 유지되어 코드의 재사용성과 유지보수 용이

테스트 용이성

비즈니스 로직이 UI 와 분리되어 있기 때문에 UI 에 의존하지 않고 독립적으로 테스트 가능

⇒ 애플리케이션의 안정성을 높이는 데 기여

상태 관리의 일관성

모든 상태 변경이 BLoC 를 통해 이루어지도록 함으로써 상태 관리의 일관성 유지

⇒ 애플리케이션의 예측 가능성과 실뢰성을 높이는 데 기여

비동기 처리의 효율성

Stream 을 사용하여 비동기 이벤트와 상태 변화 관리

⇒ 비동기 작업을 효율적으로 처리

BLoC Pattern 단점

학습 곡선

이해하고 사용하기까지 상대적으로 높은 학습 곡선을 가지고 있다.

⇒ Stream 과 비동기 프로그래밍에 익숙하지 않은 개발자에게는 초기 진입 장벽이 될 수 있다.

보일러플레이트 코드

이벤트, 상태, BLoC 클래스 등을 정의해야 하기 때문에 상당량의 보일러플레이트(반복적인) 코드가 발생할 수 있다.

⇒ 프로젝트의 코드량을 증가시키고, 때로는 가독성을 저해할 수 있다.

상태 관리의 복잡성

크고 복잡한 애플리케이션에서 다수의 BLoC 를 관리하고, BLoC 간의 상호작용을 처리하는 것이 복잡해질 수 있다.

⇒ 애플리케이션의 아키텍처를 복잡하게 만들 수 있다.

bloc

bloc 이란?

Dart 언어를 사용하는 어떤 애플리케이션에서든 상태 관리를 위해 사용될 수 있는 상태 관리 라이브러리

⇒ BLoC 패턴을 쉽고 효과적으로 구현할 수 있도록 도와주는 다양한 기능과 유틸리티 제공

bloc 목적

BLoC 패턴을 구현하여 이벤트를 수신하고 이를 기반으로 상태를 변화시키는 로직을 구현할 수 있게 도와줌

⇒ 애플리케이션의 상태 관리를 추상화하고, 비즈니스 로직을 UI 로부터 분리하는 데 도움을 줌

Cubit

이벤트 없이 상태만 관리하는 간단한 형태

⇒ 함수 호출을 통해 상태를 변경

Bloc

이벤트 기반으로 상태를 관리하는 복잡한 형태

⇒ 이벤트를 받아서 상태를 방출

BlocObserver

BLoC 패턴에서 상태 관리 시스템의 생명주기 이벤트를 관찰하고 처리하는 용도

⇒ 디버깅, 로깅, 분석 등에 사용

onCreate

Bloc 또는 Cubit 이 생성될 때 호출

⇒ 초기화 단계에서 발생하는 이벤트를 관찰하는 용도

onEvent

Bloc 에 이벤트가 추가될 때마다 호출

⇒ 초기화 단계에서 발생하는 이벤트를 관찷하는 용도

onChange

Bloc 또는 Cubit 의 상태가 변경될 때 호출

⇒ 상태 변화를 추적하고 분석하는 용도

onTransition

Bloc 에서 상태 전환이 발생할 때 호출

⇒ 상태 변화의 전체 흐름 파악하는 용도

onError

Bloc 또는 Cubit 내부에서 예외가 발생할 때 호출

⇒ 예외 상황을 처리하거나 로깅하는 용도

onClose

Bloc 또는 Cubit 이 닫힐 때 호출

⇒ 리소스 해제 등에 대한 관찰하는 용도

bloc 장점

보일러 플레이트 코드 최소화

이벤트 처리, 상태 변화, 스트림 관리 등을 위한 API 제공

⇒ 개발자가 작성해야 하는 코드의 양을 줄여줌

상태 변화의 추적

상태 변화를 쉽게 추적하고 디버깅 할 수 있도록 도와줌

에러 처리와 리소스 관리

에러 처리와 리소스 해제를 보다 쉽게 관리할 수 있는 패턴과 구조 제공

fluter_bloc

flutter_bloc 이란?

Flutter 애플리케이션에서 BLoC 디자인 패턴을 구현하기 위해 만들어진 Flutter 라이브러리

fluter_bloc 목적

위젯을 제공하여 Flutter UI 구성 요소와 BLoC 패턴 사이의 상호 작용을 용이하게 해줌

⇒ 상태 변화에 따라 UI 를 업데이트하거나, bloc 을 위젯 트리에 추가하고, 상태 변화에 대한 반응을 처리하는 등의 작업을 간소화해줌

BlocBuilder

bloc 의 상태 기반으로 UI 의 일부를 구축하는 데 사용되는 위젯

⇒ StreamBuilder 와 매우 유사하지만, API 가 더 단순하여 필요한 보일러플레이트 코드의 양을 줄임

BlocBuilder<Bloc, State>

BlocBuilder

bloc 의 상태 변화에 반응하여 UI 를 재빌드하는 위젯

⇒ CounterBloc 타입의 Bloc 을 사용하고, Bloc 의 State 타입이 int 임을 명시

builder

bloc 의 상태가 변경될 때마다 호출되며, 주어진 상태에 따라 UI 를 어떻게 나타낼지 정의

⇒ context 는 현재의 BuildContext 를 나타내고, state 는 bloc 의 최신 상탤르 나타냄

bloc

BlocBuilder 에 사용할 Bloc 인스턴스를 전달

⇒ CounterBloc 인스턴스인 bloc 을 사용하여 주어진 bloc 의 상태 변화를 감지하고 반응함

buildWhen

bloc 의 상태 변화가 발생했을 때, UI 를 재빌드할지 결정하는 조건을 정의

⇒ true 를 반환하면 builder 함수가 호출되어 UI 를 재빌드

BlocSelector

bloc 의 상태 기반으로 UI 의 일부를 구축하는 데 사용되는 위젯

⇒ BlocBuilder 와 유사하지만 위젯이 응답할 상태의 특정 부분을 선택하는 기능 추가

BlocSelector<Bloc, State, SelectedState>

BlocSelector

bloc 의 상태 변화에 반응하여 UI 를 재빌드하는 위젯

⇒ CounterBloc 타입의 Bloc 을 사용하고, Bloc 의 State 타입이 int 임을 명시하고, 그 중 String 의 값을 선택하도록 명시함

selector

bloc 의 수신 상태를 builder 함수에서 UI 를 재빌드하는 데 사용할 새로운 값으로 변환하는 곳

⇒ state 는 bloc 의 최신 상태이며 해당 상태 기반으로 새로운 값으로 반환

builder

bloc 의 상태가 변경될 때, selector 에서의 상태가 변경될 때만 호출되며, 변경된 상태에 따라 UI 를 어떻게 나타낼지 정의

⇒ context 는 현재의 BuildContext 를 나타내고, state 는 selector 에서 반환된 값

bloc

BlocSelector 에 사용할 Bloc 인스턴스를 전달

⇒ CounterBloc 인스턴스인 bloc 을 사용하여 주어진 bloc 의 상태 변화를 감지하고 반응함

BlocProvider

위젯 트리에 bloc 을 제공하는 위젯

의존성 주입에 사용되며 위젯 트리 전체에서 bloc 에 쉽게 접근 가능

create

bloc 인스턴스를 생성하여 위젯 트리에 제공

⇒ 트리의 모든 하위 위젯에서 bloc 사용 가능

value

기존 bloc 인스턴스를 가져와 위젯 트리에 제공

⇒ 다양한 위젯 트리에서 bloc 상태를 그대로 유지해야 할 때 유용

dispose

• create : 리소스 자동 해제

• value : 리소스 수동 해제

검색 (read)

위젯 트리에서 bloc 인스턴스를 검색하는 데 사용되는 메소드

⇒ 상태가 변경될 때 위젯이 자동으로 다시 작성되지 않음

⇒ 이벤트를 추가하기 위해 bloc 에 접근해야 할 때 일반적으로 사용

검색 (watch)

위젯 트리에서 bloc 인스턴스를 검색하는 데 사용되는 메소드

⇒ 상태가 변경될 때 마다 위젯이 재빌드되도록 함

⇒ 상태 변경에 응답하여 위젯이 UI 를 업데이트해야 할 때 유용

검색 (select)

위젯 트리에서 bloc 인스턴스를 검색하는 데 사용되는 메소드

⇒ 모든 상태 변경이 아닌 선택한 상태 부분이 변경될 때만 위젯을 재빌드 함

⇒ 불필요한 위젯 재빌드를 줄여 성능을 향상 시킬 수 있음

MultiBlocProvider

여러 BlocProvider 위젯을 단일 위젯 트리로 병합하는 위젯

여러 bloc 을 하위 트리에 제공하는 프로세스를 간소화하도록 설계된 위젯

⇒ 코드의 가독성 향상과 여러 BlocProvider 의 중첩과 관련된 복잡성과 혼란 제거

BlocListener

상태 변화에 응답하여 리스너를 호출하는 위젯

상태 변화에 대응하여 한 번만 수행되어야 하는 기능에 사용

⇒ 토스트, 스낵바, 다이얼로그 표시 등

BlocListener<Bloc, State>

BlocListener

bloc 의 상태 변화에 반응하여 리스너 함수 사용

⇒ CounterBloc 타입의 Bloc 을 사용하고, Bloc 의 State 타입이 int 임을 명시

listener

상태 변경시 호출되는 콜백

⇒ 변경 사항에 응답하는 코드 입력

listenWhen

리스너 콜백을 호출해야 하는지 여부를 결적하는 선택적 콜백

⇒ 반환 값이 true 이면 리스너가 호출되고 그렇지 않으면 건너 뜀

MultiBlocListener

여러 BlocListener 위젯을 단일 위젯 트리로 병합하는 위젯

여러 bloc 의 상태 변경을 수신해야 할 때 사용

⇒ 코드의 가독성 향상과 여러 BlocListener 의 중첩과 관련된 복잡성과 혼란 제거

BlocConsumer

BlocListener 와 BlocBuilder 의 기능을 하나의 위젯으로 결합한 위젯

RepositoryProvider

위젯 트리에 단일 저장소 인스턴스를 제공하는 데 사용되는 위젯

하위 위젯에서 저장소에 접근하여 API 또는 DB 에서 데이터를 가져오는 등 데이터 작업 수행

검색(read)

위젯 트리에서 저장소를 검색하는 데 사용되는 메소드

MultiRepositoryProvider

여러 RepositoryProvider 위젯을 단일 위젯 트리로 병합하는 위젯

flutter_bloc 장점

구조화와 유지 보수성

애플리케이션의 구조를 명확하게 하고, 코드의 유지 보수성을 향상시켜줌

코드 컨벤션과 문서화

일관된 코드 컨벤션을 제공하고, 문서화가 잘 되어 있어 새로운 개발자들도 쉽게 학습하고 적용할 수 있음

커뮤니티와 지원

널리 사용되는 라이브러리로 활발한 커뮤니티와 다양한 자료를 통해 지원을 받을 수 있음

야곰 유튜브와 제가 따로 보는 인강 chat GPT 설명을 인용하여 정리해보았습니다.

Optional

let num: Int
num = 123

print(num)

let num2: Int
// num = 123

print(num2) // Constant 'num2' used before being initialized

Constant 'num2' used before being initialized 초기화를 하지않고 num2 를 사용할 수 없다.

Q : 그냥 항상 값을 저장하면 안됨?

A : 예를 들어 파일에 어떤 숫자가 있고 파일을 읽어서 값을 저장한다고 생각해봄 지정한 위치에 파일이 있고 파일안에 필요한 값이 필요한 형태로 저장되어있다면 문제가 없다. 하지만 이중에 하나라도 조건이 맞지않는다면 값을 저장할 수 없게된다. 이번엔 서버에 값이 저장되있다고 생각해봄 서버가 정상적으로 실행되고 있고, 아이폰도 네트워크에 연결되어있고, 전달되는 데이터도 올바른 형태로 되어있다면 문제 없다. 하지만 하나라도 조건에 맞지않다면 값을 저장할 수 없다. 어쨌든 값을 저장하지않고 초기화하는 수단이 필요한데 그게 바로 옵셔널이다.

Optional: 선택적인 , 의무적이지 않은

여기서는 값을 저장하지 않아도 되는 이라고 해석한다.

let num: Int? // Optional Int
num = nil // nil 을 저장하는 건 값을 저장하지않는 것과 같다.

이렇게 type 뒤에 ? 를 작성하면 된다.

값을 저장해도되고 안해도 된다.

let count: Int? = nil // count가 없다
let count: Int? = 0 // count가 0이다

이 차이가 중요하다고 함 (0도 값이고 숫자니까)

let num: Int = 123
print(num) // 123

let optionalNum: Int? = 123
print(optionalNum) // Optional(123)

Optional Type 은 값이 포장되어있다고 생각하면 편하다. 그래서 Unwrapping(추출) 을 해줘야한다.

이제 저 포장되어있는 값을 추출해야하는데

print(optionalNum!) // 강제 추출 , Forced Unwrapping

이렇게하면된다. 근데 이건 값이 확실히 있을 때 한다. 만약 값이 없다면

let optionalNum: Int? = nil
print(optionalNum!) // 강제 추출 , Forced Unwrapping

Fatal error: Unexpectedly found nil while unwrapping an Optional value 옵셔널값을 unwrapping 하는 동안 예상치 못하게 nil 을 발견했다.

Optional Binding

if let name: Type = OptionalExperssion {
    statements
}

while let name: Type = OptionalExperssion {
    statements
}

guard let name: Type = OptionalExpression else {
    statements
}

1. 
let str: String? = "123"

// optional binding
if let str = str { // if let 바인딩할 상수의 이름 = 앞에서 선언했던 옵셔널상수의 이름
  if let num = Int(str) { // 여기에 들어있는 str 은 바인딩할 상수의 이름 이거임
    print(num)
  } else {
    print("타입 컨버전 실패")
  }
} else {
  print("옵셔널 바인딩 실패")
}

// 123

2.
let str: String? = nil

// optional binding
if let str = str { // if let 바인딩할 상수의 이름 = 앞에서 선언했던 옵셔널상수의 이름
  if let num = Int(str) { // 여기에 들어있는 str 은 바인딩할 상수의 이름 이거임
    print(num)
  } else {
    print("타입 컨버전 실패")
  }
} else {
  print("옵셔널 바인딩 실패")
}

// 옵셔널 바인딩 실패

3.
let str: String? = "nil"

// optional binding
if let str = str { // if let 바인딩할 상수의 이름 = 앞에서 선언했던 옵셔널상수의 이름
  if let num = Int(str) { // 여기에 들어있는 str 은 바인딩할 상수의 이름 이거임
    print(num)
  } else {
    print("타입 컨버전 실패")
  }
} else {
  print("옵셔널 바인딩 실패")
}

// 타입 컨버전 실패

Closure

함수는 반복적으로 사용할 수 있는 코드 블럭이다. 클로져도 마찬가지로 코드 블럭이다. 함수가 반복적으로 사용하는 것에 포커스가 맞춰져있다면 클로져는 코드 블럭을 다른 곳으로 전달하는데에 포커스가 맞춰져있다.

Function > Named Closure Closure > Unnamed Closure

클로저는 함수와 비슷하게 동작하지만, 보다 간결하고 유연한 문법을 제공해서 코드를 작성할 때 많은 편의성을 제공한다. 일급 시민(first-citizen) 이고 변수 , 상수 등으로 저장 , 전달인자로 전달이 가능하다.

Closure 정의 문법

{ (매개변수 목록) -> 반환타입 in 
    실행코드
}

함수를 사용한다면

func sumFunction(a: Int, b: Int) -> Int {
    return a + b
}

var sumResult: Int = sumFunction(a: 1, b: 2)

print(sumResult) // 3

클로져의 사용

var sum: (Int, Int) -> Int = { (a: Int, b: Int) in
    return a + b
}

sumResult = sum(1, 2)
print(sumResult) // 3

당연히 함수는 클로져의 일종이고 위에 만든 sum변수에는 함수도 할당할 수 있다.

sum = sumFunction(a:b:)

sumResult = sum(1, 2)
print(sumResult) // 3

함수의 전달인자로서의 클로져

let add: (Int, Int) -> Int
add = { (a: Int, b: Int) -> Int in
    return a + b
}

let substract: (Int, Int) -> Int
substract = { (a: Int, b: Int) -> Int in
    return a - b
}

let divide: (Int, Int) -> Int
divide = { (a: Int, b: Int) -> Int in
    return a / b
}

func calculate(a: Int, b: Int, method: (Int, Int) -> Int) -> Int {
    return method(a, b)
}

var calculated: Int
calculated = calculate(a: 50, b: 10, method: add)
print(calculated) // 60

calculated = calculate(a: 50, b: 10, method: substract)
print(calculated) // 40

calculated = calculate(a: 50, b: 10, method: divide)
print(calculated) // 5

calculated = calculate(a: 50, b: 10, method: { (left: Int, right: Int) -> Int in
    return left * right
})

print(calculated) // 500

후행 클로져

클로져가 함수의 마지막 전달인자라면 마지막 매개변수 이름을 생략한 후 함수 소괄호 외부에 클로져를 구현할 수 있다.

var result: Int

result = calculate(a: 10, b: 10) { (left: Int, right: Int) -> Int in
    return left + right
}

print(result) // 20

반환타입 생략

calculate 함수의 method 매개변수는 Int 타입을 반환할 것이라는 사실을 컴파일러도 알기 때문에 굳이 클로져에서 반환타입을 명시해 주지 않아도 된다. 대신 in 키워드는 생략할 수 없다.

result = calculate(a: 10, b: 10, method: { (left: Int, right: Int) in
    return left + right
})

print(result) // 20

후행 클로져와 함께 사용가능하다.

result = calculate(a: 10, b: 10) { (left: Int, right: Int) in
    return left + right
}

print(result) // 20

단축 인자이름

클로져의 매개변수 이름이 굳이 불필요하다면 단축 인자이름을 활용할 수 있다. 단축 인자이름은 클로저의 매개변수의 순서대로 $0 , $1 … 처럼 표현한다

result = calculate(a: 10, b: 10, method: { in
    return $0 + $1
})

print(result) // 20

당연히 후행 클로져와 함께 사용할 수 있다.

result = calculate(a: 10, b: 10) { in
    return $0 + $1
}

print(result) // 20

암시적 반환 표현

클로져가 반환하는 값이 있다면 클로져의 마지막 줄의 결과 값은 암시적으로 반환 값으로 취급한다.

result = calculate(a: 10, b: 10) { in
    $0 + $1
}

print(result) // 20

당연하게도 간결하게 한 줄로 표현해 줄 수 있다.

result = calculate(a: 10, b: 10) { $0 + $1 }

print(result) // 20

축약하지 않은 클로져 문법과 축약 후 문법 비교

result = calculate(a: 10, b: 10, method: { (left: Int, right: Int) -> Int in
    return left + right
})

result = calculate(a: 10, b: 10) { $0 + $1 }

print(result) // 20

이렇게나 줄일 수 있다.

또다른 예

숫자 배열을 정렬하는 간단한 함수를 작성한다고 가정해보면, 일반적으로 이와같이 작성이 가능하다.

let numbers = [5, 2, 8, 1, 9]

func ascending(_ a: Int, _ b: Int) -> Bool {
    return a < b
}

let sortedNumbers = numbers.sorted(by: ascending)
print(sortedNumbers) // [1, 2, 5, 8, 9]

클로져를 사용하게 되면

let numbers = [5, 2, 8, 1, 9]

let sortedNumbers = numbers.sorted(by: { (a: Int, b: Int) -> Bool in
    return a < b
})
print(sortedNumbers) // [1, 2, 5, 8, 9]

클로저는 중괄호로 둘러싸여 있으며, sorted(by:) 메서드에 직접 전달된다. 이 클로저는 두 개의 매개변수 a와 b를 취하고, bool 값을 반환한다. 클로저의 내용은 함수와 동일하지만, 함수 이름이 없다.

Swift는 타입 추론을 통해 매개변수 및 반환 유형을 자동으로 추측할 수 있기 때문에, 종종 이러한 유형 선언을 생략할 수 있다.

let sortedNumbers = numbers.sorted(by: { a, b in
    return a < b
})

단일 표현식을 사용하는 클로저의 경우 return 카워드를 생략할 수 있다.

let sortedNumbers = numbers.sorted(by: { a, b in a < b })

여기서 더 간단하게 하자면

let sortedNumbers = numbers.sorted(by: <)

클로저는 코드를 간결하고 읽기 쉽게 만들어주며, Swift에서 함수형 프로그래밍을 지원하는 중요한 도구이다.

이번에 에뮬레이터로 실행해보려고했는데 이런 에러가 나왔다. 그래서 혹시나 다음에도 같은 에러가 나지않을까해서 해결방법을 작성하려고한다.

android / app / build.gradle 에서

이렇게 48번째 줄을 수정하고 52번째 줄을 추가해주면 에러없이 실행된다.

Error (Xcode): ../../../../../.pub-cache/hosted/pub.dev/file-6.1.2/lib/src/interface/file.dart:15:16: Error: The method 'File.create' has fewer named arguments than those of overridden method 'File.create'. Could not build the application for the simulator. Error launching application on iPhone 13 mini.

해당 에러가 발생했다.

해결하기위해 검색하던중

https://cishome.tistory.com/270

이 블로그를 참고했고, 나중에 또 해당 에러가 발생할까봐 참고하기위해 작성한다.

해결방법 순서는 터미널에 순서대로 4개의 명령어를 입력하면된다.

flutter pub outdated
flutter pub upgrade
flutter channel master
flutter upgrade

이 4개의 명령어를 순서대로 입력하니 문제없이 잘 해결되었다.

일단 나의 경우는 예를 들어 abcdefg 라고 알파벳이 적인 이미지라고 했을 때 abcd는 단색이고 efg는 그라데이션이 적용된 이미지였다.

우선 사용한 라이브러리는

flutter_svg: ^1.1.6

이것이고 코드는

SvgPicture.asset(
  '경로',
)

이렇게 작성했었다. 근데 결과는 abcd까지는 보이는데 efg는 안보이는 상황이였다. 그 결과 해결방법은 일단 한가지만 발견했다. 근데 내 경우가 딱 맞는 경우여서 다른 경우라면 해결방법을 더 찾아봐야 할 것같다. 일단 이렇게 해결했다. svg파일을 열어 코드를 보는데 코드가 만약

<svg>
    ...
    <defs>
        ...
    </defs>
</svg>

이렇게 defs태그가 밑에 있다면 svg 열리는 태그 바로 밑으로 옮기면 잘 출력된다.

<svg>
    <defs>
        ...
    </defs>
  ...
</svg>

이렇게 하면 된다.

https://pub.dev/packages/animate_do

그중에서 Swing 이라는 기능을 적용하고있었다. 두개의 이미지를 양쪽에 두고 가운데서 크로스(?)되는 상상을하며 작업했는데 이게 적용하면 Swing이 왼쪽부터 진자운동하듯이 동작을 했다. 그래서 오른쪽 이미지를 반전시키면 되지않을까하며 찾다가 발견했다.

https://yj95.tistory.com/259

이분 블로그를 참고했다. 코드는

import 'dart:math' as math;

Transform(
    aligment: Alignment.center,
    transform: Matrix4.rotationY(math.pi),
    child: Swing(
    child: Align(
      alignment: Alignment.topCenter,
      child: SvgPicture.asset('assets/logo/fork.svg')
    ),
  ),
)

이렇게하면 좌우반전이 된다.

Q. 플러터에서 위젯은 무엇인가요? A. 플러터에서 위젯은 사용자에게 보이는 인터페이스를 결정하는 부품이다. 위젯의 조합으로 다양한 UI를 보여줄 수 있다. 화면에 보이거나 보이지 않는 부분도 모두 위젯으로 이루어져 있기 때문에 굉장히 중요하다.

플러터 앱의 각 요소는 위젯이다. 화면에 보여지는 뷰는 앱을 만드는데 사용되는 위젯의 종류와 어떻게 위젯을 배치하는지 등에 따라 달라진다.

Q. 위젯의 타입에는 무엇이 있나요? A. 위젯 타입은 대표적으로 두가지로 나뉜다.

• StatelessWidget : 상태를 저장하지않는 위젯. 상태가 없어 사용자의 이벤트 등으로 인해 바뀌는게 없기 때문에 화면 변화가 이루어지지 않는다. 정적인 화면을 보여줄 때 사용하는 위젯이다. ex) Icon , Text 등과 같은 위젯들이 대표적이다.
• StatefulWidget : 상태를 저장하는 위젯. 사용자의 이벤트나 데이터 변경을 모니터링하다가 UI를 업테이트 할 수 있다. 동적인 화면을 보여줄 때 사용한다. ex) CheckBox, Radio, Slider, TextField 등과 같은 위젯들이 대표적이다.

statelessWidget 기본 구조

class StatelessWidgetScreen extends StatelessWidget {
  const StatelessWidgetScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

statefulWidget 기본 구조

class StatefulWidgetScreen extends StatefulWidget {
  const StatefulWidgetScreen({Key? key}) : super(key: key);

  @override
  State<StatefulWidgetScreen> createState() => _StatefulWidgetScreenState();
}

class _StatefulWidgetScreenState extends State<StatefulWidgetScreen> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

기본구조는 이렇게 이루어져있다.

responsive_builder: ^0.6.4

responsive_builder | Flutter Package

이 라이브러리를 발견했다.

우선 검색해보면서 하나하나 직접 쳐보면서 해보기로했다.

ScreenTypeLayout.builder(
  breakpoints: ScreenBreakpoints(desktop: 1024, tablet: 768, watch: 250),
  mobile: (_) => OrientationLayoutBuilder(
    portrait: (context) => MobileScreen(),
    landscape: (context) => MobileScreen()
  ),
  tablet: (_) => TabletScreen(),
  desktop: (_) => DesktopScreen(),
)

1. breakpoints

breakpoints: ScreenBreakpoints(desktop: 1024, tablet: 768, watch: 250)

이렇게 분기를 정해줄 수 있다.

1024보다 크면 pc , 768보다 크면 teblet, 250보다 크면 mobile , 그 밑이면 watch 이렇게

1. mobile , tablet , desktop

mobile: (_) => OrientationLayoutBuilder(
  portrait: (context) => MobileScreen(),
  landscape: (context) => MobileScreen()
),
tablet: (_) => TabletScreen(),
desktop: (_) => DesktopScreen(),

이렇게적으면 해당 분기마다 맞게 출력된다.

OrientationLayoutBuilder(
  portrait: (context) => MobileScreen(),
  landscape: (context) => MobileScreen()
)

OrientationLayoutBuilder 이건 가로 및 세로 위젯에 대한 빌더 기능 제공한다.

웹 개발을 했었을 때 화면구성이 fullscreen이 아니라면 대부분 가운데 정렬로 레이아웃이 구성되게 작업했었다.

이런식으로 레이아웃을 화면사이즈에 가운데에 위치하게 한 후 작업을 진행했다. 그렇다고해서 안에 구성들도 다 가운데 정렬로 진행하는 것은 아니다.

가운데에 맞춰 작업하려면

class CenteredView extends StatelessWidget {
  final Widget child;
  const CenteredView({Key?key, required this.child}) : super(key:key);

@override
Widget build(BuildContextcontext) {
    return Container(
padding: const EdgeInsets.symmetric(horizontal: 70),
alignment: Alignment.topCenter,
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 1200),
child: child,
      ),
    );
  }
}

이렇게 위젯을 만든 후 작업하면 편하다.

LayoutBuilder 라는 위젯도 있다.

LayoutBuilder(
    builder: (context, constraints) {
      if (constraints.maxWidth > 600) {
        return Center(child: Text('600보다 큼 : ${constraints.maxWidth}'));
      } else {
        return Center(child: Text('600보다 작음 : ${constraints.maxWidth}'));
      }
    }
)

이런식으로 현재 화면사이즈에 맞게 다른 위젯을 보여줄 수 있다.

앞으로도 더 공부하면서 내용을 더 추가하려고한다.

final jsonStr = await client.post(
        Uri.parse('$ip/consolations?problemId=$problemId'),
        body: json
      );

이 코드가 내가 작성했던 코드인데 아래와 같이 에러가 났었다.

"status":415,"error":"Unsupported Media Type","message":"Content type 'text/plain;charset=utf-8' not supported for bodyType=com.hakuna.entity.Consolation"

이렇게 에러가 났었다. 그래서 찾아보던 중

https://leeseongho.tistory.com/70

이 블로그를 봤고, 이 블로그처럼

final jsonStr = await client.post(
  Uri.parse('$ip/consolations?problemId=$problemId'),
    headers: {
      "content-type" : "application/json"
    },
    body: jsonEncode(json)
);

위와 같이 수정하니 에러없이 잘 성공했다.

void main() {
  WidgetsFlutterBinding.ensureInitialized(); // <- 이거

  runApp(const MyApp());
}

이 코드를 써주면 된다는 글을 봤고 바로 적용 해보았지만 되지않았다.

  WidgetsFlutterBinding.ensureInitialized();

다시 열심히 찾아봤는데

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(); // <- 이거
  runApp(const MyApp());
}

이걸 넣어주면 문제 없이 동작한다는 글을 보았고 바로 적용해서 다시실행해보았다.

  await Firebase.initializeApp();

문제 없이 잘 등록되었다.

MissingPluginException(No implementation found for method getAll on channel...

이 에러가 나와버렸다. hot reload도 해봤고 에러코드가 있나 찾아보고 그랬는데 해결법은 오히려 정말 간단했다.

플러그인을 설치하고 hot reload가 안되는 경우가 종종 있다고하는데, 그때는 디버깅을 종료하고 다시 시작하면 해결된다고한다. 그래서 디버깅종료 후 다시 시작했더니 오류 없이 잘 출력되었다.

이전 글에서 작성했는데 짱구 mbti 프로젝트를 작업하던 도중 에러가 발생했다. 이 에러는 처음 테스트를 할땐 나오지 않다가 홈으로 가기 버튼을 누른 후 다시 테스트를 진행하고, 결과페이지로 이동하게되면 나타나던 에러이다. 열심히 검색하고 이 방법, 저 방법 삽질을 했는데 그 과정중에

https://stackoverflow.com/questions/67040839/flutter-lateinitializationerror-field-name-has-not-been-initialized

I had the same problem of lateInitializationError I find out to use ? to avoid it. if some one is facing this problem instead of late try ?. 저는 lateInitializationError와 동일한 문제를 가지고 있었습니다. 이 문제를 피하기 위해 ?를 사용했습니다. 만약 누군가가 늦은 시도 대신 이 문제에 직면한다면 ?

stackoverflow에서 위 글을 보았고, null 문제인가싶어 해당 코드를 조금 수정했었다.

_resultDetail = _resultListModel.resultList.firstWhere((e) => e.type == mbti);

위 코드를 아래로

_resultDetail = _resultListModel.resultList.firstWhereOrNull((e) => e.type == mbti)!;

수정했더니 똑같은 에러가 발생했다. 그 후 다시 검색해본 결과

https://velog.io/@baekmoon1230/LateInitializationError-Field-%EB%B3%80%EC%88%98%EB%AA%85-has-not-been-initialized

https://www.fluttercampus.com/guide/241/lateinitializatioerror-field-has-not-been-initialized-error/

이 블로그 글들을 보게 됐고, 초기값을 지정해줘야될거같아 코드를 다시 수정해보았다.

late final ResultDetail _resultDetail;

위 코드를 아래 코드로

late ResultDetail _resultDetail = ResultDetail(type: '', detail: ResultContent(name: '', contents: '', path: ''));

수정 해보니 에러 없이 잘 구동되었다.

기존에 만들었었던 짱구 MBTI를 수정을 했다.

json 파일을 불러오거나 하는 방법을 몰랐었는데 이번 기회에 적용을 했다. 기존에 사용했던 mbti test용 데이터들을 하나하나 일일이 담아서 적용했는데 이번에 아얘 json 파일로 변경해 asset에 넣었다. 그 후 pubspec.yaml 파일에 asset을 추가한다. 모델 작업을 진행한다.

mbti 문제 데이터

import 'package:json_annotation/json_annotation.dart';

part 'question_model.g.dart';

@JsonSerializable()
class QuestionListModel {
  @JsonKey(
    name: 'list'
  )
  final List<Question> questionList;

  QuestionListModel({required this.questionList});

  factory QuestionListModel.fromJson(Map<String, dynamic> json) => _$QuestionListModelFromJson(json);
}

@JsonSerializable()
class Question {

  final String title;
  final String type;
  final String answerA;
  final String answerB;

  Question({
    required this.title,
    required this.type,
    required this.answerA,
    required this.answerB
  });

  factory Question.fromJson(Map<String, dynamic> json) => _$QuestionFromJson(json);
}

mbti 결과 데이터

import 'package:json_annotation/json_annotation.dart';

part 'result_model.g.dart';

@JsonSerializable()
class ResultListModel {
  final List<ResultDetail> resultList;

  ResultListModel({
    required this.resultList
  });

  factory ResultListModel.fromJson(Map<String, dynamic> json) => _$ResultListModelFromJson(json);
}

@JsonSerializable()
class ResultDetail {
  final String type;
  final ResultContent detail;

  ResultDetail({
    required this.type,
    required this.detail
  });

  factory ResultDetail.fromJson(Map<String, dynamic> json) => _$ResultDetailFromJson(json);
}

@JsonSerializable()
class ResultContent {
  final String name;
  final String contents;
  final String path;

  ResultContent({
    required this.name,
    required this.contents,
    required this.path
  });

  factory ResultContent.fromJson(Map<String, dynamic> json) => _$ResultContentFromJson(json);
}

위와같이 모델작업을 한 후 본격적으로 mock service 작업을 시작했다.

json data 들을 dart model 로 변경한 후에 데이터를 전달해줄거기 때문에 dart model 로 변경하는 시간이 조금 걸릴 수가 있다고 한다.

ex)

final jsonString = await rootBundle.loadString('assets/data.json');

이렇게하면 json 파일을 불러올 수 있다. 여기서 rootBundle을 사용하면 text assets을 로드 할 수 있다고 한다.

작성을 해보자면

import 'dart:convert';

import 'package:chopper/chopper.dart';
import 'package:http/http.dart' as http;
import 'package:flutter/services.dart';
import 'package:zzang_gu_mbti/domain/models/models.dart';

class QuestionMockService {
  late final QuestionListModel _questionListModel;

  void loadQuestion() async {
    final jsonStr = await rootBundle.loadString('asset/data/test.json');
    final json = jsonDecode(jsonStr);
    _questionListModel = QuestionListModel.fromJson(json);
  }

  Future<Response<Result<QuestionListModel>>> queryQuestion() {
    return Future.value(
      Response(
        http.Response(
          'Dummy',
          200,
          request: null
        ),
        Success<QuestionListModel>(_questionListModel)
      )
    );
  }
}

하나씩 보자면

void loadQuestion() async {
  final jsonStr = await rootBundle.loadString('asset/data/test.json');
  final json = jsonDecode(jsonStr);
  _questionListModel = QuestionListModel.fromJson(json);
}

이렇게 작성해 json data를 불러오고 디코딩해준 후 맵핑한다. 그 후 서비스 코드를 작성하면

Future<Response<Result<QuestionListModel>>> queryQuestion() {
  return Future.value(
    Response(
      // 여긴 base
      http.Response(
        'Dummy', // body
        200, // status code
        request: null, // 안써서 null 로 한다고 함
      ), // 중요한건 이 Response 부분이 아니라
      // 여긴 body
      Success<QuestionListModel>(_questionListModel)  // 이 body 부분이 중요하다고 함
    )
  );
 }

이렇게 작성 할 수 있다. 그리고 이 mock service로 작성한 코드를 Provider에 담아서 사용할 것이기 때문에 main.dart에서

Widget build(BuildContext context) {
  return MultiProvider(
    providers: [
      Provider(create: (_) => QuestionMockService()..loadQuestion(), lazy: false,),
      Provider(create: (_) => ResultMockService()..loadResult(), lazy: false,)
    ],
    child: MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        fontFamily: 'sunflower'
      ),
      home: const HomeScreen(),
    ),
  );
}

이렇게 작성해서 넣어주었다. 이제 불러와서 사용할 때는

FutureBuilder<Response<Result<QuestionListModel>>>(
  future: Provider.of<QuestionMockService>(context).queryQuestion(),
  builder: (context, snapshot) {
    return ;
  }
),

이런식으로 타입을 작성해주고 사용하면 됐다.