[타입스크립트] 객체지향의 꽃 composition(부제: 상속의 문제점)

 

 

 Favor Composition over inheritance 

 

"상속 대신에 컴포지션(뜻: 구성요소들, 구성)을 더 선호하세요."

 

 

 

 

타입스크립트 OOP의 꽃, composition을 다루기 전에 상속의 문제점에 대해서 먼저 알 필요가 있다.

미리 말하자면, composition은 복잡하게 상속의 수직 구조가 길어지는 대신에 상속의 레벨을 한 단계로만 유지할 수 있도록 도와주는 기법이다.

문제점도 미리 말하자면, composition용으로 가져다 쓰는 클래스와 가져오는 클래스 사이의 커플링이 너무 심하다는 점이 있다.( 가져다 쓰는 클래스를 변경하거나 다른 클래스로 바꾸고 싶다면, 가져다 쓰는 클래스와 연결된 모든 클래스에 들어가서 코드를 업데이트해야 한다.-> 더 확장이 쉽고 유연한 테크닉은 다음 포스팅을 보면된다(강력한 인터페이스를 이용한 전략패턴))

 

<상속의 문제점>

족보가 꼬인다...

상속의 깊이가 너무 깊어져서 조직도가 커지다보면 관계성이 복잡해질 수 있다.

 

 

커피머신을 상속받은 카페라떼머신과 소금커피머신이 있다.

그런데 소금카페라떼머신이 필요해지면? 

(다행스럽게도) 타입스크립트에서는 이러한 죽음의 다이아몬드 상속 구조를 막고 있다.

 

위와 같은 죽음의 다이아몬드 상속구조가 막힌 이유는 본 포스팅 참고(https://rainbowcode.tistory.com/174)(c#예제이긴 하나, 어차피 타입스크립트 개발주축이 C#개발주축이라서 OOP 언어 철학이 상당히 유사다고 보면 되므로, 독해에 어려움은 없을 것이다. 

타입스크립트

위키백과
멀티 패러다임: 함수형, 제네릭, 명령형, 객체 지향
마이크로소프트
		덕 타이핑, gradual, structural[4]
		아파치 라이선스 2.0
		.ts, .tsx
		www.typescriptlang.org

타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 Anders Hejlsberg가 개발에 참여한다.[5] 클라이언트 사이드와 서버 사이드를 위한 개발에 사용할 수 있다.

타입스크립트는 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어이다.[6] 자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작한다.

타입스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행할 수 있다.

타입스크립트는 모든 운영 체제, 모든 브라우저, 모든 호스트에서 사용 가능한 오픈 소스이다.

)

 

각설하고  

이제 커피가 점점 더 많아지면?

프레첼 커피도 새로 선보였는데 반응이 좋아서

우유가 들어간 프레첼 커피도 개발하고 또 반응이 터져서

우유가 들어간 프레첼 커피에 소금도 뿌려서 판매하고 싶다면?

계속 아래로 상속시켜줘야 할까? 그래서 새로 만들어진 커피머신들 때문에 족보가 끝없이 길어져서 아래로 내려가게 될까?

본격적으로 족보가 꼬이게 된다.

상속이 문제라는 것이 아니라 모든 문제를 상속으로 풀려고 하면 꼬인다는 뜻이다.

(상속은 코드 중복을 없앰과 동시에 다형성 구현을 위한 필수요소 중 하나이다)

 

 

특히나 상속은 위에서 아래로 수직적으로 관계가 형성된다.

이러한 상속의 치명적인 문제점은 개발자가 어떤 부모클래스의 행동을 수정하게 되면 

이 수정된 사항때문에 상속받는 모~든 자식 클래스들이 영향을 받을 수밖에 없는 구조이다.

(위에서 문제가 터져서 손보면 아래도 터져서 일일히 찾아가서 고쳐줘야 하는 구조)

 

이러한 상속의 문제점들 때문에 상속이 불필요해지는 선이 오면, 컴포지션을 사용하는 것이 더 좋다!

 

 

 

 

<모든 것을 뒤엎는 컴포지션, Favor Composition over inheritance>

 

 Favor Composition over inheritance 

"상속 대신에 컴포지션(뜻: 구성요소들, 구성)을 더 선호하세요."

 

레고성을 쌓을 때마다 필요한 부품들을 하나씩 꽂아서 조립해나가는 것 처럼 컴포지션도 하나씩 꽂아나가는 것을 말한다.

컴포지션을 통해 소금카페라떼머신을 만들어본다.

 

이러한 컴포지션을 어떻게 구현할까 

 

 

아래 소스코드(커피머신, 커피머신을 상속한 카페라떼머신, 커피머신을 상속한 소금커피머신 구현되어있음)에

