첫 번째 하이브리드 앱 빌드
중요
이 프로젝트는 실험적 릴리스입니다. 실험적 모바일 Blazor 바인딩을 사용해 보고 에서 https://github.com/xamarin/MobileBlazorBindings피드백을 제공하기를 바랍니다.
실험적 모바일 Blazor 바인딩을 시작하여 하이브리드 앱을 빌드하는 가장 쉬운 방법은 명령줄에서 초기 프로젝트를 만드는 것입니다. 이 템플릿은 Android, iOS, WPF(Windows) 및 macOS용 앱 만들기를 지원합니다.
참고
아직 수행하지 않은 경우 필수 구성 요소 및 템플릿 설치 지침을 검사.
명령 프롬프트 또는 셸 창 열기
다음 명령을 실행하여 프로젝트를 만듭니다.
dotnet new blazorhybrid -o FirstBlazorHybridApp
그러면 SLN(솔루션 파일)과 하위 디렉터리에 5개의 프로젝트가 포함된 라는
FirstBlazorHybridApp
폴더가 만들어집니다.-
FirstBlazorHybridApp/FirstBlazorHybridApp.csproj
- 애플리케이션의 하이브리드 UI 및 논리를 포함하는 공유 프로젝트입니다. 즉, Razor 구문을 사용하는 네이티브 UI와 웹 UI가 모두 포함됩니다. -
FirstBlazorHybridApp.Android/FirstBlazorHybridApp.Android.csproj
- Android 디바이스를 대상으로 하는 "백 엔드" 프로젝트입니다. Windows 또는 Mac에서 이 프로젝트를 실행하여 Android Emulator에서 앱을 시작할 수 있습니다. -
FirstBlazorHybridApp.iOS/FirstBlazorHybridApp.iOS.csproj
- iOS 디바이스를 대상으로 하는 "백 엔드" 프로젝트입니다. Mac에서는 이 프로젝트를 실행하여 iOS 시뮬레이터에서 앱을 시작할 수 있습니다. Windows에서 페어링된 Mac이 있는 경우에도 실행할 수 있습니다. -
FirstBlazorHybridApp.Windows/FirstBlazorHybridApp.Windows.csproj
- WPF(Windows Presentation Foundation)를 사용하여 Windows 디바이스를 대상으로 하는 "백 엔드" 프로젝트입니다. Windows에서 이 프로젝트를 실행하여 앱을 시작할 수 있습니다. -
FirstBlazorHybridApp.macOS/FirstBlazorHybridApp.macOS.csproj
- macOS 디바이스를 대상으로 하는 "백 엔드" 프로젝트입니다. Mac에서 이 프로젝트를 실행하여 앱을 시작할 수 있습니다.
-
이제 Visual Studio에서 솔루션을 열 준비가 되었습니다. 솔루션을 열려면 디스크에서 SLN 파일을 두 번 클릭하거나 먼저 Visual Studio 2019를 열고 를 선택한
File
/ /Open
Project/Solution
다음, 만든 새 폴더로 이동하여 를 선택할FirstBlazorHybridApp.sln
수 있습니다. Visual Studio의 솔루션은 다음과 같습니다.프로젝트를 실행하려면 "백 엔드" 프로젝트 중 하나를 시작 프로젝트로 설정해야 합니다. 솔루션 탐색기 Android, iOS, Windows 또는 macOS 프로젝트를 마우스 오른쪽 단추로 클릭하고 를 선택합니다
Set as StartUp Project
.F5 키를 눌러 디버거가 연결된 에뮬레이터 또는 디바이스(선택한 프로젝트에 따라)에서 프로젝트를 시작하거나 Ctrl+F5 키를 눌러 디버거 없이 실행합니다.
- 팁: iOS 시뮬레이터에서 iOS 프로젝트를 실행하려면 대신 Visual Studio 도구 모음
iPhone
에서 대상을 선택iPhoneSimulator
해야 합니다.
- 팁: iOS 시뮬레이터에서 iOS 프로젝트를 실행하려면 대신 Visual Studio 도구 모음
첫 번째 애플리케이션은 에뮬레이터 또는 디바이스에서 시작되며 다음과 같이 표시됩니다.
축하합니다. 첫 번째 실험적 모바일 Blazor 바인딩 하이브리드 앱을 만들고 실행했습니다.
팁
문제가 발생하는 경우 문제 해결 가이드를 참조하세요.
팁
새 프로젝트를 만들 때 추가 옵션은 고급 템플릿 옵션 항목을 참조하세요.
다음 단계
- 작동 방식에 대해 자세히 알아보려면 하이브리드 헬로 월드 연습으로 이동하세요.
- Blazor 웹앱과 웹 UI를 공유하는 방법을 알아보려면 공유 웹 UI 연습으로 이동합니다.