tag · 12 posts

#object-oriented

패턴은 코드가 아니라 결정의 이름이다 - 디자인 패턴, 객체 수준 편 ep.00
  • series
  • cover
  • develop
  • frontend
  • backend
  • design-patterns
  • gof
  • typescript
  • object-oriented

패턴은 코드가 아니라 결정의 이름이다 - 디자인 패턴, 객체 수준 편 ep.00

GoF 카탈로그를 따라가되 각 편에서 그 패턴이 답하려 했던 질문을 함께 짚습니다. 같은 질문이 디자인·시스템 결정에서 다시 나타나는 자리를 연결해 봅니다. 코드 예제는 TypeScript로 통일했습니다.

read →
Factory와 디자인 시스템의 컴포넌트 팩토리 - 디자인 패턴, 객체 수준 편 ep.01
  • series
  • develop
  • frontend
  • backend
  • design-patterns
  • gof
  • typescript
  • object-oriented
  • factory
  • creational
  • design-system

Factory와 디자인 시스템의 컴포넌트 팩토리 - 디자인 패턴, 객체 수준 편 ep.01

Simple Factory, Factory Method, Abstract Factory를 TypeScript 코드로 비교합니다. 각 형태가 무엇을 분리하려는 결정인지를 짚고, shadcn/ui 같은 디자인 시스템 라이브러리가 Abstract Factory의 모양을 그대로 따른다는 점을 함께 봅니다.

read →
Builder와 폼·필터·쿼리 빌더 UX - 디자인 패턴, 객체 수준 편 ep.02
  • series
  • develop
  • frontend
  • backend
  • design-patterns
  • gof
  • typescript
  • object-oriented
  • builder
  • creational
  • ux

Builder와 폼·필터·쿼리 빌더 UX - 디자인 패턴, 객체 수준 편 ep.02

telescoping constructor가 자라는 자리에 Builder를 두는 이유를 짚고, TypeScript 코드로 fluent interface와 Director의 역할을 정리합니다. 같은 결정 구조가 폼·필터·쿼리 빌더 UI에서 어떻게 다시 나타나는지를 함께 살펴봅니다.

read →
Singleton과 전역 상태·테마 컨텍스트 - 디자인 패턴, 객체 수준 편 ep.03
  • series
  • develop
  • frontend
  • backend
  • design-patterns
  • gof
  • typescript
  • object-oriented
  • singleton
  • creational
  • design-system

Singleton과 전역 상태·테마 컨텍스트 - 디자인 패턴, 객체 수준 편 ep.03

Singleton의 TypeScript 구현과 Eager·Lazy 초기화를 정리합니다. 숨겨진 의존성, 테스트 어려움 같은 안티패턴 논점을 짚고, 디자인 시스템의 ThemeProvider와 React Context가 정말 Singleton인지, 그 결정이 한 개여야만 하는지를 함께 살펴봅니다.

read →
Adapter와 레거시 컴포넌트 마이그레이션 - 디자인 패턴, 객체 수준 편 ep.04
  • series
  • develop
  • frontend
  • backend
  • design-patterns
  • gof
  • typescript
  • object-oriented
  • adapter
  • structural
  • migration

Adapter와 레거시 컴포넌트 마이그레이션 - 디자인 패턴, 객체 수준 편 ep.04

Object Adapter와 Class Adapter의 차이를 TypeScript 코드로 정리하고, 결제 게이트웨이 통합 예제를 통해 외부 의존을 격리하는 방식을 살펴봅니다. 같은 결정 구조가 디자인 시스템 마이그레이션, 특히 v1 컴포넌트 위에 v2 인터페이스를 입히는 점진적 작업에서 어떻게 다시 나타나는지를 함께 봅니다.

read →
Decorator와 Wrapper 컴포넌트의 윤리 - 디자인 패턴, 객체 수준 편 ep.05
  • series
  • develop
  • frontend
  • backend
  • design-patterns
  • gof
  • typescript
  • object-oriented
  • decorator
  • structural
  • react

Decorator와 Wrapper 컴포넌트의 윤리 - 디자인 패턴, 객체 수준 편 ep.05

Logger, Cache, Auth 데코레이터를 체인으로 쌓는 TypeScript 예제로 Decorator의 구조를 살펴보고, HOC와의 차이를 정리합니다. 같은 결정 구조가 Wrapper 컴포넌트와 Compound Component 사이에서 어떻게 다른 답을 내놓는지, 그리고 덧붙임에는 어떤 윤리가 따라오는지를 함께 봅니다.

