이 글에서는 Isolate가 무엇인지, 언제 사용하는지, 어떻게 사용하는지, 그리고 실제 예시까지 정리한다.

🧠 Isolate란?

Flutter는 기본적으로 단일 스레드(UI Thread)에서 실행된다. 따라서 무거운 작업을 하게 되면 UI가 멈추거나 버벅일 수 있다.

이 문제를 해결하기 위해 사용하는 것이 바로 Isolate이다.
Isolate는 Dart의 멀티스레딩 방식이며, 일반적인 스레드와 다르게 작동한다.

🔹 각 Isolate는 독립적인 메모리 공간을 가지며
🔹 서로 데이터를 직접 공유하지 않고, 메시지를 통해 통신한다.

🛠️ Isolate 사용 방법

✅ Isolate.spawn 사용법

복잡하거나 장기 실행 작업에 적합

import 'dart:isolate';

void isolateEntryPoint(SendPort sendPort) {
  // 무거운 작업 실행
  int result = heavyCalculation();
  sendPort.send(result);
}

Future<void> runIsolate() async {
  ReceivePort receivePort = ReceivePort();

  await Isolate.spawn(isolateEntryPoint, receivePort.sendPort);

  // isolate로부터 결과 받기
  int result = await receivePort.first;
  print("결과: $result");
}

✅ Isolate.run 사용법

간단한 비동기 작업 실행에 적합

import 'dart:isolate';

// 무거운 작업 함수
int heavyCalculation() {
  // 예: 연산이 많은 계산
  int sum = 0;
  for (int i = 0; i < 100000000; i++) {
    sum += i;
  }
  return sum;
}

Future<void> runIsolate() async {
  // Isolate.run을 사용하여 작업 실행
  int result = await Isolate.run(() => heavyCalculation());
  print("결과: $result");
}

⚠️ Isolate.run 은 Dart 3.0 이상부터 사용가능

✅ compute 함수 사용법

간단한 연산 처리 (JSON 파싱 등)

import 'package:flutter/foundation.dart';

int heavyTask(int value) {
  return value * 2;
}

Future<void> useCompute() async {
  int result = await compute(heavyTask, 10);
  print("결과: $result");
}

⚠️ compute 는 함수와 파라미터 모두 직렬화 가능해야 하며, 파라미터는 하나만 받을 수 있다.

사용법 비교

📦 사용 예제

1. 대용량 JSON 파싱

Future<List<User>> parseJson(String jsonString) async {
  return compute(_parseAndDecode, jsonString);
}

List<User> _parseAndDecode(String responseBody) {
  final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
  return parsed.map<User>((json) => User.fromJson(json)).toList();
}

2. 이미지 처리

이미지를 필터링하거나 리사이징하는 작업에도 Isolate를 사용할 수 있다.

import 'dart:isolate';
import 'dart:io';
import 'dart:typed_data';

void imageProcessingIsolate(SendPort sendPort) async {
  // 메인 Isolate에서 작업 요청을 받을 포트
  final port = ReceivePort();

  // 메인 Isolate에게 자신의 포트를 전달
  sendPort.send(port.sendPort);

  // 요청 대기
  await for (final message in port) {
    // message 구조: [Uint8List imageBytes, SendPort replyPort]
    final Uint8List imageBytes = message[0];
    final SendPort replyPort = message[1];

    // 예시: 이미지의 크기를 단순히 구하는 작업 (실제 처리 로직은 더 복잡할 수 있음)
    final imageSize = imageBytes.length;

    // 결과 전송
    replyPort.send('이미지 크기: $imageSize bytes');

    // 작업이 한 번만 필요한 경우 아래로 종료
    // port.close(); // 반복 수신이 필요 없다면 사용
  }
}

• ReceivePort를 생성하여 메인 Isolate로부터 메시지를 받을 준비를 함.
• 메인 Isolate에게 자신의 SendPort를 전달.
• 메인 Isolate가 보내는 메시지(보통은 [작업 데이터, 응답용 SendPort] 형태)를 기다림.
• 메시지를 처리한 뒤, 결과를 replyPort를 통해 메인으로 다시 보냄.
• 이 구조는 양방향 통신이 필요한 Isolate 패턴에서 많이 사용됨.

⚠️ 주의할 점

• Isolate 간 메모리는 공유되지 않는다. 데이터를 보낼 때는 직렬화 가능한 형태로 전송해야 한다.
• compute 는 간단한 작업에만 적합하다. 복잡한 작업에는 직접 Isolate를 생성하여 사용해야 한다.
• Isolate 는 리소스를 소비하므로 남용하지 않아야 하며, 재사용 혹은 적절한 관리가 필요하다.

✅ 정리

Flutter에서 Isolate 를 적절히 활용하면 앱의 부드러운 UX와 성능 향상을 모두 달성할 수 있다. 무조건 사용하는 것이 아니라, 적절한 시점과 상황에서 사용하는 것이 중요하다.

🔗 참고 링크

• Dart 공식 Isolate 문서
• Flutter compute 함수

Flutter는 Dart 언어를 기반으로 하며, 객체지향 프로그래밍(OOP) 개념을 바탕으로 클래스 상속 구조를 지원한다. 이 글에서는 Dart에서 클래스 간 상속과 재사용을 위한 주요 키워드인 extends, with, implements에 대해 정리하고, 각각의 차이점을 비교해본다.

1. extends - 클래스 상속 (단일 상속)

extends는 한 클래스가 다른 클래스의 기능을 상속받고, 필요에 따라 오버라이드할 수 있게 해준다. Dart는 단일 상속만 지원하기 때문에, 한 번에 하나의 클래스만 상속 가능하다.

class Animal {
  void sound() => print("Some sound");
}

class Dog extends Animal {
  @override
  void sound() => print("Bark");
}

특징

• 부모 클래스의 속성과 메서드를 그대로 가져온다.
• super 키워드로 부모 클래스의 기능에 접근할 수 있다.
• 생성자도 상속 대상이며, 명시적으로 호출해야 한다.

2. with - 믹스인(Mixin)

with는 코드 재사용을 위한 방식으로, 여러 클래스의 기능을 조합해서 사용할 수 있다. 다중 믹스인을 허용하기 때문에 복수의 클래스로부터 메서드와 속성을 가져올 수 있다.

mixin CanSwim {
  void swim() => print("Swimming");
}

mixin CanRun {
  void run() => print("Running");
}

class Human with CanSwim, CanRun {}

특징

• 여러 믹스인을 한 클래스에 동시에 적용할 수 있다.
• 믹스인은 상태(state)를 가질 수 있다.
• 생성자를 정의할 수 없으며, 정의하면 에러가 발생한다.
• mixin, 또는 믹스인으로 사용할 수 있는 클래스에만 with를 사용할 수 있다.

3. implements - 인터페이스 구현

implements는 특정 클래스나 믹스인의 구조만 가져오고, 그 안의 모든 메서드와 속성을 반드시 직접 구현해야 한다. 원본 클래스의 구현은 전혀 사용하지 않는다.

class Flyer {
  void fly() {}
}

class Bird implements Flyer {
  @override
  void fly() => print("Flying");
}

특징

• 클래스의 인터페이스(형태)만 따르고, 구현은 전부 새로 작성해야 한다.
• 여러 개의 클래스를 동시에 구현할 수 있다.
• 추상 메서드가 있든 없든, 모든 멤버를 직접 구현해야 한다.
• 상속처럼 부모 클래스의 구현을 사용하는 방식이 아니다.

요약 비교

사용 예시

// 부모 클래스: Animal
abstract class Animal {
  void makeSound();
}

// 믹스인: 수영하는 능력
mixin Swimmer {
  void swim() => print('수영 중 🏊‍♀️');
}

// 인터페이스로 사용될 클래스
class Flyer {
  void fly() {} // 인터페이스처럼 사용
}

// extends 사용: Dog는 Animal의 기능을 상속
class Dog extends Animal {
  @override
  void makeSound() => print('멍멍 🐶');
}

// extends + with 사용: Duck은 Animal을 상속하고 Swimmer 믹스인 추가
class Duck extends Animal with Swimmer {
  @override
  void makeSound() => print('꽥꽥 🦆');
}

// implements 사용: Airplane은 Flyer 인터페이스 구현
class Airplane implements Flyer {
  @override
  void fly() => print('비행기 이륙 중 ✈️');
}

// extends + with + implements 조합
class FlyingFish extends Animal with Swimmer implements Flyer {
  @override
  void makeSound() => print('촤르르... 🐟');

  @override
  void fly() => print('물 위로 잠깐 비행!');
}

