인기글
-
간편하게 예쁜 Select 박스를 만들어보자 (select2)
안녕하세요, 메가존 클라우드의 코드보안관을 담당하고 있는 매드준입니다. 탕탕탕탕.. ( ﹁ ﹁ ) ~→ 웹을 개발하면서 가장 중요하게 생각하는 게 바로 "UI를 어떻게하면 이쁘게 그릴 수 있을까"인데요. 라이브러리를 사용하여 UI를 이쁘게 다듬어봅시다! 그리하여! 제가 갖고온 라이브러리는 select2입니다. select2는 MIT 라이센스이므로 자유롭게 사용할 수 있다는 장점과 이쁘다는 최고의 장점이 있어서 한번 사용해 보았는데 괜찮아서 여러분들께 소개 시켜드릴려고 합니다! 그럼 따라오세요! 탕탕! 01. 설치하기 CDN으로 JS파일 제공받기 CDN은 (Content Delivery NetWork)의 약자입니다. 즉 cdn에 등록된 js를 제공받아서 select2를 사용가능하게 하는 방법입니다. 다만,..
2023.06.29
-
Docker Swarm 의 extra_host 와 K8S 의 HostAlias
HostAliases로 파드의 /etc/hosts 항목 추가하기 파드의 /etc/hosts 파일에 항목을 추가하는 것은 DNS나 다른 방법들이 적용되지 않을 때 파드 수준의 호스트네임 해석을 제공한다. PodSpec의 HostAliases 항목을 사용하여 이러한 사용자 정의 항목들을 추가할 수 있다. HostAliases를 사용하지 않은 수정은 권장하지 않는데, 이는 호스트 파일이 kubelet에 의해 관리되고, 파드 생성/재시작 중에 덮어쓰여질 수 있기 때문이다. 기본 호스트 파일 내용 파드 IP가 할당된 Nginx 파드를 시작한다. kubectl run nginx --image nginx pod/nginx created 파드 IP를 확인해보자. kubectl get pods --output=wide ..
2023.06.29
-
데이터 시각화 라이브러리 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
-
[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
-
Docker Swarm Config 와 K8S 의 ConfigMap
컨피그맵(ConfigMap) 컨피그맵은 키-값 쌍으로 기밀이 아닌 데이터를 저장하는 데 사용하는 API 오브젝트이다. 파드는 볼륨에서 환경 변수, 커맨드-라인 인수 또는 구성 파일로 컨피그맵을 사용할 수 있다. 컨피그맵을 사용하면 컨테이너 이미지에서 환경별 구성을 분리하여, 애플리케이션을 쉽게 이식할 수 있다. 주의: 컨피그맵은 보안 또는 암호화를 제공하지 않는다. 저장하려는 데이터가 기밀인 경우, 컨피그맵 대신 시크릿(Secret) 또는 추가(써드파티) 도구를 사용하여 데이터를 비공개로 유지하자. 사용 동기 애플리케이션 코드와 별도로 구성 데이터를 설정하려면 컨피그맵을 사용하자. 예를 들어, 자신의 컴퓨터(개발용)와 클라우드(실제 트래픽 처리)에서 실행할 수 있는 애플리케이션을 개발한다고 가정해보자. ..
2023.06.29
-
div 태그 내 이미지 적용하기 (동적 CSS 생성)
MAD에 DrawFlow라는 OpenSource Library를 이용하여 구현한 아키텍처 그리기 기능이 있습니다 이 화면에서는 AWS에서 제공하는 서비스들의 아이콘을 이용하여 클라우드 내에서 서비스들이 어떻게 구성되는지를 표현할 수 있습니다 이 화면에서 각 서비스들의 아이콘을 화면에 배치할 수 있는데 하나의 문제가 발생했었습니다 화면에 배치하는 요소들을 Node로 표현하는데 Node 위에 이미지 태그가 쌓여있는 형태로 인해 아이콘을 별도로 확대를 해야 위치를 이동할 수 있는 치명적인 문제였습니다. 우선 문제 해결 전의 소스를 확인하겠습니다. 수정 전 코드 /* 상위 코드 생략 */ if (folder[0] == 'category_icons') { element = ` `; } 노드를 canvas 위에 올..
2023.06.26
최신글
-
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
