디자인 패턴이란? 

소프트웨어 개발에서 디자인 패턴은 소프트웨어 디자인의 일반적인 문제에 대한 재사용 가능한 솔루션입니다. 디자인 패턴은 소프트웨어 개발자가 사용하는 모범 사례를 나타냅니다. 우리는 프로그래밍 패턴과 같은 디자인 패턴을 생각할 수 있습니다.

디자인 패턴을 사용해야 하는 이유 

모든 개발자는 깨끗하고 유지 관리 가능하며 읽기 쉽고 재사용 가능한 코드를 작성하려고 합니다. 응용 프로그램이 커질수록 코드 구조가 점점 더 중요해집니다. 디자인 패턴의 개념은 처음부터 소프트웨어 엔지니어링 산업에서 사용되어 왔지만 공식화 되지는 않았습니다.

디자인 패턴 : Gang of Four라고도 하는 재사용 가능한 객체 지향 소프트웨어의 요소는 소프트웨어 엔지니어링의 디자인 패턴 개념을 공식화하려고했습니다. 오늘날 디자인 패턴은 소프트웨어 개발에서 매우 중요한 부분입니다. 여기서는 JavaScript 프로그래밍 언어에 가장 중요한 몇 가지에 대해 이야기하지만 모든 소프트웨어 개발자에게 매우 중요하므로 위의 링크 된 책을 자유롭게 확인하십시오.

모듈 디자인 패턴 

모듈 디자인 패턴은 특정 코드 모듈을 다른 구성 요소와 독립적으로 유지하기 위해 JavaScript에서 가장 많이 사용되는 디자인 패턴 중 하나입니다. 이것은 느슨한 결합과 체계적인 코드를 제공합니다. JavaScript의 모듈은 객체 지향 언어의 클래스와 유사하며 많은 장점 중 하나는 외부에서 상태와 동작을 보호하기 위한 캡슐화 입니다. 모듈 패턴을 사용하여 공개 또는 개인 액세스 수준을 설정할 수 있습니다.

ES6 이전에는 프로그래밍 언어 JavaScript에 내장 모듈이 없었으므로 개발자는 모듈 패턴을 사용하여 모듈을 구현해야 했습니다. ES6을 사용하면 JavaScript에는 js 파일에 저장된 기본 모듈이 있습니다. 여기에서 ES6에 대해 자세히 확인할 수 있으며 다음 예에서는 ES6 모듈 디자인 패턴을 살펴 보겠습니다.

// math.js
function add(num1, num2) {
  console.log('Add:', num1, num2);
  return num1 + num2;
}
function sub(num1, num2) {
  console.log('Sub:', num1, num2);
  return num1 - num2;
}
export {add, sub};

// main.js
import { add, sub } from './math.js';
console.log(add(2, 2)); //4
console.log(sub(2, 2)); //0

프로토 타입 디자인 패턴 

프로토 타입 디자인 패턴은 객체 기반 생성 디자인 패턴이며 JavaScript 프로토 타입 상속을 사용합니다. 프로토 타입 모델은 객체를 만드는 데 사용됩니다. 만들어진 개체는 원본 개체의 복제본입니다. 이 예에서는 프로토 타입으로 사용하는 자동차 객체를 사용하여 다른 객체를 만들고 새 객체에 대해 하나 이상의 속성을 정의합니다. 

//original object
const car = {
  manufacturer: 'Tesla',
  start() {
    return 'started';
  },
  stop() {
    return 'stopped';
  },
};

// we will be using Object.create to create the new object from the original one
// Object.create(proto[, propertiesObject])
const myCar = Object.create(car, { model: { value: 'Model S' } });
console.log(myCar.__proto__ === car); // true

다음 다이어그램에서 프로토 타입 상속이 작동하는 방법을 볼 수 있습니다.

Observer design pattern 