// 테스트 실행용 main 함수
void main() {
  final dog = Dog();
  dog.makeSound(); // 멍멍 🐶

  final duck = Duck();
  duck.makeSound(); // 꽥꽥 🦆
  duck.swim(); // 수영 중 🏊‍♀️

  final airplane = Airplane();
  airplane.fly(); // 비행기 이륙 중 ✈️

  final flyingFish = FlyingFish();
  flyingFish.makeSound(); // 촤르르... 🐟
  flyingFish.swim(); // 수영 중 🏊‍♀️
  flyingFish.fly(); // 물 위로 잠깐 비행!
}

마무리

• extends는 부모 클래스의 기능을 확장하거나 재정의하고 싶을 때 사용한다.
• with은 여러 기능을 하나의 클래스에 조합해서 재사용하고 싶을 때 쓰인다.
• implements는 어떤 클래스나 인터페이스의 구조만 따르되, 로직은 모두 직접 정의해야 할 때 선택한다.

각 키워드의 목적이 뚜렷하니, 상황에 맞게 적절히 선택해서 사용하는 게 중요하다.

Flutter 애플리케이션 개발에서 라우팅과 의존성 주입을 모듈화하여 관리할 수 있도록 도와주는 라이브러리이다. 애플리케이션의 유지보수성과 확장성을 개선하기 위해 큰 규모의 프로젝트에 유용하다.

주요 기능

모듈화된 라우팅 각 기능별로 독립된 라우트를 가진다.

모듈화된 의존성 주입 각 모듈 또는 기능에 필요한 의존성을 독립적으로 주입할 수 있다.

사용 방법

1. ModularApp 위젯 추가

import 'package:flutter/material.dart';

void main(){
  return runApp(
    ModularApp(
      module: /*<MainModule>*/, 
      child: /*<MainWidget>*/,
    ),
  );
}

2. AppModule 추가

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

void main(){
  return runApp(
    ModularApp(
      module: AppModule(), 
      child: /*<MainWidget>*/,
    ),
  );
}

class AppModule extends Module {
  @override
  void binds(i) {}

  @override
  void routes(r) {}
}

3. MaterialApp or CupertinoApp 인스턴스 추가

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

void main(){
  return runApp(
    ModularApp(
      module: AppModule(), 
      child: AppWidget(),
    ),
  );
}

class AppWidget extends StatelessWidget {
  Widget build(BuildContext context){
    return MaterialApp.router(
      title: 'My Smart App',
      theme: ThemeData(primarySwatch: Colors.blue),
      routerConfig: Modular.routerConfig,
    );
  }
}

class AppModule extends Module {
  @override
  void binds(i) {}

  @override
  void routes(r) {}
}

4. Navigation

pushNamed, popUntil 도 사용 가능하지만 여기선 웹 환경과 유사한 navigate 사용

class AppModule extends Module {
  @override
  void routes(r) {
    r.child('/', child: (context) => HomePage());
    r.child('/second', child: (context) => SecondPage());
  }
}

class HomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Modular.to.navigate('/second'),
          child: Text('Navigate to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Modular.to.navigate('/'),
          child: Text('Back to Home'),
        ),
      ),
    );
  }
}

5. Dependency Injection

class AppModule extends Module {
  @override
  void binds(i) {
    i.addSingleton(() => EventBus());
  }
}

// 사용 시
final EventBus _eventBus = Modular.get<EventBus>();

6. Imports

각 기능에서 정의 된 모듈을 imports 하여 사용

class AppModule extends Module {
  @override
  void binds(Injector i) {
    i.addSingleton(() => EventBus());
    imports.map((import) => import.binds(i)).toList();
  }

  @override
  void routes(RouteManager r) {
    r.child('/', child: (context) => HomePage());
    imports.map((import) => import.routes(r)).toList();
  }

  @override
  List<Module> get imports => [
        AddModule(),
        SettingModule(),
      ];

참조

https://pub.dev/packages/flutter_modular https://modular.flutterando.com.br/docs/intro

Event Bus란?

Flutter 에서 이벤트 버스는 컴포넌트 간의 통신을 위해 사용되는 디자인 패턴이다. 앱 내에서 이벤트를 발생시키고, 이를 다른 부분에서 수신하여 반응하는 형식이다.

핵심 개념

이벤트(Event) 어떤 사건이 발생했음을 알리는 신호나 데이터

퍼블리셔(Publisher) 이벤트를 생성하고 발송하는 주체

서브스크라이버(Subscriber) 이벤트를 수신하여 그에 맞는 반응을 하는 컴포넌트

사용 이점

결합도 감소 컴포넌트들이 서로 직접적으로 의존하지 않고 이벤트를 통해 통신하기 때문에 코드의 결합도가 낮아진다.

재사용성 향상 이벤트를 통해 통신하면, 특정 이벤트를 수신할 수 있는 모든 컴포넌트에 동일한 방식으로 데이터를 전달할 수 있어 컴포넌트의 재사용성이 증가한다.

유지보수 용이성 이벤트 기반 통신은 시스템의 각 부분을 독립적으로 수정하거나 업데이트를 할 수 있어 전체적인 시스템의 유지보수가 용이해진다.

결합도 감소하는 과정

예시) MVC

MVC 그룹 하나는 문제가 되지 않는다.

하지만 MVC 그룹이 여러 개 생기면 그 그룹들이 서로 통신해야 하는 상황이 생긴다. 이는 컨트롤러 간에 결합도를 높인다.

이벤트 버스 패턴은 결합도를 낮춘다.

사용 방법

1. 이벤트 버스 생성

import 'package:event_bus/event_bus.dart';

EventBus eventBus = EventBus();

2. 이벤트 정의

class UserLoggedInEvent {
  User user;

  UserLoggedInEvent(this.user);
}

class NewOrderEvent {
  Order order;

  NewOrderEvent(this.order);
}

3. 리스너 등록

특정 이벤트에 대한 리스너 등록

eventBus.on<UserLoggedInEvent>().listen((event) {
  print(event.user);
});

모든 이벤트에 대한 리스너 등록

eventBus.on().listen((event) {
  print(event.runtimeType);
});

Dart Streams 으로 리스너 등록

StreamSubscription loginSubscription = eventBus.on<UserLoggedInEvent>().listen((event) {
  print(event.user);
});

loginSubscription.cancel();

4. 이벤트 발생

User myUser = User('Mickey');
eventBus.fire(UserLoggedInEvent(myUser));

참조

event_bus

강제 업데이트, 버전 노출 등에 쓰이는 OS별 최신 버전 확인 방법에 대해 소개한다.

pub.dev의 패키지를 활용하는 방법도 있지만, 많은 패키지 의존성을 좋아하지 않아서 http 통신으로 스토어에서 직접 버전을 확인하는 방법을 찾았다.

App Store(iOS)

/// 앱 스토어 버전 확인
Future<Either<Failure, String?>> getAppStoreVersion(String bundleId) async {
    const GetStoreVersionFailure failure = GetStoreVersionFailure('Error getting store version from App Store');
    try {
      Uri _uri = Uri.https(
        'itunes.apple.com',
        '/lookup',
        {'bundleId': bundleId},
      );
      final http.Response _response = await http.get(_uri);
      if (_response.statusCode == 200) {
        final jsonObj = json.decode(_response.body);
        String? _version = jsonObj['results'][0]['version'];
        return Right(_version);
      }
      return const Left(failure);
    } catch (e) {
      return const Left(failure);
    }
  }

Play Store(AOS)

/// 플레이 스토어 버전 확인
Future<Either<Failure, String?>> getPlayStoreVersion(String packageName) async {
    const GetStoreVersionFailure failure = GetStoreVersionFailure('Error getting store version from Google Play');
    try {
      final http.Response _response =
          await http.get(Uri.parse('https://play.google.com/store/apps/details?id=$packageName'));
      if (_response.statusCode == 200) {
        RegExp regexp = RegExp(r'\[\[\["(\d+\.\d+(\.[a-z]+)?(\.([^"]|\\")*)?)"\]\]');
        String? _version = regexp.firstMatch(_response.body)?.group(1);
        return Right(_version);
      }
      return const Left(failure);
    } catch (e) {
      return const Left(failure);
    }
  }

스토어 별로 가끔 페이로드 값이 변경되는 것 같다. 값을 가져오는데 실패했을 때는 각자 원하는 방식으로 예외 처리하면 된다.

Flutter에서 사용할 수 있는 상태관리 중 하나인 Signal을 소개한다.

Signal은 새로운 것이 아니며 오랫동안 존재해왔다. javascript 프레임워크에는 핵심 라이브러리의 일부로 포함되어 있다.

Signals 기능

미세한 반응성

• Preact 신호를 기반으로 하며 종속성을 자동으로 추적하고 더 이상 필요하지 않을 때 해제하는 세분화된 반응성 시스템을 제공한다.

  lazy

