전체 글566 [TS Design Patterns] 구조 패턴 - 프록시 Proxy - 다른 객체에 대한 대체 또는 placeholder를 제공할 수 있음 - 원래 객체에 대한 접근을 제어하므로, 요청이 원래 객체에 전달되기 전 또는 후에 무언가를 수행할 수 있도록 함 - 원래 서비스 객체와 같은 인터페이스로 새 프록시 클래스를 생성하도록 제안 -> 프록시 객체를 원래 객체의 모든 클라이언트들에 전달하도록 앱을 업데이트 할 수 있음 - 프록시는 지연된 초기화 및 결과값 캐싱을 클라이언트와 실제 DB 객체가 알지 못하는 상태에서 처리 가능 - 서비스의 객체 수명 주기 관리 가능 - 클라이언트가 사용하는 서비스 객체를 대신하는 객체를 제공하는 구조 디자인 패턴 - 클라이언트 요청을 수신하고, 일부 작업(접근 제어, 캐싱 등)을 수행한 다음 요청을 서비스 객체에 전달함 - 서비스 .. 2023. 10. 26. [UI Component] Design Patterns - Container/Presentational Container/Presentational - 비즈니스 로직으로부터 뷰를 분리하여 관심사 분리를 강제함 - Container Component - Presentational 컴포넌트에게 데이터 전달 - 화면에 아무것도 렌더링하지 않음 (스타일 시트 포함 X) - Presentational Component - props를 통해 데이터를 받음 - 받은 데이터를 화면에 표현 (스타일 시트 포함), 데이터는 건드리지 않음 - Container/Presentational 패턴은 React Hooks로 대체 가능 - Container 컴포넌트 없이도 stateless 컴포넌트 쉽게 만들 수 있음 - useState, useEffect 이용해서 데이터 fetch 하는 커스텀 훅 별도 생성 - 장점 - 관심사 분리.. 2023. 10. 24. [UI Component] Design Patterns - Provider Provider - 여러 자식 컴포넌트 간에 데이터를 공유함 - props drilling (안티 패턴) 막을 수 있음 - 데이터가 필요하지 않는 컴포넌트는 props를 받지 않도록 수정하는 것이 바람직함 - 각 레이어에 직접 데이터를 주지 않고도 여러 컴포넌트들에게 데이터에 접근할 수 있게 구현 가능 - 전역 데이터를 공유하기 좋음 ex) UI 테마 - 특정 상황에서 성능 이슈 발생 가능 - 컨텍스트를 참조하는 모든 컴포넌트는 컨텍스트 변경시마다 모두 리렌더링됨 - 컴포넌트 쓰지 않는 값의 업데이트로 인해 불필요하게 렌더링되는 것을 막기 위해 여러 Provider로 쪼갤 필요 있음 - 예시 // App.js export const themes = { light: { background: "#fff", .. 2023. 10. 24. [TS Design Patterns] 구조 패턴 - 컴포지트 Composite (Object Tree) - 객체들을 트리 구조들로 구성한 후, 이러한 트리 구조들이 개별 객체들인 것처럼 작업할 수 있음 - 앱의 핵심 모델이 트리로 표현될 수 있을 때만 사용 권장 - 객체 트리의 모든 컴포넌트들에 대해 재귀적으로 행동을 실행할 수 있도록 함 - Component 인터페이스, Leaf 클래스, Composite (Container) 클래스 - 예시 /** * The base Component class declares common operations for both simple and * complex objects of a composition. */ abstract class Component { protected parent!: Component | null; .. 2023. 10. 24. [TS Design Patterns] 구조 패턴 - 브리지 Bridge - 큰 클래스 또는 밀접하게 관련된 클래스들의 집합을 두 개의 개별 계층 구조 (추상화 및 구현)로 나눈 후 각각 독립적으로 개발할 수 있도록 함 - 상속에서 객체 합성으로 전환 - 한 클래스 내에서 모든 상태와 행동들을 갖는 대신 새 계층 구조의 객체를 참조하도록 함 - 추상화 (인터페이스) - 일부 객체에 대한 상위 수준의 제어 레이어 - 제어 레이어는 실제 작업을 수행해서는 안되며 구현 레이어 (플랫폼)에 위임해야 함 - ex) 추상화 - GUI, 구현 - GUI 레이어가 사용자와 상호작용하여 그 결과로 호출하는 배경 운영 체제 코드 (API) - 구현 - 브리지 패턴은 클래스들을 두 개의 계층 구조로 분리하도록 제안함 - 어떤 기능의 여러 변형을 가진 모놀리식 클래스를 나누고 정돈할 .. 2023. 10. 23. 이전 1 ··· 11 12 13 14 15 16 17 ··· 114 다음 반응형