디자인 패턴 - introduction

지난 한 달 간 디자인 패턴에 대해 주1회 스터디를 진행했다. 매주 patterns.dev의 디자인 패턴 중 4~6개 아티클을 순서대로 정해 스터디 전에 읽어온 후에 스터디 시간에는 서로 궁금한 점이나 잘 이해가 되지 않는 부분을 논의하고, 각자 프로젝트에서 작성한 코드베이스 중에서 유사한 패턴이 있는 경우 공유하기도 했다. 다른 사람의 코드를 보는 경험은 늘 흥미롭기 마련인데 디자인 패턴이라는 틀 안에서 볼 수 있다는 점이 좋았고, 꼭 디자인 패턴이 아니라더라도 현재 고민하고 있는 부분들을 나누면 스터디 파트너 분이 같이 고민해주셔서 감사했다. 

 

한 달 간의 스터디를 마무리하고 다음 주제로 넘어가기로 해서 디자인 패턴에 대해 공부한 내용을 간략하게나마 나의 언어로 정리해두려고 한다. patterns.dev 사이트는 웹사이트에서 codepen으로 playground를 제공해서 좋았다. 동일한 내용을 pdf나 epub으로도 제공해서 처음에는 전자책으로 보려고 했는데, 역시나 코드를 직접 만져보려고 하니 결국은 사이트에서 아티클을 읽게 되었다. 스터디 중간에 파트너 분이 pattersn.dev 사이트를 통째로 한국어로 번역해서 운영하는 사이트를 발견해서 알려주셨다. 디자인 패턴까지만 진행했지만 추후 랜더링 패턴이나 퍼포먼스 패턴도 개인적으로 공부하려고 한다. 

 

Patterns.dev - Modern Web App Design Patterns

 

위의 pattersn.dev에는 설명이 없지만, 디자인 패턴의 개념을 정립시킨 가장 유명한 책은 <Design Patterns: Elements of Reusable Object-Oriented Software>(1994)인 것 같다. 이 책에서는 디자인 패턴을 크게 아래의 세 가지로 분류한다.

 

 

1. Creational Pattern

• 객체 생성에 관련된 패턴
• 객체의 생성과 조합을 캡슐화하여 특정 객체가 생성, 변경되어도 프로그램 구조에 큰 영향이 없도록 한다.
• Singleton, Prototype, Factory, Provider 패턴 등

 

 

2. Structural Pattern

• 클래스나 객체를 조합해 더 큰 구조를 만드는 패턴
• 서로 다른 인터페이스를 지닌 객체를 묶어 단일 인터페이스를 제공하거나, 객체를 서로 묶어 새로운 기능을 제공하는 패턴
• Proxy, Mixin, Flyweight, Compound, Container-Presentational 패턴 등

 

 

3. Behavioral Pattern

• 객체나 클래스 사이의 알고리즘이나 책임 분배에 관련된 패턴
• 한 객체가 혼자 수행할 수 없는 작업을 어떻게 여러 개의 객체로 분배하는지, 그 과정에서 객체 간의 결합도를 어떻게 최소화하는지에 중점
• Module, Observer, Mediator/Middleware, Command, HOC, Render props, Hooks 패턴 등

 

 

개별 패턴에 대해 정리한 내용은 다음 포스팅에 이어서 작성하도록 하겠다. 

 

 

📚 참고자료

https://www.ramotion.com/blog/frontend-design-patterns/

https://velog.io/@aborile/Frontend-Design-Pattern