• signals은 읽을 때만 값을 계산한다. 신호를 읽지 않으면 계산되지 않는다.

  효과적인 렌더링

• 위젯은 업데이트가 필요한 위젯 트리 부분과 마운트된 부분만 표시하여 다시 구축할 수 있다.

  100% Dart Native

• Dart JS(HTML), Shelf Server, CLI(및 기본), VM, Flutter(웹, 모바일 및 데스크톱)를 지원합니다. signals은 모든 Dart 프로젝트에서 사용할 수 있다.

  심플하고 유연한 API

• 모든 앱은 다르며 signals은 다양한 방식으로 구성될 수 있다. 따라야 할 몇 가지 규칙이 있지만 API 표면이 작아 쉽게 적용할 수 있다.

Signals 쓰는 이유

너무 복잡하고 비대한 상태관리들

• Riverpod, Bloc, Getx 등의 상태관리들은 너무 많은 기능을 제공하여, 높은 Learning curve가 있다.

  심플하고 필요한 기능만 제공

• 상태관리에 필요한 기능만을 제공하기 때문에 어떤 서비스든 간단하고, 유연하게 적용할 수 있다.
• Bloc과 같이 Architecture를 강요하지 않는다.

  가독성 좋은 코드

  // 생성
  final counter = signal(0);
  

```dart
// 사용
Watch((context) => Text('Counter: $counter'))

Signals

import 'package:signals/signals.dart';

final counter = signal(0);

// Read value from signal, logs: 0
print(counter.value);

// Write to a signal
counter.value = 1;

.value

final counter = signal(0);

effect(() {
  print(counter.value);
});

counter.value = 1;

.previousValue

final counter = signal(0);

effect(() {
  print('Current value: ${counter.value}');
  print('Previous value: ${counter.previousValue}');
});

counter.value = 1;

Force Update

final counter = signal(0);
counter.set(1, force: true);

Disposing

final s = signal(0, autoDispose: true);
s.onDispose(() => print('Signal destroyed'));
final dispose = s.subscribe((_) {});
dispose();
final value = s.value; // 0
// prints: Signal destroyed

final s = signal(0);
s.dispose();
final c = computed(() => s.value);
// c will not react to changes in s

final s = signal(0);
print(s.disposed); // false
s.dispose();
print(s.disposed); // true

Computed

import 'package:signals/signals.dart';

final name = signal("Jane");
final surname = signal("Doe");

final fullName = computed(() => name.value + " " + surname.value);

// Logs: "Jane Doe"
print(fullName.value);

// Updates flow through computed, but only if someone
// subscribes to it. More on that later.
name.value = "John";
// Logs: "John Doe"
print(fullName.value);

Effect

import 'package:signals/signals.dart';

final name = signal("Jane");
final surname = signal("Doe");
final fullName = computed(() => name.value + " " + surname.value);

// Logs: "Jane Doe"
effect(() => print(fullName.value));

// Updating one of its dependencies will automatically trigger
// the effect above, and will print "John Doe" to the console.
name.value = "John";

Batch

import 'package:signals/signals.dart';

final name = signal("Jane");
final surname = signal("Doe");
final fullName = computed(() => name.value + " " + surname.value);

// Logs: "Jane Doe"
effect(() => print(fullName.value));

// Combines both signal writes into one update. Once the callback
// returns the `effect` will trigger and we'll log "Foo Bar"
batch(() {
  name.value = "Foo";
  surname.value = "Bar";
});

참조

https://dartsignals.dev/ https://pub.dev/packages/signals

zsh를 활용한 터미널 자동완성 및 하이라이팅 기능이다.

자동 완성 (AutoSuggestions)

1. git source code download

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

2. ~/.zshrc 추가

source ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions/zsh-autosuggestions.zsh

3. zshrc 다시 시작

source ~/.zshrc

하이라이팅 (Syntax Highlighting)

1. git source code download

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

2. ~/.zshrc 추가

source ~/.oh-my-zsh/custom/plugins/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

3. zshrc 다시 시작

source ~/.zshrc

단축키 변경

1. zshrc에 추가

자동완성 tab 으로 변경

bindkey '\t' autosuggest-accept

2. zshrc 다시 시작

source ~/.zshrc

멀티 패키지는 하나의 프로젝트에서 쓰이는 코드를 여러 패키지로 나누어 관리하는 방법이다. 각 패키지는 관련된 기능을 담당하고, 프로젝트 내에서 서로 의존성이 있을 수 있다.

왜 Multi Package를 사용해야 하지?

프로젝트가 거대화되면서 모노리딕 시스템은 문제를 야기한다. 대표적으로 높은 결합도와 낮은 응집력을 예로 들 수 있다. 이를 해결하기 위해서 개발 조직은 시스템의 각 부분을 도메인 별로 분리해서 마이크로 서비스로 구성하기 시작한다. 이때 멀티 패키지를 사용하면 쉽게 공유할 수 있는 모듈식 코드를 만들 수 있다.

이때 쪼개진 각 서비스를 하나의 리포지토리에서 관리할지, 각자 다른 리포지토리에서 관리할지 고민하게 된다. 리포지토리를 관리하는 방법은 시스템의 각 모듈을 개별 리포지토리에서 관리할 것인지, 하나의 리포지토리에서 관리할 것인지에 따라서 달라진다. 이때 나눠서 관리하는 것을 Multirepo, 하나로 관리하는 것을 Monorepo라 정의한다.

각자의 장단점이 있지만 오늘은 Monorepo에 대해 살펴 보겠다.

Monorepo란?

• 단일 저장소에 여러 프로젝트를 저장하는 소프트웨어 개발 전략
• 코드를 패키지 별로 나누어 관리

장점

• 지속적인 소스의 무결성 보장 리포지토리는 항상 모든 서비스가 연동된 올바른 상태를 유지함
• 통합된 버전 관리 모든 서비스가 연동된 상태에서 손쉽게 하나의 버전으로 관리 가능
• 코드의 공유와 재사용이 용이 소스 단위의 연동이 이루어진 상태
• 의존성 관리가 쉬움 전체 서비스의 의존 관계가 한 리포지토리에서 확인 및 설정 가능
• 원자 단위 변화 변화가 여러 스텝이 아니라 한 리포지토리에서 한 스텝으로 이루어짐
• 여러 프로젝트 팀 간의 협업이 쉬움 하나의 리포지토리에서 함께 작업하며, 여러 서비스에 손쉽게 접근 가능
• 유연한 팀 바운더리 설정과 코드 오너쉽을 가져갈 수 있음 하나의 리포지토리, 하나의 서비스에 제한된 코드 오너쉽을 유지하지 않아도 됨
• 통합 CI 및 테스트 모든 소스가 연동된 상태. CI 및 테스트 구성이 손쉬움
• 전체 코드가 트리 구조로 명확히 보임
• 한 번의 코드 리뷰에 모든 변화가 요약

단점

• 무분별한 의존성 연결 가능 의존성 연결이 쉽기 때문에 오히려 과도한 의존 관계가 나타날 수 있음
• 형상 관리 및 CI 속도 저하 리포지토리의 크기가 크기 때문에, 리포지토리 훅을 기반으로 동작하는 도구들의 속도가 느려짐

예시

coupang_eats_monorepo
    -> app
      -> 고객용 앱A
      -> 드라이버용 앱B
      -> 관리자용 웹C
    -> eats_common_features
    -> eats_design_system
    -> eats_network
    -> eats_utils

이렇게 각각의 패키지로 분할하는 것은 협업/재사용성/유지보수에 매우 유용하다. 그러나 각각의 버전을 가지고 있는 많은 패키지를 관리하고 변경하는 것은 복잡하고, 추적 및 테스트가 어렵다.

Melos는 여러 패키지가 서로 완전히 독립적이면서도 하나의 저장소 내에서 함께 작동할 수 있도록 하여 이러한 문제를 해결하는 데 도움을 준다.

Multi Package로 프로젝트를 관리하기로 하였다면 이를 좀 더 쉽게 도와주는 도구 Melos가 있다.

Melos란?

• Dart에서 여러 패키지를 관리하는 데 사용되는 CLI도구
• Melos는 Flutter 커뮤니티에서 잘 알려진 팀, invertase 에 의해 개발되었다.

my_project
├── apps
│   ├── apps_1
│   └── apps_2
├── packages
│   ├── package_1
│   └── package_2
├── melos.yaml
├── pubspec.yaml
└── README.md

기능

• 자동 버전 관리 및 변경 로그 생성.
• pub.dev에 패키지를 자동으로 게시.
• 로컬 패키지 연결 및 설치.
• 패키지 전체에 걸쳐 동시 명령을 실행.
• 로컬 패키지 및 해당 종속성 목록 조회.

Melos는 Dart 분석기가 패키지를 읽는데 사용하는 로컬 파일을 재정의하여 문제를 해결한다. melos.yaml 에 정의된 로컬 패키지가 존재하고 다른 로컬 패키지에 해당 패키지가 종속성으로 나열되어 있는 경우 버전 지정 여부에 관계없이 연결된다.

melos.yaml

name: my_project

packages:
  - apps/**
  - packages/**

melos bootstrap

• 모든 패키지 종속성을 설치한다.(내부적으로 pub get을 사용하여)
• pubspec.yaml 을 편집할 필요 없이 경로 종속성 재정의를 통해 모든 패키지를 로컬로 연결한다.

melos bootstrap
# or
melos bs

melos script (링크)

• 스크립트는 melos 명령의 수명 주기 Hooks로 실행되거나 melos run으로 실행된다.
• 스크립트는 쉘에서 실행된다. Windows에서 셸은 cmd.exe이고 다른 모든 플랫폼에서는 sh이다.

  scripts:
  hello:
    name: hey
    description: Greet the world
    run: echo '$GREETING World'
    env:
      GREETING: 'Hey'

• 스크립트에서 여러 명령이 실행되고 있고 명령이 실패한 후 더 이상 명령을 실행해서는 안 되는 경우 다음을 사용하여 명령을 연결한다. &&

  scripts:
  prepare: melos bootstrap && melos run build
  

#### steps
- 단일 스크립트 정의 내에서 여러 스크립트의 조합을 활성화한다. 아래 예에서 ```pre-commit``` 스크립트는 ```echo 'hello world'``` 를 호출하고 Melos 명령인 ```format``` 및 ```analyze```를 순차적으로 호출하도록 구성된다.

scripts: pre-commit: description: pre-commit git hook script steps: - echo 'hello world' - format --output none --set-exit-if-changed - analyze --fatal-infos

#### exec
- ```melos exec```를 통해 여러 패키지의 스크립트를 실행한다.
- 이 옵션에는 여러 패키지에서 실행할 ```melos exec``` 명령이 포함되어야 한다.
- 기본 옵션을 사용하는 경우 ```melos exec```에서 명령을 지정하는 것이 가장 쉽다.

scripts: hello: exec: echo 'Hello $(dirname $PWD)'

- ```run``` 명령에 대한 옵션을 제공해야 하는 경우 ```exec``` 에서 해당 옵션 명령을 지정한다. ```concurrency```

scripts: hello: run: echo 'Hello $(dirname $PWD)' exec: concurrency: 1

##### concurrency
- 동시에 명령을 실행할 패키지 수의 최대 값을 정의한다. 기본값은 ```5```

##### failFast
- ```exec``` 개별 패키지에서 스크립트가 실패하는 경우 빠르게 실패하고 추가 패키지에서 스크립트를 실행하지 않아야 하는지 여부. 기본값은 ```false```

##### orderDependents
- 패키지의 종속성 그래프를 기반으로 여러 패키지에서 스크립트 실행 순서를 지정해야 하는지 여부. 기본값은 ```false```

#### env
- 실행된 명령에 전달될 환경 변수의 맵.


#### packageFilters
- ```exec``` 명령을 사용하면 여러 패키지에 대한 명령을 실행할 수 있다. 스크립트에서 사용되는 경우 섹션에서 필터 옵션을 선언할 수 있다.
- 아래 스크립트 ```hello_flutter```는 ```Flutter``` 패키지에서만 실행된다.

scripts: hello_flutter: exec: echo 'Hello $(dirname $PWD)' packageFilters: flutter: true

#### hooks
- 특정 Melos 명령은 명령 실행 전후뿐만 아니라 명령 실행의 다른 흥미로운 지점에서도 스크립트 실행을 지원한다.
- 후크를 지원하는 모든 명령은 최소한 ```pre``` 및 ```post``` 후크를 지원합니다.
- ```hooks``` 는 ```melos.yaml``` 파일의 명령 섹션에서 구성된다.

command: bootstrap: hooks: pre: echo bootstrap command is running... post: echo bootstrap command is done

#### analyze
- 이 명령은 작업 영역의 모든 로컬 패키지를 분석한다.

melos analyze

#### clean
- 이 명령은 현재 작업 공간과 임시 pub 및 생성된 Melos IDE 파일의 모든 패키지를 정리한다.

melos clean

파일에는 다음이 포함된다.

{packageRoot}/.packages {packageRoot}/.flutter-plugins {packageRoot}/.flutter-plugins-dependencies {packageRoot}/.dart_tool/package_config.json {packageRoot}/.dart_tool/package_config_subset {packageRoot}/.dart_tool/version {workspaceRoot}/.idea/runConfigurations/melos_*.xml

#### list
- 로컬 패키지에 대한 정보를 나열한다.

melos list

#### version
- 모든 패키지에 대한 변경 로그를 자동으로 버전화하고 생성한다.

melos version

```

[결론] Flutter에서의 Multi Package

그렇다면 Flutter에서 Multi Package를 어떻게 사용할까? 정답은 없지만 이상적이라고 생각되는 한 가지 예제를 가져왔다.

App

• 애플리케이션을 의미한다.

• 비슷한 기능과 데이터를 사용하는데, 앱이 여러개로 나뉘는 경우에 유용하다.

• 모바일 카톡 PC 카톡과 같이, 같은 서비스지만 제공하는 플랫폼이 다를 때 사용할 수 있다.

• 각 App에는 Config, Router(Navigator), 그리고 Page(Screen)가 들어간다.

Feature

• Feature 패키지는 앱의 특정 기능을 구현하는 모듈들을 담고 있으며, 특정 기능을 완전히 독립적인 단위로 구성하여 개발 가능하다.

• 각각의 Feature 패키지는 다시 독립적인 하위 패키지들로 구성될 수 있다.

• 일반적으로 멀티패키지 아키텍처에서의 Feature는 클린 아키텍처와 유사한 방식을 취한다.

• 각 Feature 패키지는 최소한의 의존성을 가지며, 외부로 노출되는 인터페이스를 통해 다른 패키지와 소통한다.

• 패키지 간의 인터페이스를 정의함으로써 각 패키지는 독립적으로 개발, 배포, 유지보수할 수 있으며, 전체 시스템의 복잡도를 낮출 수 있다.

• Feature가 다른 Feature와 강하게 결합되는 것을 피한다. 이를 통해 각 패키지는 서로 다른 비지니스 기능을 구현하면서 모듈성과 확장성을 유지할 수 있다.

• 그렇기 때문에 일반적으로 데이터와 도메인 로직이 한 패키지 안에 있는 것이 더 좋다. 각 Feature가 자체 데이터를 갖고 필요한 모든 비지니스 로직을 캡슐화 할 수 있으며, 독립적으로 변경 및 확장될 수 있기 때문이다.

Shared model

• 다른 패키지에서 사용될 수 있는 공통 모델이 있는 패키지다.

• 각 패키지가 필요한 모델을 선택적으로 가져와 사용할 수 있으며, 패키지 간의 종속성을 최소화할 수 있다.

Common

• 프로젝트에서 공통으로 사용되는 기능을 담당한다. 보통 Utility, Helper(validator, parser), constants와 같이 다른 모듈이나 라이브러리에서 자주 사용하는 공통적인 요소를 담당한다.

Core

• 앱에서 전체적으로 사용되지만, 핵심이되는 부분들이다. 다른 모듈이나 라이브러리가 이를 참조하여 사용할 수 있도록 인터페이스를 제공한다. 보통 보안, 인증, 인프라 관리 등과 같이 프로젝트의 중요한 부분을 담당한다.

• 인증 서비스와 같은 서비스, exception이나 error 처리를 위한 규칙 및 로직, Http 통신을 위한 Http Client와 같은 것들이 들어간다.

• core와 common 패키지는 프로젝트에서 공통으로 사용된다는 점에서 비슷해 보이지만 다르다. common과 core의 구분이 어렵다면, 기능을 제공하느냐, 사용되느냐를 개념적으로 구분하면 편하다. 왜냐하면 주체가 되어서 기능을 제공한다는 것이 핵심 기능이라는 근거가 될수 있기 때문이다.

Design System

• Theme, Components, Typography 같은 디자인 시스템에 해당하는 것들이 있는 패키지다.

결국 이 모든 것은 협업, 재사용성, 테스트를 위한 것이라 생각한다. 완벽한 정답은 없으며 각자의 상황과 성향에 따라 최선의 방법을 찾아가야 한다.

참조

Multi Package 프로젝트

• https://github.com/Doohyeon-Kim/Flutter-Multi-Package-Architecture?source=post_page-----ba523d0eef67--------------------------------

melos 프로젝트

• https://github.com/Doohyeon-Kim/flutter_monorepo?source=post_page-----5d72454d7da0--------------------------------
• https://github.com/rrifafauzikomara/youtube_video
• https://github.com/firebase/flutterfire
• https://github.com/fluttercommunity/plus_plugins

참조 블로그

• https://medium.com/doohyeon-kim/client-side-clean-architecture-flutter-69f7c0091c1f
• https://medium.com/doohyeon-kim/flutter-multi-package-architecture-ba523d0eef67
• https://medium.com/doohyeon-kim/flutter-monorepo-5d72454d7da0
• https://medium.com/andrewlee1228/flutter-%EC%95%B1%EC%97%90%EC%84%9C-%EB%B9%84%EC%A6%88%EB%8B%88%EC%8A%A4-%EB%A1%9C%EC%A7%81%EC%9D%84-%EB%8D%94-%EC%9E%98-%EA%B4%80%EB%A6%AC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-monorepo-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-e094219d80b0
• https://medium.com/andrewlee1228/melos%EB%A1%9C-multi-package-flutter%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B4%80%EB%A6%AC-1ba976f20a73
• https://tech.buzzvil.com/handbook/multirepo-vs-monorepo/

flutter pub add flutter_riverpod
flutter pub add riverpod_annotation
flutter pub add dev:riverpod_generator
flutter pub add dev:build_runner
flutter pub add dev:custom_lint
flutter pub add dev:riverpod_lint

pubspec.yaml

name: my_app_name
environment:
  sdk: ">=3.0.0 <4.0.0"
  flutter: ">=3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.5.1
  riverpod_annotation: ^2.3.5

dev_dependencies:
  build_runner:
  custom_lint:
  riverpod_generator: ^2.4.0
  riverpod_lint: ^2.3.10

Code Generation

작성한 Riverpod을 Generation 해준다. provider.g.dart 파일이 생긴다.

dart run build_runner watch

종속성 주입 (ProviderScope)

main.dart

void main() {
  runApp(
    // Riverpod을 설치하려면 다른 모든 위젯 위에 이 위젯을 추가해야 합니다.
    // 이 위젯은 "MyApp" 내부가 아니라 "runApp"에 직접 파라미터로 추가해야 합니다.
    ProviderScope(
      child: MyApp(),
    ),
  );
}

Annotation

모든 프로바이더는 @riverpod 또는 @Riverpod()로 어노테이션해야 한다. 이 어노테이션은 전역 함수나 클래스에 배치할 수 있습니다.

예를 들어, @Riverpod(keepAlive: true)를 작성하여 "auto-dispose"를 비활성화할 수 있다.

@riverpod
Result myFunction(MyFunctionRef ref) {
  <your logic here>
}

Ref

다른 providers와 상호작용하는 데 사용되는 객체다. 모든 providers에는 provider 함수의 매개변수(parameter) 또는 Notifier의 속성(property)으로 하나씩 가지고 있다. 이 객체의 타입은 함수/클래스의 이름에 의해 결정된다.

Http Get 요청

provider.dart

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

// 코드 생성이 작동하는 데 필요합니다.
part 'provider.g.dart';

/// 그러면 `activityProvider`라는 이름의 provider가 생성됩니다.
/// 이 함수의 결과를 캐시하는 공급자를 생성합니다.
@riverpod
Future<Activity> activity(ActivityRef ref) async {
  // package:http를 사용하여 Bored API에서 임의의 Activity를 가져옵니다.
  final response = await http.get(Uri.https('boredapi.com', '/api/activity'));
  // 그런 다음 dart:convert를 사용하여 JSON 페이로드를 맵 데이터 구조로 디코딩합니다.
  final json = jsonDecode(response.body) as Map<String, dynamic>;
  // 마지막으로 맵을 Activity 인스턴스로 변환합니다.
  return Activity.fromJson(json);
}

• 네트워크 요청은 UI가 provider를 한 번 이상 읽을 때까지 실행되지 않는다. (lazy)
• 이후 읽기는 네트워크 요청을 다시 실행하지 않고 이전에 가져온 활동을 반환한다.
• UI가 이 공급자의 사용을 중단하면 캐시가 삭제된다. 그런 다음 UI가 이 공급자를 다시 사용하면 새로운 네트워크 요청이 이루어진다.

데이터 랜더링

consumer.dart

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

import 'activity.dart';
import 'provider.dart';

/// The homepage of our application
class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (context, ref, child) {
        // Read the activityProvider. This will start the network request
        // if it wasn't already started.
        // By using ref.watch, this widget will rebuild whenever the
        // the activityProvider updates. This can happen when:
        // - The response goes from "loading" to "data/error"
        // - The request was refreshed
        // - The result was modified locally (such as when performing side-effects)
        // ...
        final AsyncValue<Activity> activity = ref.watch(activityProvider);

        return Center(
          /// Since network-requests are asynchronous and can fail, we need to
          /// handle both error and loading states. We can use pattern matching for this.
          /// We could alternatively use `if (activity.isLoading) { ... } else if (...)`
          child: switch (activity) {
            AsyncData(:final value) => Text('Activity: ${value.activity}'),
            AsyncError() => const Text('Oops, something unexpected happened'),
            _ => const CircularProgressIndicator(),
          },
        );
      },
    );
  }
}

• Consumer의 ref를 통해 provider를 읽는다.
• Stateless 대신 CunsumerWidget을 extends 하는 방법도 있다.
• ref.watch를 통해 데이터를 구독하고 상태가 바뀔 때마다 Consumer Widget이 리빌드 된다.

Notifier 정의

Method 형식 (Notifier X)

@riverpod
Future<List<Todo>> todoList(TodoListRef ref) async {
  // 네트워크 요청을 시뮬레이션합니다. 이는 일반적으로 실제 API로부터 수신됩니다.
  return [
    Todo(description: 'Learn Flutter', completed: true),
    Todo(description: 'Learn Riverpod'),
  ];
}

Class 형식 (Notifier)

@riverpod
class MyNotifier extends _$MyNotifier {
  @override
  Result build() {
    <your logic here>
    state = AsyncValue.data(42);
  }
  <your methods here>
}

notifier

• Notifiers는 providers의 "상태저장 위젯(stateful widget)"이다.
• @riverpod 어노테이션이 클래스에 배치되면 해당 클래스를 "Notifier"라고 부른다.
• 클래스는 _$NotifierName을 확장해야 하며, 여기서 NotifierName은 클래스 이름입니다.
• Notifiers는 provider의 상태(state)를 수정하는 메서드를 노출할 책임이 있다.
• 이 클래스의 공개 메서드는 ref.read(yourProvider.notifier).yourMethod()를 사용하여 consumer가 액세스할 수 있다.

build method

• 모든 notifiers는 build 메서드를 재정의(override)해야 한다.
• 이 메서드는 일반적으로 notifier가 아닌 provider(non-notifier provider)에서 로직을 넣는 위치에 해당한다.
• 이 메서드는 직접 호출해서는 안 된다.

ref Method

ref.watch

• 일반적으로 유지 관리가 더 쉽기 때문에 일반적으로 다른 옵션보다 ref.watch를 사용할 수 있도록 코드를 설계하는 것이 좋습니다.
• ref.watch 메서드는 provider를 받아 현재 상태를 반환합니다. 그러면 리스닝된 provider가 변경될 때마다 provider가 무효화(invalidated)되고 다음 프레임 또는 다음 읽기(read) 시 다시 빌드됩니다.
• ref.watch를 사용하면 로직이 "reactive"이면서 "declarative"이게 됩니다. 즉, 필요할 때 로직이 자동으로 다시 계산(recompute)된다는 뜻입니다. 그리고 업데이트 메커니즘이 'on change'와 같은 부작용(side-effects)에 의존하지 않습니다. 이는 StatelessWidgets의 작동 방식과 유사합니다.
• 예를 들어 사용자의 위치를 수신하는 provider를 정의할 수 있습니다. 그런 다음 이 위치를 사용하여 사용자 근처의 레스토랑 목록을 가져올 수 있습니다.

ref.read

• 이 옵션은 provider의 현재 상태를 반환한다는 점에서 ref.watch와 유사합니다. 하지만 ref.watch와 달리 공급자를 수신(listen)하지 않습니다.
• 따라서 ref.read는 Notifier의 메서드 내부와 같이 ref.watch를 사용할 수 없는 곳에서만 사용해야 합니다.

ref.listen / listenSelf

