스쿨 데브옵스

SVG(Scalable Vecotr Graphics) SVG 는 벡터 기반의 그래픽을 지원하는 엘리먼트 입니다. 그래픽이라고 하면 2가지가 존재합니다. Raster: 고정된 이미지 영역에서 픽셀을 이용하여 하나의 그림을 나타냅니다. 점을 찍어서 그림을 그린다고 생각하면 될것 입니다 . Vector: 벡터는 점과 점을 연결하는 수학식을 이용하여 도형을 그리거나, 그림을 그립니다. HTML5 에서는 2가지 엘리먼트를 제공합니다. Canvas: Raster 이미지를 표현하기 위한 그림판 영역입니다. 확대/축소를 하게 되면 이미지가 깨지는 단점이 있습니다. 그래거 Canvas 는 redraw 를 통해서 이미지를 다시 그려주는 방식을 이용하여 이를 해결합니다. SVG: Vector 이미지를 그려주기 위한 그림판 ..

Enter and Exit DATA JOIN 은 D3에서 데이터를 인제스천 하는 방법에 대한 기초적인 내용이었습니다. 이미 준비된 데이터를 d3에 주입하고, 그래프를 그려줄 수 있고, DOM 처리를 수행할 수 있습니다. 그러나, 이전 예제에서는 정해진 dom element 내에서만 작업을 할 수 있었고, 데이터가 엘리먼트보다 적거나, 많아도 오류는 나지 않지만 원하는 데이터를 모두 그려줄 수 없는 문제가 있었습니다. Enter 와 Exit 를 이용하면, 데이터의 변경에 따라 DOM 을 동적으로 변경시켜 줄 수 있는 기능을 제공할 수 있습니다. Enter 우선 enter 에 대해서 알아보겠습니다. enter는 dom 엘리먼트가 join 된이후 데이터보다 작은 값을 얼마나 더 추가해야하는지를 계산하고, 엘리..

D3 Event 정적인 데이터를 보여주는 것보다, 마우스가 특정 객체에 Over 되었을때 화면이 보여진다면, 더욱더 다이나믹 할 것입니다. 사용자도 원하는 마우스 커서를 가져다 대면, 데이터를 보여준다거나, 줌인 아웃등을 통해서 데이터, 차트등을 확대, 축소 할 수 이쓸 것입니다. 이번에는 D3의 이벤트에 대해서 알아보겠습니다. D3 Event 시작하기. D3에서 이벤트의 가장 기본은 Selection 으로 부터 시작합니다. # selection.on(typenames[, listener[, options]]) on 메소드를 통해서 이벤트 리스너를 등록할 수 있습니다. typenames 는 이벤트를 나타내는 문자열입니다. (mouseover, click, ubmit 등 다양한 이벤트가 올 수 있으며 D3..

D3 Data JOIN D3가 Data Driven Document 라는것을 보아도 Data를 다루는 방법이 매우 중요합니다. 이번에는 Data JOIN 데해서 알아보겠습니다. Data Join D3 에서 사용하는 데이터는 JSON 을 기본으로 이용합니다. 텍스트별 색상 지정하기. 텍스트와 색상을 가진 JSON 객체가 있고, 이들 텍스트를 출력하는 예제입니다. 위 예제를 살펴보면, div.container 내부에 p 엘리먼트가 5개가 있습니다. 그리고 textData 는 6개의 Object 를 가지고 있습니다. text 를 출력하고, 각 텍스트에 색상을 지정하고 있습니다. 결과보기 결과화면과 같이 우리가 지정한 5개의 엘리먼트에만 텍스트가 출력하고, 마지막 End. 는 출력되지 않습니다. 이유는 셀렉션을..

D3 에서 DOM 알아보기. 지난번 연재 내용에서 D3 에서 DOM 셀렉션을 알아보았습니다. 돔을 선택한 후 DOM 에 신규 엘리먼트를 추가하거나, 속성값을 추가하거나, css 스타일도 먹일 수 있습니다. DOM 관리 기능 element 삽입, 제거 엘리먼트에 attribute 추가 엘리먼트 프로퍼티 추가하기 css styling 하기 html 코드 삽입 위와 같이 DOM 에 접근하고, DOM 을 관리할 수 있습니다. 이제부터 D3가 가진 DOM 기능들을 알아보고 어떻게 운용할 수 있는지 살펴보도록 하겠습니다. DOM Manipulating Sample append() 를 이용하여 엘리먼트 추가하기 selection.append(name) append 는 셀렉팅된 엘리먼트 마지막에 신규 엘리먼트를 추가합..

