2일차. UWP "Hello, World!" 앱 만들기 (1/3)

새 프로젝트 생성

새 프로젝트 만들기

 

   본격적인 C++/WinRT를 이용한 UWP "Hello, World!" 앱을 만드는 과정입니다. 들어가기 전에 UWP와 XAML에 대한 사전 지식이 있다면 이해하기 더 쉽습니다. (XAML 개요 링크) 먼저 Blank APP (C++/WinRT) 을 눌러 새 프로젝트를 만들어 줍니다.

 

솔루션과 프로젝트

   프로젝트 안에는 App.xaml과 MainPage.xaml, pch, Assets 폴더가 있습니다. 그리고 .xaml 안에는 .h, .cpp, .idl 파일이 존재하네요. XAML은 태그 파일을 수정하여 UI 컴포넌트를 구성하고, 구성한 컴포넌트들을 데이터 소스에 바인딩할 수 있습니다.

   App.xaml은 응용 프로그램의 진입점을 포함하는 Windows::UI::Xaml::Application 클래스의 앱 특수화를 나타냅니다. 이 안에서 앱이 시작될 때 앱을 초기화하거나 앱이 중단될 때, 종료될 때의 동작을 정의하는 코드를 추가할 수 있습니다. MainPage.xml은 응용 프로그램의 기본 시작 페이지 형식입니다. pch.h와 pch.cpp는 이전 게시글에서 말한 대로 미리 컴파일된 헤더 파일입니다. 자주 변경되지 않는 헤더 파일을 포함할 때 주로 사용합니다ㅏ.

 

01

실행 결과

   아무것도 건드리지 않은 상태에서 컴파일할 경우 위와 같은 프로그램이 생성됩니다. 현재 윈도우 색 설정이 어둡게(다크모드)여서 화면이 검정색으로 나오네요. 밝게 하면 흰색으로 변합니다. 가운데에는 'Click Me'라고 적힌 버튼이 하나 있는데 이 버튼을 클릭하면 'Clicked'라는 텍스트로 변하게 됩니다. 버튼이 바뀌는 게 아닌 버튼 안의 텍스트가 변화합니다.

 

MainPage.xaml 파일

   이제 코드를 한번 들여다보겠습니다. 먼저 MainPage.xaml을 보면 맨 바깥에 Page 태그가 있습니다. 속성값으로 x:Class와 xmlns 속성들이 있습니다. x:Class는 데이터 바인딩에 관련된 속성으로, 위 코드는 HelloWorldCppWinRT(현재 프로젝트)의 MainPage 클래스에 바인딩하겠다는 의미입니다. 마지막에는 mc:Ignorable="d"라는 속성이 있는데 이는 XAML 프로세서에서 해당 값(접두사)를 무시하겠다는 의미입니다. (링크) Page 태그 안에는 StackPanel이라는 태그가 있습니다. StackPanel은 자식 요소를 가로 혹은 세로로 한줄로 정렬하는 태그입니다. 안드로이드로 치자면 LinearLayout과 유사합니다. Orientation(방향)은 Horizontal(수평)으로, HorizontalAlignment(수평 정렬)은 Center(가운데)로, VerticalAlignment(수직 정렬)도 Center(가운데)로 설정되어 있습니다. 지금은 하나밖에 없지만 자식 요소가 늘어나면 두 정렬을 기준으로 이전 자식 요소의 아래에 한줄로 생성될 겁니다. StackPanel 안에는 Button 태그가 있습니다. 안에는 x:Name이란 태그가 있는데 여기서 설정된 값으로 앞에서 바인드된 클래스에서 바로 사용할 수 있게됩니다. Click 속성은 HTML과 자바스크립트의 onclick 속성과 유사한 동작을 하며 클릭시 x:Class에 선언된 네임스페이스의 ClickHandler 메서드를 실행하게 됩니다. 태그 안안에는 버튼의 값이 들어가게 됩니다.

 

MainPage.idl 내용

   .idl 파일은 인터페이스 정의 언어로 MIDL(Microsoft Interface Definition Language)를 사용하여 winrt 클래스를 정의합니다. MIDL로 정의를 하면 C#, C++/WinRT, VisualBasic, JavaScript 등에서 작성, 참조, 사용할 수 있는 클래스가 생성이 됩니다. 코드에서는 HelloWorldCppWinRT라는 네임스페이스를 정의하고 미리 정의된 특성(링크)인 [default_interface] 특성을 부여합니다. 그리고 Windows.UI.Xaml.Controls.Page를 상속받는 MainPage라는 클래스를 생성하였습니다. 이렇게 idl을 생성하면 winrt 메타데이터(.winmd)를 생성되고 빌드시 이 파일을 참조하여 빌드하게 됩니다. 이 런타임 클래스를 작성하지 않으면 implementation을 직접 구현하여야 합니다.

 

 MainPage.h 내용

   MainPage.h에서는 위에서 기술한 winrt::HelloWorldCppWinRT::Impementation의 생성자와 MyProperty 메서드, 그리고 xaml에서 입력한 버튼 클릭시 발생하는 이벤트인 ClickHandler 메서드가 있습니다.

 

 

MainPage.cpp 내용

   MainPage.cpp에서는 헤더 파일의 내용을 구현한다. MainPage 생성자에선느 컴포넌트를 초기화한다. MyProperty 메서드에서 예외를 반환합니다. winrt에서는 winrt::hresult_error 으로 오류를 처리합니다. 즉 구현되지 않았다(not implemented)는 예외를 반환합니다. 마지막으로 ClickHandler에서는 이벤트를 작성합니다. xaml 파일에서 버튼 태그의 속성으로 x:Name이 있었던 것을 기억하실 겁니다. 이 x:Name 속성의 값이 해당 태그의 이름입니다. myButton이라 작성했으니 myButton()으로 참조합니다. 버튼 태그의 내용을 바꾸려면 .Context() 메서드를 사용해서 바꿉니다. winrt::box_value는 스칼라 값을 가져와 IInspectable에 박싱해서 입력해야 됩니다. C#에서는 암시적으로 boxing해주지만 C++/WinRT는 그렇지 않습니다. 반대로 언박싱을 해야 한다면 winrt::unbox_value 함수를 사용하면 됩니다. 예를들어 myButton 버튼의 Content값을 winrt::hstring으로 가져오려면 winrt::unbox_value<winrt::hstring>(myButton().Content());를 사용해야 합니다.

 

 

 

참고

docs.microsoft.com/ko-kr/windows/uwp/get-started/create-a-basic-windows-10-app-in-cppwinrt

C++/WinRT를 사용하여 'Hello, World!' 앱 만들기 - UWP applications

docs.microsoft.com/ko-kr/windows/uwp/data-binding/

데이터 바인딩 - UWP applications