Personal-Study55 [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. 이전 1 ··· 3 4 5 6 7 8 9 ··· 14 다음 반응형