📌프론트엔드 예시로 살펴보는 SOLID 원칙 1)단일 책임 원칙

들어가며..

디자인패턴은 프로그래밍을 하다보면 누구나 한 번쯤은 그 중요성을 듣게 된다.
그런데 React의 함수형 컴포넌트로 작업하는게 익숙하다면 디자인 패턴의 중요성은 들어봤어도, 어떻게 적용해야 하는지, 왜 꼭 배워야 하는지 의문이 들 수 있다.

디자인 패턴 중 가장 유명한 GOF의 디자인 패턴은 아무래도 Class 기반으로 설명이 되어있고, 설명을 찾아봐도 복잡할 뿐더러 React를 사용하다보면 보통 함수로 모든 것을 처리하다보니 아무래도 와닿지가 않는다.

그러나 디자인 패턴은 OOP만을 위한 것이 아닌 문제 해결을 위한 다양한 아이디어 라는 접근법으로 공부하는게 어울릴 것 같다.

👀 디자인 패턴이란
"프로그래밍"을 하다가 마주하는 여러 문제를 보다 "현명하게" 해결하기 위한 여러가지 접근법을 말한다.
이 시리즈에서는 GOF의 23가지 디자인 패턴을 프론트엔드 예제를 통해 살펴볼 것이다.

👍 현명하게 해결하기

• 추가 기능 구현이 쉽다
• 디버깅이 쉽다
• 수정 사항 반영이 쉽다.

미션

힐링 게임을 만들꺼야.
화면 가운데에 고양이가 있고, 마우스를 오버하면 고양이의 정보가 떴으면 좋겠어.
고양이의 정보는 '이름, 나이'야.
고양이는 먹기, 걷기, 일어나기, 잠자기, 씻기, 물 마시기(6가지) 행동을 할 수 있고, 5초마다 랜덤으로 행동을 실행할꺼야.
고양이를 클릭하면 무슨 행동을 하고 있는지 말풍선으로 알려줘.

STEP1. 요구사항 파악하기

• 고양이는 나이와 이름을 갖는다.
• 고양이는 먹기, 걷기, 일어나기, 잠자기, 씻기, 물마시기(6가지 행동을 할 수 있다.)
• 프로그램이 실행되면 고양이를 1마리 생성하고, 5초마다 랜덤으로 행동을 교체해야 한다.
• 사용자 상호작용은 hover, click이 있다.
• 말풍선은 고양이의 상태를 나타낸다.
• 정보창은 고양이에게 hover했을 때만 나타나고 고양이 정보를 나타낸다.

STEP2. 할 일 나누기

• Main
  : 나이와 이름을 랜덤으로 갖는 고양이를 만든다.

• Cat
  : 화면에 고양이를 그린다.
  : 고양이는 생성될 때 나이와 이름을 갖는다.
  : 총 6가지 행동을 할 수 있다.
  : 5초마다 고양이의 상태를 바꾼다.

• infoToolTip
  : 화면에 정보창을 만든다.
  : 고양이의 정보를 보여준다.

• stateToolTip
  : 화면에 말풍선을 만든다.
  : 고양이의 상태를 보여준다.

📑 SOLID원칙 1. Single Responsibility(단일 책임 원칙)
: 1가지 책임을 갖는 함수나 클래스를 작성할 것
고양이 정보를 정보창에 출력을 하는 것은 고양이가 하는 일이 아니다.
단일 책임 원칙은 쉽게 말해 '이름값을 하는 코드'를 만드는 것이다.

🎈 프론트엔드에서 단일 책임 원칙
프론트에서 하는 일을 나눠보자
단일 책임 원칙을 적용한다면 폴더를 어떻게 나누고, 파일을 어떻게 나누는게 좋을까? ( 답은 없으니 같이 고민해보자. 좋은 방법이 생각난다면 댓글로 공유해도 좋아요😍 )

• DOM create, update ( UI 변경 )
  • 화면 구성( html )
  • 사용자와 상호작용( eventListener )
  • 화면에 어떻게 그릴까( css )
• API 호출 ( data 가져오기 )
  • 서버에 데이터 요청
  • 프론터에서 쓰기 쉽게 data convert
