Lunikism

WPF의 디자인 패턴 중 하나인 MVVM. 이름부터 어렵다.

Model - View - ViewModel의 각 약자로.

쉽게 설명하자면

UI를 담당하는 View (eg. view.XAML)와 코드비하인드를 담당하는 VM(ViewModel)과 데이터 모델이 포함된 Model를 서로 분리하여 개발함으로써 디자인적 요소와 코드쪽 개발을 효율을 높이는 디자인 패턴이다.

MVVM 패턴으로 적용하면서 가장크게 바뀐게 바로 바인딩(Binding)이다.

Binding이라 함은 뜻 그대로 UI의 요소와 코드비하인드의 요소를 하나로 묶어주는 것이다.

자세한 설명은 구글링을 통하면 쉽게 나온다.

MVVM을 구현하는 방법은 여러 방법이 있지만, 프로젝트 규모가 크거나 뷰 갯수가 많아질 경우 처음부터 기틀을 잘 마련해야 나중에 코드를 뒤엎는 불상사를 막을 수 있다.

여기서는 Resource Directory를 이용한 방법을 간단히 적어본다.

1. 프로젝트내에 ResourceDirectory(한국어판에는 리소스사전)을 추가

2. 아래 처럼 DataTemplate를 이용하여 View와 ViewModel을 연결한다.

    <DataTemplate DataType="{x:Type vm:SettingVM}">
        <view:SettingView />
    </DataTemplate>

추가한 ResourceDirectory를 app.xaml에 기입한다.

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Presentations/Views/ResourceDictionary.xaml" />
                
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

3. 실제 해당 뷰를 보여질 영역에는 아래와 같이 추가해준다.

CurrentView는 페이지 또는 UC 등이 보여지는 컨텐츠 영역을 가리키는 ViewModel object이다.

CurrentView에 별도로 선언된 SettingVM instance를 넣어주면 해당 뷰로 전환이 된다.

        public object CurrentView
        {
            get { return _currentView; }
            set
            {
                _currentView = value;
                OnPropertyChanged("CurrentView");
            }
        }

해당 컨텐츠가 보여질 영역은 xaml에서 아래와 같이 입력한다.

 <ContentControl x:Name="Pages" Content="{Binding CurrentView}" />

4. 주의점:

- MainWindow는 Resource Directory에서 따로 선언하지 않고, Datacontext를 통해 vm을 연결한다.

심심풀이로 로또의 추첨결과 정보를 가져오는 프로그램을 작성하려고 한다.

로또복권 운영사인 동행복권 홈페이지에서는 별도의 API를 제공하지 않지만 홈페이지의 소스를 보다보면

아래와 같이 내부에서 결과 정보를 호출하는 구문이 있고, 쿼리 URL을 쉽게 찾을 수 있다.

로또 추첨결과의 회차별 정보를 가져오는 URL은 다음과 같다.

로또 추첨 결과 쿼리 URL: https://www.dhlottery.co.kr/common.do?method=getLottoNumber&drwNo=1119

쿼리의 "drwNo" 값이 회차 이다.

쿼리가 정상적으로 수행되었을때 수신되는 메시지(JSON)는 다음과 같다.

{
   "totSellamnt":111840714000,					//전체 당첨 상금 총액(1등~5등 모든 당첨금액)
   "returnValue":"success",						//요청결과(정상:success, 실패:fail)
   "drwNoDate":"2024-05-11",					//추첨일
   "firstWinamnt":1396028764,					//1등 추첨자의 당첨금액
   "drwtNo6":45,								//6번째 번호
   "drwtNo4":13,								//4번째 번호
   "firstPrzwnerCo":19,							//1등 당첨자 수
   "drwtNo5":20,								//5번째 번호
   "bnusNo":3,									//보너스번호 번호
   "firstAccumamnt":26524546516,				//1등 총 당첨금액(1등 당첨금액 * 1등 당첨자 수)
   "drwNo":1119,								//회차 번호
   "drwtNo2":9,									//2번째 번호
   "drwtNo3":12,								//3번째 번호
   "drwtNo1":1									//1번째 번호
}

