tag · 4 posts

#structural

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 →