[MAUI 활용] BookStore 만들기 (1) – 프로젝트 생성

이번 포스팅부터는 몇차례에 걸쳐  MAUI 를 활용하여 아주 간단한 BookStore 앱을 만들어보겠습니다. MAUI 에 대한 기본 구조를 파악하는데 도움이 될 것이라고 생각됩니다. 이번  글에서는 신규로 MAUI 프로젝트를 생성하고 기본 패키지 구조까지 생성하도록 하겠습니다.  해당 과정은 VisualStudio 2022 와 .NET 8 을 이용하였습니다. .

새 프로젝트 생성

신규프로젝트를 선택하고 프로젝트 형식을 “.NET MAUI 앱” 으로 선택합니다.

프로젝트명을 적절하게 설정합니다. 여기서는 “MyBookStore” 라고 하였습니다. 

사용할 프레임워크를 선택합니다.

모든 과정이 완료되었으면, “만들기” 버튼을 클릭하여 신규 프로젝트를 생성합니다. 

폴더 구성

프로젝트 생성이 완료 되었으면, 솔루션 탐색기를 사용하여 추가 폴더를 생성합니다. 소스 폴더에서 추가된 폴더는 코드내에서 Namespace 이름으로 활용하게 됩니다.  여기서는 Views, ViewModels, Models, Services 폴더를 생성하였습니다. 

각 폴더의 역할은 아래와 같습니다. 

Views 폴더

Views 폴더는 UI 요소와 관련된 모든 파일을 포함합니다. 이곳에 저장된 파일들은 주로 XAML 파일과 그에 관련된 코드-비하인드 파일(.xaml.cs)을 가집니다.

• 역할:
  • 사용자 인터페이스(UI)를 정의합니다.
  • 사용자가 상호작용할 화면의 레이아웃과 UI 요소들을 배치합니다.
  • ViewModel에 데이터 바인딩하여, 사용자의 상호작용에 따라 데이터를 표시하고 업데이트합니다.
  • View는 비즈니스 로직을 몰라야 하며, 데이터를 표시하는 역할만 합니다.
• 예시 파일:
  • MainPage.xaml (주요 화면 레이아웃)
  • SettingsPage.xaml (설정 화면 레이아웃)

ViewModels 폴더

ViewModels 폴더는 UI와 비즈니스 로직을 연결하는 역할을 합니다. ViewModel은 Model의 데이터를 View에 표시하는 방법을 정의하고, UI에서 발생한 이벤트를 처리합니다.

• 역할:
  • Model의 데이터를 가공하여 View에 전달합니다.
  • 사용자 상호작용을 처리하고, 필요한 경우 Model이나 Service를 호출하여 데이터를 변경하거나 로드합니다.
  • INotifyPropertyChanged 인터페이스를 구현하여 바인딩된 View에 변경 사항을 알림으로써 UI 업데이트를 트리거합니다.
  • View와 Model 사이에서 데이터와 이벤트 흐름을 중재합니다.
• 예시 파일:
  • MainPageViewModel.cs (주 화면에서의 비즈니스 로직)
  • SettingsViewModel.cs (설정 페이지에 필요한 로직)

Models 폴더

Models 폴더는 애플리케이션의 비즈니스 로직과 데이터 구조를 정의합니다. Model은 ViewModel이 사용하는 데이터를 나타내며, 실제 애플리케이션의 중요한 도메인 개체들을 포함합니다.

• 역할:
  • 애플리케이션의 핵심 데이터와 비즈니스 규칙을 포함합니다.
  • 데이터 검증, 규칙 적용, 상태 변경 등의 도메인 로직을 처리합니다.
  • 직접적으로 UI와 상호작용하지 않으며, ViewModel을 통해 간접적으로 사용됩니다.
  • 데이터를 저장하거나 불러오는 역할을 하지 않으며, 이는 보통 Service 계층에서 처리됩니다.
• 예시 파일:
  • User.cs (사용자 데이터 및 비즈니스 로직)
  • Order.cs (주문 데이터 및 처리 로직)

Services 폴더

Services 폴더는 데이터 영속성(저장, 불러오기) 및 외부 시스템과의 통신을 담당합니다. 애플리케이션에서 필요한 외부 리소스(DB, 웹 API 등)와의 상호작용을 처리하며, 이를 통해 Model과 ViewModel이 필요한 데이터를 제공합니다.

• 역할:
  • 데이터베이스 작업, 파일 입출력, 웹 서비스 호출 등 데이터의 저장, 로드 및 통신 작업을 처리합니다.
  • ViewModel에서 호출되어 Model 데이터를 영구적으로 저장하거나 데이터를 가져오는 작업을 수행합니다.
  • 보통 Repository 패턴이나 서비스 계층으로 구현됩니다.
• 예시 파일:
  • UserService.cs (사용자 데이터의 저장 및 불러오기)
  • ApiService.cs (외부 API와의 통신 로직)

요약

• Views: UI와 관련된 파일(XAML)들이 위치하며, 사용자 인터페이스와 데이터 바인딩을 담당합니다.
• ViewModels: View와 Model 사이의 중재자 역할로, 데이터를 가공하여 View에 제공하고 사용자 상호작용을 처리합니다.
• Models: 데이터와 도메인 로직을 포함하는 객체로, 애플리케이션의 핵심 비즈니스 규칙을 처리합니다.
• Services: 데이터 저장, 외부 서비스와의 통신 등을 담당하며, ViewModel과 함께 동작하여 데이터의 영속성을 관리합니다.

이러한 구조는 책임 분리와 유지보수성을 높이며, 애플리케이션의 확장을 더 쉽게 만들어 줍니다.각 폴더에는 각 폴더 이름에 맞는 클래스를 생성할 예정입니다. 우선 여기까지 진행하고 다음 포스팅에서 계속하겠습니다.