안녕하세요. 디자인 패턴을 알아보는 시간을 가집니다. 지난시간에는 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..