분류 전체보기25 Engine에서 타입이 다른 인터페이스를 연결할 : 어댑터(Adapter) 패턴 ( SA,AA - DBA 및 K8S 타입 처리 ) 어댑터(Adapter) 패턴은 한 클래스의 인터페이스를 클라이언트가 기대하는 다른 인터페이스로 변환하는 패턴입니다. 이 패턴은 호환되지 않는 인터페이스를 가진 두 개의 클래스를 함께 작동할 수 있게 만들어줍니다. 자바 코드를 통해 어댑터 패턴의 예시를 살펴보겠습니다. 가정해보겠습니다. 우리는 소켓(Socket) 클래스를 사용하여 전기를 공급받는 기기를 제어하고 있습니다. 하지만 우리가 사용하려는 기기는 USB(Universal Serial Bus) 인터페이스를 사용합니다. 어댑터 패턴을 사용하여 소켓 클래스와 USB 기기를 함께 작동할 수 있도록 해보겠습니다. 먼저, 우리가 사용하려는 USB 기기를 나타내는 USBDevice 인터페이스를 정의합니다: public interface USBDevice { v.. 2023. 6. 29. Engine 에서 구현되어야 할 팩토리 메서드(Factory Method) 패턴 ( 타입별로 객체 생성 방식 ) 팩토리 메서드(Factory Method) 패턴은 객체 생성을 처리하기 위한 디자인 패턴 중 하나입니다. 이 패턴은 객체 생성을 서브 클래스에 위임하여 객체 생성 과정을 캡슐화하는 방법을 제공합니다. 이를 통해 클라이언트 코드는 객체 생성의 구체적인 세부 사항에 대해 알 필요 없이 객체를 생성할 수 있습니다. 팩토리 메서드 패턴의 핵심 아이디어는 객체 생성을 처리하는 인터페이스를 정의하고, 이를 서브 클래스가 구현하는 것입니다. 이 인터페이스를 통해 객체 생성을 요청하면, 서브 클래스에서 실제적인 객체 생성과 초기화 과정을 수행합니다. 이를 통해 객체 생성의 세부 사항은 서브 클래스로 숨겨지고, 클라이언트 코드는 단순히 인터페이스를 사용하여 객체를 생성할 수 있습니다. 팩토리 메서드 패턴은 다음과 같은 .. 2023. 6. 29. Java Service Tree Framework 의 템플릿 메서드 패턴 설명 ( Tree Abstract Super Class ) 템플릿 메서드 패턴은 객체지향 프로그래밍에서 사용되는 디자인 패턴 중 하나로, 알고리즘의 구조를 정의하는데 사용됩니다. 이 패턴은 알고리즘의 일부분을 서브클래스로 위임하여 구체화하고, 전체 알고리즘의 구조는 유지한 채 서브클래스에서 구체화된 부분을 변경할 수 있도록 합니다. 이를 통해 코드의 재사용성과 확장성을 높일 수 있습니다. 템플릿 메서드 패턴은 다음과 같은 구성 요소로 이루어져 있습니다 AbstractClass(추상 클래스): 알고리즘의 구조를 정의하는 추상 클래스입니다. 템플릿 메서드를 포함하며, 이 메서드는 알고리즘의 일련의 단계를 정의합니다. 추상 메서드 또는 구현된 메서드를 사용하여 알고리즘의 각 단계를 정의합니다. ConcreteClass(구체 클래스): 추상 클래스를 상속받아 구현된 클.. 2023. 6. 29. Design Pattern for Development 디자인 패턴은 소프트웨어 개발에서 특정 문제를 해결하거나 특정 상황에 대한 해결책을 제시하는 재사용 가능한 설계 아이디어입니다. 디자인 패턴은 소프트웨어 개발자들 사이에서 널리 알려진 모범 사례이며, 코드의 유지 보수성, 가독성 및 재사용성을 향상시키는 데 도움이 됩니다. 일반적으로 다음과 같은 주요 디자인 패턴 카테고리가 있습니다. MAD의 Backend 에는 Java Service Tree Framework 를 사용하고 있으며, MAD의 Engine 구조 역시 특정한 디자인 패턴을 사용하고 있습니다. 하기 디자인 패턴에 대해서 알아보고 어떤 패턴을 적용하였는지 다음 포스트에서 하나씩 설명하고 적용예시를 코드를 통해 전달해 드리겠습니다. 생성(Creational) 패턴: 추상 팩토리(Abstract F.. 2023. 6. 29. div 태그 내 이미지 적용하기 (동적 CSS 생성) MAD에 DrawFlow라는 OpenSource Library를 이용하여 구현한 아키텍처 그리기 기능이 있습니다 이 화면에서는 AWS에서 제공하는 서비스들의 아이콘을 이용하여 클라우드 내에서 서비스들이 어떻게 구성되는지를 표현할 수 있습니다 이 화면에서 각 서비스들의 아이콘을 화면에 배치할 수 있는데 하나의 문제가 발생했었습니다 화면에 배치하는 요소들을 Node로 표현하는데 Node 위에 이미지 태그가 쌓여있는 형태로 인해 아이콘을 별도로 확대를 해야 위치를 이동할 수 있는 치명적인 문제였습니다. 우선 문제 해결 전의 소스를 확인하겠습니다. 수정 전 코드 /* 상위 코드 생략 */ if (folder[0] == 'category_icons') { element = ` `; } 노드를 canvas 위에 올.. 2023. 6. 26. 데이터 시각화 라이브러리 D3.js로 네트워크 차트 만들기 (1) 안녕하세요, 메가존클라우드 Mass Migration Center의 AAT에서 프론트엔드와 백엔드 개발을 담담하고 있는 MC매드(A.K.A. The Chart Generator)입니다. 마이그레이션 전에 진단 과정을 거치며 가장 중요한 것 중 하나가 바로 "호스트의 연계 복잡도"를 알아내는 일인데요. 현재 AAT가 개발 중인 MAD는 수집 엔진을 통해 호스트 간의 네트워크 구성 데이터를 수집하고, 해당 데이터를 웹에서 차트로 보여주고 있답니다. 차트는 자바스크립트 오픈소스 라이브러리인 D3.js를 활용하여 개발됐어요. 이번 포스팅에서는 D3.js 라이브러리를 활용해서 네트워크 차트를 개발하는 과정을 소개해보겠습니다! 01. 변수 선언하기 const chartOptsList = { selector: "#n.. 2023. 6. 23. 슬라이드 메뉴(DrawerLayout Navigation) 적용하기 화면 구성에서 각 화면을 이동하거나, 기능 키들을 사이드 메뉴 영역에 표현하는 케이스가 많습니다. 메뉴 영역은 기능적으로는 간편하게 애플리케이션을 사용할 수 있도록 해주지만 보여지는 데이터 영역은 그만큼 줄어들 수 있습니다 현재 MAD 서비스에서 구현되고 있는 기능 중 OpenSource인 DrawFlow를 이용하여 TO-BE 아키텍처를 그릴 수 있는 기능을 제공하고 있는데 배치하려는 아이템을 메뉴 영역에 보여주어 실제 그릴 수 있는 영역에 제한을 받았었습니다 솔루션 아이콘을 배치할 때는 메뉴를 열고 아닐 때는 닫아 컨텐츠 영역을 넓힐 수 있는 방법으로 슬라이드 메뉴 기능을 적용하기로 했습니다 위 이미지에서와 같이 햄버거 버튼을 누르면 숨겨져있던 메뉴 바가 나오고 X 버튼을 누르면 다시 숨겨지도록 하여 .. 2023. 6. 23. Element에 리본 적용하기 화면을 구성하면서 강조를 해야 할 데이터가 발생할 수 있습니다 어떻게 표현을 할지에 대해 팀원분들과 brainStorming을 진행하여 방식을 고민하였습니다 여러 표현 방법이 있을 수 있지만 데이터를 표시할 Element에 리본을 적용하여 표현하는 것으로 정했습니다. 위 이미지인 Flutter 화면과 같이 해당 화면이 개발 화면이라는 것을 리본을 통해 강조할 수 있습니다 구현하려는 화면에선 통계 데이터가 마지막으로 취합된 시간이 언제인지를 표현하려 했고, 적용 위치는 DataTable에 적용을 하였습니다 리본에 대한 코드는 StackOverFlow에 소개되어있는 코드를 적용하였습니다 기존 화면: 적용 화면 : 적용 코드: (출처 : https://stackoverflow.com/questions/6312.. 2023. 6. 23. 이전 1 2 3 4 다음
