javascript4 간편하게 예쁜 Select 박스를 만들어보자 (select2) 안녕하세요, 메가존 클라우드의 코드보안관을 담당하고 있는 매드준입니다. 탕탕탕탕.. ( ﹁ ﹁ ) ~→ 웹을 개발하면서 가장 중요하게 생각하는 게 바로 "UI를 어떻게하면 이쁘게 그릴 수 있을까"인데요. 라이브러리를 사용하여 UI를 이쁘게 다듬어봅시다! 그리하여! 제가 갖고온 라이브러리는 select2입니다. select2는 MIT 라이센스이므로 자유롭게 사용할 수 있다는 장점과 이쁘다는 최고의 장점이 있어서 한번 사용해 보았는데 괜찮아서 여러분들께 소개 시켜드릴려고 합니다! 그럼 따라오세요! 탕탕! 01. 설치하기 CDN으로 JS파일 제공받기 CDN은 (Content Delivery NetWork)의 약자입니다. 즉 cdn에 등록된 js를 제공받아서 select2를 사용가능하게 하는 방법입니다. 다만,.. 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. 이전 1 다음