D3 (Data Driven Document) D3는 Data Driven Document의 의미로 D가 3개 들어있다고 하여 D3라고 합니다. D3 특징 D3는 다음과 같은 특징이 있습니다. Custom Interactive data visualization 가능 SVG 이용 (Scalable Vector Graphics) 으로 벡터그래픽을 지원합니다. (즉, 확대/축소에 화면이 깨지지 않습니다.) HTML 과 CSS 를 지원하여 디자인 할 수 있습니다. D3 Install D3를 이용하기 위해서는 다음 몇가지 요소가 필요합니다. D3 library D3룰 이용하기 위해서 다음 링크를 header 에 추가해 줍니다. 혹은 실제 소스 코드를 로컬에 설치하고자 한다면 다음 zip 파일을 다운받아 압축을 풀..

Kubernetes Storage Kubernetes 저장 공간은 쿠버네티스 어플리케이션이 스토리지를 요청하고 사용할 수 있는 방법을 제공한다. Pod는 컨테이너가 종료되면 컨테이너 내부의 데이터는 사라진다. 이 데이터를 영속적으로 보관할 수 있는 방법이 필요하며 이때 Persistent Volume에 저장할 수 있다. image from : https://amazic.com/kubernetes-storage-101-all-you-need-to-know-to-get-started/ Persistent Volume (PV) 클러스터 레벨의 리소스이다. 클러스터 관리자 혹은 외부 프로비저너에 의해서 생성되거나, 스토리지 클래스를 사용하여 동적으로 프로비저닝 된다. 노드가 클러스터 리소스인 것처럼 클러스터의 ..

Kubernetes Scheduler Scheduler 란? 스케줄러는 쿠버네티스에서 kubelet이 파드를 실행할 수 있도록 파드를 노드에 할당하는 역할을 수행한다. kube-scheduler는 쿠버네티스의 기본 스케줄러, 컨트롤 플레인의 일부로 실행 필요한경우 커스텀 스케줄러를 사용할 수 있다. 새로 생성된 모든 파드에 대해서 kube-schedluer는 최적의 노드를 선택한다. 스케줄시 고려사항 개별 및 집단 리소스 요구사항 하드웨어/소프트웨어 어피니티/안티어피니티 테인트/톨러레이션 데이터 지역성 워크로드 간섭 Scheduler 기본 동작 방식 스케줄러의 기본 동작 방식은 아래와 같다. image from: https://k21academy.com/docker-kubernetes/scheduling..

Go Polymorphism 구현하기 Go 에서 Polymorphism 을 구현하기 위해서는 interface를 이용하여 타입을 구성하고, 이를 실제 구현하는 방법이 있다. 이번 아티클에서는 Polymorphism을 이용하여 도형의 넓이를 구하고 도형의 이름을 출력하는 예제를 만들어 볼 것이다. Go 모듈 생성하기 Go 에서는 기본적으로 GOPATH에서 소스를 작성하는 것으로 가정하고 개발이 진행된다. 그러나 이렇게 하나의 PATH로 지정하면 여러 프로그램을 개발할때 매우 불편할 것이다. 이를 해결하기 위해서 Go에서는 모듈을 제공하고 각기 다른 모듈을 생성할 수 있도록 해주고 있다. 우리는 polymorphism 이라는 모듈을 생성할 것이다. go mod init polymorphism 위 결과 go...

Local 에서 MariaDB StatefulSet 컨테이너 실행하기 Local에서 데이터베이스를 Container로 실행하는 경우가 자주 발생한다. DataBase 는 pod가 재실행 되더라도 항상 고정된 볼륨으로 데이터를 저장하고 있어야한다. 이때 주로 사용하는 것이 StatefulSet 이다. 우리는 여기서 StatefulSet을 생성하고, MariaDB를 로컬 환경에서 실행해 볼 것이다. Namespace 생성하기 우리는 storage라는 namespace를 생성하고, mariadb를 실행할 것이다. namespace definition 은 다음과 같다. apiVersion: v1 kind: Namespace metadata: name: storage StorageClass 생성하기 저장해야할 스..