• Widget(껍데기) 는 immutable(불변)이고,
• State(속 내용) 가 mutable(변경 가능)해서 화면 상태를 들고 있어.
• build() 는 State에 있다는 점이 포인트. setState() 로 상태를 바꾸면 build() 가 다시 그려져.

구조(정석 스켈레톤)

class MyWidget extends StatefulWidget {
  final int initialCount;
  const MyWidget({super.key, this.initialCount = 0});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget>
    with SingleTickerProviderStateMixin {
  late int count;
  late final AnimationController _controller;

  // 1) 최초 한 번
  @override
  void initState() {
    super.initState();
    count = widget.initialCount;
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    );
    // 프레임 이후 1회 작업 (레이아웃 값 필요할 때 등)
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // do something after first build
    });
  }

  // 2) 상위의 InheritedWidget(예: Theme, MediaQuery) 의존이 바뀔 때
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }

  // 3) 부모가 새 props를 주입했을 때(동일 타입 위젯이 갱신)
  @override
  void didUpdateWidget(covariant MyWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.initialCount != widget.initialCount) {
      // 외부 값 변화에 반응
      setState(() => count = widget.initialCount);
    }
  }

  // 4) 그리기
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Text('$count'),
        const SizedBox(width: 8),
        ElevatedButton(
          onPressed: () => setState(() => count++),
          child: const Text('증가'),
        ),
      ],
    );
  }

  // 5) 트리에서 분리 직전(잠깐 빠졌다가 다시 붙을 수도 있음)
  @override
  void deactivate() {
    super.deactivate();
  }

  // 6) 완전 제거(리소스 정리 필수)
  @override
  void dispose() {
    _controller.dispose(); // controller/stream/focus 등 꼭 정리
    super.dispose();
  }
}

라이프사이클 한눈에

createState → initState → didChangeDependencies → build → (setState→build 반복) → didUpdateWidget(상위 변화 시) → deactivate → dispose

• 초기화: initState
• 상위 컨텍스트 의존 변경: didChangeDependencies
• 리렌더: setState → build
• 외부 파라미터 변경 대응: didUpdateWidget
• 해제/정리: dispose

setState 올바르게 쓰기

setState(() {
  // 상태값만 바꿔라 (무거운 연산 X)
  count++;
});

• 클로저 안은 상태 변경만. 비동기/네트워크 같은 무거운 일은 밖에서 하고, 끝난 뒤 한 번 setState 하자.
• 비동기 뒤에 if (!mounted) return; 로 위젯 생존 여부 확인!

자주 하는 실수 & 팁

• 컨트롤러/리소스를 build에서 생성 ❌ → initState에서 만들고 dispose에서 정리.
• dispose 이후 setState 호출 ❌ → 비동기 처리 후 mounted 체크.
• URL/레이아웃 값이 필요한 초기 작업 → addPostFrameCallback 사용.
• 리스트에서 상태 보존 → Key(특히 ValueKey) 로 식별자 부여.

언제 StatefulWidget을 써?

• TextField 컨트롤러, 애니메이션, 탭/스크롤 포지션, 타이머/스트림 등 위젯 자체 수명과 같이 가는 상태가 있을 때.
• 반대로 비즈니스 상태(API 데이터, 로그인 상태 등)는 Provider/Stacked ViewModel 같은 상태관리에 두고 위젯은 가볍게.

React와 비교(감 잡기)

• React는 컴포넌트 함수가 매 렌더마다 다시 실행되고 Hook으로 상태를 유지.
• Flutter는 State 객체가 위젯 트리 안에 붙어 수명주기로 상태를 관리.

Stacked CLI는 Stacked 프레임워크를 더 쉽게 사용하기 위한 커맨드 라인 도구입니다. 코드 생성, 서비스 등록, View 및 ViewModel 생성 등을 명령어로 빠르고 편리하게 처리할 수 있습니다.

✅ 주요 기능

• View 및 ViewModel 스캐폴딩 (기본 뼈대 코드 자동 생성)
• 서비스 생성 및 등록 자동화
• 라우트 및 네비게이션 설정 도움
• 프로젝트 초기 설정 지원

1️⃣ 설치 방법

dart pub global activate stacked_cli

또는 Flutter 프로젝트 내에서 dev_dependency로 설치 가능

2️⃣ 기본 사용법

터미널에서 stacked 명령어로 실행합니다.

stacked create view home

• view 또는 viewmodel 명령어로 컴포넌트 생성
• service 명령어로 서비스 생성 및 locator 등록 지원

3️⃣ 예시: View와 ViewModel 생성

stacked create view home

→ home_view.dart와 home_viewmodel.dart가 자동 생성되며, 기본 구조가 포함됩니다.

4️⃣ 서비스 생성 및 locator 등록

stacked create service api

→ api_service.dart 파일이 생성되고, setupLocator()에 자동으로 등록하는 코드가 추가됩니다.

5️⃣ 라우트 생성 지원

CLI에서 라우트 관련 명령어를 사용해 라우트 설정과 코드 생성을 돕습니다.

6️⃣ 기타 유용한 명령어

• stacked help : 명령어 전체 목록 확인
• stacked create : 생성 가능한 컴포넌트 타입 확인
• stacked clean : 빌드 캐시 및 생성 파일 정리

✅ 요약

💡 장점

• 반복 작업 자동화 → 개발 생산성 향상
• 일관된 코드 스타일 유지
• Stacked 아키텍처 규칙 준수 보장

알아보면 좋을 내용

• 설치 방법, 주요 옵션, 커스텀 템플릿 만드는 법

출처 : Stacked 공식 문서 - Stacked CLI

Stacked Router는 auto_route 패키지를 기반으로 구축된 자동 라우팅 시스템입니다. Stacked는 이를 감싸 더 간단하고 구조적인 라우팅 구성을 제공합니다.

✅ 핵심 목표

• 라우트를 중앙에서 선언
• 코드 생성으로 타이핑 없이 안전하게 라우팅
• ViewModel에서도 라우팅 가능

1️⃣ @StackedApp에 라우트 선언

먼저 app.dart 파일에 라우트 정의를 합니다.

@StackedApp(
  routes: [
    MaterialRoute(page: HomeView),
    MaterialRoute(page: DetailsView),
  ],
)
class App {}

• @StackedApp은 라우팅, Dialog, BottomSheet 설정 등을 포함한 중앙 설정
• MaterialRoute는 기본 화면 전환 방식

