인기글
-
간편하게 예쁜 Select 박스를 만들어보자 (select2)
안녕하세요, 메가존 클라우드의 코드보안관을 담당하고 있는 매드준입니다. 탕탕탕탕.. ( ﹁ ﹁ ) ~→ 웹을 개발하면서 가장 중요하게 생각하는 게 바로 "UI를 어떻게하면 이쁘게 그릴 수 있을까"인데요. 라이브러리를 사용하여 UI를 이쁘게 다듬어봅시다! 그리하여! 제가 갖고온 라이브러리는 select2입니다. select2는 MIT 라이센스이므로 자유롭게 사용할 수 있다는 장점과 이쁘다는 최고의 장점이 있어서 한번 사용해 보았는데 괜찮아서 여러분들께 소개 시켜드릴려고 합니다! 그럼 따라오세요! 탕탕! 01. 설치하기 CDN으로 JS파일 제공받기 CDN은 (Content Delivery NetWork)의 약자입니다. 즉 cdn에 등록된 js를 제공받아서 select2를 사용가능하게 하는 방법입니다. 다만,..
2023.06.29
-
[Spring] Flux 와 Mono의 차이를 찾던중..
Flux : 0 ~ N 개의 데이터 전달 Mono : 0 ~ 1 개의 데이터 전달 즉 Flux는 큰 데이터를 여러개로 나눠서 보낼때, Mono는 데이터가 크던지 작던지 한번에 보낼때 사용됩니다. 아래 실제 소스코드를 확인해보면 Mono 는 단 건만 Flux는 단건 다건 둘다 가능합니다. public static Mono just(T data) { return onAssembly(new MonoJust(data)); } public static Flux just(T... data) { return fromArray(data); } public static Flux just(T data) { return onAssembly(new FluxJust(data)); } 스택오버플로우를 참조 해보면 Fulx는 Co..
2023.08.15
-
Ansible로 서로 다른 OS의 서버를 관리해보자 (1)
안녕하세요, 메가존클라우드 Mass Migration Center의 AAT에서 프론트엔드와 백엔드 개발을 담담하고 있는 MC매드(A.K.A. The master of ansible)입니다. 이번 포스팅에서는 Ansible을 통해 각기 다른 OS를 가진 서버를 관리하는 방법에 대해 알아보겠습니다! 01. Ansible이란 Ansible은 오픈소스 IT 자동화 툴로서, 프로비저닝, 구성 관리, 애플리케이션 배포, 오케스트레이션 등의 수동 IT 프로세스를 자동화할 수 있습니다. 경험해보기 전에는 와닿지 않으니 실전으로 들어가서 빠르게 설치부터 진행해보겠습니다! 02. Ansible 설치 Ansible 설치 방법을 OS별로 알아봅시다. SUSE에 Ansible 설치하기 $ sudo zypper instal..
2023.12.05
-
div 태그 내 이미지 적용하기 (동적 CSS 생성)
MAD에 DrawFlow라는 OpenSource Library를 이용하여 구현한 아키텍처 그리기 기능이 있습니다 이 화면에서는 AWS에서 제공하는 서비스들의 아이콘을 이용하여 클라우드 내에서 서비스들이 어떻게 구성되는지를 표현할 수 있습니다 이 화면에서 각 서비스들의 아이콘을 화면에 배치할 수 있는데 하나의 문제가 발생했었습니다 화면에 배치하는 요소들을 Node로 표현하는데 Node 위에 이미지 태그가 쌓여있는 형태로 인해 아이콘을 별도로 확대를 해야 위치를 이동할 수 있는 치명적인 문제였습니다. 우선 문제 해결 전의 소스를 확인하겠습니다. 수정 전 코드 /* 상위 코드 생략 */ if (folder[0] == 'category_icons') { element = ` `; } 노드를 canvas 위에 올..
2023.06.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.06.23
-
Ansible로 서로 다른 OS의 서버를 관리해보자 (2)
안녕하세요, 메가존클라우드 Mass Migration Center의 AAT에서 프론트엔드와 백엔드 개발을 담담하고 있는 MC매드(A.K.A. The master of ansible)입니다. 이번 포스팅에서는 전 포스팅에 이어 Ansible로 windows, linux, unix 서버를 컨트롤할 수 있도록 실습 가이드를 작성해보겠습니다. [지난 포스팅: Ansible로 서로 다른 OS의 서버를 관리해보자 (1)] 07. 폴더 구조화 ├── ansible.cfg ├── hosts ├── main.yaml ├── roles │ ├── apache │ │ ├── files │ │ │ └── info.sh │ │ ├── tasks │ │ │ └── main.yaml │ │ └── vars │ │ └── main...
2023.12.05
최신글
-
Ansible로 서로 다른 OS의 서버를 관리해보자 (2)
안녕하세요, 메가존클라우드 Mass Migration Center의 AAT에서 프론트엔드와 백엔드 개발을 담담하고 있는 MC매드(A.K.A. The master of ansible)입니다. 이번 포스팅에서는 전 포스팅에 이어 Ansible로 windows, linux, unix 서버를 컨트롤할 수 있도록 실습 가이드를 작성해보겠습니다. [지난 포스팅: Ansible로 서로 다른 OS의 서버를 관리해보자 (1)] 07. 폴더 구조화 ├── ansible.cfg ├── hosts ├── main.yaml ├── roles │ ├── apache │ │ ├── files │ │ │ └── info.sh │ │ ├── tasks │ │ │ └── main.yaml │ │ └── vars │ │ └── main...
2023.12.05
-
Ansible로 서로 다른 OS의 서버를 관리해보자 (1)
안녕하세요, 메가존클라우드 Mass Migration Center의 AAT에서 프론트엔드와 백엔드 개발을 담담하고 있는 MC매드(A.K.A. The master of ansible)입니다. 이번 포스팅에서는 Ansible을 통해 각기 다른 OS를 가진 서버를 관리하는 방법에 대해 알아보겠습니다! 01. Ansible이란 Ansible은 오픈소스 IT 자동화 툴로서, 프로비저닝, 구성 관리, 애플리케이션 배포, 오케스트레이션 등의 수동 IT 프로세스를 자동화할 수 있습니다. 경험해보기 전에는 와닿지 않으니 실전으로 들어가서 빠르게 설치부터 진행해보겠습니다! 02. Ansible 설치 Ansible 설치 방법을 OS별로 알아봅시다. SUSE에 Ansible 설치하기 $ sudo zypper instal..
2023.12.05
-
데이터 시각화 라이브러리 D3.js로 네트워크 차트 만들기 (2)
안녕하세요, 메가존클라우드 Mass Migration Center의 AAT에서 프론트엔드와 백엔드 개발을 담담하고 있는 MC매드(A.K.A. The Chart Generator)입니다. 이번 포스팅에서는 저번 포스팅에 이어서 D3.js 라이브러리로 네트워크 차트 만들어 보겠습니다! 저번 포스팅 보러가기 [FrontEnd] - 데이터 시각화 라이브러리 D3.js로 네트워크 차트 만들기 (1) 04. 차트에 zoom 기능 적용하기 function handleZoom(e) { d3.select(selector + " g").attr("transform", e.transform); } const zoom = d3.zoom().on("zoom", handleZoom); d3.selectAll(selector + ..
2023.08.24
-
[Spring] Flux 와 Mono의 차이를 찾던중..
Flux : 0 ~ N 개의 데이터 전달 Mono : 0 ~ 1 개의 데이터 전달 즉 Flux는 큰 데이터를 여러개로 나눠서 보낼때, Mono는 데이터가 크던지 작던지 한번에 보낼때 사용됩니다. 아래 실제 소스코드를 확인해보면 Mono 는 단 건만 Flux는 단건 다건 둘다 가능합니다. public static Mono just(T data) { return onAssembly(new MonoJust(data)); } public static Flux just(T... data) { return fromArray(data); } public static Flux just(T data) { return onAssembly(new FluxJust(data)); } 스택오버플로우를 참조 해보면 Fulx는 Co..
2023.08.15
-
MAD - Header Layout
MAD Frontend 개발 시 규약 MAD 는 BootStrap 기반으로 프론트를 개발합니다. 따라서, 다음의 규약을 유지해 주십시오 1. 섹션의 헤더에 h4 > span 처리 하고, inline Bold 처리를 하여 어느 섹션에서 작업중인지 구분합니다. ( 향후 자바스크립트 작업에서 해당 레이어 선택시 색상을 데이터 색상으로 변경합니다 ) 2. 위제스터를 활용하여 모든 레이아웃에 공통 적용합니다. 3. 인용구를 넣어 사용자로 하여금 workflow 를 유지할 수 있도록 돕는 말 문구를 입력 해 주세요 4. 인용구 사이에 버튼은 공통입니다. ( help ) 액션 버튼을 통해 사용자로 하여금 기능을 이해할 수 있도록 해 주세요. 5. 유틸성 버튼 그룹 입니다. 대부분 다운로드 관련이나 클라이언트로 데이터..
2023.07.25
-
Java Service Tree Framework 의 Global Tree Map 설명
JPA Specification 검색 조건을 추상화하기 위해 사용된다. 이를 사용하기 위해 Repository에서 JpaSpecificationExecutor를 상속받아야 한다. import com.mad.treemap.model.GlobalTreeMapEntity; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.JpaSpecificationExecutor; public interface GlobalTreeMapJpaRepository extends JpaRepository,JpaSpecificationExecutor { } JpaSpecificationEx..
2023.07.24
