BaeBox

Node.js 의 Cluster Module 이라는 것을 알게 되어 그에 관한 글을 적어본다. Cluster Module : Node를 MultiCore 환경에서 활용하기 위해 사용하는 모듈. 현재까지 내가 파악한 바로는 Master라는 이름의 Balancer가 각각의 프로세스에 해당하는 worker들에게 일을 나누어 주는 형태이다. 아래 링크에 들어가보면 매우 간단한 예제가 있다. https://nodejs.org/api/cluster.html Cluster | Node.js v13.11.0 Documentation Cluster# A single instance of Node.js runs in a single thread. To take advantage of multi-core systems, t..

Node, Angular, Vue 등 JavsScript를 기반으로 하는 툴들을 쓰는데 JavaScript가 어떻게 동작하는지에 대한 고민을 해 본적이 없는 것 같다. 아래 내용의 글들의 내용이 참 좋다. 읽어보자. 출퇴근길에 읽으려고 했는데 난 회사에서 읽고있다. 하하. * 알림: 아래 링크의 글들은 하나같이 주옥같은 글들이다. 꼭 읽어보자!!! * 알림 2: 아래 적은 내용은 하단 링크들의 내용을 매우 간략하게 정리한 것이므로 링크들의 글을 읽고나서 보는걸 권장. v8 엔진 동작 방식 (꼭 읽어보시길!) https://evan-moon.github.io/2019/06/28/v8-analysis/ V8 엔진은 어떻게 내 코드를 실행하는 걸까? 이번 포스팅에서는 구글의 V8 엔진이 어떤 방식으로 자바스크..

많은 방법이 있겠지만, 내가 소개하는 방법은 기본적으로 html2canvas를 이용하는 것이다. html2cavnas : selector로 집어온 html을 base64 포맷의 이미지로 만들어주는 기능을 제공한다. base64화된 이미지를 그대로 PDF, PPT, Word로 export해주는 툴에 붙여 넣으면 된다. 참 쉽죠? 이미지에 한해서는 이런 방식으로 해결이 가능하다. 사실 이미지 넣는게 가장 어려웠는데... ㅎㅎ;; 그 외의 것들은 공식문서에 다 친절히 나와있더라. 아래 소스코드의 canvas.toDataURL('image/png') 라는 코드는 base64를 반환한다. 생각보다는 내용이 간단하게 끝났다. 다행이다. 이주가량 붙잡고 있던 내용인데 헣... 뭔가 기분이 묘하다. 이 글을 보는 누군..

Angular 초심자인 나로서 앵귤러를 활용하면서 두번째로 크게 막혔던 것은 컴포넌트를 실행중에 동적으로 생성하는 것이었다. 분명 이런 기능은 제공할거라는걸 알긴 하는데 그걸 뭐라고 부르는지 몰라서 고생했다 사용법은 간단한다. 하단 링크에 있는 공식문서를 간단히 따라하면 된다. 요는, ComponentFactoryResolver 클래스가 제공하는 resolveComponentFactory 함수를 이용하는 것이다. ComponentFactoryResolver 의 resolveComponentFactory 함수가 컴포넌트를 resolve 하고 createComponent 함수를 이용하여 컴포넌트를 생성한다. 생성까지는 어렵지 않았을거라고 생각한다. 여기서부터는 굳이 안 봐도 상관은 없지만, 개인적으로 흥미로..

Angular 내 컴포넌트간의 데이터 공유. 생각컨대, 나같은 초심자가 처음으로 막히는 부분이 아닐까 한다. 인터넷을 조금 뒤적거리다보니 여러 방법이 나오는데 크게 아래 세 가지 방법으로 귀결되더라. @Input @Output Bidirectional-Service (양방향 서비스) 위의 두 가지 방법인 @Input 태그와 @Output 태그를 이용하면, 부모-자식(parent-child)의 관계에 있는 컴포넌트끼리 데이터 공유가 가능하고, Bidirectional-Service, 쉽게 말해 중간다리인데, 이 방법을 이용하면 굳이 부모-자식 관계에 있지 않은 컴포넌트 끼리도 데이터 공유가 가능하다. 개인적으로는 이 방법이 제일 나은 것 같다고 생각한다. 내가 구구절절하게 설명할 필요 없이 아래 링크의 예..

