JavaScript - 디자인 패턴

디자인 패턴이란?

디자인 패턴(Design Pattern)은 소프트웨어 설계에서 자주 발생하는 문제들을 해결하기 위한 일반적인 해결책이다. 즉, 특정 문제 상황에서 재사용할 수 있는 코드 구조나 설계 방법을 말한다. 디자인 패턴은 코드를 구조화하고 유지보수를 쉽게 하며, 프로그램의 확장성을 높이는 데 도움을 준다. 자주 사용되는 해결책들을 패턴화하여, 개발자가 비슷한 상황에 직면했을 때 효율적으로 문제를 해결할 수 있게 도와준다.

 

디자인 패턴의 종류:

• 생성 패턴: 객체 생성과 관련된 패턴
• 구조 패턴: 클래스와 객체 사이의 관계를 정의하는 패턴
• 행위 패턴: 객체 간의 상호작용을 정의하는 패턴

 

디자인 패턴은 어떤 상황에 사용될까?

디자인 패턴은 반복적인 문제나 유사한 설계 요구가 있을 때 적용된다. 예를 들어, 효율적인 이벤트 처리, 메모리 최적화, 객체 생성 방식 제어, 성능 향상 등의 상황에서 디자인 패턴을 사용하면 코드의 복잡도를 줄이고, 코드의 일관성과 재사용성을 높일 수 있다.

자바스크립트는 동적이며 유연한 언어이기 때문에, 여러 디자인 패턴을 적용해 코드를 효율적으로 관리할 수 있다. 다음으로, 자주 사용되는 자바스크립트 디자인 패턴을 살펴보겠다.

 

 

이벤트 델리게이션 패턴

이벤트 델리게이션(Event Delegation) 패턴은 DOM에서 하위 요소들의 이벤트를 상위 요소에 위임하는 방식이다. 이벤트 리스너를 개별 요소에 붙이는 대신, 상위 요소에 이벤트 리스너를 붙여 이벤트가 **버블링(Bubbling)**을 통해 전달되도록 한다. 이 패턴은 이벤트 리스너를 효율적으로 관리하고, 동적으로 생성된 요소에도 동일한 이벤트를 적용할 수 있게 해준다.

document.querySelector('#parent').addEventListener('click', (event) => {
  if (event.target.matches('.child')) {
    console.log('Child element clicked!');
  }
});

 

위 예시에서, 상위 요소 #parent에 이벤트 리스너를 부착하고, 클릭 이벤트가 발생하면 event.target을 통해 실제 클릭된 하위 요소를 감지한다.

언제 사용될까?

• 많은 DOM 요소에 동일한 이벤트 리스너를 부착할 필요가 있을 때
• 동적으로 생성되거나 제거되는 요소에도 일관된 이벤트 처리가 필요할 때

 

모듈 패턴

모듈 패턴(Module Pattern)은 자바스크립트에서 정보 은닉을 통해 코드를 구조화하는 패턴이다. 즉, 내부 데이터나 메서드를 외부에서 접근하지 못하도록 하면서도, 필요한 부분만 외부에 공개하는 방식이다. 이를 통해 전역 네임스페이스 오염을 방지하고, 각 모듈을 독립적으로 관리할 수 있다.

const CounterModule = (function() {
  let count = 0;

  function increment() {
    count++;
  }

  function getCount() {
    return count;
  }

  return {
    increment,
    getCount
  };
})();

CounterModule.increment();
console.log(CounterModule.getCount());  // 1

 

위 예시에서 count 변수는 외부에서 직접 접근할 수 없지만, increment와 getCount 메서드는 외부에서 사용할 수 있다.

언제 사용될까?

• 전역 변수를 최소화하고, 정보 은닉을 통해 모듈화된 코드를 작성하고 싶을 때
• 독립적인 기능을 가진 여러 모듈을 관리하고, 각 모듈 간의 결합도를 낮추고 싶을 때

 

프락시 패턴

프락시 패턴(Proxy Pattern)은 어떤 객체에 대한 접근을 제어하거나 추가적인 작업을 처리하기 위해 사용되는 패턴이다. 프락시는 실제 객체에 대한 대리자 역할을 하며, 그 객체에 접근하기 전에 필요한 작업(예: 캐싱, 로깅, 검증)을 처리할 수 있다. 자바스크립트에서는 Proxy 객체를 통해 쉽게 구현할 수 있다.

const target = { message: 'Hello' };

const proxy = new Proxy(target, {
  get: function(target, prop) {
    console.log(`Accessing property: ${prop}`);
    return target[prop];
  }
});

console.log(proxy.message);  // Accessing property: message, Hello

 

위 예시에서, 프락시는 get 트랩을 사용해 속성 접근을 감지하고 로그를 출력한 후, 실제 객체의 속성을 반환한다.

언제 사용될까?

• 객체 접근을 제어하거나, 접근 전에 추가 작업이 필요할 때
• 네트워크 요청, 파일 시스템 접근 등과 같은 작업에 대한 캐싱 또는 제한을 할 때

 

 

메모이제이션 패턴

메모이제이션(Memoization) 패턴은 이전에 계산한 값을 캐시에 저장하여 동일한 입력에 대해 중복된 계산을 피하는 최적화 기법이다. 주로 계산 비용이 큰 함수에서 사용되며, 함수 호출 속도를 크게 향상시킬 수 있다.

function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    } else {
      const result = fn(...args);
      cache[key] = result;
      return result;
    }
  };
}

const factorial = memoize(function(n) {
  if (n === 0) return 1;
  return n * factorial(n - 1);
});

console.log(factorial(5));  // 120
console.log(factorial(5));  // 120, 캐시된 결과 사용

 

이 예시에서, 메모이제이션을 사용해 factorial(5)가 이미 계산된 경우 캐시된 값을 반환하여 중복 계산을 피한다.

언제 사용될까?

• 함수의 반복 계산을 최적화하고, 성능을 향상시키고 싶을 때
• 동일한 입력값에 대해 중복 계산을 피하고, 빠른 결과를 얻고 싶을 때

 

옵저버 패턴(Observer Pattern)

옵저버 패턴(Observer Pattern)은 객체 간의 관계를 정의하여, 어떤 객체의 상태가 변경될 때 이를 자동으로 모든 관련 객체에게 알리는 패턴이다. 주로 이벤트 기반 시스템에서 자주 사용되며, Reactive Programming에서도 널리 쓰인다.

 

 

중재자 패턴(Mediator Pattern)

**중재자 패턴(Mediator Pattern)**은 객체 간의 상호작용을 중재자(Mediator) 객체가 관리하는 패턴이다. 이 패턴은 객체들이 직접 통신하지 않고, 중재자를 통해 서로 소통함으로써 의존성을 줄이고 결합도를 낮추는 방식이다.

 

 

MVC 패턴

MVC(Model-View-Controller) 패턴은 애플리케이션을 세 가지 역할로 분리하여 구조화하는 디자인 패턴이다. 이를 통해 유지보수성과 확장성을 높일 수 있다. 각 구성 요소는 다음과 같은 역할을 맡는다:

1. Model (모델):
   • 애플리케이션의 데이터와 비즈니스 로직을 관리하는 부분.
   • 데이터베이스와의 상호작용이나 데이터를 조작하는 로직을 처리한다.
   • 상태 변화가 발생하면 View에 알리거나 Controller가 이를 업데이트한다.
2. View (뷰):
   • 사용자에게 보이는 UI 요소를 관리한다.
   • 모델의 데이터를 표시하거나 사용자의 입력을 받아서 Controller에 전달한다.
   • View는 Model을 직접 변경하지 않으며, 오직 데이터를 시각적으로 보여주는 역할을 한다.
3. Controller (컨트롤러):
   • 사용자의 입력을 처리하고 이를 Model과 View에 전달한다.
   • 사용자의 요청을 받아서 Model을 업데이트하거나, View를 갱신한다.

MVC 패턴의 동작:

• 사용자가 View를 통해 입력을 전달하면, Controller가 이를 받아 Model을 업데이트하고, View를 다시 렌더링한다.