스쿨 데브옵스

Kafka UI 툴 이용하기 Kafka 브로커를 모니터링하거나, 어드민으로 관리하기 위한 다양한 툴이 존재한다. 이런 다양한 툴들에 대한 비교 설명은 다음 사이트를 참조하자. Overview of UI Tools for Monitoring and Management of Apache Kafka Clusters from: https://towardsdatascience.com/overview-of-ui-tools-for-monitoring-and-management-of-apache-kafka-clusters-8c383f897e80 우리는 UI for Apache Kafka 를 이용해 볼 것이다. UI for Apache Kafk 자세한 내용은 https://github.com/provectus/kafka..

Elasticache for Memcached Memcached Go Library 이용하기 Local Memcached with Docker DOCKER를 이용하여 Memcached 실행하기. docker run -d -p 11211:11211 memcached go module 가져오기 모듈 초기화 하기 go mod init github.com/schooldevops/memcached memcached 라이브러리 획득하기 go get github.com/bradfitz/gomemcache/memcache 샘플 코드 작성 package main import ( "fmt" "github.com/bradfitz/gomemcache/memcache" ) func main() { // Memcached에 커넥..

오랜만에 mac 을 다시 설치하고, jdk 를 설치하려고 하니 기억이 안난다. Oracle 에서 다운받아서 설치 하지 않고, OpenJDK 를 설치하기 위해서 brew 를 이용하려고 한다. 1. brew 설치하기 mac 패키지 설치 툴은 brew 가 가장 유명한것 같다. https://brew.sh/ 에서 brew 를 설치해주자. $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" 한참 설치하고 나서 brew 를 업데이트 하자. 2. brew update 하기 $ brew update Already up-to-date. 3. Open JDK 설치하기. 공식적으로 아직 brew 가..

D3 Transition Transition 은 특정 도형이나 물체의 변화에 대해서 지정된 시간동안 변화를 보여주는 기법입니다. D3 에서는 transition 이라는 함수를 이용하여 다양한 변화를 줄 수 있습니다. 이번 아티클에서는 어떠한 변환이 있는지 그리고 어떻게 사용할 수 있는지 알아 보겠습니다. 일단 transition 을 주기 위해서는 selection 을 해야합니다. 그리고 셀렉션 된 물체에 대해서 전이를 발생시킵이다. Basic Transition 가장 단순한 예로 body 의 배경색을 녹색에서 파란색으로 서서히 변화 시키는 예제입니다. style("background", "green") 이 시작 값이되고 이후, transition() 을 설정하면 트랜지션이 걸립니다. 그리고나서 durat..

D3 Transform 알아보기 D3 에서 트랜스폼은 SVG 엘리먼트에 변형을 가하는 행위를 할 수 있습니다. Transform 은 attr 을 통해서 속성으로 지정할 수 있으며 변화를 줄 수 있는 메소드는 다음과 같습니다 matrix(a, b, c, d, e, f): 이 변환은 6개의 값을 가진 매트릭스에 의해서 특정 변환을 수행할 수 있습니다. translate(x, [y]): 이 변환은 x와 y위치로 위치 이동을 지정된 값으로 수행합니다. x 값은 필수이며, y값이 없다면 0으로 설정됩니다. rotate(degree): 지정된 각도로 회전합니다. cx, cy 를 지정하면 해당 축을 기준으로 회전을 합니다. scale(x, [y]): 이 변환은 x와 y값에 따라서 스케일 오퍼레이션을 지정합니다. 만약..

Group Element D3 에서 Group 엘리먼트는 SVG 엘리먼트들을 논리적 단위로 묶어주는 컨테이너 역할을 합니다. SVG 엘리먼트를 서로 묶어서 그룹을 만들어 줍니다. 그룹으로 일단 지정하면, 그룹 하위의 모든 컨테이너에 포함된 엘리먼트가 됩니다. 그룹은 ... 으로 묶어줄 수 있습니다. Group 엘리먼트들은 자식으로 여러 그룹을 가질 수 있습니다. 엘리먼트 그룹 짓기. 기본 엘리먼트는 아래와 같다고 생각해 보겠습니다. 둥근원, 사각형 번갈아 가면서 아래와 같이 그려보았습니다. 기본 엘리먼트 그려주기 그룹 지어주기 이번에는 그룹을 만들어 보겠습니다. 첫번재, 두번째 원을 첫번째 그룹으로 그리고 세번째, 네번째 사각형을 두번째 그룹으로 만들어 주겠습니다. 위 소스를 살펴보면 우리는 firstG..

Line Chart 이번에는 차트 중에서 가장 많이 사용하는 라인 차트를 그려보겠습니다. 라인 차트를 이루는 구성 요소를 알아볼께요. 라인차트 구성요소 타이틀 표시할 데이터: 라인차트를 그려주기 위해서는 데이터가 준비 되어야겠지요? 데이터는 월별 판매지수 그대로 이용하겠습니다 . x축, y축 바 차트 line 함수 line 데이터를 path 를 이용하여 그려주기. 라인에 커브 속성 넣어주기 (꺽은선, 연속선) 등 표시하기 위와 같이 라인 구성요소는 바 차트와 대부분 유사하지만, 라인차트를 그려줄때 사용하는 함수는 조금 다릅니다. 우리는 소스에서 라인차트를 좀더 명확하게 표시하기 위해서 circle 을 추가하여, 라인의 지점마다 핑크색 점을 찍어보도록 하겠습니다. 라인차트 소스 데이터 설정하기. var d..

BarChart 이번에는 BAR 차트를 그려보겠습니다. 위 차트 그림과 같이 차트를 그리기 위해서 우리가 해야할 일이 어떤것이 있는지 알아 보겠습니다. 차트를 그리기 위해서 무엇이 필요한지 알아보겠습니다. 타이틀 표시할 데이터 x축, y축 바 차트 rect 엘리먼트 우리는 이러한 요소들을 사용하여 차트를 그리겠습니다. 차트 데이터 var datas = [ { date: "1월", sales: 1000 }, { date: "2월", sales: 800 }, { date: "3월", sales: 950 }, { date: "4월", sales: 1100 }, { date: "5월", sales: 1050 }, { date: "6월", sales: 1500 }, { date: "7월", sales: 1700 ..

AXES 차트에서 Axis 는 데이터를 가시화 할때 매우 중요한 부분중에 하나입니다. 차트에서 Axis 가 있어야, 현재 보는 그래프의 데이터를 확인할 수 있으며, 해당 그래프의 특정 지점이 연관된 축의 값을 파악함으로 해서 데이터 인지를 더욱 명확하게 할 수 있습니다. 특히 데이터의 최소/최대 범위를 알지 못하는 상황에서 축의 영역을 고정한다면 매우 큰 데이터가 들어왔을때 올바르게 차트를 그려줄 수 없게 됩니다. Axis d3에서 축은 다음과 같은 메소드로 구현할 수 있습니다 . d3.axisTop() : 상단 수평 축을 그립니다 . d3.axisRight() : 오른쪽 수직 축을 그려줍니다. d3.axisLeft() : 왼쪽 수직 축을 그려줍니다. d3.axisBottom() : 하단 수평 축을 그립..

Scale d3에서 중요한 또하나의 값은 Scale 이라고 할 수 있습니다. 실제 데이터는 매우 큰 값들이 올 수 있으며, 그 값들을 고정된 화면 영역에 표현하는 것은 쉽지 않습니다. 적절한 축적에 따라서 데이터를 화면 영역으로 변경 매핑이 될 수 있도록 일관된 수식으로 변환을 해야합니다. 이러한 일을 해 주는 것이 Scale 입니다. D3 에서는 다음과 같은 Scale 범주와 기능을 제공하고 있습니다. Scale Category Continuous 연속적인 데이터를 처리할 수 있습니다. d3.scaleLinear(): 연속적인 리니어 스케일을 지정한다. 이것은 입력 데이터를 특정 출력 범위로 지정한다. d3.scaleIdentity(): 리니어 스케일을 생성한다. 이것은 입력데이터와 출력데이터가 같은 ..