Xamarin Live Reload

이 포스트의 내용은 https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/live-reload을 번역한 자료입니다. 한글로 표현하기 어색하거나 모호한 문장은 임의로 조정하거나 삭제하였으므로 필요한 경우 원문을 참고하시기 바랍니다. 또한 언제든지 원저자의 요청에 의해 게시물이 내려지거나 수정될 수 있음을 알려드립니다. 마지막으로 이 글은 개인적인 학습목적으로 번역한 자료이며, 따라서 오역이나 잘못된 해석이 포함되어 있을 수 있으며 이로인한 어떠한 일체의 보장을 하지 않습니다.

Xamarin Live Reload를 사용하면 컴파일이나 배포 과정 없이 XAML에 대한 변경사항을 즉각적으로 확인할 수 있습니다. XAML파일을 수정하고 저장하면 선택한 모바일 장치에 변경사항이 즉시 반영됩니다.

앱이 컴파일되어 배포된 상태에서 Live Reload가 실행되므로 Third-Party 라이브러리나 컨트롤도 정상적으로 동작합니다. Live Reload는 Android, iOS, UWP 등 모든 Xamarin.Forms 플렛폼에서 동작하며, 애뮬레이터나 실제 모바일 장치에서 동작합니다.

Live Reload는 현재 Visual Studio 2017에서 동작합니다.

요구사항

• Visual Studio 2017 버전 15.7 이상 또는 .NET 모바일 개발 워크로드 이상
  (참고: 워크로드는 VisualStudio의 설치 단위 중 하나로서 기존의 컴포넌트나 개발도구 보다 더 큰 설치단위 입니다.)
• Xamarin.Forms 3.0.0 또는 그 이상
  

시작하기

1. Visual Studio 마켓플레이스에서 Xamarin Live Reload를 설치하세요.

Xamarin Live Reload는 Visual Studio 마켓플레이스를 통해 배포됩니다. Live Reload 확장을 설치하려면 Visual Studio 마켓플레이스의 Xamarin Live Reload 페이지를 방문해서 Download를 클릭하세요.

다운로드한 .vsix 파일을 실행하고 Install을 클릭하세요.

다른 방법으로는 Visual Studio에서 Tools → Extension and Updates를 클릭하고 Online 탭에서 검색하여 설치하는 것입니다.

2. Xamarin 앱 프로젝트에서 Live Reload를 설정하세요.

Live Reload는 아래 3단계를 통해 추가하실 수 있습니다.

1. Xamarin.Forms 3.0.0 이상의 패키지가 설치되어 있는지 확인해주세요.
   
2. NuGet 패키지 매니저에서 Xamarin.LiveRealod를 설치해주세요.
   • .NET Standard 프로젝트를 사용하는 경우
     .NET Standard 2.0 라이브러리 프로젝트에 Xamarin.LiveRealod NuGet 패키지를 설치하세요. 이 경우에는 다른 플렛폼 프로젝트에 Live Reload를 설치하실 필요는 없습니다. NuGet에서 검색하실 때는 Packge source를 All로 설정해주세요.
   • Shared Project 프로젝트를 사용하는 경우
     Xamarin.LiveReload NuGet을 모든 플렛폼 프로젝트에 설치해주세요(Xamarin.Android, Xamarin.iOS, UWP 프로젝트 등) 마찬가지로 검색하실 때는 Package source를 All로 설정해주세요.
   
3. LiveReload.Init() 코드를 Xamarin.Forms 프로젝트의 Application class에 추가해주세요. 아래 코드를 참고해주세요.

   public partial class App : Application
   {
       public App ()
       {
           // Live Reload 초기화
           #if DEBUG
           LiveReload.Init();
           #endif
           
           InitializeComponent();
           MainPage = new MainPage();
       }
   }

Live Reload를 시작해보세요.

앱을 컴파일하시고 배포하신 후 시작해보세요. 앱이 일단 배포되면 XAML파일을 열고 코드를 변경하신 후 저장해보세요. 그러면 변경사항은 즉시 재배포되어 화면에 반영될 것입니다.

Live Reload는 XAML에 가해진 어떤 변경도 정상적으로 반영할 것입니다. C#이나 NuGet 패키지의 추가/삭제를 반영하시려면 컴파일과 재배포 과정이 필요합니다.

동작하지 않는 경우 체크리스트

Live Reload가 정상적으로 동작하지 않는다면 아래를 정확히 따라해보세요.
(2018년 8월 5일 테스트에 성공한 버전으로 정리드립니다. 현재 Live Reload 0.3.27 버전은 Preview 릴리즈이며, 버그로 인해 연결이 잘 이루어지지 않을 수 있습니다. 지속적으로 문제가 발생한다면 좀더 안정된 버전이 나올 때까지 기다리신 후 진행해주세요.)

1. Visual Studio 2017 이상 버전을 사용해주세요. (테스트에 성공한 버전은 15.7.5)
   
2. Live Reload를 다운로드하고 설치해주세요. (테스트에 성공한 버전은 0.3.27)
   
3. NuGet에서 Xamarin.LiveReload를 설치해보세요. (테스트에 성공한 버전은 0.3.27)
4. NuGet에서 Xamarin.Forms 3.0 이상 패키지를 설치해보세요. (테스트 성공버전은 3.1.0.637273)
5. Xamarin.Forms 프로젝트의 App Class에 LiveReload.Init();가 추가되어있는지 확인해주세요. 앱을 실행한 후 디버깅 모드에서 해당 라인이 실행되는지 확인해주세요.
6. 스마트폰이나 시뮬레이터에 해당 앱이 이미 설치되어 있다면 삭제 후 다시 실행해보세요.
   
7. Visual Studio → Tools → Options → Xamarin → Live Reload 설정은 아래와 같습니다.
   
8. PC에서 스마트폰의 IP로 Ping을 날려보세요. 스마트폰과 PC는 같은 와이파이 존에 존재해야합니다. (스마트폰 IP확인방법은 제조사 마다 다르며, 일반적으로 설정 → Wi-Fi 또는 설정 → 휴대전화정보 → 상태 → IP Address에 존재합니다.)
9. PC의 방화벽을 확인해주세요. 방화벽을 사용 중지하시거나 인바운드 규칙에 1883 포트를 추가해주세요. (Live Reload는 MQTT프로토콜을 사용하며, MQTT는 TCP/IP 1883 포트로 통신합니다.)
   
10. Xamarin.Forms 모든 프로젝트에 obj, bin 폴더를 삭제하시고, 프로젝트를 Rebuild 해주세요.
11. Xamarin.Android나 Xamarin.iOS 프로젝트를 마우스 오른쪽 버튼 클릭하시고, Deploy를 선택해주세요.
    
12. 시뮬레이터나 스마트폰에서 해당 앱을 실행해주신 후, VisualStudio에서 수정하실 XAML 페이지를 열고 Connect 버튼을 클릭해주세요.
    
1. 아래 이미지는 라이브 리로드 연결이 끊어진 상태를 보여주고 있으며,  이 상태에선 동작하지 않습니다. 이 경우 Disconnect를 클릭하시고 위의 10번부터 다시 시작해보세요.
   
2. 다시 Rebuild → Deploy를 거쳐 연결이 되면 아래와 같이 나타납니다. 이 상태에선 Live Reload가 정상 동작합니다. XAML파일을 수정한 후 저장해보세요. 실시간으로 변경사항이 앱에 반영됩니다.
   
3. 보통 Device connected 상태로 전환되지 않는 경우가 많습니다. 현재 Live Reload는 Preview Release 상태라 연결되지 않거나 불안정하게 끊어질 수 있습니다.