📌 이 설정 후 flutter pub run build_runner build를 실행하여 자동으로 코드가 생성됩니다.

2️⃣ 자동 생성되는 파일

위 설정을 하면 다음 파일이 생성됩니다:

• app.router.dart → 라우터 클래스 정의
• app.dart → 메인 앱 설정에서 사용

MaterialApp.router(
  routerDelegate: StackedRouter().delegate(),
  routeInformationParser: StackedRouter().defaultRouteParser(),
)

3️⃣ 네비게이션 서비스에서 라우트 사용

Stacked는 자동 생성된 라우트 이름을 기반으로 메서드를 제공합니다.

final _navigationService = locator<NavigationService>();

_navigationService.navigateToHomeView();
_navigationService.replaceWithDetailsView();
_navigationService.back();

4️⃣ 파라미터 전달

라우트를 정의한 View가 @RoutePage()를 사용하고 있다면, 다음처럼 파라미터를 전달할 수 있습니다:

_navigationService.navigateToDetailsView(id: 1, title: '상세 화면');

View에서는 생성자로 파라미터를 받을 수 있습니다:

@RoutePage()
class DetailsView extends StatelessWidget {
  final int id;
  final String title;

  const DetailsView({required this.id, required this.title, super.key});
}

✅ 요약

💡 장점

• 라우트 이름, 파라미터 자동 코드 생성 → 실수 줄어듦
• ViewModel에서도 화면 전환 → UI 로직과 분리
• @StackedApp 한 곳에서 앱 전역 구성

알아보면 좋을 내용

• @RoutePage에 애니메이션 효과나 CupertinoRoute, CustomRoute 등의 고급 설정

출처 : Stacked 공식 문서 - Routing Basics

Stacked는 앱의 상태나 흐름을 추적하고 디버깅하기 위해 간단한 로깅(Logging) 기능을 제공합니다. 이를 통해 디버그 중 로그를 체계적으로 남길 수 있고, 문제를 쉽게 파악할 수 있습니다.

✅ 어떻게 동작하나요?

Stacked는 내부적으로 LoggerService를 통해 로그를 기록합니다. 이 서비스는 setupLocator() 내에서 등록되고, 이후 어디서든 사용할 수 있습니다.

🔧 기본 설정 방법

1️⃣ 서비스 등록

먼저 Logger 인스턴스를 서비스 로케이터에 등록합니다:

import 'package:logger/logger.dart';

final logger = Logger();

void setupLocator() {
  locator.registerLazySingleton(() => logger);
}

또는 LoggerService 클래스를 만들고 커스터마이징하여 등록할 수도 있습니다.

2️⃣ ViewModel이나 Service에서 사용하기

final _logger = locator<Logger>();

_logger.i('정보 로그입니다');
_logger.d('디버그 로그입니다');
_logger.w('경고 로그입니다');
_logger.e('에러 로그입니다');

주요 로그 레벨:

🧰 Logger 커스터마이징

Logger 클래스는 다양한 설정을 지원합니다. 예:

Logger(
  printer: PrettyPrinter(
    methodCount: 2,
    errorMethodCount: 8,
    lineLength: 120,
    colors: true,
    printEmojis: true,
    printTime: false,
  ),
);

🧪 테스트나 프로덕션 환경에서 로깅 끄기

Logger(
  level: kReleaseMode ? Level.nothing : Level.debug,
);

릴리즈 빌드에서는 로그 출력 안 되도록 설정 가능

✅ 요약

💡 핵심 포인트

• Stacked는 Logger를 통해 간편하고 강력한 로깅 시스템을 제공합니다.
• 로깅은 개발 중 디버깅과 문제 추적에 매우 유용합니다.
• 앱 전역에서 사용 가능하며, 커스터마이징도 쉽게 할 수 있습니다.

알아보면 좋을 내용

• Firebase Crashlytics와 연동한 로그 수집, 로그 필터링 전략

출처 : Stacked 공식 문서 - Logger

Service는 비즈니스 로직을 처리하는 독립적인 클래스로, ViewModel이나 View와 분리되어 있습니다. API 호출, 로컬 저장소 접근, 인증 처리 등 다양한 로직을 Service에 분리시켜 앱을 더 구조적이고 유지보수하기 쉽게 만들어줍니다.

✅ 왜 Service를 사용하는가?

• ViewModel이 UI 상태 관리에만 집중할 수 있음
• 비즈니스 로직을 여러 ViewModel 간에 재사용 가능
• 테스트가 훨씬 쉬워짐 (ViewModel과 분리되어 mock 가능)
• 서비스는 앱 전역에서 싱글톤으로 관리됨

🧱 서비스 만들기 예시

class CounterService {
  int _counter = 0;

  int get counter => _counter;

  void incrementCounter() {
    _counter++;
  }
}

이렇게 하면 로직이 ViewModel에서 분리되어 독립적으로 관리됩니다.

🔧 서비스 등록 (setupLocator)

서비스를 사용하려면 앱 시작 시 등록해야 합니다.

final locator = StackedLocator.instance;

void setupLocator() {
  locator.registerLazySingleton(() => CounterService());
}

• registerLazySingleton: 첫 호출 시 한 번만 생성
• setupLocator()는 main.dart에서 호출되어야 함

void main() {
  setupLocator();
  runApp(MyApp());
}

📦 서비스 사용하기 (ViewModel에서)

final _counterService = locator<CounterService>();

void increase() {
  _counterService.incrementCounter();
  notifyListeners();
}

이제 ViewModel에서 서비스를 가져와서 사용할 수 있습니다.

🔄 상태가 있는 서비스 → ViewModel에서 반응하려면?

상태가 자주 바뀌는 서비스(_counter 등)를 ViewModel에서 실시간 반영하고 싶을 때는 ReactiveViewModel을 사용합니다.

class HomeViewModel extends ReactiveViewModel {
  final _counterService = locator<CounterService>();

  @override
  List<ListenableServiceMixin> get listenableServices => [_counterService];
}

→ 이 경우, 서비스의 값이 바뀌면 ViewModel이 자동으로 감지하고 notifyListeners()를 호출합니다.

※ CounterService는 ListenableServiceMixin을 믹스인해야 합니다.

class CounterService with ListenableServiceMixin {
  int _counter = 0;

  int get counter => _counter;

  void incrementCounter() {
    _counter++;
    notifyListeners(); // mixin에서 제공
  }
}