소금카페라떼머신(그러니까 커피도 내려야하고, 데운 우유도 필요하고, 소금도 한꼬집 넣은...) 을 새로 추가하고 싶다면?

//   //커피머신 만들기
type CoffeeCup = {
  orderShot: number;
  hasMilk?: boolean;
  hasSalt?: boolean;
};

interface CoffeeMaker {
  makeCoffee(shots: number): CoffeeCup;
}

// CoffeeMaker 인터페이스를 구현하는 CoffeMachine 클래스이다.
class CoffeMachine implements CoffeeMaker {
  protected static ONE_SHOT_CAPSULE: number = 3;
  protected static ONE_CUP_WATER: number = 10;

  static makeMachine(beans: number, water: number): CoffeMachine {
    return new CoffeMachine(beans, water);
  }

  public constructor(
    protected capsule: number = 3,
    protected water: number = 10
  ) {}

  makeCoffee(orderShot: number): CoffeeCup {
    this.checkMaterials(orderShot);
    console.log("캡슐쓰기 전 " + this.capsule);
    this.useCapsule(orderShot);
    console.log("물쓰기 전 " + this.water);
    this.useWater();
    this.heatWater();
    return this.extract(orderShot);
  }

  protected checkMaterials(orderShot: number) {
    if (this.capsule < orderShot * CoffeMachine.ONE_SHOT_CAPSULE) {
      throw new Error(`커피캡슐 부족!!! 현재 보유 캡슐 : ${this.capsule}`);
    }
    if (this.water < CoffeMachine.ONE_CUP_WATER) {
      throw new Error(`물 부족!!! 남은 물 ${this.water}`);
    }
  }
  clean(): void {
    console.log("커피머신 행구는 중!");
  }

  private extract(shots: number): CoffeeCup {
    return {
      orderShot: shots,
      hasMilk: false,
    };
  }
  private heatWater() {
    console.log("물 끓이는 중...");
  }

  private useCapsule(shot: number) {
    console.log("캡슐쓰러왔습니다.");
    this.capsule -= shot * CoffeMachine.ONE_SHOT_CAPSULE;
    console.log("캡슐 쓰고 난 후" + this.capsule);
  }

  protected useWater() {
    console.log("물쓰러왔습니다.");
    this.water -= CoffeMachine.ONE_CUP_WATER;
    console.log("물쓰고 난 후 " + this.water);
  }

  addCapsule(capsule: number) {
    this.capsule += capsule;
  }

  fulfillWater(water: number) {
    this.water += water;
  }

  get Water(): number {
    return this.water;
  }

  get Capsule(): number {
    return this.capsule;
  }
}

// CoffeMachine 클래스를 상속받은 CafeLatteMachine 클래스이다.

class CafeLatteMachine extends CoffeMachine {
  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot); //기본적인 캡슐 소비, 물 소비, 물 가열 다 끝나고 완성된 커피가 반환

    //부모에서 받아온 커피 완성품에 우유만 부어주자!!!
    this.steamMilk();
    this.pourMilk();

    return {
      ...coffee,
      hasMilk: true,
    };
  }

  private steamMilk(): void {
    console.log("우유 데우는 중...");
  }

  private pourMilk() {
    console.log("우유 붓는 중...");
  }
}

// CoffeMachine 클래스를 상속받은 saltCoffeeMachine 클래스이다.
class saltCoffeeMachine extends CoffeMachine {
  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot);

    //소금을 뿌린다.
    this.addSalt();
    return {
      ...coffee,
      hasSalt: true,
    };
  }

  addSalt() {
    console.log("소금을 한꼬집");
  }
}

const machines: CoffeeMaker[] = [
  new CoffeMachine(25, 25),
  new CafeLatteMachine(15, 25),
  new saltCoffeeMachine(5, 10),
];

machines.forEach((machine) => {
  console.log("------------커피머신 가동~!------------");
  console.log(machine.makeCoffee(1));
});

<코드 새요소 추가전 출력 결과>

------------커피머신 가동~!------------
캡슐쓰기 전 25
캡슐쓰러왔습니다.
캡슐 쓰고 난 후22
물쓰기 전 25
물쓰러왔습니다.
물쓰고 난 후 15
물 끓이는 중...
{ orderShot: 1, hasMilk: false }
------------커피머신 가동~!------------
캡슐쓰기 전 15
캡슐쓰러왔습니다.
캡슐 쓰고 난 후12
물쓰기 전 25
물쓰러왔습니다.
물쓰고 난 후 15
물 끓이는 중...
우유 데우는 중...
우유 붓는 중...
{ orderShot: 1, hasMilk: true }
------------커피머신 가동~!------------
캡슐쓰기 전 5
캡슐쓰러왔습니다.
캡슐 쓰고 난 후2
물쓰기 전 10
물쓰러왔습니다.
물쓰고 난 후 0
물 끓이는 중...
소금을 한꼬집
{ orderShot: 1, hasMilk: false, hasSalt: true }

