Flutter 데모 앱 살펴보기 1 - 디버깅 속도를 높여주는 Hot Reload

플러터 앱에서 기본적으로 생성해주는 데모 앱이 어떻게 구동되는지 살펴봅시다. 'Flutter Demo'라는 이름이 붙은 이 앱은 플러터의 기본 기능 중 Hot Reload, StatelessWidget과 StatefulWidget의 차이를 이해할 수 있게 간단한 카운터 기능만 제공하고 있습니다. 데모 앱을 실행하기 전에 터미널에서 Android Studio를 실행시키는 방법을 알아보고, 플러터 프로젝트도 터미널에서 Android Studio를 실행과 동시에 바로 열어보도록 하겠습니다.

 

터미널에서 Android Studio 실행하기

터미널에서 Android Studio를 바로 열기 위해서는 터미널에서 Android Studio 실행파일 경로를 오픈하는 명렁어를 입력해주면 됩니다. 다만 이렇게 하면 매번 실행하기 번거롭기 때문에 더 짧은 단어와 Android Studio 실행을 연결해 봅시다. 이 경우, .zprofile 파일에 alias로 Android Studio.app 경로만 추가시켜주면 됩니다. .zprofile 파일을 열어서 alias studio='open -a /Applications/Android\ Studio.app'라고 한 줄을 추가해주거나, 터미널에서 echo 'alias studio="open -a /Applications/Android\ Studio.app" >> ~/.zprofile이라고 치면 바로 .zprofile 파일에 반영됩니다. source ~/.zprofile로 .zprofile 변경 사항을 적용한 후에는 alias로 설정한 studio라는 커맨드로 Android Studio를 실행시킬 수 있게 됩니다.

 

터미널에서 플러터 프로젝트 생성하기

studio라는 커맨드가 Android Studio를 실행하도록 연결되어 있기 때문에, 터미널에서 studio my_app이라고 입력하면, 이전에 만들어 둔 데모 앱 프로젝트를 Android Studio에서 바로 불러올 수 있습니다. 터미널에서 플러터 데모 앱을 만들고 에뮬레이터나 시뮬레이터를 통해 실행하는 방법은 이전에 작성한 포스팅에 소개되어 있으니 참고하시길 바랄게요 🙂

2022.10.03 - [기본 코딩] - 플러터 개발 환경 구축 2 - 터미널과 Android Studio에서 데모 앱 돌려보기

플러터 개발 환경 구축 2 - 터미널과 Android Studio에서 데모 앱 돌려보기

 

Hot Reload

Hot Reload는 앱이 실행 중인 상태에서 변경 사항만 빠르게 적용하는 기능입니다. IDE 상단 번개 모양 아이콘 클릭을 통해 적용할 수 있습니다. 웹 기반 코딩을 해오신 분들은 이런 당연한 기능을 따로 소개하면서 아이콘까지 별도로 있나 싶겠지만, 플러터는 별도의 OS 기기에서 돌아가는 앱이기 때문에 상황이 다릅니다. 디버깅을 위해 무조건 처음부터 앱을 빌드해야 하는 경우, 앱의 실행 상태는 유지하면서 모든 값을 초기화하는 경우, 앱의 실행 상태는 유지하면서 현재 값도 그대로 두고 변경사항만 적용하는 경우 3가지로 나뉩니다. 실행 속도는 뒤로 갈수록 빠르죠. 그래서 Hot이라는 단어가 붙게 되었습니다. 디버깅 상황에 따라 이 3가지를 모두 적용할 수 있게 되었기 때문에 앱 개발 시 생산성 향상을 위해 중요한 기능입니다.

Hot Reload는 그중 가장 빠른 속도를 보이는 '앱의 실행 상태와 현재 값을 유지하면서 변경 사항만 적용'하는 경우에 해당합니다. 예를 들어 샘플 앱에서 카운트를 증가시킨 상태에서 primarySwatch 컬러 값을 변경한 후 Hot Reload 버튼을 누르면, 카운트 값은 그대로 있지만 색상만 변경되게 되죠.

 

Hot Restart

Hot Reload를 완전히 이해하려면, Hot Restart와 비교하는 게 좋습니다. 앞서 얘기한 '앱의 실행 상태는 유지하면서 모든 값을 초기화'하는 경우가 Hot Restart입니다. 위 상태에서 primarySwatch를 Colors.green으로 색상을 변경한 후 Hot Restart를 실행하면 색상도 변경되고 카운트도 초기화된 걸 확인할 수 있습니다. 카운트 값까지 변경하는 만큼 속도는 더 느려지겠죠?

앱을 실행한 후에는 상단 녹색 Run 버튼을 실행 시에 적용되고, 별도로 IDE 하단 실행 상태 바에서 

버튼을 누르면 Hot Restart가 적용됩니다. 실행 속도는 343ms로 나오네요.

색상만 바꿀 때 Hot Reload의 경우에는 144ms가 걸렸습니다. 실행 속도가 Hot Restart의 2배 이상 빠릅니다.

규모가 작은 샘플 앱이 아니라 실제 상용 앱의 경우에는 속도 차이가 더 커질 수 있겠죠? 디버깅 상황에 따라 Hot Reload 혹은 Hot Restart를 자유자재로 사용해 봅시다!