관찰자 디자인 패턴은 한 오브젝트 (게시자)가 상태를 변경하면 다른 모든 종속 오브젝트 (가입자)가 자동으로 업데이트됩니다. addEventListeneror jQuery를 사용했다면 패턴에 익숙 할 것입니다. RxJS와 같은 Reactive Programming에 가장 큰 영향을 미칩니다. 다음 예제에서 옵저버 패턴이 어떻게 작동하는지 확인합시다 :

const Subject = function() {
  this.observers = [];

  return {
    subscribeObserver: function(observer) {
      this.observers.push(observer);
    },
    unsubscribeObserver: function(observer) {
      let index = this.observers.indexOf(observer);
      if(index > -1) {
        this.observers.splice(index, 1);
      }
    },
    notifyObserver: function(observer) {
      let index = this.observers.indexOf(observer);
      if(index > -1) {
        this.observers[index].notify(index);
      }
    },
    notifyAllObservers: function() {
      for(let i = 0; i < this.observers.length; i++){
        this.observers[i].notify(i);
      };
    }
  };
};

const Observer = function() {
  return {
    notify: function(index) {
      console.log("Observer " + index + " is notified!");
    }
  }
}

const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.subscribeObserver(observer1);
subject.subscribeObserver(observer2);

subject.notifyObserver(observer2); // Observer 2 is notified!

subject.notifyAllObservers();
// Observer 1 is notified!
// Observer 2 is notified!

이제 관찰자 패턴에 대한 다이어그램을 확인하겠습니다.

Singleton design pattern 

싱글 톤은 한 번만 인스턴스화 할 수 있는 객체입니다. Singleton은 클래스가 없으면 새 인스턴스를 만듭니다. 해당 클래스의 인스턴스가 있으면 대신 해당 객체의 참조를 반환합니다. JavaScript에는 기본적으로 싱글 톤이 있지만 싱글 톤이라고 하는 대신 객체 리터럴이라고 합니다. 예를 들면 다음과 같습니다.

const car = {
  manufacturer: 'Tesla',
  model: 'S',
  fuel: 'electricity',
  start: function() {
    console.log('started');
  }
}

JavaScript 프로그래밍 언어의 각 객체는 고유 한 메모리 위치를 차지하며 car 객체를 호출하면 이 객체에 대한 참조를 반환합니다. car 변수를 다른 변수에 복사하고 수정하려고 하면 JavaScript의 모든 객체가 값이 아닌 참조로 전달되므로 두 객체가 모두 수정됩니다. 따라서 하나의 객체 만 있습니다. 먼저 생성자 함수로 싱글 톤을 구현해 봅시다 :

let instance = null;
function Car() {
  if(instance) {
    return instance;
  }
  instance = this;
  this.manufacturer = 'Tesla';
  this.model = 'S';
  
  return instance;
}
const carOne = new Car();
const carTwo = new Car();
console.log(carOne === carTwo); // true

모듈 패턴으로 싱글 톤을 구현하는 방법을 살펴 보자.

const singleton = (function() {
  let instance;
  
  function init() {
    return {
      manufacturer = 'Tesla',
      model = 'S',
    };
  }
  return {
    getInstance: function() {
      if(!instance) {
        instance = init();
      }
      
      return instance;
    }
  }
})();
const instanceA = singleton.getInstance();
const instanceB = singleton.getInstance();
console.log(instanceA === instanceB); // true

여기서 우리는 singleton.getInstance를 호출하여 새 인스턴스를 생성합니다. 인스턴스가 존재하지 않으면 init()로 새 인스턴스를 생성합니다. 인스턴스가 이미 존재하면 대신 해당 인스턴스를 가져옵니다.

결론 

디자인 패턴은 소프트웨어 엔지니어링에서 매우 중요한 부분이며 일반적인 문제를 해결하는 데 매우 도움이 될 수 있습니다. 그러나 이것은 매우 광범위한 주제이며, 그들에 관한 모든 것을 포함 시킬 수는 없습니다. 이 책들을 살펴 보는 것이 좋습니다.