안녕하세요. 디자인 패턴을 알아보는 시간을 가집니다. 지난시간에는 Presentation & Container 패턴을 알아가면서 예제로 적용 시켰습니다. 하지만 이 패턴은 1:1 = 로직 : 뷰 적용 방식으로 사용이 되는 형태로 구성 되어져 있으며 1개의 로직에서 여러개의 뷰를 활용하여 사용 하고 싶을 때 대비하여 적용을 시켜보고자 합니다. 이 것을 적용 시키는 패턴은 Custom Hooks 패턴이며, Custom Hooks 패턴의 대해서 대해서 알아봅니다. 먼저 리마인드로, Presentation & Container 패턴을 적용 전과 적용 후의 대해서 구조를 정리해봅니다. Presiontation Component - UI 컴포넌트만 구성, Conatiner Component - 로직 부분만 구성 이..

안녕하세요. 디자인 패턴을 알아보는 시간을 가집니다. 이번 시간에는 디자인 패턴을 사용하는 패턴 중 하나인 Presentation & Container 패턴의 대해서 알아봅니다. 보통 처음 시간에 배울 때 구조는 아래와 같은 구조로 사용하는데, function 컴포넌트 () { /* 로직 구현 */ return ( UI 출력 ) } 이런 구조를 이용하여 사용을 하게 되실겁니다. 하지만, 매번 사용하다가 조금 더 클린화 된 코드를 작성하고, 로직 컴포넌트와 View 컴포넌트로 나눠서 작성하는 것을 생각을 해낸 결과 디자인 패턴으로 쓰이는 Presentation & Container 디자인 패턴을 이용하여 사용 방법으로 활용하여 사용이 가능하다는 것을 알게 되었습니다. 따라서 Presentation & Co..

1. 팩토리 패턴 (Factory Pattern) - 생성 패턴 중 하나 - 객체 생성 부분을 떼어낸 추상화한 패턴, - 상위 클래스 : 뼈대 역할 // 하위 클래스 : 객체 생성에 관한 구체적 내용 결정 - 마치 제조 공장의 예시를 따지면, 상위 클래스 : 공장 / 하위클래스 : 레시피 라고 표현 가능 - 여기서 제목만 보여주는 행위를 표하고, 상세 내역은 숨겨주는 역할이 가능하다. 2. JS로 이용한 팩토리 패턴으로 이용한 제조 공장 구현 (1) 상위 클래스 : Factory // 제조 공장에서 사용하는 레시피 설정 const factoryList = [CoffeeFactory, FoodFactory]; // 상위 메소드 : Factory class Factory { static createMater..

1. 싱글톤 패턴 (Singleton Pattern) - 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴 - 데이터 베이스 연결 모듈에 많이 사용 - 비용은 줄여드는 대신 의존성이 높음 - 많은 클래스가 존재할 경우 비효율적 (모듈간 결합도가 높다.) - 주로 DB 연결할때 사용 2. 싱글톤 패턴 개념 이해 (JS) 아래와 같이 예시 코드를 작성 다음은 object1과 object2의 a값이 27이 같지만, 객체는 참조형이므로 주소를 참조한다. 따라서, object1과 object2의 객체는 서로 다른 객체를 확인 가능하다. const object1 = { a: 27 } const object2 = { a: 27 } // 실행 결과 : false console.log(object1 === object..

1. 디자인 패턴 - 주로 객체지향 프로그래밍을 설계 할 때 쓰이는 기법 중 하나로 의사 소통의 일종을 역할 - 프로그램 설계 시 발생한 문제점들을 객체 간 상호 관계 등 이용하여 해결할 수 있도록 하나의 "규약" 형태 2. 디자인 패턴의 종류 (1) 생성 패턴(추상 객체 인스턴스화) 추상 팩토리(Abstract Factory) : 각 종 서브 클래스를 특정 그룹으로 묶어 한번에 교체 팩토리(Factory Method) : 객체 생성 후 Return 함수 (생성자 대신) 제공하여 초기화 과정을 외부에 못보게 하여 숨기는 타입 빌더(Builder) : 인스턴스를 생성자를 통해 생성 하지 않고, 빌더에서 내부 클래스를 간접적으로 생성하는 방식 프로토타입 : 원본 만들어 놓고, 원본 객체를 그대로 복사하는 방..