상속만을 이용해야 한다면 무언가 카페라떼머신에서 우유가져오고~ 소금커피머신에서 소금가져오고~ 해야겠지만

차라리 우유 거품기 클래스와 소금통 클래스가 따로있어서 필요할 때 마다 가져다 붙이는 것이 더 효율적일 것이고

컴포지션은 그것을 가능하게 해준다!

 

 

 

우선 다음과 같이

평범한 우유 거품기 클래스와 소금믹서 클래스를 작성해준다.

우유 거품기 클래스 자체적으로 우유거품을 만들고, 외부에서 커피컵을 받아올 경우 내부에서 만든 우유거품을 올린 커피컵을 반환해줄 것이다.

소금 믹서 클래스는 내부에서 소금을 집어올리고, 외부에서 커피컵을 받아올 경우 내부에서 집어든 소금을 뿌려 그 커피컵을 반환해주도록 만들어본다. 

//   //커피머신 만들기
type CoffeeCup = {
  orderShot: number;
  hasMilk?: boolean;
  hasSalt?: boolean;
};

interface CoffeeMaker {
  makeCoffee(shots: number): CoffeeCup;
}

//일반 우유 거품기//////////////////////////////////////////////////////////////////////
class CheapMilkSteamer {
  //(1)우유 거품을 만드는 내부 함수
  private steamMilk(): void {
    console.log("몽글몽글 포삭포삭한 우유폼");
  }
  //(2)만들어진 커피컵을 받아서, 만들어진 우유거품(1)을 부어서 이 커피컵을 다시 리턴하는 함수
  addMilkform(cup: CoffeeCup): CoffeeCup {
    this.steamMilk();
    return {
      ...cup,
      hasMilk: true,
    };
  }
}

//소금믹서///////////////////////////////////////////////////////////////////////////////
class SaltMixer {
  //(1)소금을 집는 내부 함수
  private getSalt() {
    console.log("소금을 한꼬집 집었다");
    return true;
  }
  //(2)만들어진 커피컵을 받아서, 집은 소금(1)을 뿌려서 이 커피컵을 다시 리턴하는 함수
  addSalt(cup: CoffeeCup): CoffeeCup {
    const salt = this.getSalt();
    return {
      ...cup,
      hasSalt: salt,
    };
  }
}
// CoffeeMaker 인터페이스를 구현하는 CoffeMachine 클래스이다.
class CoffeMachine implements CoffeeMaker {
  protected static ONE_SHOT_CAPSULE: number = 3;
  protected static ONE_CUP_WATER: number = 10;

  static makeMachine(beans: number, water: number): CoffeMachine {
    return new CoffeMachine(beans, water);
  }

  public constructor(
    protected capsule: number = 3,
    protected water: number = 10
  ) {}

  makeCoffee(orderShot: number): CoffeeCup {
    this.checkMaterials(orderShot);
    console.log("캡슐쓰기 전 " + this.capsule);
    this.useCapsule(orderShot);
    console.log("물쓰기 전 " + this.water);
    this.useWater();
    this.heatWater();
    return this.extract(orderShot);
  }

  protected checkMaterials(orderShot: number) {
    if (this.capsule < orderShot * CoffeMachine.ONE_SHOT_CAPSULE) {
      throw new Error(`커피캡슐 부족!!! 현재 보유 캡슐 : ${this.capsule}`);
    }
    if (this.water < CoffeMachine.ONE_CUP_WATER) {
      throw new Error(`물 부족!!! 남은 물 ${this.water}`);
    }
  }
  clean(): void {
    console.log("커피머신 행구는 중!");
  }

  private extract(shots: number): CoffeeCup {
    return {
      orderShot: shots,
      hasMilk: false,
    };
  }
  private heatWater() {
    console.log("물 끓이는 중...");
  }

  private useCapsule(shot: number) {
    console.log("캡슐쓰러왔습니다.");
    this.capsule -= shot * CoffeMachine.ONE_SHOT_CAPSULE;
    console.log("캡슐 쓰고 난 후" + this.capsule);
  }

  protected useWater() {
    console.log("물쓰러왔습니다.");
    this.water -= CoffeMachine.ONE_CUP_WATER;
    console.log("물쓰고 난 후 " + this.water);
  }

  addCapsule(capsule: number) {
    this.capsule += capsule;
  }

  fulfillWater(water: number) {
    this.water += water;
  }

  get Water(): number {
    return this.water;
  }

  get Capsule(): number {
    return this.capsule;
  }
}

// CoffeMachine 클래스를 상속받은 CafeLatteMachine 클래스이다.

