JavaScript로 함수형 프로그래밍 활용하기

디자인 패턴은 소프트웨어 디자인에서 자주 발생하는 문제에 대한 솔루션으로 확립되었습니다. 이를 활용하여 개발자는 코드 가독성, 확장성 및 유지 관리성을 향상시킬 수 있습니다. 이 기사에서는 점점 인기를 얻고 있는 JavaScript의 상위 집합인 TypeScript가 유형 안전성과 최신 기능을 통해 이러한 패턴을 어떻게 개선하는지 살펴봅니다. 대규모 애플리케이션을 개발하든 사이드 프로젝트를 개발하든 TypeScript의 디자인 패턴을 이해하면 개발 기술이 향상됩니다.

디자인 패턴이란 무엇입니까?

디자인 패턴은 소프트웨어 디자인의 일반적인 과제에 대한 재사용 가능한 일반적인 솔루션입니다. 이는 실제 코드가 아니라 이러한 문제를 해결하기 위한 템플릿입니다. GoF(Gang of Four) 책에서 유래한 이 패턴은 세 가지 주요 범주로 나뉩니다.

1. 생성 패턴: 객체 생성 메커니즘에 관심이 있습니다.
2. 구조적 패턴: 사물의 구성과 조직을 강조합니다.
3. 행동 패턴: 사물 간의 상호작용과 의사소통에 중점을 둡니다.

TypeScript에서 디자인 패턴을 사용하는 이유는 무엇입니까?

TypeScript의 기능은 디자인 패턴 구현을 더욱 강력하게 만듭니다.

1. 정적 입력: 컴파일 타임에 오류가 포착되어 런타임 버그가 줄어듭니다.
2. 인터페이스 및 제네릭: 더욱 정확하고 유연한 구현이 가능합니다.
3. 열거형 및 공용체 유형: 상태 관리와 같은 특정 패턴을 단순화합니다.
4. 향상된 도구: IDE 지원을 통해 TypeScript는 생산성을 높입니다.

TypeScript의 몇 가지 주요 디자인 패턴

1. 싱글톤 패턴

클래스에 하나의 인스턴스만 있도록 하고 이에 대한 전역 액세스 지점을 제공합니다.

TypeScript로 구현:

class Singleton {
  private static instance: Singleton;

  private constructor() {} // Prevent instantiation

  public static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

사용 사례: 구성 설정 또는 데이터베이스 연결 관리

2. 팩토리 패턴

정확한 클래스를 지정하지 않고 객체를 생성할 수 있는 인터페이스를 제공합니다.

구현:

interface Button {
  render(): void;
}

class WindowsButton implements Button {
  render() {
    console.log("Rendering Windows button");
  }
}

class MacButton implements Button {
  render() {
    console.log("Rendering Mac button");
  }
}

class ButtonFactory {
  static createButton(os: string): Button {
    if (os === "Windows") return new WindowsButton();
    if (os === "Mac") return new MacButton();
    throw new Error("Unknown OS");
  }
}

const button = ButtonFactory.createButton("Mac");
button.render(); // Output: Rendering Mac button

사용 사례: 크로스 플랫폼 애플리케이션을 위한 UI 프레임워크.

3. 관찰자 패턴

한 개체의 변경 사항이 모든 종속 항목에 통보되는 일대다 관계를 정의합니다.

구현:

class Subject {
  private observers: Array<() => void> = [];

  addObserver(observer: () => void) {
    this.observers.push(observer);
  }

  notifyObservers() {
    this.observers.forEach(observer => observer());
  }
}

const subject = new Subject();
subject.addObserver(() => console.log("Observer 1 notified!"));
subject.addObserver(() => console.log("Observer 2 notified!"));
subject.notifyObservers();

사용 사례: Angular 또는 React와 같은 프런트엔드 프레임워크의 반응성.

4. 전략 패턴

알고리즘 계열을 정의하고 각각을 캡슐화하여 상호 교환 가능하게 만듭니다.

구현:

interface PaymentStrategy {
  pay(amount: number): void;
}

class CreditCardPayment implements PaymentStrategy {
  pay(amount: number) {
    console.log(`Paid ${amount} using Credit Card`);
  }
}

class PayPalPayment implements PaymentStrategy {
  pay(amount: number) {
    console.log(`Paid ${amount} using PayPal`);
  }
}

class PaymentContext {
  constructor(private strategy: PaymentStrategy) {}

  executePayment(amount: number) {
    this.strategy.pay(amount);
  }
}

const payment = new PaymentContext(new PayPalPayment());
payment.executePayment(100); // Paid 100 using PayPal

사용 사례: 전자상거래 플랫폼의 결제 시스템

5. 데코레이터 패턴

객체에 동적으로 새로운 기능을 추가합니다.

구현:

class Singleton {
  private static instance: Singleton;

  private constructor() {} // Prevent instantiation

  public static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

사용 사례: 장바구니에 있는 제품에 기능 추가

디자인 패턴 표

Pattern	Category	Use Case	Benefit
Singleton	Creational	Managing global state like configurations	Guarantees single instance
Factory	Creational	UI components or APIs	Decouples creation logic
Observer	Behavioral	Event systems in frameworks	Simplifies communication
Strategy	Behavioral	Algorithm selection in runtime	Enhances flexibility
Decorator	Structural	Extending class functionality	Adds dynamic capabilities

패턴

카테고리

사용 사례

혜택
싱글톤 창작 구성과 같은 전역 상태 관리 단일 인스턴스 보장 공장 창작 UI 구성요소 또는 API 생성 로직 분리 관찰자 행동 프레임워크의 이벤트 시스템 간단한 의사소통 전략 행동 런타임 중 알고리즘 선택 유연성 향상 데코레이터 구조적 클래스 기능 확장 동적 기능 추가 디자인 패턴 구현 모범 사례
1. 문제 이해:
불필요한 패턴으로 복잡하게 만들지 마세요. 2. 패턴 결합: 싱글톤과 팩토리 등의 조합 사용을 고려해 보세요.

3. TypeScript 기능 활용:

인터페이스, 제네릭 및 열거형을 활용하여 구현을 더 쉽게 만듭니다.
• 4. 테스트 작성: 패턴이 의도한 대로 작동하는지 확인하세요. 추가 리소스
• হাতে কলমে জাভাস্ক্রিপ্ট 작성자: Junayed Ahmed

패턴으로 리팩토링

---

작성자:

Joshua Kerievsky

---

다음 글에서 만나요! ?

내 개인 웹사이트: https://shafayet.zya.me

바람이 좀 부네요, 그렇죠 브루브???

위 내용은 JavaScript로 함수형 프로그래밍 활용하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!