📌프론트엔드 예시로 살펴보는 SOLID 원칙 2)개방-폐쇄 원칙, 리스코프 치환 원칙

미션

저번 포스팅 예시로 돌아가보자.
프론트엔드 예시로 살펴보는 SOLID원칙 1)단일 책임 원칙

이번에는 고양이의 종류를 다양하게 해달라는 요구가 들어왔다.

그냥 고양이 외에도 러시안 블루, 코리안 숏헤어, 벵갈 고양이, 노르웨이 숲 이렇게 4가지 종류의 고양이가 추가되면 좋겠어요. 다른 종류 고양이는 아직 결정이 안나서 나중에 추가 될 수 있을 것 같아요.
그리고 고양이를 랜덤으로 생성하고, 불러낼 수 있는 버튼을 만들어주세요.
고양이 이름을 입력하고 고양이를 부르면 다음과 같이 행동합니다.

• 일반 고양이: 나에게 다가온다,
• 러시안 블루: 원을 2번 그리고 나에게 온다.,
• 코리안 숏헤어: 물끄러미 바라만 본다.,
• 벵갈 고양이: 2번 이상 불러야 나에게 온다.,
• 노르웨이 숲: 박스 속으로 들어간다.

STEP1. 요구사항 분석

저번처럼 다시 요구사항을 분석해보자.

• 고양이는 총 5가지 종류로 늘어났다. (일반 고양이, 러시안 블루, 코리안 숏헤어, 벵갈 고양이, 노르웨이 숲)
• 고양이 종류는 더 추가될 수 있다.
• 고양이를 랜덤으로 생성하는 버튼이 필요하다.
• 고양이 이름을 입력하고 부르는 버튼이 필요하다.
• 고양이마다 부름에 답하는 방식이 다르다.

STEP2. 할 일 나누기

• makeCat
  고양이를 랜덤으로 생성한다.
  고양이는 이름, 나이, 종류(있을 때만)를 갖는다.

• catCall
  input tag에 입력받은 이름의 고양이를 부른다.
  input에 대한 예외처리를 한다.

• Cat Class
  Russian Blue, korean shorthair cat, Bengal cat, Norwegian forest cat은 일반 Cat Class를 상속받아 만든다. 각 고양이의 특징은 각 class method로 내부 구현한다.

📌 catCall 구현에 대해 생각해보자
1. switch문 사용하기

function catCall(type){
  switch(type){
    case "벵갈":
      '여기에 행동을 작성'
    case "러시안 블루":
      '여기에 행동을 작성'
    ....
  }
}

2. 특정 method 호출

function catCall(catClass){
  catClass.come();
}

📑 SOLID원칙 2. 개방-폐쇄 원칙(OCP, Open-Closed Principle)
소프트웨어 개체(클래스, 모듈, 함수 등등)는 확장에 대해 열려 있어야 하고, 수정에 대해서는 닫혀 있어야 한다

• 첫번째 catCall 함수의 경우, cat의 종류가 100개로 늘어난다면 switch문 사용이 어려워질 것이다. 실수로 하나라도 빼먹는다면 프로그램은 오류가 날 것이다. ( 확장에 열려있지 않다.)
• 첫번째 catCall 함수의 경우, cat이 추가될 때마다 catCall의 함수 또한 수정을 해주어야 한다. ( 수정에 닫혀있지 않다. )
• 두번째 catCall함수는 catClass를 cat 종류가 100개가 되어도, 수정이 필요없다. ( 개방 폐쇄 원칙을 지킨 코드다. )

📑 SOLID원칙 3. 리스코프 치환 원칙이란 (Liskov Substitution Principle)
상위 타입의 객체를 하위 타입의 객체로 치환해도 동작에 문제가 없어야 합니다.

• 러시안 블루는 CatClass를 상속받아 만들었다. 그렇다면 일반 고양이를 RussianBlueCat으로 전부 치환하더라도 프로그램은 문제없이 돌아가야 한다.

STEP3. 구현하기

main

function main() {
  new InfoToolTip();
  new StateToolTip();
  const makeCatClass = new makeCatButton();
  const callCatFunc = callCat(makeCatClass);
  new callCatBtn(callCatFunc);

  makeCatClass.click();
}

makeCat

function makeCat() {
  const $parent = document.getElementById("playground");
  const randomAge = getRandomNumber(1, 14);
  const randomName = CAT_NAME_LIST[randomAge % 6];
  const idx = getRandomNumber(0, 4);
  const catType = [
    Cat,
    RussianBlue,
    koreanShorthairCat,
    BengalCat,
    NorwegianForestCat,
  ];
  return new catType[idx]($parent, {
    name: `${randomName}${new Date().getTime()}`,
    age: randomAge,
  });
}

종류가 있는 Cat (ex. 러시안 블루)

class RussianBlue extends Cat {
  constructor($parent, data) {
    super($parent, {
      ...data,
      type: "러시안 블루",
    });
    this._dataController;
  }

  /*
   * @override
   */
  create() {
    this._domController.createDom(
      `<div class="russianBlueCat">러시안 블루</div>`
    );
    this._domController.setEvent("russianBlueCat");
  }

  /*
   * @override
   */
  call() {
    console.log("원을 2번 그리고 나에게 온다");
  }
}

makeCat

class makeCatButton {
  #result;
  #maxNum;

  constructor() {
    this.$el = document.getElementById("makeCatBtn");
    this.#result = [];
    this.#maxNum = 6;
    this.#setEvent();
  }

  getCatBox() {
    return this.#result.map((catClass) => {
      return catClass.getName();
    });
  }

  getCatClass(name) {
    const catNameList = this.getCatBox();
    const idx = catNameList.findIndex((catName) => catName === name);
    return this.#result[idx];
  }

  #setEvent() {
    this.$el.addEventListener("click", () => {
      if (this.#result.length === this.#maxNum) {
        alert("고양이를 더 이상 추가할 수 없어요!!!");
      } else {
        this.#result.push(makeCat());
      }
    });
  }

  click() {
    this.$el.click();
  }
}

catCall

function callCat(makeCatClass) {
  const $input = document.getElementById("catCallName");

  return function () {
    const name = $input.value;
    if (name === "") return alert("이름을 입력해주세요");
    const nameList = makeCatClass.getCatBox();
    if (!nameList.includes(name))
      return alert("고양이 이름을 다시 확인해주세요.");
    const catClass = makeCatClass.getCatClass(name);
    catClass?.call();
  };
}

코드 보러가기 > github