• ref.listen 메서드는 ref.watch의 대안입니다. 이 메서드는 기존의 "listen"/"addListener" 메서드와 유사합니다. 이 메서드는 provider와 callback을 받으며, provider의 콘텐츠가 변경될 때마다 해당 callback을 호출합니다.
• ref.listen 대신 ref.watch를 사용할 수 있도록 코드를 리팩토링하는 것이 일반적으로 권장되는데, 전자는 명령형으로 인해 오류가 발생하기 쉽기 때문입니다. 하지만 ref.listen는 큰 리팩토링을 하지 않고도 빠른 로직을 추가하는 데 유용할 수 있습니다.

캐시 지우기 및 상태 폐기 (disposal)

• 코드 생성(code-generation)을 사용할 때 기본적으로 provider가 수신이 중지되면 상태가 파괴됩니다. 이는 리스너에 전체 프레임에 대한 활성 리스너가 없을 때 발생합니다. 이 경우 상태가 소멸됩니다.

• 이 동작은 keepAlive: true를 사용하여 해제(opted out)할 수 있습니다. 이렇게 하면 모든 리스너가 제거될 때 상태가 소멸되는 것을 방지할 수 있습니다.

  // We can specify "keepAlive" in the annotation to disable
  // the automatic state destruction
  @Riverpod(keepAlive: true)
  int example(ExampleRef ref) {
  return 0;
  }

  상태 폐기될 때 로직 실행 방법

  @riverpod
  Stream<int> example(ExampleRef ref) {
  final controller = StreamController<int>();
  
  // When the state is destroyed, we close the StreamController.
  ref.onDispose(controller.close);
  
  // TO-DO: Push some values in the StreamController
  return controller.stream;
  }

  생명주기 (Life Cycles)

• 상태가 폐기될 때 호출되는 ref.onDispose

• provider의 마지막 리스너가 제거될 때 호출되는 ref.onCancel.

• onCancel이 호출된 후 새 리스너가 추가될 때 호출되는 ref.onResume.

수동으로 강제 삭제

• ref.invalidate를 사용하면 현재 provider 상태가 파괴됩니다. 그러면 두 가지 결과가 발생할 수 있습니다:
• provider가 청취되고 있으면 새 상태가 생성됩니다. provider를 청취되고 있지 않으면 provider가 완전히 소멸됩니다.

  class MyWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return ElevatedButton(
      onPressed: () {
        // On click, destroy the provider.
        ref.invalidate(someProvider);
      },
      child: const Text('dispose a provider'),
    );
  }
  }

ref.keepAlive를 사용하여 폐기(disposal)를 조정하기

• 위에서 언급했듯이 자동 폐기를 사용하도록 설정하면 provider에 전체 프레임에 대한 리스너가 없는 경우 상태가 삭제됩니다.

• 하지만 이 동작을 보다 세밀하게 제어하고 싶을 수도 있습니다. 예를 들어, 성공한 네트워크 요청의 상태는 유지하되 실패한 요청은 캐시하지 않으려 할 수 있습니다.

• 이는 자동 폐기를 활성화한 후 ref.keepAlive를 사용하면 가능합니다. 이 함수를 사용하면 상태의 자동 폐기를 중지하는 시점을 결정할 수 있습니다.

  @riverpod
  Future<String> example(ExampleRef ref) async {
  final response = await http.get(Uri.parse('https://example.com'));
  // We keep the provider alive only after the request has successfully completed.
  // If the request failed (and threw), then when the provider stops being
  // listened, the state will be destroyed.
  ref.keepAlive();
  
  // We can use the `link` to restore the auto-dispose behavior with:
  // link.close();
  
  return response.body;
  }

특정 시간 동안 상태를 살아있게 유지하기

• 현재 Riverpod은 특정 시간 동안 상태를 유지하는 내장된 방법을 제공하지 않습니다.

• 하지만 지금까지 살펴본 도구를 사용하면 이러한 기능을 쉽게 구현하고 재사용할 수 있습니다.

• Timer + ref.keepAlive를 사용하면 특정 시간 동안 상태를 유지할 수 있습니다. 이 로직을 재사용할 수 있게 하려면 확장 메서드(extension method)로 구현하면 됩니다.

  extension CacheForExtension on AutoDisposeRef<Object?> {
  /// Keeps the provider alive for [duration].
  void cacheFor(Duration duration) {
    // Immediately prevent the state from getting destroyed.
    final link = keepAlive();
    // After duration has elapsed, we re-enable automatic disposal.
    final timer = Timer(duration, link.close);
  
    // Optional: when the provider is recomputed (such as with ref.watch),
    // we cancel the pending timer.
    onDispose(timer.cancel);
  }
  }

  @riverpod
  Future<Object> example(ExampleRef ref) async {
  /// Keeps the state alive for 5 minutes
  ref.cacheFor(const Duration(minutes: 5));
  
  return http.get(Uri.https('example.com'));
  }

단어의 뜻은 코드에 대한 지속적인 통합(Continous Integration) 및 지속적인 배포(Continous Delivery)이다. 나눠서 보자면 CI는 빌드 및 테스트 자동화하는 것, CD는 배포를 자동화하는 것이라고 볼 수 있다. 큰 틀에서는 앱 출시를 위한 과정을 자동화하는 과정이다.

사용 툴

• Github Actions
• Fastlane

전체 그림

1. main(master) push
   • Fastlane으로 각 스토어에 자동 배포
2. development, release push
   • Test
   • Firebase 앱 배포 등 개인 또는 회사의 상황에 맞춰서 진행

Github Actions

사용량에 따라 비용이 있어서 self-hosted 환경으로 진행했다.

self-hosted

https://danawalab.github.io/common/2022/08/24/Self-Hosted-Runner.html

코드 (Github Actions)

project/.github/workflows/test.yaml 테스트 부분 코드

name: Test development branch

on:
  push:
      branches:
      - development

jobs:
  checkot:
    runs-on: macOS
    steps:
     - uses: actions/checkout@v4
     - run: ls -al

• 아직 안채움

project/.github/workflows/deploy_prod.yaml 스토어 배포 부분 코드

name: deploy project to testFlight, playstore internal track

on:
  push:
    branches:
      - main

jobs:
  # IOS
  deploy_ios:
    runs-on: macOS
    steps:    
      - uses: actions/checkout@v4

      - name: Install fastlane
        run: brew install fastlane

      # 빌드 및 배포
      - name: Deploy Product to Store
        run: fastlane build_deploy_prod
        working-directory: ios
        env:
          FASTLANE_TEAM_ID: ${{ secrets.FASTLANE_TEAM_ID }}
          FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD: ${{ secrets.FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD }}

  # AOS
  deploy_android:
    runs-on: macOS
    needs: [ deploy_ios ]
    steps:
      - uses: actions/checkout@v4

      - name: Install fastlane
        run: brew install fastlane

      # upload key 복호화
      - name: Generate Android keystore
        id: android_keystore
        uses: timheuer/base64-to-file@v1.1
        with:
          fileName: key.jks
          encodedString: ${{ secrets.ANDROID_KEYSTORE_BASE64 }}

      # key.properties 생성
      - name: Create key properties
        run: |
          echo "storeFile=${{ steps.android_keystore.outputs.filePath }}" >> android/key.properties
          echo "storePassword=${{ secrets.ANDROID_KEYSTORE_PASSWORD }}" >> android/key.properties
          echo "keyPassword=${{ secrets.ANDROID_KEY_PASSWORD }}" >> android/key.properties
          echo "keyAlias=${{ secrets.ANDROID_KEY_ALIAS }}" >> android/key.properties

      # 빌드 및 배포
      - name: Deploy Product to Store
        run: fastlane build_deploy_prod
        working-directory: android

• gitHub Secrets 이용해서 필요한 값들 저장
• FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD -> https://appleid.apple.com/ 에서 만든 앱 비밀번호
• ios는 match를 통해 인증 후 빌드 진행
• android는 keystore와 key properties로 서명 후 빌드 진행

Fastlane

fastlane init

https://velog.io/@sangwoo24/Flutter-Fastlane-%EC%9C%BC%EB%A1%9C-CICD-%EA%B5%AC%EC%B6%95-Android

match

https://velog.io/@parkgyurim/iOS-fastlane-match

App Store Connect API

• 공식 문서에서 가장 추천하는 방법
• 2FA(이중 인증)같은 귀찮은 절차를 피하기 위해 사용
• 성능 상에도 좋다고 함
• 사용자 및 엑세스 -> 통합 -> 팀 키에서 생성
• key id, iuuser id, p8 키 파일(한 번만 다운로드 가능)
• ios/fastlane/${keyId}.json 으로 파일 만든 후 upload_to_testflight에 api_key_path 등록

ios/fastlane/${keyId}.json

{
    "key_id": keyID,
    "issuer_id": issuerID,
    "key": "-----BEGIN PRIVATE KEY-----\nkey Conetent\n-----END PRIVATE KEY-----",
    "duration": 1200,
    "in_house": false
}

