Angular Domain Model

도메인 모델이라고 쓰고, 데이터의 분리라고 읽어야할 것 같습니다.

지금까지 Budget Component에 데이터를 다 넣어뒀었는데요.

테이블 데이터를 아래와 같이 가지고 있습니다.

export class BudgetComponent implements OnInit{
    ...
    consumptions = [{
        amount: 12000,
        desc: "food"
    },{
        amount: 10000,
        desc: "beverage"
    },{
        amount: 12000,
        desc: "dissert"
    }];
    dataSource = new MatTableDataSource(this.consumptions);
    ...
}

이 부분을 조금씩 덜어내보려고 합니다.

TypeScript는 ECMAScript 2015 문법을 사용할 수 있죠.

계속 사용해오던 export, import가 그에 해당합니다.

src/domain 이라는 폴더를 만듭니다.

Consumption이라는 Module을 아래와 같이 만들어줍니다.

export class Consumption {
    amount: number;
    desc: string;

    constructor (amount:number, desc:string){
        this.amount = amount;
        this.desc = desc;
    }
}

그리고 BudgetComponent에서 아래와 같이 사용합니다.

import { Consumption } from '../domain/consumption';
    ...
    consumptions = [
        new Consumption(12000, "food"),
        new Consumption(10000, "beverage"),
        new Consumption(5000, "dissert")];

    dataSource = new MatTableDataSource(this.consumptions);
    ...

이번엔 consumptions를 분리해볼까요.

날짜별로 소비를 정리한다고 생각하고 만들어봅니다.

역시 Consumption을 사용해줘야하기 때문에 import하구요.

consumption을 추가할 수 있는 method도 만들어줍니다.

import { Consumption } from "./consumption";

export class DailyExpense{
    datetime: Date;
    consumptions: Array;

    constructor(datetime: Date){
        this.datetime = datetime;
        this.consumptions = new Array();
    }

    addConsumption(consumption: Consumption){
        this.consumptions.push(consumption);
    }
}

그러면 DailyExpense를 사용해봅시다.

Consumption을 사용할 때와 동일합니다. 

import { DailyExpense } from '../domain/dailyExpense';
import { Consumption } from '../domain/consumption';

...    
    dailyExpense : DailyExpense;

    dataSource : MatTableDataSource; 
    remain: number;

    ngOnInit(){
        ...
        this.dailyExpense = new DailyExpense(new Date());
        this.dailyExpense
              .addConsumption(new Consumption(12000, "food"))
        this.dailyExpense
              .addConsumption(new Consumption(10000, "beverage"))
        this.dailyExpense
              .addConsumption(new Consumption(5000, "dissert"))
        this.dataSource 
              = new MatTableDataSource(this.dailyExpense.consumptions);
        ...
    }

이번에는 ngOnInit()에서 데이터를 만들어 넣었습니다.

좀 더 복잡해보이지만 유연해졌죠.

결과물은 이전과 동일합니다만...

데이터 변경 및 관리를 개발하기 더 수월해졌습니다.