class CafeLatteMachine extends CoffeMachine {
  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot); //기본적인 캡슐 소비, 물 소비, 물 가열 다 끝나고 완성된 커피가 반환

    //부모에서 받아온 커피 완성품에 우유만 부어주자!!!//////////////////////////////////////////////
    this.steamMilk();
    this.pourMilk();

    return {
      ...coffee,
      hasMilk: true,
    };
  }

  private steamMilk(): void {
    console.log("우유 데우는 중...");
  }

  private pourMilk() {
    console.log("우유 붓는 중...");
  }
}

// CoffeMachine 클래스 를 상속받은 saltCoffeeMachine 클래스이다.
class saltCoffeeMachine extends CoffeMachine {
  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot);

    //소금을 뿌린다.//////////////////////////////////////////////////////////////////////
    this.addSalt();
    return {
      ...coffee,
      hasSalt: true,
    };
  }

  private addSalt() {
    console.log("소금을 한꼬집");
  }
}

const machines: CoffeeMaker[] = [
  new CoffeMachine(25, 25),
  new CafeLatteMachine(15, 25),
  new saltCoffeeMachine(5, 10),
];

machines.forEach((machine) => {
  console.log("------------커피머신 가동~!------------");
  console.log(machine.makeCoffee(1));
});

 

여기까지 만들었으면 카페라떼머신 내부에서 굳이 우유를 만들고 부어주는 내부 활동이 필요한지,

소금커피머신 내부에서 굳이 소금을 집어서 뿌려주는 내부 활동이 필요한지에 대한 의심이 필요한다.

 

만들어 둔 우유 거품기 클래스와 소금믹서 클래스를 활용하는 것이 설계상 더 나을 듯하다. 

 

 

카페라떼 머신부터 고쳐본다.

 

1. 카페라떼머신 내부에서 우유 관련 로직을 걷어낸다.

// CoffeMachine 클래스를 상속받은 CafeLatteMachine 클래스이다.

class CafeLatteMachine extends CoffeMachine {
  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot); //기본적인 캡슐 소비, 물 소비, 물 가열 다 끝나고 완성된 커피가 반환

    return {
      ...coffee,
      hasMilk: true,
    };
  }
}

2. 우유 거품기 클래스에서 필요한 것들을 받아오자

이것은 dependency injection(https://ko.wikipedia.org/wiki/%EC%9D%98%EC%A1%B4%EC%84%B1_%EC%A3%BC%EC%9E%85)

이라고도 한다.

// CoffeMachine 클래스를 상속받은 CafeLatteMachine 클래스이다.\\\\\\\\\\\\\\\\\\\\\\\\\\\\

class CafeLatteMachine extends CoffeMachine {
  public constructor(
    protected capsule: number = 3,
    protected water: number = 10,
    private milkFrother: CheapMilkSteamer
  ) {
    super(capsule, water);
  }

  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot); //기본적인 캡슐 소비, 물 소비, 물 가열 다 끝나고 완성된 커피가 반환

    return {
      ...coffee,
      hasMilk: true,
    };
  }
}

3. 이제 직접적으로 hasMilk 프로퍼티를 true로 변경해서 객체를 반환하던 로직도 걷어내고

milkFrother에 milk를 바로 전달해주자.

// CoffeMachine 클래스를 상속받은 CafeLatteMachine 클래스이다.\\\\\\\\\\\\\\\\\\\\\\\\\\\\

class CafeLatteMachine extends CoffeMachine {
  public constructor(
    protected capsule: number = 3,
    protected water: number = 10,
    private milkFrother: CheapMilkSteamer
  ) {
    super(capsule, water);
  }

  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot); //기본적인 캡슐 소비, 물 소비, 물 가열 다 끝나고 완성된 커피가 반환
    return this.milkFrother.addMilkform(coffee);
  }
}

소금커피 머신도 위와 비슷하게 고쳐본다.

1. 소금커피머신 내부에서 소금 관련 로직을 걷어낸다.

class saltCoffeeMachine extends CoffeMachine {
  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot);
    return {
      ...coffee,
      hasSalt: true,
    };
  }
}

 

2. 소금믹서 클래스에서 필요한 것들을 받아오자

이것은 dependency injection(https://ko.wikipedia.org/wiki/%EC%9D%98%EC%A1%B4%EC%84%B1_%EC%A3%BC%EC%9E%85)

이라고도 한다.

 

class saltCoffeeMachine extends CoffeMachine {
  public constructor(
    protected capsule: number = 3,
    protected water: number = 10,
    private saltTopping: SaltMixer
  ) {
    super(capsule, water);
  }
  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot);

    return {
      ...coffee,
      hasSalt: true,
    };
  }
}

 

 

3. 이제 직접적으로 hasMilk 프로퍼티를 true로 변경해서 객체를 반환하던 로직도 걷어내고

