TS 디자인 패턴 — 쇼핑몰 만들면서 배우는 GoF 가이드

23 GoF 디자인 패턴

1개 쇼핑몰 완성

3단계 생성 → 구조 → 행위

∞ 실무 활용 가능

🗺️ 이 순서대로 따라오세요

패턴 하나하나가 쇼핑몰의 실제 기능입니다. 끝까지 따라오면 23가지 패턴을 모두 써본 셈이에요!

🏪

우리가 만들 쇼핑몰은?

상품 조회, 장바구니, 결제, 주문 추적, 알림, 검색 필터까지
실제 커머스 서비스에 필요한 기능을 모두 넣을 거예요.

🛋️ 상품 목록 & 상세 🛒 장바구니 💳 결제 시스템 📦 주문 추적 🔔 재입고 알림 🔍 검색 & 필터 🌙 다크/라이트 테마 ↩️ Undo 기능

Step 1 · 생성 패턴

🏗️ 쇼핑몰 뼈대 만들기

장바구니, 상품, 알림, 테마 같은
핵심 객체를 올바르게 만드는 방법을 배워요.
잘못된 객체 생성이 얼마나 큰 문제를 만드는지 직접 봅니다.

Singleton — 장바구니 전역 상태 Builder — 검색 필터 쿼리 Factory Method — 알림 채널 Abstract Factory — 테마 UI 세트 Prototype — 상품 옵션 복제

→

Step 2 · 구조 패턴

🔧 기능 연결하고 조합하기

외부 결제 SDK 연결, 카테고리 트리, 이미지 지연 로딩 등
컴포넌트를 합쳐서 더 큰 기능을 만드는 법을 배워요.

Adapter — 결제 SDK 연동 Decorator — API 로딩/에러 처리 Facade — 주문하기 버튼 Proxy — 이미지 지연 로딩 Composite — 카테고리 트리 Bridge — 레이아웃 전환 Flyweight — 상품 카드 최적화

→

Step 3 · 행위 패턴

🎭 쇼핑몰에 생명 불어넣기

실시간 알림, 정렬, Undo, 주문 상태 변화 등
쇼핑몰이 살아 움직이는 상호작용을 구현해요.

Observer — 재입고 알림 Strategy — 상품 정렬 Command — 장바구니 Undo State — 주문 상태 머신 Mediator — 검색 컴포넌트 조율 Iterator — 무한 스크롤 + 5패턴 더

🚀 어디서 시작할까요?

TypeScript가 처음이라면 TS 기초부터, 바로 쇼핑몰 만들기를 시작하고 싶다면 패턴 탐색기로!

🏆

GoF란 무엇인가?

Gang of Four — 1995년 에리히 감마 외 4인이 체계화한 23가지 객체지향 설계 패턴의 바이블.