자바스크립트를 이용한 전략 패턴

안녕하세요 데브스입니다!

오늘은 멋진 전략 패턴에 대해 이야기하고 싶습니다.

우선, 이것은 무엇입니까? 🤔
글쎄요, 정책 패턴이라고도 불리는 전략 패턴은 런타임에 알고리즘을 선택할 수 있게 해주는 행동 디자인 패턴입니다. 이는 알고리즘 패밀리를 정의하고 컨텍스트에 따라 상호 교환 가능하게 만들 수 있음을 의미합니다.

이 패턴은 언제 적용할 수 있나요? 🔧

런타임에 상호 교환할 수 있도록 여러 알고리즘의 변형이 필요한 경우.

여러 관련 알고리즘을 둘러싼 조건문이 많은 경우.

관련 동작이 있는 클래스가 있는 경우.

이제 재미있는 부분, JavaScript 예제 👨‍💻👩‍💻

다음 예에서는 런타임에 특정 알고리즘을 선택해야 하는 고전적인 문제가 있으며 일반적으로 switch 문 또는 많은 if/else 문을 사용합니다.

//Example without strategy pattern

gameDifficulty(difficulty) {
  switch(difficulty){
    case 'easy':
      easyGameMode();
      break;
    case 'difficult'
      difficultMode();
      break;
  }
}

언뜻 보기에 이것은 아무 문제가 없다고 말할 수 있고 당신이 옳습니다. 그러나 이 패턴이 해결하고자 하는 문제는 당신이 switch 또는 if/else 문장을 많이 가지고 있을 때입니다. 나중에 더 많은 사례를 추가하려는 경우 공개 폐쇄의 SOLID 원칙을 준수하지 않는 것입니다.

이 문제를 처리하는 가장 좋은 방법은 클래스를 사용하거나 단순히 함수 개체를 사용하는 것입니다.

이 경우, 우리는 함수의 객체를 사용하고 있습니다:

//This can also be a class
const strategies = {
  easy: easyGameMode(),
  difficult: difficultGameMode(),
  //More strategies
  __default__: normalGameMode()
}

const easyGameMode = (game) => {
  game.difficulty(1);
  //Do easy game mode stuff in here
  return game;
}

const normalGameMode= (game) => {
  game.difficulty(2);
  //Do normal game mode stuff in here
  return game;
}

const difficultGameMode = (game) => {
  game.difficulty(3);
  //Do difficult game mode stuff in here
  return game;
}

const startGame = (game, difficulty) => {
  const gameModifier = strategies[difficulty] ?? strategies.__default__;
  return gameModifier(game, difficulty);
}

전략패턴의 장점 🏆

if/else 및 switch 문은 쉽게 테스트할 수 없습니다. 각각의 새로운 분기는 다른 실행 경로를 추가하고 복잡성을 증가시킵니다.

사용자나 다른 개발자가 새로운 동작을 주입하려고 할 때 확장성이 있습니다.

if/else 명령문은 "이름 없는"블록인 반면 특정 전략을 구현하는 클래스는 일반적으로 설명적인 이름을 가져야 하기 때문에 가독성이 향상됩니다.

이것이 향후 프로젝트나 현재 코드를 리팩토링하는 데 도움이 되기를 바랍니다.
여기에 있는 React 개발자를 위해 향후 게시물에서 redux에서 전략 패턴을 사용하는 방법을 보여 드리겠습니다. ⚛️

항상 그렇듯이 의견, 피드백 및 사랑을 자유롭게 남겨주세요. ❤️