소금토핑에 솔트믹서를 바로 전달해주자.

class saltCoffeeMachine extends CoffeMachine {
  public constructor(
    protected capsule: number = 3,
    protected water: number = 10,
    private saltTopping: SaltMixer
  ) {
    super(capsule, water);
  }
  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot);
    return this.saltTopping.addSalt(coffee);
  }
}

 

 

<현재까지 소스코드>

//   //커피머신 만들기
type CoffeeCup = {
  orderShot: number;
  hasMilk?: boolean;
  hasSalt?: boolean;
};

interface CoffeeMaker {
  makeCoffee(shots: number): CoffeeCup;
}

//일반 우유 거품기//////////////////////////////////////////////////////////////////////
class CheapMilkSteamer {
  //(1)우유 거품을 만드는 내부 함수
  private steamMilk(): void {
    console.log("몽글몽글 포삭포삭한 우유폼");
  }
  //(2)만들어진 커피컵을 받아서, 만들어진 우유거품(1)을 부어서 이 커피컵을 다시 리턴하는 함수
  addMilkform(cup: CoffeeCup): CoffeeCup {
    this.steamMilk();
    return {
      ...cup,
      hasMilk: true,
    };
  }
}

//소금믹서///////////////////////////////////////////////////////////////////////////////
class SaltMixer {
  //(1)소금을 집는 내부 함수
  private getSalt() {
    console.log("소금을 한꼬집 집었다");
    return true;
  }
  //(2)만들어진 커피컵을 받아서, 집은 소금(1)을 뿌려서 이 커피컵을 다시 리턴하는 함수
  addSalt(cup: CoffeeCup): CoffeeCup {
    const salt = this.getSalt();
    return {
      ...cup,
      hasSalt: salt,
    };
  }
}
// CoffeeMaker 인터페이스를 구현하는 CoffeMachine 클래스이다.////////////////////////////
class CoffeMachine implements CoffeeMaker {
  protected static ONE_SHOT_CAPSULE: number = 3;
  protected static ONE_CUP_WATER: number = 10;

  static makeMachine(beans: number, water: number): CoffeMachine {
    return new CoffeMachine(beans, water);
  }

  public constructor(
    protected capsule: number = 3,
    protected water: number = 10
  ) {}

  makeCoffee(orderShot: number): CoffeeCup {
    this.checkMaterials(orderShot);
    console.log("캡슐쓰기 전 " + this.capsule);
    this.useCapsule(orderShot);
    console.log("물쓰기 전 " + this.water);
    this.useWater();
    this.heatWater();
    return this.extract(orderShot);
  }

  protected checkMaterials(orderShot: number) {
    if (this.capsule < orderShot * CoffeMachine.ONE_SHOT_CAPSULE) {
      throw new Error(`커피캡슐 부족!!! 현재 보유 캡슐 : ${this.capsule}`);
    }
    if (this.water < CoffeMachine.ONE_CUP_WATER) {
      throw new Error(`물 부족!!! 남은 물 ${this.water}`);
    }
  }
  clean(): void {
    console.log("커피머신 행구는 중!");
  }

  private extract(shots: number): CoffeeCup {
    return {
      orderShot: shots,
      hasMilk: false,
    };
  }
  private heatWater() {
    console.log("물 끓이는 중...");
  }

  private useCapsule(shot: number) {
    console.log("캡슐쓰러왔습니다.");
    this.capsule -= shot * CoffeMachine.ONE_SHOT_CAPSULE;
    console.log("캡슐 쓰고 난 후" + this.capsule);
  }

  protected useWater() {
    console.log("물쓰러왔습니다.");
    this.water -= CoffeMachine.ONE_CUP_WATER;
    console.log("물쓰고 난 후 " + this.water);
  }

  addCapsule(capsule: number) {
    this.capsule += capsule;
  }

  fulfillWater(water: number) {
    this.water += water;
  }

  get Water(): number {
    return this.water;
  }

  get Capsule(): number {
    return this.capsule;
  }
}

// CoffeMachine 클래스를 상속받은 CafeLatteMachine 클래스이다.\\\\\\\\\\\\\\\\\\\\\\\\\\\\

class CafeLatteMachine extends CoffeMachine {
  public constructor(
    protected capsule: number = 3,
    protected water: number = 10,
    private milkFrother: CheapMilkSteamer
  ) {
    super(capsule, water);
  }

  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot); //기본적인 캡슐 소비, 물 소비, 물 가열 다 끝나고 완성된 커피가 반환
    return this.milkFrother.addMilkform(coffee);
  }
}

