6.2 WeatherApp - Model

1. MVVM - Model

1.

MVVC 패턴은 Model, View, ViewModel 로 소스코드의 역할을 분할한 것입니다.

언제나 하는 이야기지만, 프로그램은 '데이터'와 '로직' 단 두가지만으로 이루어집니다.

기본 자료형 → 복합 자료형 → 사용자 정의 자료형(구조체) → 클래스(구조체 + 함수) > → Model

2.

좀 더 단순하게 생각합시다.

프로그램은, 데이터와 로직으로 이루어집니다.

Model은 자료형입니다. ViewModel은 로직입니다.

C언어에서, 기본적인 자료형과 콘솔 출력 로직만으로 프로그램을 구현습니다.

WPF에서도 크게 다르지 않습니다.

Model과 ViewModel으로 구현하고, UI대신 콘솔에 출력하면 C언어 프로그래밍과 동일합니다.

다른점은, 콘솔 대신 View라는 UI로 ViewModel의 로직 결과가 출력되는 점입니다.

3.

두 값의 교환 구조를 구현하는 방법을 기억하시나요?

A, B 라는 두 값을 교환하려면 C라는 임시 공간이 필요하고

A와 B를 연결하는 기술

B와 C를 연결하는 기술

C와 A를 연결하는 기술

이 추가적으로 배워야 하는 점입니다.

MVVC 패턴도 마찬가지 입니다.

Model과 ViewModel을 연결하는 기술

ViewModel과 View를 연결하는 기술

View와 Model을 연결하는 기술

들을 추가적으로 배워야 합니다.

4.

먼저, MVVM의 Model 을 만들어 보겠습니다.

API를 통해 가져 올 Json 형태의 데이터를 기준으로 Model을 생성해 봅니다.

"API를 통해 응답받은 데이터들"을 "하나의 자료형"으로 만든다고 생각하세요.

5. 응답받을 API 사용 유형

AccuWeather APIs > API reference > Location API > Autocomplete search

AccuWeather APIs > API reference > Current Conditions API > Current Conditions

2. 프로젝트 생성

3. Model 폴더 추가

4. Json 에서 City Class 자료형 생성하기 - Location API 응답 데이터 자료형

*언제나 하는 이야기지만, 프로그램은 '데이터'와 '로직' 단 두가지만으로 이루어집니다.

기본 자료형 → 복합 자료형 → 사용자 정의 자료형(구조체) → 클래스(구조체 + 함수) > → Model

1. Model 폴더에 "City 클래스" 자료형 추가

2.AccuWeather API 에서 지역 정보를 검색 결과 API 가져오기

AccuWeather APIs > API reference > Location API > Autocomplete search > Json

[
  {
    "Version": 1,
    "Key": "223627",
    "Type": "City",
    "Rank": 21,
    "LocalizedName": "광주광역시",
    "Country": {
      "ID": "KR",
      "LocalizedName": "대한민국"
    },
    "AdministrativeArea": {
      "ID": "29",
      "LocalizedName": "광주시"
    }
  },
  {
    "Version": 1,
    "Key": "223637",
    "Type": "City",
    "Rank": 42,
    "LocalizedName": "광주시",
    "Country": {
      "ID": "KR",
      "LocalizedName": "대한민국"
    },
    "AdministrativeArea": {
      "ID": "41",
      "LocalizedName": "경기도"
    }
  },
  {
    "Version": 1,
    "Key": "2516465",
    "Type": "City",
    "Rank": 75,
    "LocalizedName": "광주 촌",
    "Country": {
      "ID": "TW",
      "LocalizedName": "대만"
    },
    "AdministrativeArea": {
      "ID": "TPE",
      "LocalizedName": "타이베이 시"
    }
  }
]

3. Json을 Class 자료형으로 변환을 위해, JSON Utils 웹페이지로 이동

① 변환 대상 언어를 설정하고

② 클래스 이름을 설정하고

③ Json 코드를 붙여 넣습니다.

④ 변환을 시작하면, ⑤아래에 C# Class Object 코드를 확인 할 수 있습니다.