JSON 구조로 쉽게 파싱하도록 되어있다.

아래의 당첨결과 상세페이지의 내용가 대조하면 쉬울 듯 하다.

추가로 최신 회차를 구하는 계산식 함수는 다음과 같다,

# 로또 1회차(2002-12-07)기준으로 오늘까지의 회차를 가져오는 함수
def get_last_rounds():
    start_date = datetime.date(2002, 12, 7) #1회 추첨일
    today = datetime.date.today()
    # 주차 계산
    weeks = (today - start_date).days // 7
    return weeks + 1

2002-12-07이 1회 추첨일이므로 이기준으로 오늘까지의 주차수(weeks)를 구하여 +1을 해준다.

ST사의 MCU를 사용하여 개발할 때 필수로 사용되는 ST-LINK/V2의 핀맵이다.

20핀 모두 사용하는 JTAG와 일부 핀만 연결하여 사용하는 SWD 모두 사용할 수 있다.

보드의 소형화 때문인지 20핀 보다는 SWD를 사용하여 4~6핀 정도만 사용하는 듯하다.

VirtualBox에서 Ubuntu를 올리고 각종 패키지 설치를 위해 호스트PC랑 복사 붙여넣기를 해야하는데

VirtualBox의 클립보드 공유 설정까지 해줘도 안될때가 있다.

이때는 VirtualBox 상단 도구메뉴에서 장치(Devices) - 게스트 확장 이미지 CD 삽입을 눌러 패키지를 설치해주면 된다.

WPF 작업시 XAML에서 코드와 속성값을 1:1 시켜주는 Binding 기능은 굉장히 편리한 기능이다.

xaml 상에서는 해당 컨트롤의 속성값에 아래와 같이 Binding을 추가해주면 된다.

<TextBlock Name="textblockGuiVersion" Text="{Binding UI_VERSION, Mode=OneWay}"/>

코드에서는 아래와 같이 INotifyPropertyChanged를 상속 추가한다. 추가하면, OnPropertyChanged 속성이 없다고 에러가 발생한다. 이코드도 함께 추가하여 인터페이스를 구현한다.

    public partial class MainWindow : Window, INotifyPropertyChanged
    {
    }
    
    
    public event PropertyChangedEventHandler PropertyChanged;
    /// </summary>
    /// <param name="propertyName">The property that has a new value.</param>
    protected virtual void OnPropertyChanged(string propertyName)
    {

        PropertyChangedEventHandler handler = this.PropertyChanged;
        if (handler != null)
        {
            var e = new PropertyChangedEventArgs(propertyName);
            handler(this, e);
        }
    }

이후 xaml과 바인딩된 변수의 Property set;에 아래와 같이 추가한다.

private string _strVersionUI = System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.ToString();
public string UI_VERSION { get => _strVersionUI; set { _strVersionUI = value; OnPropertyChanged("UI_VERSION"); } }

일반적으로 정규화되지 않은 프로토콜을 사용하는 통신에 TLV필드를 이용한 데이터 통신을 사용한다.

TLV필드란 Type, Length, Value 이 3가지의 앞자리의 줄임말로, 크기가 가변적(Length)인 값(Value)을 형식(Type)과 함께 정의시킨 필드 구조이다.

이더넷을 이용한 TCP 통신에도 많이 쓰이며, 시리얼통신으로 주변기기 제어에도 많이 사용한다.

일반적으로 개발에 사용되는 패킷의 구조는 크게 헤더(Header), 페이로드(Payload), 체크섬(Checksum) 또는 CRC 필드로 구성된다.

TLV는 적은 메모리 공간으로 가변적인 데이터를 송수신하기 위한 효율적이고, 간단한 구조가 특징이다.