🧪 테스트 시 mock 서비스 등록

locator.registerSingleton<CounterService>(FakeCounterService());

→ 기존 서비스를 Fake로 대체하여 테스트에 사용 가능

✅ 정리

💡 요점 정리

• Service는 비즈니스 로직을 담는 독립 모듈입니다.
• ViewModel과 분리되어 유지보수와 테스트가 쉬워집니다.
• setupLocator를 통해 등록하고, 전역에서 locator<>()로 사용합니다.
• 상태가 변하는 서비스는 ListenableServiceMixin을 써서 ViewModel에서 자동 감지할 수 있습니다.

알아두면 좋을 내용

• FirebaseService, APIService, AuthService 등 실전용 서비스 구조

출처 : Stacked 공식 문서 - Services

ViewModel은 View(UI)와 Business Logic(서비스 등) 사이를 연결해주는 중간 역할을 합니다. Stacked 프레임워크에서는 BaseViewModel 또는 다양한 특수 ViewModel 클래스를 상속받아 상태 관리와 로직 분리를 손쉽게 구현할 수 있습니다.

View는 ViewModel이 제공하는 데이터만 보고, ViewModel은 상태를 바꾸고 알립니다.

✅ 기본 ViewModel 사용법

1️⃣ BaseViewModel 상속

class CounterViewModel extends BaseViewModel {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners();
  }
}

• notifyListeners()를 호출하면 UI(View)가 자동으로 업데이트됩니다.

🛠️ 주요 ViewModel 타입들

🔄 상태 변경 알리기

void updateSomething() {
  // 데이터 변경
  notifyListeners();  // UI에게 변경 알림
}

• 모든 ViewModel은 ChangeNotifier를 기반으로 하기 때문에 notifyListeners()를 통해 View를 갱신시킵니다.

🧪 테스트 용이성

• ViewModel은 로직만 담당하기 때문에 UI에 의존하지 않고 단위 테스트가 가능합니다.
• 특히 서비스 로직을 분리하면 mock 데이터를 활용한 테스트가 간편합니다.

🔍 예시: FutureViewModel

class UserViewModel extends FutureViewModel<User> {
  @override
  Future<User> futureToRun() => _userService.fetchUser();
}

• ViewModel이 생성되면 자동으로 futureToRun()이 실행되고,
• 데이터가 로드되면 View가 자동 갱신됩니다.

✅ 요약

💡 Stacked ViewModel의 장점

• View와 로직 완전 분리 (MVVM)
• 테스트 작성이 쉬움
• 다양한 ViewModel 타입으로 실무에 맞춘 구조 가능
• ViewModel마다 생명주기(onModelReady, dispose)가 존재하여 관리 용이

알아보면 좋을 내용

• 각 ViewModel 타입별 실전
• ViewModelBuilder 커스터마이징 방법

출처 : Stacked 공식 문서 - ViewModels

Stacked에서는 get_it 패키지를 기반으로 한 서비스 로케이터를 사용하여, **앱 전체에서 공통적으로 사용하는 객체(서비스 등)**를 의존성 주입으로 관리할 수 있게 해줍니다.

즉, 전역에서 쉽게 접근 가능한 싱글톤 객체를 등록하고 호출할 수 있는 방식이에요.

✅ 왜 써야 하나요?

• ViewModel 또는 Service 간 중복된 생성 없이 재사용
• 테스트와 유지보수가 쉬움
• 어디서든 동일한 인스턴스를 가져와 사용 가능

📦 사용 예시

1️⃣ 서비스 클래스 정의

class AuthenticationService {
  bool isUserLoggedIn = false;
}

2️⃣ setupLocator() 함수로 서비스 등록

import 'package:stacked/stacked.dart';

final locator = StackedLocator.instance;

void setupLocator() {
  locator.registerLazySingleton(() => AuthenticationService());
}

• registerLazySingleton: 최초 요청 시 한 번만 인스턴스를 생성해서 재사용합니다.

3️⃣ 어디서든 사용하기 (예: ViewModel)

final _authService = locator<AuthenticationService>();

void checkLogin() {
  if (_authService.isUserLoggedIn) {
    // 로그인 상태
  }
}

🧰 기타 등록 방식

🔄 의존성 제거 (reset)

필요한 경우, 등록된 모든 서비스 또는 특정 서비스만 제거할 수 있습니다.

locator.reset();                // 모든 서비스 제거
locator.unregister<SomeType>(); // 특정 타입만 제거

🧪 테스트를 위한 주입

테스트 환경에서 가짜(Mock) 서비스를 주입할 수 있습니다.

locator.registerSingleton<AuthenticationService>(FakeAuthService());

✅ 요약

📌 핵심 요점

• Stacked는 get_it 기반의 서비스 로케이터를 내장하고 있어, 의존성 주입이 매우 쉽습니다.
• ViewModel에서 서비스 객체를 전역 접근으로 불러와 사용하며, 싱글톤 관리가 편리합니다.

알아보면 좋을 내용

• setupLocator()를 어디서 호출해야 하는지
• locator와 get_it 차이점
• 여러 개의 서비스 등록

출처 : Stacked 공식 문서 - Service Locator

Stacked는 폼(Form)을 쉽게 다루기 위해 @FormView 애너테이션을 제공합니다. 이 기능을 통해 텍스트 필드 컨트롤, 검증(validation), 상태 관리 등을 자동화할 수 있어요.

✅ 목표

• TextField 값을 ViewModel에서 쉽게 접근하고
• validation, focus 제어 등을 간편하게 처리하는 것

1️⃣ @FormView 애너테이션 사용하기

먼저 View 클래스 위에 @FormView를 선언합니다:

@FormView(fields: [
  FormTextField(name: 'email'),
  FormTextField(name: 'password', isPassword: true),
])
class LoginView extends StackedView<LoginViewModel> {
  ...
}

• name: 텍스트 필드 이름 (ViewModel에서 사용할 변수명)
• isPassword: 비밀번호 입력 필드 여부

2️⃣ build_runner로 코드 생성

flutter pub run build_runner build --delete-conflicting-outputs

→ 이 명령어를 실행하면 _form_view.form.dart 파일이 생성됩니다.

3️⃣ 자동 생성된 필드와 컨트롤러 사용하기

class LoginView extends StackedView<LoginViewModel> with $LoginView {
  @override
  void onViewModelReady(LoginViewModel viewModel) {
    syncFormWithViewModel(viewModel);
  }

