Vim 아주 간단한 기본 설정 (~./vimrc)

vi ~./vimrc

위 명령어로 사용자계정의 디렉토리 밑에 .vimrc 파일을 생성/수정 합니다! 그리고 아래의 내용을 기입합니다~

set smartindent
set ts=2
set expandtab
set sw=2
set nu
set ai

:wq 로 저장/종료 하시고, 아래의 명령어로 활성화 시킵니다!!

source ~./vimrc

그럼 적용된 vim을 만나실 수 있습니다!
각 설정에 대해서 알아볼까요~

smartindent 는 작성하는 코드의 syntax/style에 반응하여 indent 해주는 것입니다. 
ts는 tap stop으로 한번의 tab 버튼으로 얼만큼 공간을 차지할지 입니다. 저는 2칸만 띄는 것을 선호해서 2로 하였습니다.
expandtab는 tab 대신에 space를 사용하는 것을 의미합니다. 저는 tab은 너무 큰 공간을 차지하더라구요.
sw는 (visual mode에서) shiftwidth로 <<, >>를 눌렀을 때 몇칸을 이동할 지를 설정하는 것입니다.
nu는 set number와 같은 것입니다. 행 번호를 표시하는 것인데- 장점은 디버깅할 때 라인 넘버를 볼 수 있는 점이 되겠죠?
ai는 auto indent입니다. 엔터 했을 때 맨 앞으로 가는 것이 아니라- 현재 상황에 맞게 indent해주는 것입니다! 필수!!!


난 흔들고 싶지 않다고ㅠㅠ (윈10 마우스 드래그로 창을 흔들 때 다른 창이 최소화되는/사라지는 기능 끄기) 미분류


제발 아니요ㅠㅠ 저는 흔들고 싶지 않아요!! 패가 좋지도 않은데... 암튼 창을 흔들어서 나머지 모든 창을 최소화하는 기능은 무엇을 위한 것인지 모르겠습니다... 숨기고 싶은게 많은가... 다시 모든 창들을 하나씩 키려면 그것 또한 고역이죠; 다시 다 띄우는 기능만 있어도 쓸 구석이 있는 녀석일지도 모르나. 단점이 장점보다 강하기 때문에- 전 이 기능을 끄려 합니다!

윈도우 + R (실행창)에서 gpedit.msc를 입력합니다.


그리고, 사용자 구성 > 관리 템플릿 > 바탕 화면 > Aero 흔들기 창 최소화 마우스 제스처 사용 안 함 을 더블클릭 합니다.

"사용 안 함"이기 때문에- 이 기능을 "사용"하셔야 적용됩니다. 왜 이런 말장난을 나랑 하자는 건지... 일해라 마소 코리아..

Syntax Highliting for Vue on Vim 개발

*.vue 파일을 vi 편집기(vim)으로 작성/수정하려고 하다보니, 제대로 컬러가 입혀져 있지 않아서(syntax highlighting) - 동료분께 여쭤보니 plug-in을 추천해 주셨습니다! 

