안녕하세요 c# .NET Community Toolkit 프로젝트의 일부인 MVVM Toolkit을 이용해서 WPF 어플리케이션을 만들어보겠습니다.
1. 소개
해당 어플리케이션 만들기는 마이크로소프트의 MVVM 도구 키트 소개 페이지와
MVVM 도구 키트 소개 - Community Toolkits for .NET
MVVM 도구 키트를 시작하고 MVVM 도구 키트에 포함된 API를 시작하는 방법에 대한 개요
learn.microsoft.com
.NET Community Toolkit 프로젝트의 MVVM-Samples을 토대로 작성합니다.
GitHub - CommunityToolkit/MVVM-Samples: Sample repo for MVVM package
Sample repo for MVVM package. Contribute to CommunityToolkit/MVVM-Samples development by creating an account on GitHub.
github.com
현재 해당 Samples 프로젝트에는 WPF 샘플이 존재하지 않지만, UWP 샘플이 존재하기에 해당 샘플을 WPF 사용에 맞추어 변경하며 샘플 어플리케이션을 만들 예정입니다.
제가 만들 어플리케이션은 간단한 TODO 리스트를 생성하고 해당 리스트를 조회 및 수정을 하는 어플리케이션입니다.
어플리케이션을 만들기에 앞서 화면구성도, 피그마를 통한 UI 를 작성하고 DB를 이용하기위해 ERD와 내부 통신을 위한 API 문서까지 작성한 후 실제 소스 코딩에 들어갈 예정입니다.
실제 현업에서는 더 상세한 정리가 필요하지만 미니 프로젝트이기 때문에 간략화해서 정리할 예정입니다.
2. 화면 정리
어플리케이션을 만들기 앞서 해당 어플리케이션의 메뉴를 구성합니다.
저는 스프레드시트를 이용해 TODO 리스트에 필요하다고 생각되는 화면과 각 화면의 기능을 정리했습니다.
화면에 대해 실제 필요한 버튼이나 목록 혹은 입력 칸을 더 자세하게 정리합니다.
이를 통해 각 화면과 화면에 들어갈 구성을 대충이나마 알 수 있게 됬습니다.
해당 내용은 아래의 링크를 통해 스프레드 시트에서 확인하실 수 있습니다.
TODOLIST
화면정리 TODO LIST 대메뉴,중메뉴,소메뉴,비고 공통 화면,기본 화면,1. 프로그램 크기는 900x700 으로 고정한다. 2. 프로그램 상단바를 None 상태로 변경한 후, 별도 닫기 버튼을 제공한다. 프로그램 메
docs.google.com
3. UI 정리
이제 이 화면을 토대로 실제 생성될 화면을 간단하게 피그마를 통해 구성해보겠습니다.
상단 화면 정리를 기준으로 피그마를 이용해 화면을 구성했습니다.
하단 링크를 통해 제가 생성한 피그마를 확인할 수 있습니다.
Figma
Created with Figma
www.figma.com
이제 거의 마지막 단계입니다.
4. ERD 생성
DB를 만들기 위해 ERD를 작성 한 후 데이터 베이스 명세서를 작성할겁니다.
저는 ERDCLOUD를 사용해서 ERD를 작성하도록 하겠습니다.
워낙 간단한 프로그램이다보니 나오는게 없네요
tbl_todoList 테이블의 pk는 todoCode와 userCode 2개를 합쳐서 생성할 예정입니다.
해당 기능은 erdcloud가 지원하지 않기 때문에 외래키로 표현되었지만 실제 외래키는 사용하지 않을 예정입니다.
해당 erdcloud의 링크는 하단을 통해 확인하실 수 있습니다.
TODO LIST
Draw ERD with your team members. All states are shared in real time. And it's FREE. Database modeling tool.
www.erdcloud.com
이제 프로그램을 만들기 위한 사전 준비는 끝났고 CommunityToolkit.Mvvm을 이용하여 C# 프로그램을 작성하는 부분은 다음 게시글에서 이어가도록 하겠습니다.
'c# > 프로젝트' 카테고리의 다른 글
| CommunityToolkit.Mvvm 이용한 WPF 어플리케이션 만들기 2. (1) | 2024.04.25 |
|---|