  @override
  Widget builder(BuildContext context, LoginViewModel viewModel, Widget? child) {
    return Column(
      children: [
        TextField(controller: emailController),
        TextField(controller: passwordController, obscureText: true),
      ],
    );
  }
}

• emailController, passwordController 등은 자동 생성됨
• syncFormWithViewModel()을 호출하면 ViewModel과 양방향 바인딩이 연결됨

4️⃣ ViewModel에서 필드값 접근

class LoginViewModel extends FormViewModel {
  void submit() {
    print(emailValue);     // 입력된 이메일
    print(passwordValue);  // 입력된 비밀번호
  }
}

• FormViewModel을 상속하면 자동으로 emailValue, passwordValue 등이 생성됩니다.

5️⃣ 추가 기능들

📌 요약

✅ Stacked Form의 장점

• 컨트롤러와 FocusNode 자동 생성
• 상태/값 추적이 쉬움
• ViewModel에서 폼 유효성 체크 가능
• 복잡한 폼도 깔끔하게 관리 가능

알아보면 좋을 내용

• validation 커스터마이징, 폼 초기값 설정, 여러 폼 필드 간 상호작용 구현

출처 : Stacked 공식 문서 - Form Basics

Stacked에서는 네비게이션을 쉽게 관리할 수 있도록 NavigationService와 자동 라우팅 시스템을 제공합니다. 이로 인해 ViewModel에서도 자유롭게 화면 전환이 가능하고, 코드가 깔끔해집니다.

✅ 1. stacked_generator를 통한 자동 라우트 생성

먼저 라우팅을 자동화하기 위해 아래 설정을 해줘야 합니다.

app.dart 파일 생성 예시:

@StackedApp(
  routes: [
    MaterialRoute(page: HomeView),
    MaterialRoute(page: DetailsView),
  ],
)
class App {}

• @StackedApp 애너테이션을 통해 앱 내 라우트를 정의합니다.
• MaterialRoute를 사용하여 일반 화면 이동을 설정합니다.

🔁 build_runner로 코드 생성

flutter pub run build_runner build --delete-conflicting-outputs

→ 자동으로 app.router.dart, app.dart 등이 생성됨.

✅ 2. 네비게이션 서비스 등록

서비스를 전역에서 사용하려면 의존성 주입 설정에 추가해야 합니다.

final locator = StackedLocator.instance;

void setupLocator() {
  locator.registerLazySingleton(() => NavigationService());
}

✅ 3. 화면 이동하기

ViewModel에서 이동:

final _navigationService = locator<NavigationService>();

_navigationService.navigateToHomeView();

위 함수는 자동 생성된 라우트 이름 기반으로 만들어진 메서드입니다.

✅ 4. 인자 전달하기

_navigationService.navigateToDetailsView(
  id: 5,
  name: 'Stacked',
);

→ 라우트 설정 시 DetailsView가 named parameters를 받도록 정의되어 있다면 이렇게 전달 가능.

✅ 5. 화면 되돌아가기

_navigationService.back();

→ 이전 화면으로 돌아가는 기본 동작.

✅ 6. 화면 교체 (뒤로 가기 불가능)

_navigationService.replaceWithHomeView();

→ 현재 화면을 대체하고 새로운 화면으로 이동합니다.

🔧 주요 장점

• ViewModel에서 화면 전환이 가능 → 비즈니스 로직과 UI 완전 분리
• 라우트 자동 생성 → 실수 줄고 유지보수 쉬움
• 매개변수 전달, 뒤로가기 등 네비게이션 처리 용이

📌 정리

알아보면 좋을 내용

• routes.dart의 커스텀 경로 설정법
• BottomSheet, Dialog와의 연동

출처 : Stacked 공식 문서 - Navigation Basics

✅ 목표

앱이 시작될 때:

• 사용자 로그인 상태를 확인하고
• 그에 따라 적절한 첫 화면(HomeView 또는 LoginView)을 보여주는 초기 로직을 구성하는 방법을 설명합니다.

1️⃣ StartUpViewModel 만들기

앱 시작 시 필요한 로직을 담을 ViewModel을 생성합니다.

class StartUpViewModel extends FutureViewModel {
  @override
  Future<void> futureToRun() async {
    final user = await _authService.getCurrentUser();

    if (user != null) {
      // 홈으로 이동
      _navigationService.replaceWithHomeView();
    } else {
      // 로그인으로 이동
      _navigationService.replaceWithLoginView();
    }
  }
}

• FutureViewModel을 상속받으면 futureToRun() 함수가 자동 실행됩니다.
• 내부에서 사용자 상태에 따라 NavigationService를 통해 이동을 처리합니다.

2️⃣ StartUpView 만들기

class StartUpView extends StackedView<StartUpViewModel> {
  @override
  Widget builder(BuildContext context, StartUpViewModel viewModel, Widget? child) {
    return const Scaffold(
      body: Center(child: CircularProgressIndicator()),
    );
  }

  @override
  StartUpViewModel viewModelBuilder(BuildContext context) => StartUpViewModel();
}

• 앱이 처음 실행될 때 잠시 로딩 인디케이터만 보여주는 화면입니다.
• 실제 라우팅은 ViewModel에서 처리합니다.

3️⃣ NavigationService를 통한 라우팅

NavigationService를 사용하면 ViewModel 내에서 자유롭게 화면 전환을 할 수 있습니다.

final _navigationService = locator<NavigationService>();

_navigationService.replaceWithHomeView();  // 홈 화면으로 이동
_navigationService.replaceWithLoginView(); // 로그인 화면으로 이동

replaceWith...는 현재 화면을 대체합니다. 뒤로 가기 불가능.

✅ 요약

이 구조를 사용하면, 앱 시작 시 로직을 UI와 분리하여 깔끔하게 구성할 수 있습니다.

알아보면 좋을 내용

• NavigationService 등록법
• replaceWithHomeView()처럼 자동 생성되는 route 이름 설정 방법

출처 : Stacked 공식 문서 - Startup Logic

Stacked는 Flutter 애플리케이션에서 UI(View), 비즈니스 로직(ViewModel), 그리고 **서비스(Service)**를 분리하여 MVVM(MVVM + 의존성 주입) 구조를 구성합니다.

이로 인해 다음과 같은 이점을 얻을 수 있어요:

• 코드 구조화
• 테스트 용이
• 유지보수 쉬움
• 협업 효율 향상

📍 핵심 구조: View + ViewModel

class HomeView extends StackedView<HomeViewModel> {
  @override
  Widget builder(BuildContext context, HomeViewModel viewModel, Widget? child) {
    return Scaffold(
      body: Center(
        child: Text(viewModel.title),
      ),
    );
  }

  @override
  HomeViewModel viewModelBuilder(BuildContext context) => HomeViewModel();
}

여기서:

• HomeView는 화면(UI)을 담당하는 View입니다.
• HomeViewModel은 상태와 로직을 담당합니다.
• builder는 UI를 렌더링하고 viewModelBuilder는 ViewModel을 연결합니다.

💡 왜 이렇게 구성할까?

✅ View는 로직을 알 필요가 없다.

View는 단순히 ViewModel이 주는 값을 받아서 화면만 구성하면 돼요. 예:

Text(viewModel.title)

✅ ViewModel은 View를 몰라도 된다.

ViewModel은 상태를 갖고, View에게 알려줄 뿐 View가 어떻게 렌더링되는지는 모릅니다. → 양방향 의존성 없이 느슨하게 연결됨.

🔄 상태 변경 감지

Stacked에서 ViewModel은 notifyListeners()를 통해 View에 상태 변경을 알립니다. → View는 자동으로 리빌드됨.

또한 BaseViewModel에서 다음 상태들도 제공:

• isBusy
• hasError
• hasData

⛓️ ViewModel과 연결된 비즈니스 로직 (Service)

Service는 ViewModel에서 실제 데이터 작업을 담당합니다. 예: API 호출, 로컬 저장소 등

final _counterService = locator<CounterService>();

void incrementCounter() {
  _counterService.increment();
  notifyListeners();
}

→ 서비스는 ViewModel에 주입되고, ViewModel은 그 상태를 View에 전달합니다.

📦 서비스 주입 (Dependency Injection)

Stacked는 get_it을 기반으로 한 의존성 주입 컨테이너를 제공합니다.

final locator = StackedLocator.instance;

void setupLocator() {
  locator.registerLazySingleton(() => CounterService());
}

이걸 통해 ViewModel, View, 서비스가 서로 독립적으로 동작할 수 있게 됩니다.

✅ 정리

이 구조 덕분에 앱을 테스트하기 쉽고, 유지보수가 편하며, 팀 간 협업도 수월해져요.

알아보면 좋을 내용

• setupLocator() 사용법
• FutureViewModel, ReactiveViewModel 같은 심화 내용

출처 : Stacked 공식 문서 - How it wokrs

Stacked는 Flutter 앱 개발에서 구조화된 코드와 생산성을 높이기 위해 만든 MVVM 아키텍처 기반 프레임워크입니다.

🔧 왜 Stacked를 사용할까?

• 비즈니스 로직과 UI를 분리하여 깔끔한 코드 유지 가능
• 재사용성이 뛰어난 ViewModel 기반 구조
• 의존성 주입, 네비게이션, 다이얼로그, BottomSheet, Form 관리 등 실무에서 자주 쓰는 기능들을 통합 제공
• 프로젝트를 확장하기 쉽고 유지보수하기 좋게 설계

🏗️ 주요 개념 요약

🚀 핵심 패키지들

• stacked
• stacked_services
• stacked_generator + build_runner (코드 자동 생성)

📁 기본 프로젝트 구조 예시

lib/
 ├── app/                # 의존성 주입 설정 등
 ├── ui/
 │   ├── views/          # 각 화면(View + ViewModel)
 │   ├── widgets/        # 공통 위젯
 ├── services/           # API, DB 등 비즈니스 로직
 └── main.dart

⚙️ 어떤 기능이 있나?

• @FormView: 자동 Form 관리
• @ReactiveServiceMixin: 리액티브 서비스 만들기
• @Route: 네비게이션 라우팅 정의
• FutureViewModel, StreamViewModel: 비동기 ViewModel 처리 쉽게 지원

✅ 요약

Stacked는 Flutter의 구조화된 앱 개발을 도와주는 MVVM 프레임워크로, 유지보수성과 생산성을 높이는 데 매우 효과적인 도구입니다. 초기 설정만 하면 이후부터는 View-ViewModel-Service의 분리된 구조 덕분에 협업과 테스트, 유지보수가 쉬워집니다.

출처 : Stacked 공식 문서 - Overview

Vue.js의 라이프사이클은 컴포넌트가 생성되고, DOM에 마운트되며, 갱신 및 소멸되는 과정을 의미합니다.

라이프사이클 훅(Lifecycle Hooks)을 사용하면 특정 단계에서 코드를 실행할 수 있으며, 이를 통해 비동기 데이터 가져오기, 이벤트 리스너 등록, DOM 조작 등을 할 수 있습니다.

🔥 Vue 3 라이프사이클 훅 전체 흐름

🔹 1. 생성 단계 (Creation)

• setup() (Composition API 사용 시)
• beforeCreate() (Composition API 사용 시 생략 가능)
• created() (Composition API 사용 시 생략 가능)

🔹 2. 마운트 단계 (Mounting)

• beforeMount()
• mounted() ✅ DOM이 렌더링된 후 실행됨

🔹 3. 업데이트 단계 (Updating)

• beforeUpdate() (DOM이 변경되기 직전)
• updated() (DOM이 변경된 후 실행됨)

🔹 4. 소멸 단계 (Unmounting)

• beforeUnmount()
• unmounted() ✅ 컴포넌트가 제거된 후 실행됨

🎯 Vue 3 라이프사이클 상세 설명

🟢 1. 생성 단계 (Creation)

컴포넌트가 메모리에 로드되는 단계 (DOM에 접근할 수 없음)

📌 Example:

<script setup>
console.log("setup() 실행됨");
</script>

<script>
export default {
  beforeCreate() {
    console.log("beforeCreate() 실행됨");
  },
  created() {
    console.log("created() 실행됨");
  }
};
</script>

✅ 실행 순서:

setup() 실행됨
beforeCreate() 실행됨
created() 실행됨

🔵 2. 마운트 단계 (Mounting)

템플릿이 가상 DOM에서 실제 DOM으로 렌더링되는 단계

📌 Example:

<script>
export default {
  beforeMount() {
    console.log("beforeMount() 실행됨");
  },
  mounted() {
    console.log("mounted() 실행됨");
  }
};
</script>

