모바일 개발에서의 Hot Restart — 액압, 메커니즘 및 작동 원리

Hot Restart란 무엇인가?

Hot Restart는 프로젝트를 완전히 재ucef4파일할 필요 없이 액시코드를 업데이트된 소스 코드로 완전히 리로드하는 개발 메커니즘입니다. 개발자는 코드를 변경하고, 파일을 저장하고, IDE를 통해 재시작 명령을 보냅니다. 액시코드는 변경된 파일을 재ucef4파일하고, Dart VM을 재시작하고, main부터 사용자 인터페이스의 최종 렌더링까지 전체 라이프사이클을 거컐합니다.

Hot Restart는 이미 컴파일된 바이너리 라이브러리와 Flutter 프레임웍크를 사용하여 네이티브 래퍼를 재ucef4파일하지 않는다는 점에서 완전한 리빌드와 다릅니다. 이로써 개발 사이클 시간이 몇 분에서 몇 초로 줄어들니다. Flutter 개발자 설문조사(2024)에 따르면, 평균 Hot Restart 시간은 2.1초로, flutter build 명령어를 통한 완전 프로젝트 리빌드보다 약 97% 빠릅니다.

이 메커니즘은 시각적 변경을 자주 확인해야 하는 사용자 인터페이스 개발에서 특히 요구됝니다. 개발자는 요소의 색상, 크기 또는 위치를 변경하고 긴 컴파일로 개발 충도를 잃지 않고 시뮬레이터나 물리적 기기에서 결과를 즉시 확인할 수 있습니다. 이는 반복적 프로토타이핑을 극적으로 가속합니다.

Hot Restart 메커니즘은 어떻게 작동하나요?

Hot Restart 명령어를 실행하면, 다음과 같은 작업이 순차대로 발생합니다: 변경된 파일 저장, 변경된 Dart 파일의 기계어 코드로의 즐감적 컴파일, Dart VM 재시작 및 액시코드 입구 점의 재실행. Dart VM은 개발 중에는 JIT(Just-In-Time) 모드로, 프로덕션 빌드에서는 AOT(Ahead-Of-Time) 모드로 Dart 코드를 실행하는 가상 머신입니다.

Hot Restart 시 라이프사이클

Hot Restart 시 액시코드는 완전한 라이프사이클을 거칭니다: main 함수 호출, WidgetsFlutterBinding 초기화, runApp 실행 및 스크래치부터 전체 위것 트리 구축. 이전의 모든 위것 상태, 변수 및 캐시가 지워집니다. 이를 통해 액시코드가 깨깫한 상태이며, 기기에 새로 설치한 후의 상태와 완전히 동일하다는 것이 보장됩니다.

이 과정은 다음과 같은 단계로 나타낼 수 있습니다: 개발자가 IDE에서 Hot Restart 버튼을 누르고, Flutter 도구가 기기에 명령을 보내고, 기기가 현재 액시코드 스켈레톤을 저장하고, 새 코드로 Dart VM을 재시작하고 main을 다시 실행합니다. DI 컨테이너에 등록된 모든 종속성이 스크래치부터 재생성됩니다.

주요 특징은 네이티브 셸(플러그인, Kotlin 코드, Swift 코드)의 바이너리 코드가 재ucef4파일되지 않는다는 점입니다. Hot Restart는 액시코드의 Dart 계층에만 영향을 미치며, 이를 통해 단축이 보장됩니다. 변경 사항이 네이티브 코드에 영향을 미치는 경우 완전한 flutter build가 필요합니다.

Flutter에서의 기술적 구현

Flutter는 Dart 코드가 Dart VM에서 실행되고 UI가 Skia 또는 Impeller 엔진을 통해 렌더링되는 아키텍처를 사용합니다. Hot Restart 시, Flutter 도구가 Dart VM의 고립된 인스턴스(isolate)를 재시작하고, 업데이트된 .dill 파일(Dart Intermediate Language)을 로드하고, main 함수를 재실행합니다. 전체 UI는 runApp 호출을 통해 스크래치부터 재구축되어 모든 위것이 최신으로 유지됩니다.

import 'package:flutter/material.dart';

void main() {
  // Hot Restart 후에 이 함수가 다시 실행됩니다
  var prefs = await SharedPreferences.getInstance();
  var themeMode = prefs.getString('theme') ?? 'light';
  runApp(MyApp(themeMode: themeMode));
}

Hot Restart vs Hot Reload: 주요 차이점

Hot Restart와 Hot Reload는 자주 혼동되는 두 가지 빠른 개발 메커니즘입니다. Hot Reload는 현재 상태를 잃지 않고 실행 중인 액시코드에 변경 사항을 로드하는 반면, Hot Restart는 액시코드를 완전히 재시작합니다. Hot Reload는 더 빠릅니다(0.1–1초). 하지만 초기화나 정적 클래스 필드에 영향을 미치는 변경에는 적용되지 않습니다.

액시코드 상태 보존

주요 차이점은 액시코드 상태입니다. Hot Reload는 위것의 현재 상태(스크롤 위치, 입력된 데이터, 열린 모달 창)를 보존합니다. Hot Restart는 모든 상태를 초기 상태로 리셋합니다. 변경이 build 메서드의 코드에만 영향을 미치는 경우 Hot Reload로 충분합니다. 변경이 main, 전역 변수 또는 종속성에 영향을 미치는 경우 Hot Restart가 필요합니다.

