[타입스크립트] 절차지향적 커피머신 vs 객체지향적 커피머신

<절차지향적 커피머신 설계>

  type CoffeeCup = {
    shots: number;
    hasMilk: boolean;
  };
  const BEANS_GRAMM_PER_SHOT: number = 7;
  let coffeeBeans: number = 0;
  function makeCoffee(shots: number): CoffeeCup {
    if (coffeeBeans < shots * BEANS_GRAMM_PER_SHOT) {
      throw new Error("Not enough coffee beans!");
    }
    coffeeBeans -= shots * BEANS_GRAMM_PER_SHOT;
    return {
      shots,
      hasMilk: false,
    };
  }

  function addCoffeeBeans(shots: number) {
    coffeeBeans = coffeeBeans += BEANS_GRAMM_PER_SHOT * shots;
  }

  addCoffeeBeans(2);
  let coffee = makeCoffee(2);
  console.log(coffee);
  console.log("남은 커피콩: " + coffeeBeans + "개");

 

 

<객체지향적 커피머신 설계>

- 커피머신 클래스 필요 (프로퍼티: 커피빈즈, 함수: makeCoffee)

- 클래스 안 프로퍼티에는 let, const, function 키워드 불필요

- 클래스 바로 안에 있는 멤버 변수에 접근할 때는 this.

- 클래스에 construtor는 언제나 있어야 한다. 클래스로 인스턴스를 만들 때, 항상 호출되는 함수이다.

const coffeeMaker = new coffeeMachine(); //이 괄호가 바로 생성자를 호출하는 것.

 <예시1>

  type CoffeeCup = {
    shots: number;
    hasMilk: boolean;
  };

  class coffeeMachine {
    BEANS_GRAMM_PER_SHOT: number = 7;
    coffeeBeans: number = 0;

    constructor() {
      //
    }

    makeCoffee(shots: number): CoffeeCup {
      if (this.coffeeBeans < shots * this.BEANS_GRAMM_PER_SHOT) {
        throw new Error("Not enough coffee beans!");
      }
      this.coffeeBeans -= shots * this.BEANS_GRAMM_PER_SHOT;
      return {
        shots,
        hasMilk: false,
      };
    }

    addCoffeeBeans(shots: number) {
      this.coffeeBeans += this.BEANS_GRAMM_PER_SHOT * shots;
    }
  }

  const coffeeMaker = new coffeeMachine();
  console.log(coffeeMaker); //coffeeMachine { BEANS_GRAMM_PER_SHOT: 7, coffeeBeans: 24 }
  coffeeMaker.addCoffeeBeans(2);
  let order1 = coffeeMaker.makeCoffee(2);
  console.log(order1);    //{ shots: 2, hasMilk: false }
  let order2 = coffeeMaker.makeCoffee(2);
  console.log(order2);    //Error: Not enough coffee beans!

 

<예시2>

  type CoffeeCup = {
    shots: number;
    hasMilk: boolean;
  };

  class coffeeMachine {
    BEANS_GRAMM_PER_SHOT: number = 7;
    coffeeBeans: number = 0;

    constructor(coffeeBeans: number) {
      this.coffeeBeans = coffeeBeans;
    }

    makeCoffee(shots: number): CoffeeCup {
      if (this.coffeeBeans < shots * this.BEANS_GRAMM_PER_SHOT) {
        throw new Error("Not enough coffee beans!");
      }
      this.coffeeBeans -= shots * this.BEANS_GRAMM_PER_SHOT;
      return {
        shots,
        hasMilk: false,
      };
    }

    addCoffeeBeans(shots: number) {
      this.coffeeBeans += this.BEANS_GRAMM_PER_SHOT * shots;
    }
  }

  const coffeeMaker = new coffeeMachine(24);
  console.log(coffeeMaker); //coffeeMachine { BEANS_GRAMM_PER_SHOT: 7, coffeeBeans: 24 }
  let order1 = coffeeMaker.makeCoffee(2);
  console.log(order1); //{ shots: 2, hasMilk: false }
  let order2 = coffeeMaker.makeCoffee(2);
  console.log(order2); //Error: Not enough coffee beans!

 

그런데, 위의 예시들에 따르면

    BEANS_GRAMM_PER_SHOT: number = 7; //클래스 내에서 변치않을 고정 값

클래스 내부에 변치않을 고정값이 있는데, 이러한 것들을 멤버 변수로 작성하게 되면

클래스를 이용해서 찍어내는 오브젝트마다 여러 클래스를 찍어낼 때마다 똑같은 데이터가 중복해서 들어가게 되는 셈이다.