✅ 실행 순서:

beforeMount() 실행됨
mounted() 실행됨

🚀 mounted()에서 API 호출, 이벤트 리스너 등록 등을 수행하는 것이 일반적.

🟠 3. 업데이트 단계 (Updating)

컴포넌트의 반응형 데이터가 변경될 때 실행됨

📌 Example:

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">증가</button>
  </div>
</template>

<script>
export default {
  data() {
    return { count: 0 };
  },
  beforeUpdate() {
    console.log(`beforeUpdate(): count가 곧 ${this.count + 1}로 변경됨`);
  },
  updated() {
    console.log(`updated(): count가 ${this.count}로 변경됨`);
  }
};
</script>

✅ 실행 순서 (버튼 클릭 시):

beforeUpdate(): count가 곧 1로 변경됨
updated(): count가 1로 변경됨

🔴 4. 소멸 단계 (Unmounting)

컴포넌트가 DOM에서 제거될 때 실행됨 (메모리 정리 필수!)

📌 Example:

<template>
  <div v-if="isVisible">
    <p>이 컴포넌트는 곧 사라집니다!</p>
    <button @click="isVisible = false">숨기기</button>
  </div>
</template>

<script>
export default {
  data() {
    return { isVisible: true };
  },
  beforeUnmount() {
    console.log("beforeUnmount() 실행됨 - 컴포넌트가 곧 제거됨");
  },
  unmounted() {
    console.log("unmounted() 실행됨 - 컴포넌트가 제거됨");
  }
};
</script>

✅ 버튼 클릭 시 실행 순서:

beforeUnmount() 실행됨 - 컴포넌트가 곧 제거됨
unmounted() 실행됨 - 컴포넌트가 제거됨

🚀 unmounted()에서 이벤트 리스너 제거, 타이머 해제 등 메모리 정리를 수행해야 함.

⚡ Vue 3 라이프사이클 훅 정리

🎯 결론

1️⃣ setup()은 Composition API에서 가장 먼저 실행됨.
2️⃣ mounted()에서 API 호출 및 DOM 조작을 수행하는 것이 일반적.
3️⃣ updated()에서 DOM 변경 후 작업을 수행할 수 있음.
4️⃣ unmounted()에서 이벤트 리스너 해제, 타이머 제거 등 메모리 정리 필요.

💡 Vue 라이프사이클을 활용하면 효율적인 컴포넌트 관리를 할 수 있음! 🚀

1. 객체지향 프로그래밍 (Object-Oriented Programming, OOP)

Dart는 객체지향 언어로 설계되었으며, 클래스를 기반으로 한 전형적인 OOP 기능을 제공합니다. Flutter는 Dart를 사용하기 때문에 객체지향 개념이 앱 개발의 핵심적인 부분을 차지합니다.

• 클래스와 객체: Dart에서 모든 것은 객체이며, 클래스를 통해 객체를 생성합니다. 예를 들어, Flutter의 위젯(Widget)은 모두 클래스로 정의됩니다.

  class Person {
    String name;
    int age;
  
    Person(this.name, this.age);
  
    void sayHello() {
      print('안녕, 나는 $name이야!');
    }
  }
  
  void main() {
    var person = Person('홍길동', 30);
    person.sayHello(); // 출력: 안녕, 나는 홍길동이야!
  }

• 상속(Inheritance): Dart는 단일 상속을 지원하며, extends 키워드로 클래스를 확장할 수 있습니다. Flutter에서 StatelessWidget이나 StatefulWidget을 상속받아 커스텀 위젯을 만드는 것이 일반적입니다.

• 캡슐화(Encapsulation): private 변수나 메서드는 _ 언더스코어로 선언해 접근을 제한합니다.

• 다형성(Polymorphism): 인터페이스나 추상 클래스를 통해 다형성을 구현할 수 있습니다.

Flutter에서의 활용: Flutter는 위젯 트리를 기반으로 UI를 구성하며, 모든 UI 요소가 객체로 표현됩니다. 예를 들어, Text 위젯, Container 위젯 등은 모두 클래스의 인스턴스입니다.

2. 함수형 프로그래밍 (Functional Programming, FP)

Dart는 함수형 프로그래밍 요소를 점진적으로 도입했으며, 특히 고차 함수(higher-order functions), 클로저(closure), 불변성(immutability) 등을 지원합니다. Flutter에서도 함수형 스타일을 자주 사용합니다.

• 일급 객체로서의 함수: 함수를 변수에 저장하거나 다른 함수의 인자로 전달할 수 있습니다.

  void applyOperation(int a, int b, Function(int, int) operation) {
    print(operation(a, b));
  }
  
  void main() {
    applyOperation(5, 3, (a, b) => a + b); // 출력: 8
  }

• 불변성: Dart는 final과 const 키워드로 불변 객체를 생성할 수 있습니다. Flutter에서 위젯은 기본적으로 불변(immutable)으로 설계되어 상태 변화 없이 새 인스턴스를 생성합니다.

• 컬렉션 작업: map, filter, reduce 같은 함수형 메서드를 제공해 리스트나 맵을 선언적으로 처리합니다.

  var numbers = [1, 2, 3, 4];
  var doubled = numbers.map((n) => n * 2).toList(); // [2, 4, 6, 8]

Flutter에서의 활용: 함수형 프로그래밍은 상태 관리(예: Provider, Riverpod)나 데이터 변환에서 자주 사용됩니다. 위젯 트리를 구성할 때도 함수형 접근법으로 깔끔한 코드를 작성할 수 있습니다.

3. 비동기 프로그래밍 (Asynchronous Programming)

Dart는 비동기 작업을 처리하기 위해 async와 await 키워드를 사용하며, Future와 Stream을 통해 비동기 흐름을 관리합니다. Flutter에서는 네트워크 요청, 파일 I/O, 애니메이션 등 시간이 걸리는 작업에 비동기 프로그래밍이 필수적입니다.

• Future: 단일 비동기 작업의 결과를 나타냅니다.

  Future<String> fetchData() async {
    await Future.delayed(Duration(seconds: 2)); // 2초 대기
    return '데이터를 가져왔습니다!';
  }
  
  void main() async {
    print('데이터를 가져오는 중...');
    String data = await fetchData();
    print(data); // 출력: 데이터를 가져왔습니다!
  }

