[디자인 패턴 with TS] 강의 내용

 

1. 디자인 패턴 코드

디자인 패턴을 '정해진 코드의 묶음'으로 오해하곤 한다.

하지만 실제로는 문제 해결을 위한 전략적인 방향만 제시할 뿐,

구체적인 코드는 개발자가 자유롭게 작성하는 것에 가깝다.

 

강의를 통해 배우는 디자인 패턴은 타입스크립트를 사용하며, 총 23개이다.

 

디자인 패턴을 사용하는 주된 목적

- 코드를 더 유연하고 확장 가능하게 만들어 유지보수를 쉽게 하려는 목적으로 사용된다.

- 복잡성 증가 시 그 효과가 커진다.

- 디자인 패턴을 따르는 것은 SOLID 원칙을 자연스럽게 준수하도록 돕는다.

 

2. 추상 클래스와 인터페이스의 사용처

강의에서 사용하는 타입스크립트 객체 코드는 기본적으로 추상 클래스를 (abstract class)를 사용한다. 그리고 다중 구현이 필요한 경우에는 인터페이스(interface)를 사용한다. 즉, Java와 같은 다른 언어에서 구현된 디자인 패턴 코드를 보면 UML 다이어그램(클래스들의 상호작용하는 구조와 관계를 표현한 도표)의 추상 클래스(이탤릭체 객체)를 일반적으로 인터페이스로 구현하지만 강의에서 코드 구현은 추상 클래스로 구현한다.

이러한 이유는 타입스크립트의 타입이 유연하기 때문이다. 타입스트립트는 구조적 타이핑(structural typing ↔ nominal typing; 명목적 타이핑)을 채용하기 때문에 public 만 존재하는 경우 추상 클래스나 인터페이스나 상속부분을 제외하고 동일하다. 객체의 모양(속성/메서드)이 같기 때문에 이름이나 타입이 달라도 사용 시 똑같은 타입으로 쳐준다.

class 생성 시 인터페이스는 implements 로 다중 상속이 가능하지만, 추상 클래스의 경우에는 하나만 클래스만 extends 가능하다. 다중으로 구현된 인터페이스를  상속(extends) 해야 하는 경우에는 인터페이스를 class로 다시 정의하고 어쩔 수 없이 중간 클래스를 하나 거쳐서 상속을 하도록 한다. 그래서 자바스크립트에서는 인터페이스 형태의 클래스 상속의 사용법을 안 좋아하는 것 같다. 중간 클래스가 생기면서 코드가 지저분해지기 때문이다.

 

타입스크립트 추상 클래스(abstract class)를 주로 사용하는 이유

- 자바스크립트에는 인터페이스가 존재하지 않기 때문에, '.ts' 파일에서 '.js' 파일로 변환 됐을 때 인터페이스는 사라지지만 추상 클래스의 경우에는 타입만 제외하고 그대로 남는다.

- 추상 클래스는 내부 구현을 위해 private나 protected 속성을 가질 수 있지만, 인터페이스는 외부와의 계약이라 public 속성만 정의 가능하다.

 

3. 디자인 패턴의 종류 (👉목차)

• 생성 (Creational): 객체를 생성할 때 사용할 수 있는 다양한 생성 패턴
• 행동 (Behavioral): 객체가 자신의 역할을 깔끔하게 수행하게 만드는 행동 패턴
• 구조 (Structural): 다양한 객체를 조합하여 활용하는 구조 패턴

생성 패턴의 종류 (6개)

• 싱글턴 (Sigleton): 앱 내에서 단 하나만 존재해야 할 때
• 심플 팩토리 (Simple Factory): 크롬 그림판과 IE 그림판
• 팩토리 메서드 (Factory Method): 사파리 그림판 추가
• 추상 팩토리(Abstract Factory): 여러 객체가 세트로 구성될 때
• 빌더 (Builder): 객체를 생성하는 과정이 복잡할 때
• 프로토타입 (Prototype): 기존 객체를 복붙해서 새 객체 만들기

행동 패턴의 종류 (11개)

• 명령 (Command): 모든 작업을 동일하게 규격화
• 상태 (State): 모드 정하기 (if문 중복 제거)
• 전략 (Strategy): png, jp, webp 저장 전략 (if문 중복 제거)
• 템플릿 메서드 (Template Method): 서식 재활용하며 일부만 수정해서 쓰기
• 책임 연쇄 (Chain of Responsibility): 그림판 필터 연달아 적용
• 옵저버 (Observer): 구독하고 알림 받기
• Pub/Sub: 확장성 높인 옵저버
• 중재자 (Mediator): 중앙집중식 제어
• 메멘토 (Memento): 히스토리
• 반복자 (Iterator)
• 방문자 (Visitor): 비즈니스 로직 외부에서 실행하기

 

구조 패턴의 종류 (8개)

• 퍼사드 (Facade): 복잡한 건 숨겨서 간단하게 드러내기
• 어댑터 (Adapter): 서로 호환시키기
• 데코레이터 (Decorator): 기존 클래스에 기능 추가
• 믹스인 (Mixin): 기존 클래스에 기능 추가
• 대리인 (Proxy): 접근제어, 로딩, 캐싱
• 플라이웨이트 (Flyweight): 메모리 절약
• 브릿지 (Bridge): 추상과 구현의 분리
• 컴포지트 (Composite)

 

출처: TS/JS 디자인 패턴 with Canvas

TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기 강의 | 제로초(조현영) - 인프런