⑥ Json 에서 변환한 City 클래스 C# 코드를 복사합니다.

4. Model로 사용할 City 클래스 생성

⑦ 복사한 코드를 붙여넣습니다.

⑧ Country와 AdministrativeArea 는 중복되는 구조입니다. 제거합니다.

⑨ AdministrativeArea 클래스명을 Area변경하고, ⑩ 반영합니다.

public class Area
{
    public string ID { get; set; }
    public string LocalizedName { get; set; }
}

public class City
{
    public int Version { get; set; }
    public string Key { get; set; }
    public string Type { get; set; }
    public int Rank { get; set; }
    public string LocalizedName { get; set; }
    public Area Country { get; set; }
    public Area AdministrativeArea { get; set; }
}

5. Model 이해

생성한 City 클래스와 Model 용어 간의 관계를 이해합니다.

5. Json 에서 City Class 자료형 생성하기 - CurrentCondition API 응답 데이터 자료형

"Weather.cs 클래스" 클래스 파일을, 위와 동일한 과정으로 생성합니다.

1. Model 폴더에 "Weather 클래스" 자료형 추가

2. AccuWeather API 에서 지역의 현재 날시 정보를 검색 결과 API 가져오기

AccuWeather APIs > API reference > Current Conditions API > Current Conditions > Json 가져오기

[
  {
    "LocalObservationDateTime": "2025-03-26T10:57:00+09:00",
    "EpochTime": 1742954220,
    "WeatherText": "뿌연 햇빛",
    "WeatherIcon": 5,
    "HasPrecipitation": false,
    "PrecipitationType": null,
    "IsDayTime": true,
    "Temperature": {
      "Metric": {
        "Value": 19.5,
        "Unit": "C",
        "UnitType": 17
      },
      "Imperial": {
        "Value": 67,
        "Unit": "F",
        "UnitType": 18
      }
    },
    "MobileLink": "http://www.accuweather.com/ko/kr/gwangju/223627/current-weather/223627",
    "Link": "http://www.accuweather.com/ko/kr/gwangju/223627/current-weather/223627"
  }
]

3. Json을 Class 자료형으로 변환을 위해, JSON Utils 웹페이지로 이동 <<

Json을 Class 자료형으로 변환합니다.

    public class Metric
    {
        public double Value { get; set; }
        public string Unit { get; set; }
        public int UnitType { get; set; }
    }

    public class Imperial
    {
        public int Value { get; set; }
        public string Unit { get; set; }
        public int UnitType { get; set; }
    }

    public class Temperature
    {
        public Metric Metric { get; set; }
        public Imperial Imperial { get; set; }
    }

    public class RootObject
    {
        public DateTime LocalObservationDateTime { get; set; }
        public int EpochTime { get; set; }
        public string WeatherText { get; set; }
        public int WeatherIcon { get; set; }
        public bool HasPrecipitation { get; set; }
        public object PrecipitationType { get; set; }
        public bool IsDayTime { get; set; }
        public Temperature Temperature { get; set; }
        public string MobileLink { get; set; }
        public string Link { get; set; }
    }

4. Model로 사용할 CurrentConditions 클래스 자료형 생성

Metric과 Imperial은 중복되는 구조입니다. 제거합니다.

Imperial 클래스명을 Units로 변경하고, 반영합니다.

public class Units
{
    public int Value { get; set; }
    public string Unit { get; set; }
    public int UnitType { get; set; }
}

public class Temperature
{
    public Units Metric { get; set; }
    public Units Imperial { get; set; }
}

public class CurrentConditions
{
    public DateTime LocalObservationDateTime { get; set; }
    public int EpochTime { get; set; }
    public string WeatherText { get; set; }
    public int WeatherIcon { get; set; }
    public bool HasPrecipitation { get; set; }
    public object PrecipitationType { get; set; }
    public bool IsDayTime { get; set; }
    public Temperature Temperature { get; set; }
    public string MobileLink { get; set; }
    public string Link { get; set; }
}

5. Model 이해

생성한 City 클래스와 Model 용어 간의 관계를 이해합니다.

6. 소스코드

WeatherApp - Model.zip

티스토리툴바