Scapy : Python으로 작성된 컴퓨터 네트워크용 패킷 조작 도구. 프로토콜별로 패킷의 타입이 클래스로 정의되어 있으며, 해당 클래스를 이용하면 간단하게 패킷 데이터를 생성할 수 있다. Scapy는 아래와 같이 변수에 패킷 데이터(pcap)을 저장 간으하며, 저장된 pcap의 데이터를 출력 가능하다. CentOS 기준으로 설치 방법은 두 가지가 있다. Pip를 통해 설치하는 방법 Source 코드를 다운받아 컴파일 한 후 설치하는 방법 현 일자 (2020-02-07) 기준으로 pip 와 git 에서 제공하는 소스코드 모두 2.4.3 버전을 제공한다. ./run_scapy를 실행하면 scapy가 실행된다. Scapy는 여러 종류의 패킷 데이터를 지원하지만, OT망에 사용되는 프로토콜의 패킷은 일부 지..

Scroll : 데이터를 분할해서 읽어오는 기능. pagination 기능이라고 봐도 무방할듯 이러한 쿼리를 날리게 되면, 아래와 같은 결과값을 받게 된다. 해당 _scroll_id를 이용한 쿼리를 날리게 되면, 지정한 size 만큼 데이터를 연이어서 받아올 수 있다. 생성된 스크롤은 지정된 시간(TTL)만큼 살아 있으므로, 그 시간내로 요청을 이어한다면 데이터를 이어 받을 수 있다. 덤. node 에서는 아래처럼 하면 된다. https://www.elastic.co/guide/en/elasticsearch/reference/7.5/search-request-body.html#request-body-search-scroll Request Body Search | Elasticsearch Reference..

Brush : 차트 내 범위를 지정하는 기능. (github 曰 1, 2차원상의 데이터를 클릭이나 드래그를 이용하여 상호작용하는 기능.) Bisect를 같이 이용한다면 범위지정된 데이터의 배열 인덱스나 해당 범위의 데이터를 알아낼 수 도 있다. 이를 통해 드래그되는 범위 만큼을 CRUD 가능하며, 새로운 차트로도 그려낼 수 있다. 순수하게 Brush만 사용하면 그저 그림이나 그리는 기능일 뿐이기에, 실제로는 대부분은 Bisect를 같이 사용하지 않을까 싶다. Bisect: 정렬된 배열 상의 데이터 검색 기능. 특정 위치의 데이터(x축 데이터)를 읽어와서 해당하는 y값을 읽어오는 기능이라고 생각하면 된다. 소스코드를 들여다본 것은 아니지만, 생각컨대, pixel 값과 배열 크기를 비례하는 크기로 나누어 i..

모름지기 커스텀의 매력은 내 맘대로 하고 싶은대로 할 수 있다는 것이다. D3는 능력만 된다면, 엄청난 자유도를 제공한다. 근데 그럴 능력이...? 이번엔 쉽고 요상한거 하나 만들어보자. 대부분의 차트에서는 series 기능을 제공하는데, 대개 한가지 형태의 차트만으로 series 기능을 제공하거나, 시리즈마다 다른 데이터를 이용해 차트를 그리는 것이 불가능하다. 우린 그게 되는걸 만들어 볼 것이다. 근데 이거 하고 나면 다른데서 왜 굳이 이 방식을 안 쓰는지 알 수 있다. 하하하 게다가 귀찮으니까 대충 만들거다. 커스텀은 알아서들 하시라 하하하. 기본적으로 직교좌표 형태를 따르는 두 차트이기 때문에 앞선 글에서 설명했던 것과 구조는 동일하다. 사실 x축이나 y축을 그리는 것은 선택사항이지만... 있는게..

D3 차트는 어려울 것 같지만 굉장히 단순한 구조를 가지고 있다. 물론 이를 이용해 뭔가 만드려면 고되지만, 그 구조만 이해하는 건 매우 간단하다. 딱 봐도 직교(데카르트/카티시언)좌표를 이용하는게 눈에 보이는데 구성 요소도 마찬가지다! 세부적으로 각각의 요소들은 위에 붉은 색으로 표시된(선언 x) xAxis, yAxis, data, line 등을 통해 설정이 가능하다. D3 차트를 이용하여 기본형의 차트를 그리는 작업은 기본적으로 위의 변수들을 지정하는 과정이라고 봐도 무방하...지 않을까? 내 개인적으로는 그렇게 생각한다.