• 데이터 관리하기 ( Logic )
  • 서버 정보에 따라 그리는 방식이 달라지는 경우
  • 사용자 interaction이 data에 영향을 미치는 경우
  • .......

STEP3. 구현하기

const

const CAT_NAME_LIST = ["냐옹", "하늘", "여름", "나비", "봄이", "사랑"];
const CAT_ACT = ["eat", "walk", "wake", "sleep", "shower", "drink"];
const CAT_RANDOM_TIMER = 5000;

util

function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

function trigger(eventType, data) {
  const event = new CustomEvent(eventType, { detail: data });
  document.dispatchEvent(event);
}

function addEventListener(eventType, listener) {
  document.addEventListener(eventType, listener);
}

main

function main() {
  const $parent = document.getElementById("playground");
  const randomAge = getRandomNumber(1, 14);
  const randomName = CAT_NAME_LIST[randomAge % 6];
  new Cat($parent, {
    name: randomName,
    age: randomAge,
  });
  new InfoToolTip();
  new StateToolTip();
}

cat class

class Cat {
  constructor($parent, data) {
    const idx = getRandomNumber(1, 100) % 6;
    const dataController = new CatData({ ...data, state: CAT_ACT[idx] });
    this._domController = new CatDom($parent, dataController);
  }
}

class CatData {
  constructor({ name, age, state }) {
    this.name = name;
    this.age = age;
    this.state = state;
    setInterval(this.randomAct.bind(this), CAT_RANDOM_TIMER);
  }

  getProfile() {
    return {
      name: this.name,
      age: this.age,
    };
  }

  getState() {
    return this.state;
  }

  randomAct() {
    const state = getRandomNumber(1, 100) % 6;
    const actName = CAT_ACT[state];
    this[actName]();
  }

  eat() {
    this.state = "eat";
  }

  walk() {
    this.state = "walk";
  }

  wake() {
    this.state = "wake";
  }

  sleep() {
    this.state = "sleep";
  }

  shower() {
    this.state = "shower";
  }

  drink() {
    this.state = "drink";
  }
}

class CatDom {
  constructor($parent, dataController) {
    this.$parent = $parent;
    this.dataController = dataController;
    this.createDom();
    this.setEvent();
  }

  createDom() {
    this.$parent.innerHTML += `<div class="cat">고양이</div>`;
  }

  setEvent() {
    const $targetEl = Array.from(this.$parent.getElementsByClassName("cat"));
    $targetEl.forEach(($el) => {
      if (!$el) return;
      $el.addEventListener("click", () => {
        this.click();
      });
      $el.addEventListener("mouseover", () => {
        this.hover();
      });
      $el.addEventListener("mouseleave", () => {
        this.leave();
      });
    });
  }

  click() {
    const state = this.dataController.getState();
    trigger("onCatClick", { state });
  }

  hover() {
    const info = this.dataController.getProfile();
    trigger("onCatHover", { info });
  }

  leave() {
    trigger("onCartLeave");
  }
}

infoToolTip

class InfoToolTip {
  constructor() {
    this.$el = document.getElementById("info");
    this.setEvent();
  }

  setEvent() {
    addEventListener("onCatHover", (e) => {
      const { info } = e.detail;
      const { name, age } = info;
      this.$el.classList.remove("hide");
      this.$el.innerHTML = `이름: ${name}, 나이: ${age}`;
    });

    addEventListener("onCartLeave", (e) => {
      this.$el.classList.add("hide");
    });
  }
}

stateToolTip

class StateToolTip {
  constructor() {
    this.$el = document.getElementById("state");
    this.setEvent();
  }

  setEvent() {
    addEventListener("onCatClick", (e) => {
      const { state } = e.detail;
      this.$el.classList.remove("hide");
      this.$el.innerHTML = `고양이가 ${state}하고 있습니다.`;
      setTimeout(() => {
        this.$el.classList.add("hide");
      }, 700);
    });
  }
}

마치며..

오늘은 SOLID패턴 중 첫번째 원칙, 단일 책임 원칙을 배우고 예시를 만들어보았다. 최종 코드는 다음 github에서 확인할 수 있다.
앞으로는 요구사항을 추가하고, 디자인 패턴을 적용해 보며 코드를 점점 다듬어 보도록 하자.

코드 보러가기 > github