프론트엔드 디자인 패턴

프론트엔드 코드에서 자주 만나는 디자인 패턴을 인터랙티브 시각화로 이해합니다

1. 01

   Observer와 Pub/Sub, 이벤트 기반 소통

   상태 변경을 자동으로 전파하는 Observer 패턴과 완전한 디커플링을 제공하는 Pub/Sub 패턴을 시각화합니다

2. 02

   Strategy 패턴, 행동을 교체하라

   끝없이 늘어나는 if/else 분기를 전략 객체로 교체하는 방법, Array.sort() 비교 함수부터 폼 유효성 검증까지 시각화합니다

3. 03

   Iterator 패턴, 순회를 추상화하라

   배열, 트리, API 페이지네이션 등 서로 다른 자료구조를 하나의 for...of로 순회하는 방법을 시각화합니다

4. 04

   Decorator 패턴, 기능을 감싸라

   인증, 로깅, 캐싱 같은 횡단 관심사를 원본 함수 위에 하나씩 쌓아올리는 Decorator 패턴을 시각화합니다

5. 05

   Proxy 패턴, 접근을 가로채라

   객체 접근을 가로채서 유효성 검증, 캐싱, 지연 로딩을 구현하는 Proxy 패턴과 JavaScript의 Proxy/Reflect API를 시각화합니다

6. 06

   Factory 패턴, 생성을 위임하라

   조건에 따라 서로 다른 객체를 생성하는 new 호출을 팩토리 함수로 위임하는 방법을 시각화합니다

7. 07

   Command 패턴, 동작을 객체로 만들어라

   Undo/Redo, 매크로 기록, 트랜잭션 처리, 동작을 객체로 캡슐화하는 Command 패턴을 시각화합니다

8. 08

   Mediator 패턴, 소통을 중재하라

   컴포넌트 간 직접 통신의 스파게티를 중앙 중재자로 정리하는 Mediator 패턴을 시각화합니다