코드 (IOS)

project/ios/fastlane/Appfile

app_identifier "com.foopolog" # The bundle identifier of your app
apple_id "apple@gmail.com"  # Your Apple email address

# You can uncomment the lines below and add your own
# team selection in case you're in multiple teams
# team_name "Felix Krause"
team_id "ZZZZZZZZZZ"

# To select a team for App Store Connect use
# itc_team_name "Company Name"
# itc_team_id "18742801"

• 관리자로 초대되어 있는 team이 많아서 추후에 에러가 나기 때문에 team_id 명시

project/ios/fastlane/Matchfile

git_url("git@github.com:git_id/Fastlane_Cert.git")

storage_mode("git")

type("appstore") # The default type, can be: appstore, adhoc, enterprise or development

app_identifier(["com.foopolog"])
username("apple@gmail.com") # Your Apple Developer Portal username

# For all available options run `fastlane match --help`
# Remove the # in the beginning of the line to enable the other options

# The docs are available on https://docs.fastlane.tools/actions/match

• match를 통해 생성한 Certificate 와 Provisioning profile의 git_url 명시

project/ios/fastlane/Fastfile

default_platform(:ios)

desc "Deploy a product version to Apple App Store"
lane :build_deploy_prod do
    ## match
    match(readonly: true)

    ## flutter init
    sh('flutter pub get')
    cocoapods(
        repo_update: true,
        use_bundle_exec: false,
    )

    ## build App
    build_app(
        clean: true,
        scheme: "Runner",
        workspace: "Runner.xcworkspace",
    )

    ## deploy App
    upload_to_testflight(
        api_key_path: "fastlane/${keyId}.json",
        team_id: ENV["FASTLANE_TEAM_ID"],
        skip_waiting_for_build_processing: true,
    )
end

• Matchfile 정보로 match 진행
• 앱 빌드 후 테스트 플라이트에 배포

코드 (Android)

project/andorid/fastlane/Appfile

json_key_file("경로/serviceAccount.json")
package_name("com.foopolog")

• json_key_file -> 구글클라우드콘솔에서 서비스 계정을 만들고 다운받은 키 파일이다. github Secrets에 저장 후 사용하려 했지만 파일을 못읽어서 일단 원격 저장소에 업로드해서 진행했다.

project/andorid/fastlane/Fastfile

desc "Deploy a Product version to Google Play Store"
lane :build_deploy_prod do
    ## build APP
    sh("flutter build appbundle")

    ## deploy APP
    upload_to_play_store(
        aab: "../build/app/outputs/bundle/release/app-release.aab",
        track: 'internal',
        skip_upload_metadata: true,
    )
end

• 앱 번들 생성 후 스토어에 내부 테스트로 배포

성과

• 배포 및 테스트 자동화
• 테스트로 앱 품질 유지
• Github Actions, Fastlane 사용법
• 반복적인 작업에 들어가는 리소스 감소

참조

• 공식문서
• https://medium.com/athenaslab/%ED%95%98%EB%A3%A8%EC%97%90%EB%8F%84-10%EB%B2%88-%EB%B0%B0%ED%8F%AC%ED%95%98%EB%8A%94-flutter-%EC%95%B1-ci-cd-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0-9f2fbe080c2b
• https://velog.io/@parkgyurim/iOS-fastlane-match
• https://velog.io/@sangwoo24/Flutter-Fastlane-%EC%9C%BC%EB%A1%9C-CICD-%EA%B5%AC%EC%B6%95-Android
• https://www.youtube.com/watch?v=dRKuDu9c1So&t=1104s
• https://danawalab.github.io/common/2022/08/24/Self-Hosted-Runner.html

• 앱을 실행할 때 사용할 런처 아이콘 생성 https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html

2. 앱 서명하기

• 업로드 키 생성

keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

3. keystore 참조하기

• 배포용 앱을 빌드할 때 참조하기 위해 프로젝트의 android/key.properties 파일을 생성한 후 다음과 같이 작성한다.

storePassword=<키생성시 입력한 암호>
keyPassword=<키생성시 입력한 암호>
keyAlias=key
storeFile=key.jks

4. Gradle에서 서명 구성하기

• Gradle 빌드시 key.properties 파일을 참조하도록 android 블럭 상단에 아래의 내용을 추가한다.

// start of Gradle 서명 구성
def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}
// end of Gradle 서명 구성

android {
...
}

5. Proguard 사용

• Proguard는 배포할 앱의 소스코드를 난독화하는 설정이다. APK 파일의 크기를 줄이고 코드를 디컴파일하여도 소스코드의 내용을 이해할 수 없도록 난독화할 수 있다.

• Proguard Rule을 구성하기 위해 android/app/proguard-rules.pro 파일을 생성하고 다음과 규칙을 추가한다.

## Flutter wrapper
-keep class io.flutter.app.** { *; }
-keep class io.flutter.plugin.**  { *; }
-keep class io.flutter.util.**  { *; }
-keep class io.flutter.view.**  { *; }
-keep class io.flutter.**  { *; }
-keep class io.flutter.plugins.**  { *; }
-dontwarn io.flutter.embedding.**

• Gradle 빌드시 proguard-rules.pro 파일을 참조하여 코드 난독화와 사이즈를 축소할 수 있도록 /android/app/build.gradle 파일의 buildTypes 블럭안에 다음의 내용을 추가한다.

android {
    ...

    buildTypes {
        release {
            // release 속성으로 변경
            signingConfig signingConfigs.release

            // start of 코드난독화 및 사이즈 축소
            minifyEnabled true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            // end of 코드난독화 및 사이즈 축소
        }
    }
}

6. 앱 번들 빌드

flutter build appbundle

7. APK 빌드

flutter build apk --split-per-abi

참고 https://here4you.tistory.com/198

튕기는 줄 https://bouncing-string.web.app/

프로젝트 목표

• 사용자의 제스처에 따라 움직이는 줄 만들기
• 탄성이 있는 줄 표현

기능 소개

• 점과 점 사이의 거리 구하기
• 점을 잇는 곡선 만들기
• 설정한 범위를 벗어났을 때 줄을 놓치는 효과
• 줄의 탄성 표현

문제 사항

1. 점을 잇는 곡선을 어떻게 만들까?

• path.quadraticBezierTo()를 이용해 점과 점 사이를 잇는다.

    Path path = Path();
    Paint paint = Paint()
      ..color = $style.colors.primary
      ..style = PaintingStyle.stroke
      ..strokeWidth = 4;

    double preX = string.start.x;
    double preY = string.start.y;

    path.moveTo(preX, preY);

    for (int i = 1; i < BouncingString.length; i++) {
      final cx = (preX + string.getPoint(i).x) / 2;
      final cy = (preY + string.getPoint(i).y) / 2;

      path.quadraticBezierTo(preX, preY, cx, cy);

      preX = string.getPoint(i).x;
      preY = string.getPoint(i).y;
    }

    path.lineTo(preX, preY);

    canvas.drawPath(path, paint);

2. 제스처로 일정 범위를 벗어나는 걸 어떻게 감지할까?

• 두 점(px, py), (cx, cy)을 이용하여 거리를 구하고, 그 거리와 범위(r)를 비교하여 교차되는지 확인

  // 피타고라스의 정리를 이용하여 두 점 사이의 직선 거리를 계산
  static double distance(double x1, double y1, double x2, double y2) {
    final double x = x2 - x1;
    final double y = y2 - y1;

    return math.sqrt(x * x + y * y);
  }

  // 두 점(px, py), (cx, cy)을 이용하여 거리를 구하고, 그 거리와 범위(r)를 비교하여 교차되는지 확인
  static bool lineCircle(double x1, double y1, double x2, double y2, double cx, double cy, double r) {
    final double lineLength = distance(x1, y1, x2, y2);
    final double p = (((cx - x1) * (x2 - x1)) + ((cy - y1) * (y2 - y1))) / math.pow(lineLength, 2);

    final px = x1 + (p * (x2 - x1));
    final py = y1 + (p * (y2 - y1));

    return distance(px, py, cx, cy) < r;
  }

3. 줄의 탄성을 어떻게 표현할까?

• 교차 결과를 검사하고 그 결과에 따라 이동속도를 조절하여 애니메이션을 표현

    if (GlobalFunction.lineCircle(
      string.start.x,
      string.start.y,
      string.end.x,
      string.end.y,
      moveX,
      moveY,
      string.detect,
    )) {
      string.detect = 300;
      final double tx = (string.middle.ox + moveX) / 2;
      final double ty = moveY;
      string.middle.vx = tx - string.middle.x;
      string.middle.vy = ty - string.middle.y;
    } else {
      string.detect = 10;
      final double tx = string.middle.ox;
      final double ty = string.middle.oy;
      string.middle.vx += tx - string.middle.x;
      string.middle.vx *= bounce;
      string.middle.vy += ty - string.middle.y;
      string.middle.vy *= bounce;
    }

    string.middle.x += string.middle.vx;
    string.middle.y += string.middle.vy;

