# Composite

15개의 포스트
post-thumbnail

TWTW - ObjectMapper (2)

Composite 패턴을 통한 ObjectMapper 통합 관리 문제의 발생 ObjectMapper의 NamingStrategies를 여러개 쓰이게 되는 상황이 발생했다. 여러 종류의 외부 API를 반영하는 서비스였기에 외부 API 마다의 json 네이밍 컨벤션이 달랐다. 특히, 하나의 NamingStrategies가 늘어날 때 마다 ObjectMapper에 대한 빈을 하나 더 등록하면서 주입 받을 때도 빈이 여러개라서 신경을 써야 하는 등의 불편함이 발생했다. 이 문제를 해결하는 방법을 찾던 중, 디자인 패턴인 Composite 패턴을 통해 해결하기로 했다. Composite 패턴이란? Component 라 불리는 최상위 클래스와 Leaf, Composite 라 불리는 하위 클래스가 협력하는 패턴이다. Leaf는 Composite에서 사용될 클래스로 Composite에 여러 다른 구현체가 등록되어 사용된다. -

2023년 9월 14일
·
0개의 댓글
·
post-thumbnail

Typescript로 다시 쓰는 GoF - Composite

Composite이란? Composite이란 사전적으로 혼합물이라는 뜻이다. 언뜻 다른 패턴들과는 다르게 이름만으로 직관적으로 그 역할을 유추하기가 다소 쉽지는 않지만, 이름 그대로 서로 다른 무엇인가를 혼합하여 하나인것처럼 취급하는 패턴이다. 보통 내용물과 그릇, 혹은 단수와 복수를 하나로 동일시한다고 이야기하는데 예시를 살펴보면 이해가 보다 빠르다. 언제쓸까? Composite 패턴은 어떤 위계질서를 트리 형태로 나타낼 수 있는 상황에서 쓰이며 일상적으로 굉장히 자주 등장하는 패턴이다. 예를들어, 파일 시스템: 파일과 디렉토리는 서로 다른 객체지만, 둘 다 디렉토리라는 그릇 안에 집어넣을 수 있다. 조직 구조도: 개개인이 팀을 이루고, 이 팀은 다시 다른 팀의

2023년 9월 2일
·
0개의 댓글
·
post-thumbnail

[웹 브라우저] 렌더링 과정 + 구성요소