// CoffeMachine 클래스 를 상속받은 saltCoffeeMachine 클래스이다.\\\\\\\\\\\\\\\\\\\\\\\\\\\
class saltCoffeeMachine extends CoffeMachine {
  public constructor(
    protected capsule: number = 3,
    protected water: number = 10,
    private saltTopping: SaltMixer
  ) {
    super(capsule, water);
  }
  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot);
    return this.saltTopping.addSalt(coffee);
  }
}

const machines: CoffeeMaker[] = [
  new CoffeMachine(25, 25),
  new CafeLatteMachine(15, 25, new CheapMilkSteamer()),
  new saltCoffeeMachine(5, 10, new SaltMixer()),
];

machines.forEach((machine) => {
  console.log("------------커피머신 가동~!-- ----------");
  console.log(machine.makeCoffee(1));
});

 

<출력 결과> awesome!! ! 아주 잘 작동한다.

 

------------커피머신 가동~!------------
캡슐쓰기 전 25
캡슐쓰러왔습니다.
캡슐 쓰고 난 후22
물쓰기 전 25
물쓰러왔습니다.
물쓰고 난 후 15
물 끓이는 중...
{ orderShot: 1, hasMilk: false }
------------커피머신 가동~!------------
캡슐쓰기 전 15
캡슐쓰러왔습니다.
캡슐 쓰고 난 후12
물쓰기 전 25
물쓰러왔습니다.
물쓰고 난 후 15
물 끓이는 중...
몽글몽글 포삭포삭한 우유폼
{ orderShot: 1, hasMilk: true }
------------커피머신 가동~!------------
캡슐쓰기 전 5
캡슐쓰러왔습니다.
캡슐 쓰고 난 후2
물쓰기 전 10
물쓰러왔습니다.
물쓰고 난 후 0
물 끓이는 중...
소금을 한꼬집 집었다
{ orderShot: 1, hasMilk: false, hasSalt: true }

 

이렇게 각각의 클래스에서 필요한 것을 매번 추가하기 위해 매번 상속을 해서 새로운 요소들을 집어넣는 클래스를 만들어내기 보다는

각각 필요한 기능이 있다고 생각이 들면(이 예제에서는 우유거품기클래스와 소금믹서 클래스)

이렇게 클래스로 따로 만들어둠으로써 필요한 곳에 가져다가 붙여쓰는!

컴포지션으로 구현하는 것이 설계상 더 이로운 점이 있다.(상속의 남발보다는)

 

이걸로 제일 처음에 만들고 싶었던

 

소금카페라테커피머신 클래스를 만들어볼까?

 

// 처음부터 만들고 싶었던 saltCafeLatteCoffeeMachine 클래스이다.\\\\\\\\\\\\\\\\\\\\\\\\\\\
class saltCafeLatteCoffeeMachine extends CoffeMachine {
  public constructor(
    protected capsule: number = 3,
    protected water: number = 10,
    private saltTopping: SaltMixer,
    private milkFrother: CheapMilkSteamer
  ) {
    super(capsule, water);
  }
  makeCoffee(orderShot: number): CoffeeCup {
    let coffee = super.makeCoffee(orderShot);
    coffee = this.saltTopping.addSalt(coffee);
    return this.milkFrother.addMilkform(coffee);
  }

이젠! 부품 붙이듯이 클래스를 더욱 쉽게찍어낼 수 있게 되었다~!!!

위 클래스를 더 간결하게 쓰면 다음과 같다

// 만들고 싶었던 saltCafeLatteCoffeeMachine 클래스이다.\\\\\\\\\\\\\\\\\\\\\\\\\\\
class saltCafeLatteCoffeeMachine extends CoffeMachine {
  public constructor(
    protected capsule: number = 3,
    protected water: number = 10,
    private saltTopping: SaltMixer,
    private milkFrother: CheapMilkSteamer
  ) {
    super(capsule, water);
  }
  makeCoffee(orderShot: number): CoffeeCup {
    let coffee = super.makeCoffee(orderShot);
    return this.milkFrother.addMilkform(this.saltTopping.addSalt(coffee));
  }
}

 

이걸 더 세련되게 작성하고 싶다면 아래와 같이 정리해줄 수 있다.

// CoffeMachine 클래스를 상속받은 CafeLatteMachine 클래스이다.\\\\\\\\\\\\\\\\\\\\\\\\\\\\

class CafeLatteMachine extends CoffeMachine {
  public constructor(
    protected capsule: number = 3,
    protected water: number = 10,
    private milkFrother: CheapMilkSteamer
  ) {
    super(capsule, water);
  }

  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot); //기본적인 캡슐 소비, 물 소비, 물 가열 다 끝나고 완성된 커피가 반환
    const saltAdded = this.milkFrother.addMilkform(coffee);
    return this.milkFrother.addMilkform(saltAdded);
  }
}

 

<최종 전체 코드>