read →
Facade와 디자인 시스템 라이브러리 API - 디자인 패턴, 객체 수준 편 ep.06
  • series
  • develop
  • frontend
  • backend
  • design-patterns
  • gof
  • typescript
  • object-oriented
  • facade
  • structural
  • design-system

Facade와 디자인 시스템 라이브러리 API - 디자인 패턴, 객체 수준 편 ep.06

결제 시스템을 단일 PaymentFacade로 정리하는 TypeScript 예제를 통해 Facade의 구조를 살펴보고, Adapter와의 차이를 명확히 합니다. 같은 결정 구조가 디자인 시스템 컴포넌트 라이브러리의 API 표면(무엇을 노출하고 무엇을 가릴 것인가)에서 어떻게 다시 나타나는지를 함께 봅니다.

read →
Composite와 디자인 토큰 계층 - 디자인 패턴, 객체 수준 편 ep.07
  • series
  • develop
  • frontend
  • backend
  • design-patterns
  • gof
  • typescript
  • object-oriented
  • composite
  • structural
  • design-tokens

Composite와 디자인 토큰 계층 - 디자인 패턴, 객체 수준 편 ep.07

파일시스템과 UI 트리 예제로 Composite 패턴의 구조를 살펴보고, 같은 결정 구조가 디자인 토큰의 primitive → semantic → component 계층에서 어떻게 다시 나타나는지를 함께 봅니다. 토큰이 다른 토큰을 참조하는 일이 왜 Composite의 가장 자연스러운 사례인지를 짚습니다.

read →
Strategy와 다크모드 스위칭 - 디자인 패턴, 객체 수준 편 ep.08
  • series
  • develop
  • frontend
  • backend
  • design-patterns
  • gof
  • typescript
  • object-oriented
  • strategy
  • behavioral
  • design-system

Strategy와 다크모드 스위칭 - 디자인 패턴, 객체 수준 편 ep.08

switch문 안티패턴을 Strategy로 정리하는 TypeScript 예제와 정렬·결제 알고리즘 교체를 살펴봅니다. 같은 결정 구조가 다크모드, 다국어, 플랫폼별 분기에서 어떻게 다시 나타나는지를 함께 살펴봅니다. Strategy와 State의 경계도 짚습니다.

read →
Observer와 알림 UX의 윤리 - 디자인 패턴, 객체 수준 편 ep.09
  • series
  • develop
  • frontend
  • backend
  • design-patterns
  • gof
  • typescript
  • object-oriented
  • observer
  • behavioral
  • ux-ethics

Observer와 알림 UX의 윤리 - 디자인 패턴, 객체 수준 편 ep.09

EventEmitter와 Pub/Sub의 구조를 TypeScript 코드로 정리하고, Push와 Pull 방식의 차이, 메모리 누수의 함정을 짚습니다. 같은 결정 구조가 사용자에게 닿는 알림 UX에서 어떻게 다시 나타나는지, 그리고 그 알림이 dark pattern과 가까워지는 경계를 함께 살펴봅니다.

read →
State와 폼 상태 머신 - 디자인 패턴, 객체 수준 편 ep.10
  • series
  • develop
  • frontend
  • backend
  • design-patterns
  • gof
  • typescript
  • object-oriented
  • state
  • behavioral
  • finite-state-machine

State와 폼 상태 머신 - 디자인 패턴, 객체 수준 편 ep.10

주문 처리 상태(draft → submitted → paid → shipped)를 TypeScript로 정리하고, 분기문이 자라는 안티패턴을 State로 풀어내는 과정을 살펴봅니다. 같은 결정 구조가 폼 상태 머신(idle → validating → submitting → success/error)에서 어떻게 다시 나타나는지를 함께 봅니다. Strategy와의 경계도 다시 한 번 짚습니다.

read →
부록: 그 외 GoF 객체 패턴들 - 디자인 패턴, 객체 수준 편 ep.11
  • series
  • develop
  • frontend
  • backend
  • design-patterns
  • gof
  • typescript
  • object-oriented
  • appendix

부록: 그 외 GoF 객체 패턴들 - 디자인 패턴, 객체 수준 편 ep.11

Visitor, Memento, Flyweight, Iterator, Command, Chain of Responsibility, Prototype, Bridge, Mediator, Template Method를 한 편으로 다룹니다. 각 패턴마다 핵심 정의, 실무에서 보이는 자리, 그리고 본편이 아닌 부록에 머무른 이유를 간결하게 정리합니다. 시즌 1 객체 수준 편의 마지막 편입니다.

read →