design pattern (15) 썸네일형 리스트형 [Java, Spring] 쓰레드 로컬과 전략 패턴, 탬플릿 메서드 패턴 해당 게시물은 김영한 강사님의 스프링 핵심원리 고급편 을 학습 후 정리한 내용이다. 스프링 핵심 원리 - 고급편 - 인프런 | 강의 스프링의 핵심 원리와 고급 기술들을 깊이있게 학습하고, 스프링을 자신있게 사용할 수 있습니다., - 강의 소개 | 인프런 www.inflearn.com 부가 기능 적용하기 보통 디버깅(에러 혹은 비즈니스 흐름 분석)을 위해 로깅을 적용하는 것은 당연하다. 아래와 같은 요구 사항을 구현한다고 가정해보자. 모든 PUBLIC 메서드의 호출과 응답 정보를 로그로 출력 애플리케이션의 비즈니스 흐름을 변경하면 안됨 로그를 남긴다고 해서 비즈니스 로직의 동작에 영향을 주면 안됨 메서드 호출에 걸린 시간을 기록함 정상 흐름과 예외 흐름을 구분함 예외 발생시 예외 정보가 남아야 함 메서드 .. [번역] 리액트 Compound Component 잘 사용하기 원문 : https://itnext.io/unlock-the-full-potential-of-react-with-the-compound-components-pattern-495a1bdb8b8f 🔥 Best Practices of React Compound Components Pattern: Unlock the Full Potential Let’s improve React Component Design with This Surprisingly Easy Pattern itnext.io Compound Component 패턴이란? 컴파운드 컴포넌트 패턴(복합 컴포넌트 패턴)은 복잡한 컴포넌트를 만들기 위해 작은 컴포넌트들을 합성하는 것 내부적으로 캡슐화된 상태를 공유 보통 컨텍스트(상태)를 가진 부모 컴포넌트.. 컴포넌트 합성 : 레이아웃 기반 합성 컴포넌트 원문 : https://www.smashingmagazine.com/2022/01/composition-based-design-system-figma/ Composition-Based Design System In Figma — Smashing Magazine Figma has advanced enough where it now supports some powerful concepts that can help with the flexibility and maintainability of a design system. In this article, Sasha explains why she finds the Systems Designer position so rewarding — and it’s not on.. 리액트 디자인 패턴(React design pattern) : Compound Component Pattern(컴파운드 컴포넌트패턴)과 Uncontrolled Component Pattern(유상태 컴포넌트 패턴) radix-ui와 같은 라이브러리는 컴파운드 컴포넌트 패턴을 uncontrolled component 패턴과 조합한 구현을 채택하고 있습니다. HTML 삽입 미리보기할 수 없는 소스 위 다이얼로그 컴포넌트의 재미있는 점은, children으로 전달받은 컴포넌트에 dialog를 열기 위한 핸들러를 전달할 필요가 없다는 점입니다. Edit profile 컴파운드 컴포넌트는 내부적으로 context를 활용하니, Dialog 컨텍스트를 활용해 해당 버튼이 클릭되는 것을 어떻게든 감지한다는 것을 알 수 있습니다. 그런데 일반 와 버블링을 활용하면 span을 div로 감싸다보니 css(스타일) 관점에서 원하지 않는 동작이 발생할 수 있습니다. 따라서 가장 보수적인 방법은 button으로 open, close 이벤트.. Vue3 컴포넌트 디자인 패턴 : Renderess Component / Compound Component Vue3의 Renderess Component / Compound Component 디자인 패턴에 대해 알아봅니다. Vue3 디자인 패턴 시리즈를 정리하는 내용이 될 것 같습니다. TL;DR renderess component는 마크업 없는 컴포넌트다 상태와 액션만을 추상화하는 컴포넌트다. 좋은 컴포넌트란 무엇인가? 결합도가 낮고 응집도가 높고 확장성 있는 컴포넌트 SOLID 원칙을 잘 지키는 컴포넌트 개발 중에 의식해야 하는 부분 : 응집도와 결합도 좋은 컴포넌트 설계 방법론 나쁜 ui 컴포넌트는 너무 다양한 관심사가 섞여있음 비동기 데이터 페치 로직 UI 업데이트 상태 관리 마크업 만들기 스타일 적용하기 ... 좋은 컴포넌트란? 하나의 일만 잘하는 컴포넌트 상속보단 합성 단일 책임 원칙 좋은 컴포넌트.. Vue3 컴포넌트 디자인 패턴 : Object binding v-on, v-bind를 이용해 바인딩을 간소화하는 방법을 알아봅니다. 이전 시리즈 2022.12.21 - [Vue.js] - Vue3 컴포넌트 디자인 패턴 소개 Vue3 컴포넌트 디자인 패턴 소개 vue mastery의 컴포넌트 디자인 패턴(component-design-patterns) 강의를 학습하고 정리한 내용입니다. 디자인 패턴에 관하여 어제 한 후배한테 실무에서 디자인 패턴을 사용하냐는 질문을 들었는데, 리액 itchallenger.tistory.com 2022.12.22 - [Vue.js] - Vue3 컴포넌트 디자인 패턴 : Props Vue3 컴포넌트 디자인 패턴 : Props 컴포넌트 디자인 패턴은 컴포넌트를 개발하면서 마주치게 되는 특정 문제를 해결하면서 소프트웨어의 유지보수성 / 재.. Vue3 컴포넌트 디자인 패턴 : Slots Vue3에서 slot을 사용하여 유연한 구조, 유연한 합성이 가능한 컴포넌트를 개발하는 방법을 알아봅니다. 이전 시리즈 2022.12.21 - [Vue.js] - Vue3 컴포넌트 디자인 패턴 소개 2022.12.22 - [분류 전체보기] - Vue3 컴포넌트 디자인 패턴 : Slots Props 중심 컴포넌트의 문제점 props는 설정덩어리다. props가 구조를 바꾸고 props 정의 순서와 사용 순서가 다르고 props이 거대해 진다면 컴포넌트의 이해와 확장이 어려워진다. slot이 무엇인가? 슬롯은 콘텐츠 배포 outlet 역할을 하는 커스텀 Vue 엘리먼트다. HTML 엘리먼트(예: div, span, p 등)로 작업할 때 우리는 자식으로 모든 종류의 입력을 허용한다. This is just n.. 스토리북 개발팀이 알려주는 컨테이너 / 프리젠터 패턴 - Context API를 이용해 의존성 주입하기 스토리북 공식 문서에서 container / presenter 패턴의 사용 사례에 대해 배워봅니다. 스토리북을 전혀 몰라도 패턴에 대해 배우실 수 있습니다. 페이지(화면)을 만드는 방법 BBC, Guardian 및 Storybook 유지보수 팀은 순수한 프레젠테이션 페이지를 만듭니다. 이 방법을 사용하면 Storybook에서 페이지를 렌더링하기 위해 특별한 작업을 수행할 필요가 없습니다. 여기서 특별한 작업이라 함은 모킹, 몽키 패치를 이용한 의존성 주입을 의미합니다. 화면 단계까지 프리젠테이셔널 컴포넌트로 작성하는 것은 간단합니다. 스토리북 외부에 있는 앱의 단일 래퍼 컴포넌트에서 모든 지저분한 "connected" 논리를 수행한다는 아이디어입니다. 스토리북 소개 튜토리얼의 Data 장에서 이 접근 방.. 이전 1 2 다음
