[javascript] Angular와 자바스크립트에서의 디자인 패턴 이해하기

21 Dec 2023

javascript

Angular 및 JavaScript에서 디자인 패턴을 이해하는 것은 애플리케이션의 유지 보수성, 효율성 및 확장성에 중요한 영향을 미칩니다. 디자인 패턴은 코드의 구조화와 조직화를 도와주며, 문제 해결과 성능 향상에 도움이 됩니다.

1. MVC (Model-View-Controller)

MVC는 소프트웨어 디자인 패턴으로, 사용자 인터페이스와 응용프로그램 데이터와 로직을 분리하여 각각을 독립적으로 유지하는 것을 목표로 합니다.

다음은 JavaScript로 간단한 MVC 패턴을 구현한 예제입니다.

function Model(data) {
  this.data = data;
  this.listeners = [];
}

Model.prototype = {
  setData: function(data) {
    this.data = data;
    this.notifyListeners();
  },
  addListener: function(listener) {
    this.listeners.push(listener);
  },
  notifyListeners: function() {
    for (var i = 0; i < this.listeners.length; i++) {
      this.listeners[i].update(this);
    }
  }
};

function View(controller) {
  this.controller = controller;
  this.controller.model.addListener(this);
}

View.prototype = {
  update: function(model) {
    // Update view with model data
  }
};

function Controller(data) {
  this.model = new Model(data);
  this.view = new View(this);
}

Controller.prototype = {
  setData: function(data) {
    this.model.setData(data);
  }
};

var controller = new Controller("Initial data");
controller.setData("Updated data");

2. Observer Pattern

옵저버 패턴은 객체 간의 일대다 종속 관계를 정의하여 객체의 상태 변화를 다른 객체에 통지하는 패턴입니다.

다음은 Angular에서 옵저버 패턴을 활용한 간단한 예제입니다.

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

Subject.prototype = {
  subscribe: function(observer) {
    this.observers.push(observer);
  },
  unsubscribe: function(observer) {
    this.observers = this.observers.filter(subscriber => subscriber !== observer);
  },
  notify: function(data) {
    this.observers.forEach(observer => observer.update(data));
  }
};

function Observer() {
  this.update = function(data) {
    // Handle updated data
  };
}

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

subject.subscribe(observer1);
subject.subscribe(observer2);

subject.notify("New data");

결론

디자인 패턴은 Angular와 JavaScript 프로그래밍에서 중요한 역할을 합니다. MVC 및 옵저버 패턴과 같은 디자인 패턴을 활용하면 코드의 유지 보수성과 확장성을 향상시키고, 응용프로그램의 구조를 더 잘 이해할 수 있습니다. 가능하다면 이러한 디자인 패턴을 공부하고 실제 프로젝트에 적용하는 것이 좋습니다.

참고 자료: