[JS] 디자인 패턴(Design

by

향후 게시글 “JavaScript 디자인 패턴”은 ChatGPT에 “JavaScript 개발자가 배워야 할 필수 디자인 패턴”이라는 질문을 던진 후 내용을 요약한 게시물입니다.

나는 이전에 디자인 패턴을 연구하기 위해 재해 보조금으로 Head First Design Patterns 책을 구입했습니다.

알 수 없는 외계인 감성으로 아직 디자인 패턴(정말 멍청한 생각)이 필요없다고 생각해서 그냥 사서 책장에 꽂아두었습니다.

지금은 개발 중이므로(하지만 제대로 하고 있는지는 모르겠습니다) 이제 디자인 패턴에 대해 실제로 배울 때입니다.

'추천 관련글,

그런데 한 번도 나오지 않은 헤드퍼스트 디자인 패턴의 수정 버전이 있었고 디자인이 훨씬 깔끔해졌습니다. 알 수 없는 외계인의 감성인 위에서 본 앵글의 커버리지는 변함이 없지만…

여하튼 이것 때문에 Head First Design Patterns를 손에 넣지 못하고 ChatGPT로 자바스크립트 디자인 패턴을 배울까 생각하다가 ChatGPT와 DeepL로 자바스크립트 디자인 패턴을 배우기로 했습니다.

1. 모듈 패턴

모듈 패턴은 코드를 비공개 및 공개 멤버가 있는 재사용 가능한 모듈로 캡슐화하는 방법을 제공하는 JavaScript의 디자인 패턴입니다.

모듈 패턴의 이면에 있는 아이디어는 전역 네임스페이스 오염과 잠재적인 이름 충돌을 피하면서 자체 범위가 있는 독립적인 코드 단위를 만드는 것입니다.

모듈 패턴에서 모듈은 모듈의 공개 멤버를 포함하는 객체를 반환하는 함수로 정의됩니다. 이 함수는 클로저를 생성하여 모듈의 비공개 상태를 캡슐화합니다.

다음은 카운터를 정의하는 간단한 모듈의 예입니다.

const CounterModule = (function() {
  // 비공개 멤버
  let count = 0;

  function increment() {
    count++;
  }

  function decrement() {
    count--;
  }

  // 공개 멤버
  return {
    getCount: function() {
      return count;
    },
    increment,
    decrement
  };
})();

이 예제에서 CounterModule 함수는 모듈의 공용 멤버를 포함하는 개체를 반환하는 IIFE(즉시 호출된 함수 식)로 정의됩니다.

모듈의 전용 멤버는 let 키워드를 사용하여 함수 내부에서 정의되며 함수 외부에서 호출할 수 없습니다.

모듈의 공개 멤버는 반환된 객체의 메서드로 정의되며 비공개 멤버는 클로저를 통해 액세스할 수 있습니다.

카운터 모듈은 공용 메서드를 호출하여 사용할 수 있습니다.

CounterModule.increment();
console.log(CounterModule.getCount()); // 출력: 1
CounterModule.decrement();
console.log(CounterModule.getCount()); // 출력: 0

2. 모듈 패턴 퀴즈

다음은 ChatGPT에 “JavaScript에서 모듈 패턴을 연습할 수 있는 퀴즈를 주세요.”라는 질문 이후의 다섯 가지 질문과 답변입니다.

1. JavaScript에서 모듈 패턴이란 무엇입니까?

  • 모듈 패턴은 개발자가 자신의 코드를 비공개 및 공개 멤버를 가질 수 있는 독립적인 모듈로 캡슐화하고 구성할 수 있도록 하는 JavaScript의 디자인 패턴입니다.

2. 모듈 패턴을 사용하면 어떤 장점이 있나요?

  • 모듈 패턴은 다음과 같은 몇 가지 이점을 제공합니다.
    • 개인 변수와 함수를 캡슐화하여 이름 충돌을 피하고 코드 유지 관리성을 개선할 수 있습니다.
    • 모듈은 여러 프로젝트 및 애플리케이션에서 사용할 수 있으므로 코드 구성 및 재사용성이 향상됩니다.
    • 전역 네임스페이스의 오염과 원하지 않는 부작용을 피하기 위해 전역 변수의 사용이 줄어듭니다.

3. 모듈 패턴에서 비공개 및 공개 요소를 어떻게 생성합니까?

  • 모듈 패턴에서 클로저를 사용하여 모듈 외부에서 액세스할 수 없는 변수 및 함수를 정의하는 데 사용할 수 있는 전용 멤버를 만들 수 있습니다. 노출하려는 공용 메서드 및 속성이 포함된 개체를 반환하여 공용 멤버를 만들 수 있습니다.

4. 모듈 패턴에서 명명된 함수와 익명 함수의 차이점은 무엇입니까?

  • 모듈은 모듈 패턴에서 명명된 함수 또는 익명 함수로 정의할 수 있습니다.
    명명된 함수는 디버깅 및 스택 추적에 유용하며 익명 함수는 코드를 더 간결하고 읽기 쉽게 유지하는 데 도움이 될 수 있습니다.

5. IIFE(즉시 호출 함수 표현식)와 모듈 패턴의 명명된 함수의 차이점은 무엇입니까?

  • 모듈 패턴에서 IIFE는 정의된 직후에 호출되는 익명 함수이며 명명된 함수는 나중에 호출될 수 있습니다.
    IIFE는 종종 여러 프로젝트 및 응용 프로그램에서 사용할 수 있는 독립적인 모듈을 만드는 데 사용됩니다.
  • IIFE를 사용하면 인스턴스를 공유 싱글톤으로 사용할 수 있으며 명명된 함수를 사용하면 하나의 함수를 호출하여 여러 인스턴스를 만들 수 있습니다.

3. 모듈 패턴 연습 코드

ChatGPT로 “JavaScript에서 모듈 패턴을 연습할 수 있는 도전 과제를 주세요.질문과 그에 대한 답을 묻고 나서 나온 질문입니다.


스켈레톤 코드는 다음과 같습니다.

const shoppingCartModule = (function() {
  // Private variables and functions
  // ...

  // Public API
  return {
    addItem: function(name, price) {
      // ...
    },
    removeItem: function(name) {
      // ...
    },
    getTotalCost: function() {
      // ...
    }
  };
})();

이를 구현하는 코드는 다음과 같습니다.

const shoppingCartModule = (function () {
  let items = ();

  const findItemIndex = (name) => items.findIndex((item) => item.name === name);

  const addItem = (name, price) => {
    const index = findItemIndex(name);

    if (index !== -1) {
      items(index).quantity++;
    } else {
      items = (...items, { name, price, quantity: 1 });
    }
  };

  const removeItem = (name) => {
    items = items.filter((item) => item.name !== name);
  };

  const getTotalCost = () =>
    items.reduce((total, item) => total + item.price * item.quantity, 0);

  // Public API
  return { addItem, removeItem, getTotalCost };
})();

shoppingCartModule.addItem('Apple', 1.99);
shoppingCartModule.addItem('Banana', 0.99);
shoppingCartModule.addItem('Apple', 1.99);
console.log(shoppingCartModule.getTotalCost()); // Output: 4.97

shoppingCartModule.removeItem('Banana');
console.log(shoppingCartModule.getTotalCost()); // Output: 3.98