//   //커피머신 만들기
type CoffeeCup = {
  orderShot: number;
  hasMilk?: boolean;
  hasSalt?: boolean;
};

interface CoffeeMaker {
  makeCoffee(shots: number): CoffeeCup;
}

//일반 우유 거품기//////////////////////////////////////////////////////////////////////
class CheapMilkSteamer {
  //(1)우유 거품을 만드는 내부 함수
  private steamMilk(): void {
    console.log("몽글몽글 포삭포삭한 우유폼");
  }
  //(2)만들어진 커피컵을 받아서, 만들어진 우유거품(1)을 부어서 이 커피컵을 다시 리턴하는 함수
  addMilkform(cup: CoffeeCup): CoffeeCup {
    this.steamMilk();
    return {
      ...cup,
      hasMilk: true,
    };
  }
}

//소금믹서///////////////////////////////////////////////////////////////////////////////
class SaltMixer {
  //(1)소금을 집는 내부 함수
  private getSalt() {
    console.log("소금을 한꼬집 집었다");
    return true;
  }
  //(2)만들어진 커피컵을 받아서, 집은 소금(1)을 뿌려서 이 커피컵을 다시 리턴하는 함수
  addSalt(cup: CoffeeCup): CoffeeCup {
    const salt = this.getSalt();
    return {
      ...cup,
      hasSalt: salt,
    };
  }
}
// CoffeeMaker 인터페이스를 구현하는 CoffeMachine 클래스이다.////////////////////////////
class CoffeMachine implements CoffeeMaker {
  protected static ONE_SHOT_CAPSULE: number = 3;
  protected static ONE_CUP_WATER: number = 10;

  static makeMachine(beans: number, water: number): CoffeMachine {
    return new CoffeMachine(beans, water);
  }

  public constructor(
    protected capsule: number = 3,
    protected water: number = 10
  ) {}

  makeCoffee(orderShot: number): CoffeeCup {
    this.checkMaterials(orderShot);
    console.log("캡슐쓰기 전 " + this.capsule);
    this.useCapsule(orderShot);
    console.log("물쓰기 전 " + this.water);
    this.useWater();
    this.heatWater();
    return this.extract(orderShot);
  }

  protected checkMaterials(orderShot: number) {
    if (this.capsule < orderShot * CoffeMachine.ONE_SHOT_CAPSULE) {
      throw new Error(`커피캡슐 부족!!! 현재 보유 캡슐 : ${this.capsule}`);
    }
    if (this.water < CoffeMachine.ONE_CUP_WATER) {
      throw new Error(`물 부족!!! 남은 물 ${this.water}`);
    }
  }
  clean(): void {
    console.log("커피머신 행구는 중!");
  }

  private extract(shots: number): CoffeeCup {
    return {
      orderShot: shots,
      hasMilk: false,
    };
  }
  private heatWater() {
    console.log("물 끓이는 중...");
  }

  private useCapsule(shot: number) {
    console.log("캡슐쓰러왔습니다.");
    this.capsule -= shot * CoffeMachine.ONE_SHOT_CAPSULE;
    console.log("캡슐 쓰고 난 후" + this.capsule);
  }

  protected useWater() {
    console.log("물쓰러왔습니다.");
    this.water -= CoffeMachine.ONE_CUP_WATER;
    console.log("물쓰고 난 후 " + this.water);
  }

  addCapsule(capsule: number) {
    this.capsule += capsule;
  }

  fulfillWater(water: number) {
    this.water += water;
  }

  get Water(): number {
    return this.water;
  }

  get Capsule(): number {
    return this.capsule;
  }
}

// CoffeMachine 클래스를 상속받은 CafeLatteMachine 클래스이다.\\\\\\\\\\\\\\\\\\\\\\\\\\\\

class CafeLatteMachine extends CoffeMachine {
  public constructor(
    protected capsule: number = 3,
    protected water: number = 10,
    private milkFrother: CheapMilkSteamer
  ) {
    super(capsule, water);
  }

  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot); //기본적인 캡슐 소비, 물 소비, 물 가열 다 끝나고 완성된 커피가 반환
    return this.milkFrother.addMilkform(coffee);
  }
}

// CoffeMachine 클래스 를 상속받은 saltCoffeeMachine 클래스이다.\\\\\\\\\\\\\\\\\\\\\\\\\\\
class saltCoffeeMachine extends CoffeMachine {
  public constructor(
    protected capsule: number = 3,
    protected water: number = 10,
    private saltTopping: SaltMixer
  ) {
    super(capsule, water);
  }
  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot);
    return this.saltTopping.addSalt(coffee);
  }
}