웹 브라우저 렌더링 과정 1. 파싱(Parse) 웹 브라우저는 HTML, CSS 및 JavaScript와 같은 웹 페이지의 리소스를 서버로부터 가져옵니다. 그리고 가져온 리소스들은 파싱되어 문서 객체 모델(DOM) 및 CSS 객체 모델(CSSOM)로 변환됩니다. 이 단계에서 HTML 마크업을 DOM 트리로 구문 분석하고, CSS 규칙을 파싱하여 CSSOM 트리를 구성합니다. 그리고 DOM 트리와 CSSOM 트리를 이용해서 Render Tree를 생성하고, 문서의 구조와 각 노드의 스타일 속성이 입력되게 됩니다. 파싱이란? 파싱은 주어진 문장이나 코드를 구성 요소로 분해하고 그 구조를 이해하는 과정을 말합니다. 또한 파싱 과정에서 코드 분석을 하며, 특정 액션을 취하거나 데이터 추출, 포괄적인 개념으로의 변환 등의 다양한 목적을 달성할 수도 있습니다. 따라서 파싱을 위해서는 해당 도메인에서의 특정 지식이나 약속된 규칙을 잘 이해합니다. 2. 레이아웃(La

2023년 7월 15일
·
0개의 댓글
·

객체지향 디자인패턴 1~2

movie movie >Singleton 어떤 클래스의 객체가 해당 프로세스에서 딱 하나만 만들어져 있어야 할 때 사용 >Strategy 프로그램 실행 중 모드가 바뀔 때마다 해당 모듈에 맞는 시나리오가 이루어지는 방식 >State 특정 상태마다 다르게 할 일을, 나아가서 그 상태들 자체를 그 상태마다 실행시 할 일과 함께 하나하나 모듈화 해서 지정해둘 때 쓰임 (메서드가 실행될 때 해당 모드도 전환되도록 하는 패턴.) >Command 모드 변경에 따라 명령을 갈아끼울수도 있고 스위치를 올릴때와 내릴때 각각 다른 명령을 심어줄 수도 있고 여러 명령들을

2023년 3월 27일
·
0개의 댓글
·
post-thumbnail

CSS animation / JS animation

CSS animation 장점 선언형 이기에 쉽게 적용이 가능하며, 어떤 애니메이션을 구현하는 것인지 명확히 알 수 있다. 미디어 쿼리와 함께 적용하여 반응형 애니메이션을 구현하는 것이 가능하다. Composite Layer 를 활용하여 최적화된 애니메이션을 적용 가능한 경우가 있다. 라이브러리를 없어 용량, 메모리 문제를 신경 쓸 필요가 없고, CSS 에서 자체적으로 제어하기 때문에 비용이 저렴하다. 단점 JS 애니메이션 대비 구현할 수 있는 애니메이션이 제한적이다. 특정 애니메이션의 경우, 모든 브라우저에서 동작하지 않을 수 있다. Composite Layer 를 활용한 GPU 가속의 경우, 저사양의 환경에서는 하드웨어 전체 성능을 하락시키는 문제를 발생시킨다. 따라서, 무분별한 GPU 가속은 지양하는 것이 좋다. JS animation 장점 CSS 애니메이션 대비, 구현할 수 있는 애니메이션

2023년 2월 13일
·
0개의 댓글
·
post-thumbnail

브라우저 렌더링 과정

브라우저 렌더링에 대해 설명해주세요. >키워드 Parsing, Style, Layout, Paint, Composite Parsing : HTML 파일과 CSS 파일을 읽고 각각의 Tree 를 만든다. Style : 두 Tree 를 결합하여, Rendering Tree 를 만든다. Layout : Rendering Tree 에서 각 노드의 위치와 크기를 계산하다. Paint : 계산된 값을 이용해 각 노드를 화면에 그리는 단계이다. Composite : 레이어를 합성하여 실제 화면에 나타낸다. Parsing 에 대해 설명해주세요. 컴퓨터는 사람이 아니다. 사람이 만든 코드를 컴퓨터는 이해할 수 없다. 따라서 이를 기계어로 번역하는 과정이 필요하다. 모든 프로그래밍 언어는 그래서 컴파일러 혹은 인터프리터 기능이 내장되어있다. Parsing 역시 렌더링 엔진 개발자가 작성한 `H

2023년 1월 12일
·
0개의 댓글
·

Composite

Composite Key 복합 키는 두 개 이상의 컬럼을 Key로 지정하는 것을 말한다. PK는 한 테이블에 한 개만 존재할 수 있다, 하지만 꼭 한 테이블에 한 컬럼만 기본키로 지정할 수 있는 것은 아니다. 아래와 같이 PRIMARY KEY를 두 컬럼에 지정하면 에러가 발생한다. 하지만 PRIMARY KEY(column1, column2) 이런식으로 기본키를 여러 컬럼을 조합하여 설정하는 것은 가능하다. 이렇게 컬럼을 조합하여 기본키로 설정할 경우에는 여러 컬럼을 모두 조합해서 UNIQUE해야 한다. 아래와 같이 id와 seq컬럼에 모두 1의 값을 넣고 저장한 뒤 다시 한 번 동일하게 저장하려고 하면 에러가 발생한다. id는 동일하게 1이고, seq의 값만 2로 저장하는 것은 성공한다. 인덱스로 설정하는 필드의 속성이 중요하다. title, author 이 순서로 인덱스를 설정한다면 title을 search 하는 경우, index 를 생성한

2022년 12월 6일
·
0개의 댓글
·

[Browser] Composite

브라우저의 렌더링 과정을 간략히 하면 아래와 같다. 스타일 계산 ➡️ layout(reflow) ➡️ 레이어트리 갱신 ➡️ paint(repaint) ➡️ composite 이 과정 중 마지막인 Composite 과정에 대해 알아보고자 한다. 정의 레이어들의 합성(composite)하여 한장의 bitmap으로 만드는 과정. 간단히 말하면 여러 레이어를 하나의 레이어로 만드는 과정이다. Layer가 생성되는 조건 CSS 파싱 과정에서 Composite Layer를 생성하는 요소들이 있다. ` 혹은 ` 태그 사용 3D, 2D transforms, opacity 적용(opacity는 1보다 작아야) animation 이나 transition 사용 iFrame일 경우 backface-visibility 가 hidden일 경우 이를 이용한 성능 개선 Composite Layer 생성은 CPU와 GPU가 통신하는 단계입니다

2022년 11월 9일
·
0개의 댓글
·
post-thumbnail

Composite Pattern

🌟 Composite Pattern? 컴포지트 패턴은 구조 패턴 중 하나로, 사용자가 복합 객체(group of object) 나 단일 객체를 동일하게 취급하는 것을 목적으로 한다. 객체들의 관계를 트리 구조로 구성하여 부분-전체(whole-part) 계층을 표현하는 패턴이다. > ✅ 구조 패턴 구조 패턴은 작은 클래스들을 상속과 합성을 이용해 더 큰 클래스를 생성하는 방법을 제공하는 패턴이다. 이 패턴을 사용하면 독립적으로 개발한 클래스 라이브러리를 하나처럼 사용할 수 있다. 또 여러 인터페이스를 합성해 서로 다른 인터페이스들의 동일한 추상을 제공한다. 런타임 단계에서 복합 방법이나 대상을 변경할 수 있다는 점에서 유연성을 갖는다. > ✅ 부분-전체 계층 이 용어는 작은 것을 기반으로 더 큰 물체를 구성하는 걸 나타낸다. 컴포지트 패턴의 맥락에서 크고 작은 객체는 모두 같은 클래스의 인스턴스다. 시스템은 하위 시스템 또는 구성요소로 구성된다.

2022년 10월 7일
·
0개의 댓글
·
post-thumbnail

디자인 패턴 - Composite 패턴

개요 소프트웨어 마에스트로 과정에서 멘토님, 팀원들과 디자인패턴 세미나를 진행하고 있습니다. 이번에는 Composite 패턴에 대해 설명드리겠습니다. > 💡 Java언어로 배우는 디자인 패턴 입문 책을 참고하여 포스팅하였습니다. Composite Pattern? 디렉토리 컴퓨터의 파일 시스템에는 디렉터리 라는 것이 있습니다. 디렉터리 안에는 파일이 있거나 하위 디렉터리가 있기도 합니다. 또 그 하위 디렉터리 안에는 다른 파일이나 하위 디렉터리가 있을 수 있습니다. 이처럼 디렉터리는 재귀적인 구조를 만듭니다. 디렉터리와 파일은 서로 다르지만 모두 디렉터리 안에 넣을 수 있는 것입니다. 따라서 디렉터리와 파일을 합해서 디렉터리 엔드리라는 이름으로 부르며 둘을 같은 종류로 간주하기도 합니다. 이번에 배울

2022년 9월 25일
·
0개의 댓글
·
post-thumbnail

Composite

GoF의 디자인 패턴, 복합체 패턴에 대해 알아본다. 해당 글은, 다음의 코드를 기반으로 이해하는 것이 편리합니다. 핵심 요약 단일체와 집합체를 하나의 동일한 개념으로 처리하기 위한 패턴 폴더 구조, View 구조 등이 예가 될 수 있겠다. 부분과 전체의 계층을 표현하기 위해 객체들을 모아 트리구조로 구성한다. 예시 폴더구조를 생각해보자. 파일 저장 구조는 파일과 폴더 두가지로 나눌

2022년 8월 29일
·
0개의 댓글
·
post-thumbnail

Java - Inheritance

Inheritance 상속 기존의 클래스로 새로운 클래스를 작성하는 것 (코드의 재사용) 두 클래스를 부모와 자식으로 관계를 맺어주는 것 구조 extends 키워드 사용 Parent 클래스와 Child 클래스는 상속 관계 자손은 조상 (부모의 부모) 의 모든 멤버를 상속 받는다. (생성자, 초기화 블럭 제외) Child 객체가 생성 되기전에 Parent 객체가 자동 생성 <img src="https://velog.velcdn.com/images/iseon_u/post/c9c47892-8dca-42e4-a5c7-c58b

2022년 4월 30일
·
0개의 댓글
·

java oop 20 포함

포함(composite) 클래스의 멤버로 참조변수를 선언하는 것 작은 단위의 클래스를 만들고 이들을 조합해서 클래스를 만든다 클래스 간의 관계 결정하기 상속관계 ~은 ~이다(is-a) 포함관계 ~은 ~을 가지고 있다(has-a) 대부분 90%이상 포함관계로 만들면 된다 원(circle)은 점(point)이다 circle is a point (x) 원(circle)은 점(point)을 가지고 있다 circle has a point (o) public class Oop20_composite { public static void main(String[] args) { //c,c2 객체가 만들어지는 과정 그림으로 그려서 이해하자 Circle c = new Circle(); c.x =1; c

2022년 4월 15일
·
0개의 댓글
·
post-thumbnail

[Java] OOP_상속(Inheritance), 상속과 포함, 단일상속

상속(Inheritance), 상속과 포함, 단일상속 상속(Inheritance) > 기존의 클래스를 재사용하여 새로운 클래스를 작성하는 것 자식은 부모의 모든 멤버를 상속받는다(생성자, 초기화블럭 제외) 자식의 멤버갯수는 부모보다 적을 수 없다(같거나 많아야함) 자손의 변경은 조상에 영향 미치지 않는다 포함(Composite) > 클래스의 멤버로 참조변수를 선언하는 것 한 클래스의 멤버변수로 다른 클래스를 선언하는 것 작은 단위의 클래스를 먼저 만들고 작은 클래스들을 조합하여 하나의 커다란 클래스를 만든다. 클래스 간의 관계 결정하는 방법 상속관계 : A는 B이다.(is-a) 포함관계 : A는 B를 가지고 있다.(has-a

2021년 5월 30일
·
0개의 댓글
·

컴포지트(Composite)

상위문서: GoF 디자인 패턴 컴포지트(Composite) 상위 Category : 구조(Structural) 패턴 > 객체를 component와 composite로 구성하여 트리 구조로 구성하여 표현하는 전체-부분 패턴으로, 사용자가 단일 객체와 복합 객체 모두 동일하게 다루도록 한다. 컴포지트 Directory-File이 대표적인 예이다. 예시 : 컴퓨터 장치 추가하기 1. CLASS 정의 ![예시](https://images.velog.io/images/namezin/post/fcfc2dc4-61d0-4fb6-803a-632e07727f3b/c

2020년 8월 26일
·
0개의 댓글
·