<예시>

  console.log(coffeeMaker1); //coffeeMachine { BEANS_GRAMM_PER_SHOT: 7, coffeeBeans: 24 }
  console.log(coffeeMaker2); //coffeeMachine { BEANS_GRAMM_PER_SHOT: 7, coffeeBeans: 32 }
  console.log(coffeeMaker3); //coffeeMachine { BEANS_GRAMM_PER_SHOT: 7, coffeeBeans: 7 }

  이처럼 클래스에서 한번 정의되어 지고, 클래스를 이용한 오브젝트 사이에서 다... 공유가 될 수 있는 프로퍼티는 평범한 멤버 변수로 두게되면 오브젝트를 찍어낼 때마다 중복적으로 데이터가 생성되기 때문에 메모리 낭비가 발생한다.

이럴 때, static 키워드를 붙이게 되면 class level로 지정된다. (클래스 level이라고 하는 것은 클래스와 연결이 되어 있기 때문에 오브젝트마다 생성되지 않는다~) 그리고 이것들을 사용할 때는 this.(오브젝트 레벨) 이 아니라 클래스 레벨에 있는 것이기 때문에 this.를 쓰지 않고 대신에 클래스이름. 을 쓴다.

(static 키워드를 부이지 않으면 inctance(object) level로 지정된다.)

 

  type CoffeeCup = {
    shots: number;
    hasMilk: boolean;
  };

  class coffeeMachine {
    static BEANS_GRAMM_PER_SHOT: number = 7;
    coffeeBeans: number = 0;

    constructor(coffeeBeans: number) {
      this.coffeeBeans = coffeeBeans;
    }

    makeCoffee(shots: number): CoffeeCup {
      if (this.coffeeBeans < shots * coffeeMachine.BEANS_GRAMM_PER_SHOT) {
        throw new Error("Not enough coffee beans!");
      }
      this.coffeeBeans -= shots * coffeeMachine.BEANS_GRAMM_PER_SHOT;
      return {
        shots,
        hasMilk: false,
      };
    }

    addCoffeeBeans(shots: number) {
      this.coffeeBeans += coffeeMachine.BEANS_GRAMM_PER_SHOT * shots;
    }
  }

  const coffeeMaker1 = new coffeeMachine(24);
  const coffeeMaker2 = new coffeeMachine(32);
  const coffeeMaker3 = new coffeeMachine(7);

  console.log(coffeeMaker1); //coffeeMachine { coffeeBeans: 24 }
  console.log(coffeeMaker2); //coffeeMachine { coffeeBeans: 32 }
  console.log(coffeeMaker3); //coffeeMachine { coffeeBeans: 7 }

즉, coffeeMachine.BEANS_GRAMM_PER_SHOT 라고 지정해줌으로써,

클래스단에 있는 BEANS_GRAMM_PER_SHOT에 접근하게 되는 것이다.

 

  console.log(coffeeMaker1); //coffeeMachine { coffeeBeans: 24 }
  console.log(coffeeMaker2); //coffeeMachine { coffeeBeans: 32 }
  console.log(coffeeMaker3); //coffeeMachine { coffeeBeans: 7 } 

 

그래서 콘솔로그를 살펴보면 BEANS_GRAMM_PER_SHOT: 7라는 데이터가 더이상 중복 생성되지 않는다는 것을 확인할 수 있다. 

 

 

 

---

이처럼 클래스는 관련된 속성들과 함수들을 묶어서 어떤 모양의 데이터가 될 것인지 정의하는 것이다.

이 정의된 클래스를 통해 인스턴스(객체)를 찍어낼 수 있다.

이때 오브젝트마다 달라질 변수들은 오브젝트레벨로,

같은 클래스 출신이면 변치않고 공통될 변수들은 클래스레벨(static 키워드 붙여주기)로 설정해줄 수 있다. 

이러한 static 키워드는 멤버 변수 뿐만이 아니라 함수에서도 적용된다.

  type CoffeeCup = {
    shots: number;
    hasMilk: boolean;
  };

  class coffeeMachine {
    static BEANS_GRAMM_PER_SHOT: number = 7;
    coffeeBeans: number = 0;

    constructor(coffeeBeans: number) {
      this.coffeeBeans = coffeeBeans;
    }

    static makeMachine(coffeeBeans: number): coffeeMachine {
      return new coffeeMachine(coffeeBeans);
    }

    makeCoffee(shots: number): CoffeeCup {
      if (this.coffeeBeans < shots * coffeeMachine.BEANS_GRAMM_PER_SHOT) {
        throw new Error("Not enough coffee beans!");
      }
      this.coffeeBeans -= shots * coffeeMachine.BEANS_GRAMM_PER_SHOT;
      return {
        shots,
        hasMilk: false,
      };
    }

    addCoffeeBeans(shots: number) {
      this.coffeeBeans += coffeeMachine.BEANS_GRAMM_PER_SHOT * shots;
    }
  }

  const coffeeMaker1 = new coffeeMachine(24);
  const coffeeMaker2 = new coffeeMachine(32);
  const coffeeMaker3 = new coffeeMachine(7);

  console.log(coffeeMaker1); //coffeeMachine { coffeeBeans: 24 }
  console.log(coffeeMaker2); //coffeeMachine { coffeeBeans: 32 }
  console.log(coffeeMaker3); //coffeeMachine { coffeeBeans: 7 }

  console.log(coffeeMachine.makeMachine(2)); //coffeeMachine { coffeeBeans: 2 }

 

<돋보기>

constructor을 호출하지 않고 커피기계를 만들고 싶다면,

    static makeMachine(coffeeBeans: number): coffeeMachine {
      return new coffeeMachine(coffeeBeans);
    }
    
    console.log(coffeeMachine.makeMachine(2)); //coffeeMachine { coffeeBeans: 2 }

위와 같은 함수들은 클래스 내부의 어떠한 속성값도 필요치않기 때문에 static을 붙여주면 된다.

그러면 외부에서도 클래스를 만들지 않고 

coffeeMachine.makeMachine(2)

이처럼 클래스 단에서 호출하여 간단하게 커피머신을 만들 수 있게 된다. 

static 키워드가 없으면 당연히 클래스 단에서 호출할 없고 찍어 만든 오브젝트 단에서 호출해야한다.

 

자바스크립트에서는 Math 클래스가 좋은 예시이다.

const math = new Math(); 라고 굳이 찍어내지 않고

바로

Maht.abs라고 부를 수 있는 이유는 클래스 단(레벨)이기 때문이라는 것을 유추할 수 있다.

 

<최종 코드>

그러나 이 코드상의 클래스는 아직 

  type CoffeeCup = {
    shots: number;
    hasMilk: boolean;
  };

  class coffeeMachine {
    static BEANS_GRAMM_PER_SHOT: number = 7;
    coffeeBeans: number = 0;

    constructor(coffeeBeans: number) {
      this.coffeeBeans = coffeeBeans;
    }

    static makeMachine(coffeeBeans: number): coffeeMachine {
      return new coffeeMachine(coffeeBeans);
    }

    makeCoffee(shots: number): CoffeeCup {
      if (this.coffeeBeans < shots * coffeeMachine.BEANS_GRAMM_PER_SHOT) {
        throw new Error("Not enough coffee beans!");
      }
      this.coffeeBeans -= shots * coffeeMachine.BEANS_GRAMM_PER_SHOT;
      return {
        shots,
        hasMilk: false,
      };
    }

    addCoffeeBeans(shots: number) {
      this.coffeeBeans += coffeeMachine.BEANS_GRAMM_PER_SHOT * shots;
    }
  }

  const coffeeMaker1 = new coffeeMachine(24);
  const coffeeMaker2 = new coffeeMachine(32);
  const coffeeMaker3 = new coffeeMachine(7);

  console.log(coffeeMaker1); //coffeeMachine { coffeeBeans: 24 }
  console.log(coffeeMaker2); //coffeeMachine { coffeeBeans: 32 }
  console.log(coffeeMaker3); //coffeeMachine { coffeeBeans: 7 }

  const coffeeMaker4 = coffeeMachine.makeMachine(2);

  console.log(coffeeMaker4); //coffeeMachine { coffeeBeans: 2 }

캡슐화가 되어 있지 않다.

  const coffeeMaker1 = new coffeeMachine(24);

  coffeeMaker1.coffeeBeans = -1000;

  console.log(coffeeMaker1); //coffeeMachine { coffeeBeans: -1000 }

위에 보이다싶이, 클래스 외부에 찍어낸 오브젝트 단에서 해당 오브젝트 내부 변수값을 변경할 수 있다.

-1000이라는 이상한 값을 넣어도 제약사항이 없어서 변경이 그래도 적용된 모습.

이처럼 외부에서 나의 오브젝트 상태를 유효하지 않은 상태로 만들어버린 위험한 상황이다.

그러므로, 캡슐화를 통해서 외부에서 새로 쓰는 것을 막아주어야만 한다.

//private,

//private,

//protected

등의 키워드들을 이용해서 다양한 레벨의 정보들을 은닉화할 수 있다.

 

이러한 캡슐화, 은닉화 처리는 다음 포스팅에서 다루도록 한다.