자바스크립트 디자인패턴(JavaScript Design Patterns) - ES5 / ES6

자바스크립트 디자인패턴을 찾아보다가 괜찮은 github 자료가 있어 번역하여 공유하고자 한다. 

잘못된 번역이 있을 시 댓글 부탁드립니다. 

자바스크립트로 구현한 GoF 패턴과 자바스크립트에서 자주 사용하는 패턴을 제공한다. 

원문 링크는 아래 참조

 

https://github.com/Badacadabra/JavaScript-Design-Patterns

GitHub - Badacadabra/JavaScript-Design-Patterns: :paperclip: ES5 + ES6 + CoffeeScript + TypeScript design patterns with some the

 

---

PatternifyJS - JavaScript Design Patterns

PatternifyJS는 JavaScript의 주요 디자인 패턴을 참조하는 것입니다. JS 라이브러리는 포함되어 있지 않지만 JavaScript 주변의 주요 스크립팅 언어가 있습니다. 모든 사용 가능한 언어 목록은 다음과 같습니다:

• ECMAScript (Vanilla)
  • ES5
  • ES6
• CoffeeScript
• TypeScript

Gang of Four (GoF) 패턴은 실생활에서 영감을 받은 원본 개요를 기반으로 하며 두 가지 다른 스타일로 제공됩니다:"classic" & "idiomatic".

 

클래식(classic) 스타일은 Java와 같은 전통적인 클래스 기반 객체지향 언어의 원칙을 모방합니다.

따라서 이 스타일은 패키지, 추상화, 인터페이스, 클래스, 상속, 구성, 캡슐화 및 다형성을 적극적으로 활용합니다.

프로토타입 기반 언어인 JavaScript는 이러한 기능을 네이티브로 갖고 있지 않습니다.

(ES6에 의해 도입된 모든 문법적 설탕에도 불구하고). 그러나 이러한 개념 대부분을 사용하고 재현하는 것은 여전히 가능합니다... 명백한 이유로 클래식 스타일에서는 생성자 함수가 규칙이며, 이 카테고리의 각 디자인 패턴에는 고유의 UML 클래스 다이어그램이 있습니다.

 

관용적인(idiomatic) 스타일은 JavaScript의 진정한 본질을 드러냅니다. 

생성자 함수와 클래스는 팩토리 함수와 객체 리터럴로 대체되며, 더 이상 추상화가 없습니다. 

캡슐화는 최소한으로 줄이고 유연성을 최대한 높입니다. 

이 스타일에서는 GoF 패턴이 전반적인 구조가 흐릿해져 인식하기 약간 어렵지만, 여기서는 클래스가 아닌 객체에 직접 관심을 가지는 것이 더 합리적입니다. 

이것이 관용적 스타일에서는 클래스 다이어그램이 UML 객체 다이어그램으로 대체된 이유입니다.

 

GoF 패턴 이외에도 JavaScript에는 더 다양한 (함수형 및 기타) 패턴이 있습니다. 

이러한 패턴들은 프로그래밍 삶을 더 쉽게 만들어 줄 수 있습니다!

---

Gang of Four (GoF) patterns

생성 패턴(Creational)

• 추상팩토리 (AbstractFactory)
• 빌더(Builder)
• 팩토리(Factory)
• 프로토타입(Prototype)
• 싱글톤(Singleton)

구조 패턴(Structural)

• 어댑터(Adapter)
• Bridge (classic | idiomatic)
• Composite (classic | idiomatic)
• Decorator (classic | idiomatic)
• Facade (classic | idiomatic)
• Flyweight (classic | idiomatic)
• Proxy (classic | idiomatic)

행위 패턴(Behavioral)

• Chain of Responsibility (classic | idiomatic)
• Command (classic | idiomatic)
• Interpreter (classic | idiomatic)
• Iterator (classic | idiomatic)
• Mediator (classic | idiomatic)
• Memento (classic | idiomatic)
• Observer (classic | idiomatic)
• State (classic | idiomatic)
• Strategy (classic | idiomatic)
• Template (classic | idiomatic)
• Visitor (classic | idiomatic)

---

그 외 패턴들 (Miscellaneous patterns)

• Currying
• Method Chaining
• Module
• Object Specifier
• Revealing Module
• Inspiring resources

---

영감을 주는 자료(Inspiring resources)

• JavaScript: The Definitive Guide by David Flanagan
• JavaScript: The Good Parts by Douglas Crockford
• Learning JavaScript Design Patterns by Addy Osmani
• Exploring ES6 by Axel Rauschmayer
• The Little Book on CoffeeScript by Alex MacCaw
• TypeScript Deep Dive by Basarat Ali Syed
• Design Patterns: Elements of Reusable Object
• Oriented Software by Erich Gamma, Richard Helm, Ralph Johnson and John Vlissides

참고자료 중 번역서가 있는 경우에는 번역서로 링크해두었습니다.