핫리로드 (Hot Reload)

핫 리로드(Hot Reload)

애플리케이션 개발시 소스코드 변경사항을 앱을 완전히 재시작하지 않고 실시간으로 즉시 반영하는 개발 기능입니다.

변수값이나 UI상태를 유지한 채 변경된 부분만을 빠르게 업데이트해 개발 생산성을 크게 향상시킵니다.

마치 앱이 멈추지 않고 살아있는 상태에서 업데이트되는 것 같아, 개발자가 변경사항을 즉각 확인하고 디버깅하는데 필수적인 기능입니다.

• Flutter: main() 함수나 initState() 함수를 다시 실행하지 않고, 변경된 위젯만 업데이트하여 현재 화면의 상태를 유지한채 UI를 바꿀 수 있습니다.
• React: 웹팩(Webpack)과 같은 번들러를 통해 변경된 컴포넌트만 빠르게 업데이트합니다.

 

Flutter에서의 Hot Reload 작동원리

코드를 수정하고 Hot Reload 를 실행하면 다음과 같이 동작합니다.

1. 변경된 코드만 컴파일
   : IDE나 CLI에서 hot-reload 명령을 내리면, 전체 앱을 재빌드하지 않고 수정된 Dart 코드만 다시 컴파일됩니다.
2. Dart VM에 핫로드
   : 컴파일된 새 코드를 실행중인 Dart VM의 메모리에 로드합니다. 기존 메모리 상태는 그대로 유지됩니다.
3. 위젯 트리 재구성
   : Flutter는 build() 메서드를 다시 호출하여 위젯트리를 재구성합니다. 이때 기존 State 객체는 유지되므로 상태변수도 보존됩니다.
4. UI 업데이트
   : 변경된 위젯만 다시 랜더링되어 화면에 반영합니다.

 

제약사항

• 컴파일에러 : 문법오류가 있으면 hot-reload 자체가 실패합니다.
• 상태 초기화 코드 변경 : initState() 나 생성자의 로직을 변경해도 이미 생성된 State객체에는 적용되지 않습니다. 해당 위젯이 새로 생성될때만 새 로직이 실행됩니다.
• 글로벌 변수와 정적 필드 : 클래스 레벨의 static 변수나 전역변수는 hot-reload 시 새로운 초기값으로 리셋됩니다.
• main() 함수 변경 : 앱의 진입점이나 앱 초기화 로직을 변경하면 작동하지 않습니다.
• 라우팅 정의 변경 : 라우팅 관련 코드 수정 시 제약이 있을 수 있습니다.
• 네이티브 코드 변경 : Kotlin/Swift 같은 네이티브 플랫폼 코드를 수정하면 full restart가 필요합니다.

---

핫 리스타트(Hot Restart)

기기에 다시 설치는 안하지만, 전체 앱을 처음부터 다시 시작하여 상태값이 모두 초기화 되는 것을 의미합니다.

• 동작원리
  1. Dart VM 완전 재시작: Dart 런타임을 처음부터 다시 시작합니다.
  2. 모든 상태 초기화: 메모리의 모든 변수, State객체, static 변수 등이 모두 초기상태로 리셋됩니다.
  3. 전체코드 다시 로드: 수정된 코드뿐 아니라 모든 코드를 다시 컴파일하고 로드합니다.
  4. 앱은 재설치하지 않음: APK/IPA 를 기기에 다시 설치하지 않습니다.
• 속도비교:  Hot Reload > Hot Restart > Full Rebuild
• Full Rebuild 는 APK/IPA를 새로 빌드하여 기기에 설치과정이 있다. (앱설치)

---

나의 메타인지 점검하기

나는 Hot Reload를 어떻게 이해했는지 솔직하게 나의 메타인지 적기

[ Hot Reload ]
앱을 재시작하지 않고, 변경된 부분을 즉각 반영하는 것을 의미함.

[ Hot Restart ]
앱을 재시작하여 모든 상태를 초기화 시킨채, 모든 코드를 다시 재시작하는 것을 의미함.

---

[ 부록:: 익숙하지 않은 용어 정리하기 ] 

웹팩(Webpack) 

• 정의: 웹애플리케이션 개발에 필요한 자바스크립트, CSS, 이미지 등 여러 파일(모듈)등을 분석하고 하나 또는 여러개의 최적화된 파일(번들)로 묶어주는(번들링) 도구입니다.
  여러파일을 하나로 합쳐서 로딩속도를 개선하고, 최신 자바스크립트 문법을 지원하지 않는 브라우저에서도 사용가능하게 만듭니다.
• 왜 필요한지?
  • 모듈관리: 파일을 모듈단위로 나누어 개발하여 코드의 가독성과 유지보수성을 높여줍니다.
  • 성능향상: 수많은 파일을 한번에 로딩하는 대신, 묶음 파일(번들)로 로딩시간을 줄여줍니다.
  • 개발효율: 최신기술(es6+, typescript)을 사용하고도 구형브라우저를 지원할 수 있게 해줍니다.

 

Dart VM

• 정의: Dart 코드를 실행하는 런타임 환경을 의미합니다.
• 역할
  • 코드 해석 및 실행: Dart 코드를 읽고 기기가 이해할 수 있는 언어(기기의 OS마다 다름)로 변환하여 실행합니다.
  • 메모리 관리:  변수, 객체들을 메모리에 저장하여 GC(Garbage Collector)기능을 통해 자동으로 정리합니다.
  • Hot Reload 지원:  VM메모리에 코드를 동적으로 로드할 수 있어서 Hot-Reload가 가능합니다.