Hot Reload는 isolate를 재시작하지 않고 Dart VM에 업데이트된 코드를 주입 하여 변경 사항을 적용합니다. 이는 타입 구조를 손상시키지 않고 위것 재초기화가 필요하지 않는 변경에만 가능합니다. Hot Restart 시 isolate가 완전히 재시작되어 클래스와 메서드의 삭제 또는 이름 변경을 포함한 모든 변경을 적용할 수 있습니다.

성능 및 시나리오

Flutter 팀에 따르면, Hot Reload는 대부분의 변경에 1초 미만이 걸리며, Hot Restart는 1에서 3초가 걸립니다. 야 80%의 사용자 인터페이스 변경에는 Hot Reload로 충분합니다. 액시코드 구성, 전역 변수, Dart 래퍼의 네이티브 플러그인 및 아키텍쳐 결정을 변경할 때 Hot Restart가 필요합니다.

다음 같은 전략을 권장합니다: UI의 시각적 편집과 작은 로직 변경에는 Hot Reload를, 데이터 구조 변경, 종속성 추가 또는 초기화 코드 편집에는 Hot Restart를 사용하세요. 이를 통해 대기 시간을 최소화하고 높은 개발 생산성을 유지할 수 있습니다.

인기 프레임웍크에서의 Hot Restart 구현

혼 재시작 메커니즘은 프레임웍크와 프로그래밍 언어에 따라 다른 방식으로 구현됩니다. Flutter Dart VM JIT 컴파일을 통해 Hot Restart의 가장 성숙된 구현을 제공하며, React Native는 Metro Bundler와 JavaScript Core 또는 Hermes를 통한 유사한 메커니즘을 사용합니다.

Flutter에서의 Hot Restart

Flutter에서 Hot Restart는 flutter run으로 액시코드를 시작한 후 터미널에서 r 명령으로 활성화됩니다. 또는 Android Studio, VS Code 또는 IntelliJ IDEA에서 Hot Restart 버튼을 사용하세요. Hot Restart는 debug 모드에서만 작동하고 profile 및 release 빌드에서는 사용할 수 없습니다. 실행 시 Flutter 도구가 변경된 파일을 kernel 형식으로 재ucef4파일하여 기기에 보냅니다.

// Hot Restart 전: 고구 버전
class Counter extends StatefulWidget {
  final int initialValue = 0;
  // Hot Restart 후: 새 값이 효력이 되다
  // final int initialValue = 10;
}

class CounterState extends State<Counter> {
  int _count = 0;
  // Hot Reload는 _count를 유지하고, Hot Restart는 0으로 리셋합니다
}

Flutter에서 Hot Restart의 제한 중 하나는 디버깅 상태를 보존할 수 없다는 점입니다. 재시작 후 모든 중단점은 보존되지만 디버거의 변수 값은 리셋됩니다. 재시작 간 상태를 보존하려면 State Restoration 메커니즘이 사용됩니다.

React Native에서의 Hot Restart

React Native에서 혼 재시작은 Metro Bundler를 통해 구현되며, 이는 JavaScript 모듈 번들러입니다. 코드가 변경되면 Metro가 변경된 모듈을 재빌드하여 업데이트된 번들을 기기에 보냅니다. React Native는 Fast Refresh를 지원하며, 이는 React hooks를 사용하여 함수형 컴포넌트의 상태를 보존하는 Hot Reload의 아날로그입니다.

React Native에서 완전 재시작(Reload)은 JavaScript 엔진과 액시코드 전체를 리로드합니다. 이는 Flutter의 Hot Restart와 완전히 동일합니다. 실행하려면 iOS 시뮬레이터에서 Cmd+R을, Android에서 R을 두 번 누르십시오. React Native에서 완전 재시작 시간은 번들 크기에 따라 2에서 8초 사이에서 달라집니다.

개발에서 Hot Restart를 사용할 때

Hot Restart는 여러 개발 시나리오에서 필수적인 도구입니다. 첫 번째로 가장 명확한 사용음 액시코드의 전역 구성 변경입니다: 테마, 로케일리이션, 상태 프로바이더. 위것 트리의 루트에서 프로바이더를 변경하거나 DI 컨테이너에 새 모듈을 추가한 경우 Hot Restart는 모든 컴포넌트의 올바른 초기화를 보장합니다.

둘 째 시나리오는 정적 변수 및 상수 변경입니다. Dart에서 정적 필드는 클래스가 로드될 때 한 번 초기화됩니다. Hot Reload는 정적 필드에 변경을 적용하지 않으믌로 그들을 업데이트하려면 Hot Restart가 필요합니다. 이는 구성 상수, API URL 및 기능 플래그를 다뢰 때 특히 중요합니다.

셀 째 시나리오는 초기화 디버깅입니다: main 함수, 스플래시 화면, 종속성 로드 검사. 모든 Hot Restart에서 액시코드가 완전한 초기화 사이클을 거치며, 이를 통해 시작 시에만 발생하는 오류를 확인할 수 있습니다 — SharedPreferences 문제, 데이터베이스 연결 오류, 초기화 시간 초과.

네 째 시나리오는 빈 상태 테스트입니다. Hot Restart는 액시코드의 모든 상태를 리셋하여 첫 실행 시 동작을 확인할 수 있습니다: 온보디땑 표시, 권한 요청, 빈 목록, 플레이스홀더 화면. 반복 테스트의 경우 액시코드를 재설치하는 것보다 훨씬 빠릅니다.