React란?사용자 인터페이스 구축을 위한 JavaScript 라이브러리등장 배경기존의 UI 구현 방식의 한계 명령형 방식 + jQuery$('#button').click(function() { $('#modal').show();});직접 절차적으로 명시상태 변화에 따른 DOM 조작 직접 관리=> 로직이 복잡하고 버그가 발생하기 쉬움=> 상태와 UI 간의 일관성 유지가 어려움React의 주요 특징 및 해결책선언형 프로그래밍“무엇을 보여줄 것인가”를 선언하면, React가 UI를 알아서 그려줌상태가 변하면 UI를 자동으로 다시 렌더링복잡한 DOM 조작을 직접 하지 않아도 됨// Vanila JSconst list = document.getElementById("list");const item = docu..

Iterator 패턴이란?Iterator Pattern은 데이터 컬렉션의 내부 구조를 숨기면서 클라이언트가 일관된 방식으로 데이터에 순차적으로 접근할 수 있도록 도와주는 디자인 패턴입니다. 이 패턴은 단일 책임 원칙을 따르며, 데이터 집합체의 내부 구현과 데이터 순회 방법을 분리하여 결합도를 낮추고 코드의 확장성을 높입니다.구성요소IterableCollection (Aggregate)컬렉션을 순회할 이터레이터를 생성하는 인터페이스를 정의합니다.createIterator(): ConcreteIterator 객체를 반환하는 팩토리 메서드.ConcreteCollection (ConcreteAggregate)데이터 집합체를 구현하며, 이터레이터를 반환하는 메서드를 제공합니다.Iterator (Interface)..

Visitor 패턴이란?Visitor 패턴은 객체 구조를 변경하지 않고도 새로운 연산을 추가할 수 있도록 하는 행동 디자인 패턴입니다. 데이터 구조와 알고리즘의 분리를 통해, 데이터 객체는 그대로 두고 외부에서 로직을 확장할 수 있습니다.구성요소Visitor 인터페이스데이터 구조의 각 요소에 대해 수행될 연산을 선언합니다.메서드 이름과 매개변수는 구체적인 요소 타입에 따라 달라집니다. interface Visitor { visitConcreteElementA(element: ConcreteElementA): void; visitConcreteElementB(element: ConcreteElementB): void;}ConcreteVisitorVisitor 인터페이스를 구현하며, 각 요소 타입..

복합체 패턴이란?Composite Pattern은 객체들을 트리 구조로 구성하고 개별 객체와 동일하게 취급할 수 있도록 하는 구조적 디자인 패턴입니다. 파일 시스템과 같은 계층적 데이터 구조를 처리하는 데 유용하며, 단일 객체(Leaf)와 복합 객체(Composite)를 동일한 방식으로 다룰 수 있도록 설계됩니다. 아래는 설명을 보완한 내용입니다.+처음에 정의만 봤을 때는 무슨말인지 하나도 몰랐습니다.. 구서요소 개념들 하나하나를 이해하는 것이 중요합니다!구성 요소ComponentLeaf와 Composite 객체의 공통 인터페이스를 정의합니다.예를 들어 getSize, display와 같은 메서드가 정의됩니다.Leaf (단일 객체)실제 데이터를 가지며, 트리의 가장 말단을 구성합니다.Component의 ..

플라이웨이트 패턴(Flyweight Pattern) 이란?플라이웨이트 패턴은 재사용 가능한 객체 인스턴스를 공유해 메모리 사용량을 최소화하는 구조적 디자인 패턴입니다. 대규모의 유사 객체를 다뤄야 할 때 특히 유용합니다. + 이름은 거창해 보였으나, 간단한 개념으로 재사용성을 늘려 성능을 최적화하는 패턴을 의미합니다.기본 개념Flyweight (경량 객체):재사용 가능한 객체를 정의하는 인터페이스입니다.ConcreteFlyweight: 공유 가능한 고정 상태(intrinsic state)를 포함.UnsharedConcreteFlyweight: 개별 객체가 가지는 비공유 상태(extrinsic state)를 포함.FlyweightFactory (팩토리):경량 객체를 생성 및 관리하며, 기존 객체를 캐싱해..

관찰자 패턴이란?관찰자 패턴(Observer Pattern) 은 이벤트가 발생할 때 옵저버블(Observable)을 사용해 구독자(Subscriptor)에게 알리는 방법입니다.예시 코드Observable(Publisher) - 구독자에게 알림을 보내는 "관찰 가능한" 객체입니다.const observers = new Set();const Observable = { notify(data) { observers.forEach(observer => observer(data)) }, subscribe(observer) { observers.add(observer); }, unsubscribe(observer) { observers.delete(observer); }};export de..