// 만들고 싶었던 saltCafeLatteCoffeeMachine 클래스이다.\\\\\\\\\\\\\\\\\\\\\\\\\\\
class saltCafeLatteCoffeeMachine extends CoffeMachine {
  public constructor(
    protected capsule: number = 3,
    protected water: number = 10,
    private saltTopping: SaltMixer,
    private milkFrother: CheapMilkSteamer
  ) {
    super(capsule, water);
  }
  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot);
    const saltAdded = this.saltTopping.addSalt(coffee);
    return this.milkFrother.addMilkform(saltAdded);
  }
}

const machines: CoffeeMaker[] = [
  new CoffeMachine(25, 25),
  new CafeLatteMachine(15, 25, new CheapMilkSteamer()),
  new saltCoffeeMachine(5, 10, new SaltMixer()),
  new saltCafeLatteCoffeeMachine(
    5,
    10,
    new SaltMixer(),
    new CheapMilkSteamer()
  ),
];

machines.forEach((machine) => {
  console.log("------------커피머신 가동~!-- ----------");
  console.log(machine.makeCoffee(1));
});

<출력 결과>

------------커피머신 가동~!-- ----------
캡슐쓰기 전 25
캡슐쓰러왔습니다.
캡슐 쓰고 난 후22
물쓰기 전 25
물쓰러왔습니다.
물쓰고 난 후 15
물 끓이는 중...
{ orderShot: 1, hasMilk: false }
------------커피머신 가동~!-- ----------
캡슐쓰기 전 15
캡슐쓰러왔습니다.
캡슐 쓰고 난 후12
물쓰기 전 25
물쓰러왔습니다.
물쓰고 난 후 15
물 끓이는 중...
몽글몽글 포삭포삭한 우유폼
{ orderShot: 1, hasMilk: true }
------------커피머신 가동~!-- ----------
캡슐쓰기 전 5
캡슐쓰러왔습니다.
캡슐 쓰고 난 후2
물쓰기 전 10
물쓰러왔습니다.
물쓰고 난 후 0
물 끓이는 중...
소금을 한꼬집 집었다
{ orderShot: 1, hasMilk: false, hasSalt: true }
------------커피머신 가동~!-- ----------
캡슐쓰기 전 5
캡슐쓰러왔습니다.
캡슐 쓰고 난 후2
물쓰기 전 10
물쓰러왔습니다.
물쓰고 난 후 0
물 끓이는 중...
소금을 한꼬집 집었다
몽글몽글 포삭포삭한 우유폼
{ orderShot: 1, hasMilk: true, hasSalt: true }

 

 

<최종 요약>

 

// 만들고 싶었던 saltCafeLatteCoffeeMachine 클래스이다.\\\\\\\\\\\\\\\\\\\\\\\\\\\

class saltCafeLatteCoffeeMachine extends CoffeMachine {

  public constructor(

    protected capsule: number = 3,

    protected water: number = 10,

    private saltTopping: SaltMixer,

    private milkFrother: CheapMilkSteamer

  ) {

    super(capsule, water);

  }

  makeCoffee(orderShot: number): CoffeeCup {

    const coffee = super.makeCoffee(orderShot);

    const saltAdded = this.saltTopping.addSalt(coffee);

    return this.milkFrother.addMilkform(saltAdded);

  }

}

이 클래스는 우유를 어떻게 만드는지 소금은 어떻게 처리되는건지 전혀 신경쓰지 않는다.

다만 필요한 기능을 가져와서 외부에서 주입받음으로써

컴포지션을 이용해서 필요한 기능을 계속 재사용할 수 있다.

이러한 컴포지션은 코드의 재사용성을 굉장히 높여주는 효과가 있다.

다만, 치명적인 단점이 있는데 우유거품기 클래스, 소금믹서클래스, 카페라떼머신, 소금커피머신, 소금카페라떼머신 이렇게 연결된 클래스들 간의 커플링이 너무 심하고 강력한 점이 바로 그것이다.

바로 그 우유거품기 클래스와 바로 그 소금믹서 클래스만을 사용해야하며(항상 스스로를 제약),

다른 고급우유거품기클래스 설탕믹서 클래스 등으로 하고 싶다면 클래스 내용을 다시 고쳐야한다.

이렇게 클래스 간 서로 너무 잘알고 있는 관계형성은 건강하지 못하다.

함수를 제공하는 클래스를 바꾸면 그 클래스를 사용하고 커플링이 강한 모든 클래스들을 업데이트해야하는 문제가 있다.

 

그렇다면 이러한 클래스 간 결합도가 높은 문제 상황들(커플링)을 피할 수 있는가?

더욱 확장이 가능하고 유연성 높은 테크닉은 interface(바로 다음 포스팅, 이와 관련한 전략패턴 [타입스크립트] composition 장점을 극대화하는 강력한 interface — My dev Note📒 (tistory.com))로 구사할 수 있다.