vim-vue (https://github.com/posva/vim-vue) 라는 것인데요, 
이것은 Vim의 플러그인 매니져인 Vundle, runtimepath를 관리해주는 pathogen 을 필요로 하는 것 처럼해서 매우 복잡하게 설치과정이 진행되는데..- 이것 없이도 간단히 설치가 됩니다!

git clone https://github.com/posva/vim-vue.git ~/.vim/pack/plugins/start/vim-vue

을 하시면, 자동으로 .vim/pack/plugins/start/vim-vue에 cloning하여- 바로 적용되는 것을 느끼실 수 있습니다!! (씐난당)



적용 전 후의 모습입니다!!

Shared Queue (DEALER and ROUTER sockets) in ZMQ 개발

ZMQ의 간단한 Client/Server 구조를 넘어서- broker를 추가하여 여러 스레드(프로세스/노드)로 확장하는 방법에 대해서 공부하며 작성한 글입니다.

'Hello World' Client / Server 어플리케이션에는 하나의 서버와 통신하는 클라이언트 하나가 있는 단순한 구조였습니다. 실제로는 여러 클라이언트와 여러 서비스를 허용해야합니다. 이것은 우리가 서비스의 힘(단지 하나가 아닌 여러 스레드 / 프로세스 / 노드)를 확장할 수 있게 해줍니다. 유일한 제한 조건은 서비스가 상태가 없고 모든 상태가 요청에 있거나 데이터베이스와 같은 일부 공유 저장소에 있어야한다는 것입니다.

Figure 15 - Request Distribution

여러 클라이언트를 여러 서버에 연결하는 방법에는 두 가지가 있습니다. brute force는 각 클라이언트 소켓을 여러 서비스 엔드 포인트에 연결하는 것입니다. 하나의 클라리언트 소켓은 여러 서비스 소켓에 연결할 수 있으며 REQ 소켓은 이러한 서비스들간에 요청을 분배합니다. 클라이언트 소켓을 세 개의 서비스 엔드 포인트에 연결한다고 가정 해 보겠습니다 .A, B, 및 C로 구성됩니다. 클라이언트는 R1, R2, R3, R4 요청을 작성합니다. R1과 R4는 서비스 A로 이동하고 R2는 B로 이동하고, R3는 서비스 C로 이동합니다.

이 설계를 통해 더 많은 client들을 저비용으로 추가할 수 있습니다. 더 많은 서비스를 추가할 수도 있습니다. 각 client는 요청을 서비스에게 request를 배포합니다. 그러나 각 client는 서비스 토폴로지를 알아야합니다. 100 client가 있고, 3개의 서비스를 더 추가하기로 결정한 경우, client가 3 가지 새로운 서비스에 대해 알 수 있도록 100 client들을 재구성하고 재시작해야합니다.

수퍼 컴퓨팅 클러스터에 자원이 부족할 때 새로운 서비스 노드를 두 세 가지 추가해야합니다. 너무 많은 정적 조각은 액체 콘트리트와 같습니다(지식이 분산되고 정적 조각이 많을 수록 토폴로지를 변경하는 것이 더 힘듭니다). 우리가 원하는 것은 토폴로지에 대한 모든 지식을 중앙 집중화하는 클라이언트와 서비스 사이에 앉아있는 것입니다. 이상적으로 토폴로지의 다른 부분을 건드리지 않고도 언제든지 서비스 또는 클라이언트를 추가 및 제거할 수 있어야합니다.

따라서 이런 유연성을 제공하는 작은 메세지 큐 브로커(meesage queuing broker)가 필요합니다.브로커는 client의 frontend와 서비스의 backend라는 두 개의 엔드 포인트에 bind합니다. 그런 다음 zmq_poll()을 사용하여 이 두 소켓이 활동하는지 모니터하고 그럴 경우, 두 개의 소켓 사이에서 메시지를 전송합니다. 명시적으로 큐를 관리하지는 않습니다. ZeroMQ는 각 소켓에서 자동으로 큐를 처리합니다.

REQ를 사용하여 REP와 통신하면 엄격한 동기식 request-reply 대화 상자가 나타납니다. client가 request를 보내면, 서비스가 요청을 읽고 reply를 보냅니다. 그런 다음 client는 reply를 읽습니다. client나 server가 다른 작업 (응답을 기다리지 않고 연속해서 두 개의 요청을 보내는 것)을 시도하면 오류가 발생합니다.

그러나 broker는 nonblocking(비차단?)이어야 합니다. 분명히 zmq_poll()을 사용하여 두 소켓 중 하나를 기다릴 수 있지만, REP와 REQ는 사용할 수 없습니다.

Figure 16 - Extended Request-Reply

운 좋게도 nonblocking request-response를 가능하게 하는 dealer와 router라는 두 개의 소켓이 있습니다. (chapter 3 -고급 request-reply 패턴에서 dealer 및 router 소켓을 사용하여 모든 종류의 비동기(asyncronous) require-reply 흐름을 구축할 수 있습니다.) 여기서는 dealer와 router가 req-rep를 brocker(intermediary)를 통해 확장할 수 있는 방법을 살펴봅니다.

이 간단한 확장된 request-reply 패턴에서 REQ는 router와 대화하고, dealer는 REP와 대회합니다. dealer와 router 사이의 메세지를 하나의 소켓에서 꺼내 다른 server로 밀어 내는 broker와 같은 코드가 있어야합니다.

request-reply broker는 두 개의 엔드 포인트에 bind합니다. 하나는 client가 연결하는 frontend 소켓이고 다른 하나는 worker가 연결하는 backend(end point)입니다. 이 broker를 테스트하려면 worker를 변경하여 backend 소켓에 연결해야합니다. 


C++ | C# | Clojure | CL | Delphi | Erlang | F# | Go | Haskell | Haxe | Java | Lua | Node.js | Perl | PHP | Python | Racket | Ruby | Scala | Tcl | Ada | Basic | Felix | Objective-C | ooc | Q



C++ | C# | Clojure | CL | Delphi | Erlang | F# | Go | Haskell | Haxe | Java | Lua | Node.js | Perl | PHP | Python | Racket | Ruby | Scala | Tcl | Ada | Basic | Felix | Objective-C | ooc | Q


rrbroker: Request-reply broker in C


C++ | C# | Clojure | CL | Delphi | Erlang | F# | Go | Haskell | Haxe | Java | Lua | Node.js | Perl | PHP | Python | Ruby | Scala | Tcl | Ada | Basic | Felix | Objective-C | ooc | Q | Racket

Figure 17 - Request-Reply Broker

request-reply broker를 사용하면 client가 worker를 보지 못하고 worker가 client를 보지 못하기 때문에 client/server 아키텍처를 쉽게 확장할 수 있습니다. 유일한 정적 노드는 중간에 있는 broker 입니다.

이 글은 http://zguide.zeromq.org/page:all#Shared-Queue-DEALER-and-ROUTER-sockets를 참조하여 공부하면서 작성하였습니다. 제가 겪는 시행착오를 통해, 누군가에게 도움이 되기를 바랍니다. 


Vue-cli를 이용한 외부 라이브러리(Vue Bars) 사용 개발

Vue는 파면 팔 수록 ... 편리하다기 보다는 어렵다....라는 느낌ㅇ....

사용하고자 하는 라이브러리 Vue Bars

외부 라이브러리 쓰려고 해보니 (ZMQ와 vuebars), import나 require같은 것을 이용하여 외부 라이브러리를 포함시키는 것을 볼 수 있었다. 그저 script만 추가해놓고 왜 안되나 고생했다... 그런데 import나 require는 vue 자체에 포함되어 있지 않았다. Browserify 또는 Webpack을 통해 CommonJS같은 것을 사용해야 한다. 이를 위해서 vue-cli 설치하면 된다. 

"Vue.js는 단일 페이지 응용 프로그램을 빠르게 스캐폴딩하기 위한 공식 CLI를 제공합니다. 현대적인 프론트엔드 워크플로우를 위해 잘 구성된 빌드 설정을 제공합니다. 핫 리로드, lint-on-save 및 프로덕션 준비가 된 빌드로 시작하고 실행하는데 몇 분 밖에 걸리지 않습니다." ( https://kr.vuejs.org/v2/guide/installation.html#CLI )

# vue-cli 설치
$ npm install --global vue-cli
# "webpack" 템플릿을 이용해서 새 프로젝트 생성
$ vue init webpack my-project
# 의존성을 설치하고 실행하세요!
$ cd my-project
$ npm install
$ npm run dev

my-project는 작명센스로 변경하는 것을 추천합니다- 마지막 명령어로 실행이 되고, port 번호가 무엇인지 나타날 것입니다. 그러면, localhost:port번호로 접속해 첫 페이지를 마주할 수 있습니다.

기본적으로 localhost로 설정되어있어서- 0.0.0.0 으로 host를 바꾸려 했지만... 어느 지점에서 바꿔야 오류가 안뜨는지 못찾았습니다... 단기적인 해결책으로는 -

export HOST=0.0.0.0
npm run dev

이런식으로 실행하면 됩니다!

제가 사용하고 싶었던 Vue Bars ( https://github.com/DeviaVir/vue-bar ) 를 설치하고 적용해봅시다.

npm i vuebars -S

로 간단히 설치가 가능합니다.

그런데, 이제 소스 코드를 작성해야하는데... 복잡하다고 느낀 부분이, 이전의 디렉토리 구조와 다르게 만들어져 있다는 것입니다.
언젠가 익숙해 지겠죠... 이럴거면 왜 vue의 기본 구조를 익힌 것인가..  필요한 부분만 색칠공부해보겠습니다.

my-project
- build
- config
index.html
- node_modules
package.json
package-lock.json
README.md
src
- main.js
static
test

src/main.js 에 코드를 추가해봅시다.

import Bars from 'vuebars'

new Vue({
el: '#app2'})


index.html 에 코드를 추가해 봅시다.

    <div id="app2">
<bars
:data="[1, 2, 5, 9, 5, 10, 3, 5, 5, 12, 1, 8, 2, 9, 14]"
:gradient="['#6fa8dc', '#42b983']"
:barWidth="5"
:growDuration="1">
</bars>
</div>

그리고 실행해보면 아래와 같은 화면으로! 외부 라이브러리를 사용하여 그래프를 그린 것을 보실 수 있습니다!!


1 2 3



통계 위젯 (화이트)

00
3
831