• Stream: 연속적인 비동기 데이터 흐름을 처리합니다. 예를 들어, 실시간 채팅이나 센서 데이터 수신에 사용됩니다.

  Stream<int> countStream() async* {
    for (int i = 1; i <= 3; i++) {
      await Future.delayed(Duration(seconds: 1));
      yield i;
    }
  }
  
  void main() {
    countStream().listen((value) => print(value)); // 출력: 1초마다 1, 2, 3
  }

• 에러 처리: try-catch 블록을 사용해 비동기 작업의 예외를 처리합니다.

  Future<void> riskyOperation() async {
    try {
      await Future.error('오류 발생!');
    } catch (e) {
      print(e); // 출력: 오류 발생!
    }
  }

Flutter에서의 활용: HTTP 요청(http 패키지), 데이터베이스 작업(sqflite), 애니메이션 컨트롤러 등에서 비동기 프로그래밍이 사용됩니다. 예를 들어, API에서 데이터를 가져와 UI를 업데이트하려면 FutureBuilder나 StreamBuilder를 활용합니다.

요약

• 객체지향: Dart의 클래스 기반 구조는 Flutter 위젯 시스템의 기반입니다.
• 함수형: 고차 함수와 불변성은 코드의 간결함과 예측 가능성을 높입니다.
• 비동기: Future와 Stream으로 비동기 작업을 효율적으로 처리하며, Flutter 앱의 반응성을 유지합니다.

이 세 가지 패러다임은 서로 보완적으로 작용하며, Flutter와 Dart로 견고하고 효율적인 앱을 개발할 수 있게 해줍니다. 추가 질문이 있다면 말씀해주세요!

렌더링의 2가지 의미

1. JS 실행(렌더링) : 자바스크립트 코트(React 컴포넌트)를 HTML로 변환하는 과정
2. 화면에 렌더링 : HTML 코드를 브라우저가 화면에 그려내는 작업

사전 렌더링이란?

: 브라우저의 요청에 서버측에서 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식

• Client Side Rendering(CSR)의 단점을 효율적으로 해결하는 기술

• React APP의 단점 해소(빠른 FCP 달성) + React App의 장점 승계(빠른 페이지 이동) (React.js는 CSR 방식)

  ⬇️ 위 이미지는 아래 이미지의 보라색 영역에 대한 상세 내용

  

• FCP(First Contentful Paint) : 요청 시작 시점으로부터 컨텐츠가 화면에 처음 나타나는데 걸리는 시간.
• TTI(Time To Interactive) : 웹 페이지가 상호 작용할 때까지 걸리는 시간.
• 수화(Hydration) : 화면 렌더링이 진행된 브라우저 화면에서는 아직 인터렉션(상호작용)이 불가한데 이후에 서버에게 개발자가 작성한 모든 자바스립트 코드를 받고 코드를 실행해서 화면에 렌더링 되어있는 HTML코드와 연결해주는 과정(상호작용이 가능하게 해주는 과정)

Client Side Rendering(CSR)이란?

• React.js 앱의 기본적인 렌더링 방식
• 클라이언트(브라우저)에서 직접 화면을 렌더링 하는 방식
• 장점 : 초기접속 이후에 일어나는 페이지 이동이 매우 빠르고 쾌적 (서버에게 새로운 페이지를 요청할 필요 x)
• 단점 : 초기 접속 속도(FCP: First Contentful Paint)가 느림

  JS Bundle -> 여기서는 React App : 이 서비스에서 접근 가능한 모든 컴포넌트 코드가 존재

이미지 출처 : 한 입 크기로 잘라먹는 Next.js 강의

• UI 개발을 위한 JavaScript Library

Next.js란?

• React.js 전용의 웹 개발 Framework

Library와 Framework의 차이는? 기능 구현의 주도권이 누구에게 있는가에 따라 나뉜다.

• Library : 주도권이 개발자에게 있음. ex) React.js, jQuery 등
  • 기능 구현을 원하는 방향으로 진행
  • 쓰고싶은 도구, 쓰고싶은 기술을 사용 ex) React.js 사용 시, 페이지 라우팅 기능을 구현해야한다면 React Router나 TanStack Router 라이브러리를 사용
• Framework : 주도권이 개발자에게 없음. ex) Next.js, Remix 등
  • 프레임워크가 제공하는 기능을 이용하거나, 허용하는 범위 내에서만 추가 도구 사용 가능 ex) Next.js 사용 시, 페이지 라우팅 기능을 구현해야한다면 Next.js가 제공하는 라우터인 Page Router 또는 App Router를 사용

No template named 'unary_function' in namespace 'std'; did you mean '__unary_function'?

[해결]

Pods > Build Settings > Apple Clang - Preprocessing > Preprocessor Macros 의 Debug, Release 에 아래 값 추가

LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION

• 모든 Dart 프로그램의 Entry point이기 때문에 아주 중요!
• 반드시 main 함수를 작성해야 함.
• main 함수에서 내가 작성한 코드가 호출되기 때문
• 세미콜론(;)은 꼭 붙여줘야 함.(dart에서는 일부러 세미콜론을 사용하지않을 때가 있으니 주의!)

Variables

■ 변수를 만드는 방법

1. var

void main() {
    var name = "리아";
    name = 1; // name의 타입은 String인데 1(int)를 넣으면 에러 발생
    name = "ria";
}

• 변수를 수정할 땐 같은 타입으로 해줘야 함.

2. 명시적으로 타입 지정 (ex. String)

void main() {
    String name = "리아";
    name = "ria";
}

관습적으로

• 함수나 메소드 내부에 지역 변수를 선언할 때는 var를 사용
• class에서 변수나 property를 선언할 때는 타입을 지정

■ dynamic

• 여러가지 타입을 가질 수 있는 변수에 쓰는 키워드
• dynamic 사용을 추전하진 않지만 때때로 유용함(사용해야만 할 때도 있음)
• 정말 써야할 때만 사용!!!
• 변수를 선언할 때 dynamic을 쓰거나 값을 지정하지 않으면 dynamic 타입을 가짐

  void main() {
  var name; // dynamic 변수
  name = "ria";
  name = 1;
  name = true;
  }
  

