[Flutter] hot-reload on Save 안되는 문제 해결하기

모두기상 프로젝트가 어느 정도 끝나가고 있던 터라 새로운 프로젝트를 시작하게 되었다.

이를 위해 플러터 프로젝트를 구성하던 중, 시뮬레이터의 hot-reload가 안되는 상황이 발생했다.

나의 환경은 일단 실리콘 맥(m2), vsCode에서 개발을 하고 있었다.

플러터를 이전에 배웠었지만 다 까먹어서(...) 하나하나 다시 보고 있는 상황이라 시뮬레이터 실행하는 것 부터 애를 먹고 있다.

---

문제 상황

vscode를 사용하는데, flutter extension의 기능 중 하나인 hot reload on save를 사용하고 싶은데 적용이 되질 않는다.

지피티가 이런걸 해보라고 했다.

1. 저장 이벤트 확인

editor.formatOnSave 또는 다른 저장 관련 설정이 문제를 일으킬 수 있다. 저장 이벤트가 제대로 동작하는지 확인하기 위해 다음을 임시로 settings.json에 추가한다:

"[dart]": {
  "editor.formatOnSave": false,
  "editor.formatOnType": false
}

저장 후 flutter run으로 실행된 콘솔에서 hot reload가 작동하는지 다시 확인한다.

• 포매터에서 충돌이 일어날 수는 있지만, 나의 경우 여기에서 충돌이 일어나진 않았다.

2. Flutter와 Dart 확장 문제 확인

Flutter와 Dart 확장이 최신 버전인지 확인한다.

1. VSCode 사이드바의 확장 탭에서 Flutter와 Dart 확장을 선택한다.
2. 업데이트 버튼이 보인다면 최신 버전으로 업데이트한다.
3. 필요 시 확장을 제거한 뒤 다시 설치한다.

• 역시 재설치의 신은 나의 손을 들어주지 않았다.

3. Hot Reload 설정 직접 점검

VSCode의 settings.json 파일에서 아래 설정을 다시 추가하거나 수정해본다:

"dart.flutterHotReloadOnSave": "all",
"dart.hotReloadOnSave": "all",

혹은 값을 "always"로 변경하여 테스트해 본다:

"dart.flutterHotReloadOnSave": "always",
"dart.hotReloadOnSave": "always",

• 익스텐션의 이전 버전에서는 이게 always였는데 지금은 all로 바뀌어서 이것도 쓸데 없는 시도였다.

4. Flutter 실행 방식 확인

VSCode에서 Flutter를 실행하는 방식이 중요하다. 디버그 모드 또는 터미널에서 실행한 경우 동작이 다를 수 있다.

1. VSCode 상단의 Run and Debug (F5)를 통해 앱을 실행하고 hot reload on save가 작동하는지 확인한다.
2. 터미널에서 flutter run 명령으로 실행한 경우, 터미널이 활성화된 상태에서만 hot reload on save가 작동한다. 저장 후 터미널이 활성화된지 확인한다.

• 반만 맞은 정답이 나왔다. 반만 맞아서 삽질을 하고 있었다.
  결론만 말하자면 vsCode의 터미널에서 flutter run으로 실행되고 터미널이 활성화 되어 있어도 hot-reload는 적용되지 않는다.

5. Auto Save 설정 확인

VSCode가 저장 시 자동으로 hot reload를 트리거할 수 있도록 다음 설정을 점검한다:

  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000

저장 후 1초 내에 hot reload가 발생하는지 확인한다.

• 그냥 자동 저장에 딜레이 주는 옵션인데 자동저장 기능은 여러모로 비추고 해결 방법도 아녔다.

6. Flutter 프로젝트 환경 점검

Flutter 프로젝트에 문제가 있을 수 있다. 터미널에서 아래 명령을 실행하여 캐시를 초기화한 뒤 테스트한다:

  flutter clean
  flutter pub get
  flutter run

• 초기화의 신은 나의 손을 들어주지 않았다.

7. Log 점검

VSCode에서 View > Output 메뉴를 열고, 출력 창의 드롭다운 메뉴에서 Flutter를 선택한 뒤 저장 시 어떤 로그가 나오는지 확인한다.

만약 hot reload가 호출되지 않는다면 설정이 제대로 동작하지 않는 것이며, 저장 이벤트가 Flutter로 전달되지 않는 원인을 파악해야 한다.

• 여기서는 알려주지 않았지만, flutter의 추가적인 로그를 확인하고 서버를 띄우는 방식은 다음 명령어를 입력하면 된다.
  • flutter run --verbose

8. 최후의 해결 방법

VSCode에서 Flutter와 관련된 설정이 꼬였을 가능성이 있다. 아래의 방법을 시도한다:

1. VSCode의 설정을 초기화:
   • VSCode 명령어 팔레트(Ctrl+Shift+P 또는 Cmd+Shift+P)에서 Preferences: Open Settings (JSON)을 열고 필요 없는 설정을 모두 제거한 뒤 Flutter와 관련된 설정만 추가한다.
2. VSCode를 완전히 제거하고 다시 설치한 뒤 Flutter 환경을 재구성한다.

• 응 안해

---

해결 방법

이것 저것 삽질 하다 결국은, debug 모드에서만 hot reload가 지원된다는 것을 알았다.

일단 이 hot-reload라는 것은 여러 특징이 있다.

• hot-reload 는 코드 변경 사항을 VM에 로드하고 위젯 트리를 다시 빌드하여 앱 상태를 유지하며, main() 또는 initState()를 다시 실행하지 않습니다.

• 새 asset(이미지 또는 미디어 파일 등)을 추가하는 경우 핫 리로드가 작동하지 않습니다. 이러한 경우 앱을 다시 시작해야 합니다.

나의 경우는 이러한 경우도 아니었기 때문에, main의 코드를 수정할 이유도 없었다.

여러 번의 삽질 끝에, vsCode의 실행 및 디버그 탭에서 실행에서, 디버깅 모드로 시뮬레이터에 앱을 띄우자 hot-reload가 적용되었다.

그 이유에 대해서 GPT는 다음과 같이 말한다.

flutter run과 Debug Mode 간의 동작 차이 때문에 저장 시 hot reload on save가 작동하지 않는다.

VSCode의 Debug Mode는 Flutter 확장과 긴밀히 통합되어 있어 저장 이벤트를 감지하고 자동으로 hot reload를 트리거한다.

반면, flutter run은 터미널에서 실행되므로, 저장 이벤트를 자동으로 연결하지 않는다.

• flutter run 실행 방식
  flutter run은 터미널에서 앱을 실행하며, Flutter CLI의 기본 동작이다. VSCode 확장과 연결되지 않으므로 저장 이벤트가 Flutter CLI로 전달되지 않음. 터미널에서는 수동으로 r을 입력해야 hot reload를 실행한다.

• VSCode Debug Mode
  Debug Mode는 Flutter 확장을 통해 앱을 실행하므로, 저장 이벤트가 자동으로 Flutter 개발 서버에 전달된다.
  VSCode는 Dart/Flutter 파일 저장 시 dart.hotReloadOnSave 설정을 감지하고 hot reload를 트리거한다.

---

결론

1. 터미널에 flutter run으로 실행하는 것이 아닌 디버깅 모드로 실행해야 hot-reload가 정상적으로 적용된다.
2. 지쌤이 해결 방안 주면 순서대로 차근차근히 해보자