[디자인-UI 컴포넌트 패턴 스터디] - 첫 번째 미팅

2023년 10월 22일 일요일

 

디자인-UI 컴포넌트 패턴 스터디 첫 번째 미팅을 가졌습니다.

 

이번에 디자인 패턴 스터디는 처음 진행해보는 분야여서 사전에 걱정이 많았습니다.

아무래도 책을 기반으로 하지 않고 레퍼런스 위주로 진행하면서

실무 노하우의 경험들이 정립된 분야여서 어떻게 스터디의 목표를 설정하고 풀어나가면 좋을지 고민이 많았습니다.

 

간단히 정리하면 3가지입니다.

1. 사전에 TS Design Patterns - GoF 5가지, UI Design Patterns 5가지를 읽어옵니다.

2. 지난 주에 학습했던 패턴 중 하나의 패턴에 대해 적용 사례를 찾아옵니다. (미션)

3. 레퍼런스 자료를 읽으면서 궁금했던 점, 즉 질문을 정리합니다.

 

우선 첫 타임은 TS Design Patterns - GoF 5가지 패턴을 살펴보고

이후 두 번째 타임에서는 UI Design Patterns 5가지를 살펴보는 것으로 설정했습니다.

개인적으로 학습해보면서 이렇게 진행하는 것이 적절할 것이라 생각되었고

최대한 큰 무게감 없이 진행하려고 생각을 많이 했습니다.

 

오늘 첫 번째 미팅에서는 사전에 스터디원분들께 말씀드린대로

생성 패턴 5가지와 React Design Patterns 들이 정리되어 있는 아티클을 살펴봤습니다.

 

우선 처음부터 바로 스터디를 시작하기 전에

지난 주 토요일 롯데타워에서 열린 FE Conf 2023에서 마침 디자인 패턴 내용이 있어서

해당 영상을 심플 팩토리 패턴이 나오는 부분까지 같이 시청하였습니다.

인트로에서 디자인 패턴에 대한 간단한 소개와 설명들이 있어서 같이 먼저 보면 좋을 것이라 생각되었고

또 오늘 팩토리 패턴을 같이 살펴보는 겸 심플 팩토리 패턴이 영상 자료에 있어서 간단히 보면 좋을 것이라 생각했습니다.

 

그렇게 영상을 시청한 이후 TS Design Patterns - 생성 패턴 5가지를 함께 살펴봤습니다.

 

Creational Patterns

  - Abstract Factory

  - Factory Method

  - Builder

  - Prototype

  - Singleton

 

레퍼런스 자료를 같이 핵심적인 부분만 살펴보고,

Real World 스터디에서 파랑님이 제공해주신 자료와 싱글톤/빌더 관련 FE 코드도 살펴봤습니다.

저는 해당 부분을 공부하면서 팩토리 삼형제인 - Abstract Factory, Factory Method, Simple Factory의

차이점이 무엇인지 헷갈렸는데 같이 의논하다보니 조금 정리가 되었습니다.

 

Simple Factory는 매개변수의 타입에 따라 다른 인스턴스를 반환하는 단순한 Factory class 용도이고,

Abstract Factory는 factory interface를 기반으로 구현체가 있고
각 구현체는 같은 유형의 variant에 대한 Product들을 가질 수 있다는 것입니다.
Composite로 이루어진 패턴입니다.

Factory Method는 abstract class를 기반으로
상속을 하는 자식 클래스들에서 인스턴스의 type을 결정할 수 있는 상속 기반의 패턴입니다.

 

이 부분을 보면서 제가 전에 매우 좋아하던 스타크래프트 게임이 생각났습니다.

테란 종족에서 Factory 라는 건물이 있는데 이와 비슷한 예시가 떠올랐습니다.

우선 우리가 생각하는 Simple Factory는 client가 직접 유닛을 생성하지 않게

커맨드, 배럭, 팩토리 등 여러 건물에서 유닛을 생성할 수 있도록

유닛의 타입에 따라 인스턴스를 생성할 수 있는 단순한 팩토리로 생각이 되었고,

Abstract Factory는 굳이 예시를 만든다면 팩토리라는 건물이 있으면

벌쳐 + 탱크 + 골리앗을 하나의 product family로 가정할 수 있고

색상을 variant로 구분해서 빨간색 벌쳐/파란색 벌쳐 등으로 구분할 수 있다는 생각이 들었습니다.

 

아무쪼록 이러한 예시들이 스터디하면서 생각이 났고

아직 실무에 적용한 경험이 없어서 이해가 많이 되지는 않았지만

개인적으로 이해는 하는 것이 아니라 나중에 경험으로부터 온다는 생각을 하고 있어서

꾸준히 많이 보고 적용해보는 노력을 하면 좋을 것 같습니다.

 

이후 여러 React Design Patterns 들을 살펴보면서

Real World에서 같이 봤던 자료 및 코드들도 봤습니다.

 

쉽지 않은 스터디이지만

다들 모두 열심히 참여해주셔서 감사했습니다.

 

앞으로 약 6주 정도 진행될텐데

마지막까지 잘 마무리할 수 있도록 최선을 다해보겠습니다!

 

다들 화이팅입니다~

---

[FE Conf 2023] - 웹 기반 그래픽 편집기의 구조와 7가지 디자인 패턴

[TS Design Patterns] - 생성 패턴

[React Design Patterns] - You Should Know in 2023