``` dart
void main() {
  dynamic name; // dynamic 변수
  name = "ria";
  name = 1;
  name = true;
}

dynamic을 사용하는 경우

• 변수가 어떤 타입일지 알기 어려운 경우 ex) flutter와 json을 함께 사용할 때

void main() {
  dynamic name;

  if (name is String) {
      name. /* name. 까지 입력하면 String 타입관련 자동완성 메서드 목록이 나타남. 
             해당 블록 안에서는 name이 String이란 걸 알기 때문 */
  }

  // 여기서 name은 dynamic이기 때문에 타입을 체크해줘야 함

  if (name is int) {
      name. // int 타입관련 자동오나성 메스드 목록이 나타남.
  }
}

■ Nullbale Variables

null safety

• 개발자가 null 값을 참조할 수 없도록 함.
• 코드에서 null 값을 참조하면 런타임 에러(사용자가 앱을 사용하는 중에 발생하는 에러) 발생.
• 기본적으로 모든 변수는 non-nullable(null이 될 수 없음) 임.
• '?'을 사용하면 해당 변수가 null이 될 수 있다는 걸 알게 함.

void main() {
    String**?** name = "ria";
    name = null;

    if (name !== null) { // 컴파일러가 name은 null 아님을 알 수 있음
        name.isNotEmpty;
    }

    // 간단하게 작성하면 이와 같음
    name?.isNotEmpty;
}

■ Final Variables

• 한 번 정의된 변수를 수정할 수 없게 만들기 위해 사용.
• js/ts의 const와 같음

void main() {
    // 값을 변경할 수 있는 변수
    String name = "ria";
    name = "리아";

    // 값을 변경할 수 없는 변수
    final name = "ria";
    // 굳이 필요없지만 type을 추가 할 수 있음 (필수x)
    final String name = "ria";

}

■ Late variables

• final이나 var 앞에 붙여줄 수 있는 수식어

• 초기 데이터 없이 변수를 선언할 수 있게 해줌

• 장점

  • 데이터가 없는 상태에서 해당 변수를 사용하려고 하면 Dart가 막아줌

    void main() {
    // 변수를 만드는데 데이터가 없음(필요한 데이터가 아직 없음)
    late final String name; // 한번만 할당 할 수 있는 변수
    
    // API 요청하여 데이터를 받은 다음, 그 데이터를 변수에 넣음
    name = "ria";
    }

■ Constant Variables (상수)

• js/ts의 const와 다름. (js/ts의 const는 Dart의 final과 비슷)
• Dart에서 const는 compile-time constant를 만들어 줌
• const는 compile-time에 알고 있는 값이어야 함 ex) max_allowed_price

void main() {
    final API = fetchApi(); // o
    const API = fetchApi(); // x 컴파일 할 때 알고 있는 값이 아님.
                            // 앱스토어에 올리기 전에 알고 있는 값이어야 함.
}

1. 구글에서 만든 객체지향 언어
2. User Interface를 만드는데 최적화
3. 빠르다
4. 다양한 플랫폼에 컴파일 가능
5. 개발자 경험이 좋음
6. Kotlin, Swift, TypeScript와 비슷

구글이 Dart를 Flutter의 언어로 선택한 이유

(참고: Dart 공식문서 - Dart 개요)

1. UI에 최적화
2. 생산적인 개발 환경
3. 모든 플랫폼에서 빠름
   • Dart Web(JavaScript)
     • Dart로 쓴 코드를 JavaScript로 변환해주는 컴파일러
   • Dart Native
     • Dart로 쓴 코드를 여러 CPU의 아키텍쳐에 맞게 변환해주는 컴파일러
     • ex) ARM32, ARM64(모바일), x86_64(데스크탑)
     • 즉, IOS, Android, Windows, Linux, Mac으로 컴파일이 가능함
     • 사물인터넷(IoT) ex) 자동차 를 만드는데도 사용
4. null safety

[요약]

1. JIT(just-in-time) 컴파일과 AOT(ahead-of-time) 컴파일이 둘 다 있음 => 모바일 개발에 아주 좋은 언어
2. Dart와 Flutter는 둘 다 구글이 만들었음 => 구글은 Flutter를 위해 Dart를 최적화 할 수 있음

2023년 해가 바뀌고 2024년 오랜만에 Android Build를 다시 해보았다. 그동안 발생하지 않던 빌드 에러가 발생했다. (Expo ejcet 한 프로젝트라 예상치 못한 이슈가 자주 발생한다.)

boost_1_76_0.tar.gz. 를 찾지 못한다니..

Execution failed for task ':expo-modules-core:prepareBoost'.
Could not read ${프로젝트 경로}/node_modules/expo-modules-core/android/build/downloads/boost_1_76_0.tar.gz.

[해결]

구글링 해본 결과, 이런 이슈가 간간이 발생하는지 expo Github 이슈에 올라와있었다.

1. package 소스 코드 수정 /node-modules/expo-modules-core/android/build.gradle 파일을 찾아 task downloadBoost()를 찾아 아래와 같이 코드 수정 Before

   task downloadBoost(dependsOn: createNativeDepsDirectories, type: Download) {
    def srcUrl = REACT_NATIVE_TARGET_VERSION >= 69
      ? "https://boostorg.jfrog.io/artifactory/main/release/${BOOST_VERSION.replace("_", ".")}/source/boost_${BOOST_VERSION}.tar.gz"
      : "https://github.com/react-native-community/boost-for-react-native/releases/download/v${BOOST_VERSION.replace("_", ".")}-0/boost_${BOOST_VERSION}.tar.gz"
    src(srcUrl)
    onlyIfNewer(true)
    overwrite(false)
    dest(new File(downloadsDir, "boost_${BOOST_VERSION}.tar.gz"))
   }

   After

   task downloadBoost(dependsOn: createNativeDepsDirectories, type: Download) {
   def transformedVersion = BOOST_VERSION.replace("_", ".")
    def srcUrl = REACT_NATIVE_TARGET_VERSION >= 69
      ? "https://sourceforge.net/projects/boost/files/boost/${transformedVersion}/boost_${BOOST_VERSION}.tar.gz"
      : "https://github.com/react-native-community/boost-for-react-native/releases/download/v${BOOST_VERSION.replace("_", ".")}-0/boost_${BOOST_VERSION}.tar.gz"
    src(srcUrl)
    onlyIfNewer(true)
    overwrite(false)
    dest(new File(downloadsDir, "boost_${BOOST_VERSION}.tar.gz"))
   
   }

2. patch-package 설치 및 아래 cli 실행

   $ yarn patch-package expo-modules-core

3. node_modules 삭제 후, 재설치

    $ rm -rf node_modules && yarn

4. 재실행

    $ react-native start --reset-cache