성과

• CustomPainter에서 path를 쓸 수 있다는 걸 확인
• 피타고라스의 정의를 이용해 점과 점 사이의 거리를 재는 방법
• 특정 범위를 벗어나는지 확인하는 방법
• 탄성을 속도를 이용해 표현하는 방법론 습득

소스 코드 https://github.com/jsk9106/bouncing_string

해당 프로젝트는 Interactive Developer님의 영상을 참고했습니다. https://www.youtube.com/watch?v=dXhAQbE8iBg&t=149s

양들의 언덕 https://hill-of-sheep.web.app/

프로젝트 개요

• 데이터를 받아서 보여주는 단순 프론트엔드 개발은 누구나 할 수 있다는 생각이 들었다.
• 애니메이션이 들어가고, 상호작용이 있는 작업을 하며 성장하고 싶었다.

프로젝트 목표

• 움직이는 언덕과 양을 표현
• 이글거리는 태양 표현
• 문제 해결 능력 키우기

기능 소개

• 곡선으로 언덕 그리기
• 뎁스에 따라 속도가 다른 연출
• FPS 개념을 코드에 추가
• 곡선 위의 좌표와 각도 찾기
• 선이 지글지글 거리는 스케치 효과
• 스크린 사이즈에 따라 달라지는 언덕과 양의 속도
• 계속해서 생성되는 요소를 지니는 리스트의 관리

문제 사항

1. 언덕을 어떻게 그릴까?

• CustomClipper의 path.quadraticBezierTo()를 이용해 점과 점 사이를 잇는다.

  final double cx = (pre.x + cur.x) / 2;
  final double cy = (pre.y + cur.y) / 2;
  

// 곡선 그리기 path.quadraticBezierTo(pre.x, pre.y, cx, cy);

![](https://velog.velcdn.com/images/developer_noah/post/329d9020-21fc-4657-b4ab-5c5f4d08d7ab/image.PNG)

#### 2. 언덕 위에 움직이는 양의 y좌표를 어떻게 구할까?
- 언덕의 곡선을 잘게 나누고 각 영역의 x, y좌표를 구한다. (2차 베지어 수식 사용)
- 양의 현재 x좌표와 가장 근접한 x좌표의 y좌표를 양의 y좌표로 한다.

// 2차 베지어 곡선 수식 (곡선) double getQuadValue(double p0, double p1, double p2, double t) { return (1 - t) * (1 - t) * p0 + 2 * (1 - t) * t * p1 + t * t * p2; }

![](https://velog.velcdn.com/images/developer_noah/post/473abe44-7438-426a-bc99-2600e3f32cec/image.PNG)

#### 3. 양의 기울기는 어떻게 표현할까?
- 언덕의 곡선을 잘게 나누고 각 영역의 x, y좌표를 구한다. (2차 베지어 수식 사용)
- 아크탄젠트를 이용해서 각도를 구한다.
- Transform.rotate로 기울기를 표현한다.

// 2차 베지어 곡선 수식 (직선) double quadTangent(double a, double b, double c, double t) { return 2 * (1 - t) * (b - a) + 2 * (c - b) * t; }

// 각도 구하기 final tx = quadTangent(x1, x2, x3, t); final ty = quadTangent(y1, y2, y3, t); final double rotation = atan2(ty, tx);

![](https://velog.velcdn.com/images/developer_noah/post/16cb30f7-df48-4e97-a0c8-a976d0521dbc/image.PNG)

#### 4. 태양의 이글거리는 모습은 어떻게 표현할까?
- 원을 그리는 좌표를 2개의 리스트에 담는다. (Sine, Cosine 이용)

// 원 좌표 가져오기 Point getCirclePoint({required double t}) { final double theta = pi * 2 * t;

return Point(cos(theta) * radius, sin(theta) * radius); }

const double gap = 1 / total;

// 포인트 세팅 for (int i = 0; i < total; i++) { final Point point = getCirclePoint(t: gap * i); originPoints.add(point); }

// element 얕은 복사를 위해 points = originPoints.map((e) => Point(e.x, e.y)).toList();

![](https://velog.velcdn.com/images/developer_noah/post/5b0d47d9-e42c-4d9c-a98f-13738f055416/image.PNG)

- 보여주는 리스트의 좌표를 원조 리스트의 좌표를 참고하여 랜덤으로 변경한다.

// 포인트 랜덤 변경 List updatePoints() { for (int i = 1; i < total; i++) { final Point p = originPoints[i];

points[i].x = p.x + Random().nextInt(sunVariable);
points[i].y = p.y + Random().nextInt(sunVariable);

}

return points; }

![](https://velog.velcdn.com/images/developer_noah/post/65759e19-2581-4938-8116-731ab5eb33c1/image.PNG)

#### 5. FPS개념을 어떻게 도입할까?
- Timer.periodic을 이용해 초당 30번 랜더링한다.

Timer.periodic( $style.times.ms33, // 30fps (_) { updatePoints(); update(); }, );

## 성과
- CustomClipper의 활용법
- 2차 베지어 곡선의 활용법
- 아크탄젠트의 활용법
- Sine, Cosine을 이용해 원의 좌표를 얻는 방법
- FPS 개념 도입 경험

> 소스 코드
https://github.com/jsk9106/hill_of_sheep

## 회고
그동안 개발 자체보다는 비즈니스에 중점을 뒀다. 개발은 문제를 해결하기 위한 **수단**이라 생각해 쉽고 빠르게 프로덕트를 만들어내는 것에 집중했다.

하지만 여러 서비스를 만들며 느낀 점 "기술 없이 나오는 서비스는 큰 밸류를 만들어내기 어렵다."과 무서운 속도로 발전하는 AI는 **특별한 성장** 방법을 찾게 만들었다.

그러던 중 **Interactive 개발자**의 영상을 접했다. 컴퓨터 기술로 표현하고자 하는 것을 멋지게 해내는 것이 내겐 신선한 충격이었다. "나도 저렇게 할 수 있을까?"라는 도전의식을 불태우게 되는 계기가 되었다.

그래서 시작한 프로젝트가 "**양들의 언덕**"이다. Interactive 개발자가 javascript로 만든 영상을 보며 Flutter로 만들었다. 핵심 기능과 개념이 소개가 되어있어서 크게 어렵지 않게 만들 수 있었다. 라고 하고 싶지만, 꼬박 5일 동안 작업을 했다.

방법이 나와있는 데 오래 걸린 이유는 모든 코드와 수식을 **이해**하고 싶었기 때문이다.
- 움직이는 언덕을 어떻게 만드는지
- 배열에 좌표를 계속 추가한다면, length 관리는 어떤 식으로 하는지
- 30fps로 화면을 빌드하면 성능에 무리가 없는지
- 베지어 곡선, 아크탄젠트는 무엇이고 어떤 상황에 쓰이는지
- Stateful 위젯과 GetBuilder를 사용한 것중 어떤 것이 더 효과적인지
- 지글거리는 태양의 랜덤 좌표는 왜 -가 아닌 +로 했는지

등 많은 궁금증이 있었다. **성장하기 위해** 스스로 질문하고 답을 찾아가는 과정이었다. 단순히 클론 코딩이 아니라 문제를 찾아 해결했다. (상태관리, 스크린 사이즈에 따라 속도가 달라지는 기능 등)

이번 프로젝트를 통해 얻은 게 몇 가지 있다.
- 수학을 통해 불가능해 보이는 것들을 해낼 수 있다.
(수식 자체를 이해하지 못해도 **쓰임새**를 알면 충분히 활용 가능하다.)
- 모든 복잡해 보이는 코드는 **하나의 점**에서부터 시작된다.
ex) 움직이는 언덕을 만들기 위해 가장 먼저 점을 찍는 것처럼
- 개발은 문제를 해결하기 위한 **수단**이지만, **실력**이 있어야 문제를 해결할 수 있다.
- 가진 실력을 멋지게 풀어내려면 비즈니스에 대한 **이해**와 **기획 능력**이 필요하다.

당분간은 Interactive 개발 공부를 할 생각이다. **Flutter 스페셜리스트**가 되려면 상상 가능한 모든 UI를 그릴 수 있어야 한다.

> 해당 프로젝트는 Interactive Developer님의 영상을 참고했습니다.
https://www.youtube.com/watch?v=hCHL7sydzn0&t=233s