Per ardua ad astra.

Compound Component 패턴들어가며리액트(React.js)에서 자주 사용되는 디자인 패턴(Design Pattern) 중 하나인 Compound Component 패턴에 대해 정리해본다. Compound Component 패턴개념서로 관련된 여러 개의 컴포넌트를 하나의 부모 컴포넌트 안에 캡슐화하는 방식컴파운드 컴포넌트의 주요 아이디어는 사용자 인터페이스(UI)를 구성하는 여러 작은 컴포넌트를 하나의 상위 컴포넌트 안에서 조합하여 더 복잡한 UI를 만드는 것이다. Coompound Component 패턴의 적용 예 : - Option 1 Option 2 Option 3 Option 4 장점동일한 컴포넌트를 다양한 방식으로 재사용할 수 있다.컴포넌트의 내부 구조를 변..

전략 패턴(Strategy Pattern) 정책 패턴(Policy Pattern)이라고도 한다. 객체의 행위를 바꾸고 싶은 경우 '직접' 수정하지 않고, 전략이라고 부르는 '캡슐화한 알고리즘'을 컨텍스트 안에서 바꿔주면서 상호 교체가 가능하게 만드는 패턴 프로그래밍에서 컨텍스트는 상황, 맥락, 문맥을 의미하며, 개발자가 어떠한 작업을 완료하는 데 필요한 모든 관련 정보를 의미한다. 자바의 전략 패턴 우리가 어떤 것을 살 때, 네이버페이, 카카오페이 등 다양한 방법으로 결제하듯이, 어떤 아이템을 살 때 LUNACard로 사는 것과 KAKAOCard로 살 수 있다. 다음은 쇼핑 카트에 아이템을 담아 LUNACard 또는 KAKAOCard라는 2개의 전략으로 결제하는 코드이다. import ja..

팩토리 패턴(Factory Pattern) 객체를 사용하는 코드에서 객체 생성 부분을 떼어내 추상화한 패턴 상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴 상위 클래스와 하위 클래스가 분리되기 때문에 느슨한 결합을 가지며, 상위 클래스에서는 인스턴스 생성 방식에 대해 전혀 알 필요가 없기 때문에 더 많은 유연성을 갖게 된다. 객체 생성 로직이 따로 떼어져 있기 때문에, 코드를 리팩토링하더라도 한 곳만 고칠 수 있게 되니 유지 보수성이 증가된다. 예를 들어, 라떼 레시피와 아메리카노 레시피, 우유 레시피라는 구체적인 내용이 들어 있는 하위 클래스가 컨베이어 벨트를 통해 전달되고, 상위 클래스인 바리스타 공장에서 이 레시..

싱글톤 패턴(Singleton Pattern) 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴 하나의 클래스를 기반으로 여러 개의 개별적인 인스턴스를 만들 수 있지만, 그렇게 하지 않고 하나의 클래스를 기반으로 단 하나의 인스턴스를 만들어 이를 기반으로 로직을 만드는 데 쓰인다. 보통 데이터베이스 연결 모듈에 많이 사용한다. 하나의 인스턴스를 만들어 놓고 해당 인스턴스를 다른 모듈들이 공유하기 때문에 인스턴스를 생성할 때 드는 비용이 줄어드는 장점이 있다. 하지만, 의존성이 높아진다는 단점이 있다. 자바스크립트의 싱글톤 패턴 자바스크립트에서는 리터럴 { } 또는 new Object로 객체를 생성하게 되면, 다른 어떤 객체와도 같지 않기 때문에 이 자체만으로 싱글톤 패턴을 구현할 수 있다. const ..