Fedora30 MongoRocks 3.4 설치

- GCC version 9.1.1
- Python 2.7.3

//경우에 따라서 bzip-devl, libcurl-devel, snappy-devel 등을 yum 혹은 dnf 로 install 해야 함


MongoRocks - 3.4 설치 방법

1. RocksDB 설치 및 빌드

//다운로드
git clone -b 5.1.fb https://github.com/facebook/rocksdb.git

//빌드 -> -j는 옵션. 없어도 상관없음
cd rocksdb
CFLAGS=-fPIC CXXFLAGS=-fPIC
make static_lib -j 8
INSTALL_PATH=/usr make install -j 8
make shared_lib -j 8
cd ..


2. MongoRocks 설치

git clone -b v3.4 https://github.com/mongodb-partners/mongo-rocks

3. MongoDB 설치

git clone -b v3.4 https://github.com/mongodb/mongo.git


4. MongoRocks 빌드

mkdir -p mongo/src/mongo/db/modules
cd mongo/src/mongo/db/modules
ln -sf ../../../../../mongo-rocks rocks
cd ../../../../

//gcc 5.4
scons

//5.4보다 버전이 높을 경우
scons --disable-warnings-as-errors

//혹은 .. 여기서도 -j n 옵션으로 속도 올릴 수 있음
buildscripts/scons.py mongod --disable-warnings-as-errors


//MongoDB가 버전이 많아서 dependency를 먼저 설치해야하는 경우도 많은데 3.4버전은
pip install -r buildscripts/resmokelib/requirements.txt

//Master 버전은..
pip3 install -r etc/pip/compile-requirements.txt

//해당 정보는 mongo/docs/building.md 를 참조


5. 실행
//정상적으로 빌드하였다면 (다행..) mongod 파일이 생성되고 해당 파일로 mongoDB를 실행가능

//기본 저장디렉토리 생성 및 rocksdb storage 엔진으로 사용 (default가 WiredTiger이기 때문에 지정해주어야 함)
mkdir -p /data/db
./mongod --storageEngine=rocksdb



6. 기타 에러
// Compression type Snappy is not linked with the binary. at src/mongo/db/modules/rocks/src/rocks_engine.cpp 208  등 같은 에러는 compress 라이브러리를 바꾸어서 실행하면 됨

--rocksdbCompression arg (arg => none, snappy, zlib, lz4, lz4hc, mongod --help로 확인 후 입력) 

//간혹이 아니라.. 빌드가 안되는 상황이 많을 수 있음.. 이때는 보통 rocksdb의 빌드 문제가 많음 mongo-rocks의 git에서는 다음과 같은 형식으로 설치하고 있음 

cd rocksdb; USE_RTTI=1 CFLAGS=-fPIC make static_lib; sudo INSTALL_PATH=/usr make install; cd ..

//재빌드하기전에 make clean 및 /usr/lib/librocksdb.a 파일, /usr/include/rocksdb 폴더 삭제 후 재빌드 권장 (사실 안해도 될수도 있음...)

++ 9/18 추가

requirements 설치 중 에러 1.

‘/usr/lib/rpm/redhat/redhat-hardened-cc1’: No such file or directory


=> dnf install redhat-rpm-config


requirements 설치 중 에러 2.

Python.h: No such file or directory

=> dnf install python2-devel

WIN10 - Intel OpenCL SDK - Eclipse CDT(MinGW)

Win 10에서 이클립스 환경에서 OpenCL을 테스팅하기 위한 환경 설정 내용입니다.

간략하게 캡쳐 사진 위주로 설명하겠습니다.

1. Intel OpenCL SDK 설치 (CPU 제조사에 맞는 SDK 설치- Intel 외 제조사는 테스트 필요)
https://software.intel.com/en-us/opencl-sdk/choose-download

2.  sdk 설치 위치 확인 - 추후 라이브러리 지정에 사용

(C:\Program Files (x86)\IntelSWTools\OpenCL\sdk) -환경마다 다를 수 있음

3.  이클립스 설치 - (CDT 환경의 이클립스라면 CDT 설치 부분을 건너띄어도 됨)

(https://www.eclipse.org/downloads/)

4. CDT 설치 - CDT 환경이 없다면..

5.  이클립스 재실행 후 CDT 환경 확인 - perspective를 변경하여 c/c++이 존재하는지 확인

6. C/C++ 프로젝트 생성

7. 각 컴퓨터에 맞는 GCC 컴파일러 환경에 맞게 프로젝트 생성
  (MinGW 컴파일러 설치는 본 블로그에서 다루지 않음 -> 다른 블로그에 해당 내용이 많음)

8. 프로젝트 환경설정에서 include / linker(library) 설정
(2번 단계에서의 SDK 디렉토리를 입력 - 특히 링커 설정에서는 아래쪽에서는 path를 입력하고 위쪽에서는 OpenCL 을 입력해야 함)

9. OpenCL 구동 확인을 위해서 예제 .cpp 파일과 .cl 파일을 생성

10. 빌드 후 실행 (ctrl + b, ctrl + f11)
 (콘솔에 결과가 출력 됨을 확인 => 각 커널 함수에서 printf 문을 사용하더라도 이클립스 콘솔에서 확인 가능)

11. OpenCL 공부하기 (가장 힘든 작업...🌟)

[Vue]v-list-tile active class, background-color

vue의 v-list-tile에는 active-class Props가 있다.

해당 리스트 타일이 선택되었을때 자동으로 해당 class가 달리고, css를 해당 클래스로 입히는것 같다.

이러한 active-class를 사용자 정의 class를 추가할 수 있고, 사용자 정의 class에 따라 다른

css를 부여 할 수 있게 된다.

(디폴트가 primary--text 인데, 디폴트 클래스로 css를 수정하면 모든 v-list-tile에 css가 동일하게 적용되어 난감한 상황이 발생 할 수 있다.)

props 주는 방법은 다행히도 그냥 클래스 목록을 쭈욱 쓰면 되는듯..


  <v-list-tile active-class="primary--text menu">


vuetify에서도 primary--text 클래스를 기본적으로 같이 추가하는것을 권고 하고 있어서, 그 뒤에 원하는 클래스를 추가하면 된다.

그리고 스타일 태그 내에서 해당 클래스로 css를 부여하면 된다.


.menu {
    border-right-color: #d5d8dc;
    border-right-style: solid;
    background-color: #f8f9f9;
    color: black !important;
  }


추가적으로, 선택된 리스트의 background 컬러를 모두 동일하게 바꾸고 싶으면 active 클래스 앞에 a 태그를 붙이도록 하자. (크롬으로 확인하니 a태그가 붙더라..)

  a.primary--text {
    background-color: #f8f9f9;
  }

[Vue] dialog , component 내의 v-tabs slider 안보이는 버그

문제 : Vue에서 v-tabs 를 dialog내 첫 로딩시 slider 가 보이지 않는 현상이 발생한다.

<정상 Slider >

<비정상 Slider>

사소하지만 신경 쓰이는 버그임이 분명하다..

깃허브에도 버그리포트와 해결 방법을 일부 설명해주고 있다.
https://github.com/vuetifyjs/vuetify/issues/1978

Dialog 해결 방법 : lazy prop을 추가하면 된다!!


추가 문제 : component화 시킨 자식 컴포넌트에 삽입하면 lazy prop이 먹히지 않는다.....

역겨운 구글링 결과 $refs.tabs.slide() (내부적으로도 해당 함수를 통해 slider를 보이게 한다는 것..) 실행 시키면 가능하다고 하지만.. 버전이 달라서 그런지 해당함수는 존재하지 않는다.....

그렇다면, $refs.tabs 를 한번 찍어보자... 다행히도 비슷해 보이는 callSlider 함수가 있다.

해당 함수를 호출하니 다행히도 버그가 해결 되었다.. 다시는 만나지 말자..

아래는 전체 소스 코드이다

<자식 컴포넌트 ref 부여>

<childComp ref="tab_right" ></childComp>

<v-tabs ref 부여>

<v-tabs v-model="active" ref="tabs">

<특정 메소드(버튼을 눌렀다던지) 내부에서 $refs를 통해 v-tabs의 callSlider 함수 호출 >

//부모 컴포넌트에서 다이렉트로 접근 할때

this.$refs.tab_right.$refs.tabs.callSlider() 

//부모 컴포넌트에서 자식 컴포넌트의 함수를 수행, 

this.$refs.tab_right.onSelect() 

//자식 컴포넌트에서는 위 처럼 callSlider 를 수행
//onSelect()
this.$refs.tabs.callSlider()

vue atom console 경고 창 무시 방법

vue console 경고 창 무시 방법

log 앞 뒤로 주석 추가.

Rule로 바꾸는 방법이 있다고 하지만 테스트가 잘 안되서 나중에 확인..

/* eslint-disable */
        console.log(error.response);
/* eslint-enable */

vue axios 내부 함수 호출

vue에서 REST 요청을 위해서 axios를 많이 활용 한다.

jQuery에서 $.get(), $.post 와 같이 vue에서는 axios.get()으로 쓴다.

틀은 다음과 같음

axios.get('url')
 .then(response => {
 //응답 처리

 })
 .catch(error => {
 //에러 처리

 });

!then 문에서 methods에 정의된 함수를 호출할 경우 Reference Error가 발생 할 수 있다.
=> 해결 방법은 axios 호출 전에 this를 임시 변수에 넣고 해당 변수를 활용하는 방법으로 해결 할 수 있다. (아래 코드 참조)

let self = this
    
axios.get('url')
   .then(response => {
      response.data.forEach(function(value){
        value.a = self.innerMethod(value.a) //  Reference Error 발생 부분, this대신 self로 대체
      });
      self.a = response.data // data 또한 self로 접근
   })
   .catch(error => {
        console.log(error.response);
   });

vue data table

https://vuetifyjs.com/en/components/data-tables#data-table 참고

• sort 주의 할 점 :

1.  내부적으로 sort에 ascending(오름차 순) / descending(내림차 순) / unsorted (미정렬) 상태가 존재 한다.
• 따라서, data table 컬럼에 sortable을 true로 한 컬럼은 세 가지 상태를 준수하게 된다.
• => 미정렬 상태로 인해 sort가 안되는 것 처럼 보이지만 제대로 작동하는 것
• => 이 부분이 거슬린다면 must-sort를 True로 변경하면 미정렬 상태는 없음


2. 사용자 정의 정렬 함수

• Date 데이터는 날짜의 차이에 따라 정렬이 되어야 한다. 따라서 custom-sort props에 사용자 정의 정렬 함수를 추가 해야 한다.

<v-data-table :custom-sort="customSort" :headers="headers"></v-data-table>

• custom-sort 함수는 (item 목록, index (column의 value 값), 정렬 방법) 세가지 인자 값을 가지고 정렬된 목록의 아이템을 반환하면 된다. (props의 custom-sort 참조)

• 대략적인 소스는다음과 같다.

  customSort(items, index, isDescending) {
    items.sort((a, b) => {      
      if (index === 'Column Name') {
        if (isDescending) {
          return new Date(b.timestamp) - new Date(a.timestamp);
        } else {
          return new Date(a.timestamp) - new Date(b.timestamp);
        }
      }

      //필요하다면 else-if문으로 column에 따라 다르게 적용가능
    });

   return items;
  }

• 첫 행 CSS 안 먹히는 버그
• 무심코 넘어갈려다가 보니 페이지의 첫 행들은 모두 CSS가 안먹는 버그가 발생 (page 첫 로드 시에만)
• 이때는 key props를 할당하면 다시 원하는 CSS가 먹힘(이상하게 콘솔로 찍으면 태그의 클래스가 혼자 다르게 먹음..)
• 예를 들어, v-for로 하였다면 key를 i로 한다던지, 특정 데이터를 반복하여 생성하였다면 해당 아이템의 id를 key로 할당 (:key="i")

vue create 명령어로 만든 프로젝트 IP, port 변경

vue create ""Project Name" 으로 생성시 (vue-cli 3.x 버전 이후..) npm run serve를 수행하면

Local (localhost:8080), Network(내부 ip 주소:8080)으로 실행이 됨

!!외부 ip 주소 혹은 포트를 변경하고 싶다면

project/package.json 내용 변경
 =>

{
 "name" : ..
 "version" : ..
 "private" :
 "scripts" :{
  "serve" : "vue-cli-service serve",
           ...
 }
}

==>

{
 "name" : ..
 "version" : ..
 "private" :
 "scripts" :{
  "serve" : "vue-cli-service serve --host 203.x.x.x --port 8081",
           ...
 }
}


즉, npm run serve 에서 serve는 스크립트를 수행 하는 명령어. 내부 적으로는 vue-cli-service를 실행

Vue draggable

Vue draggable  (https://github.com/SortableJS/Vue.Draggable)

move 이벤트를 통해 draggable의 함수 적용 시

=> move 이벤트는 소스 draggable 태그에 작성

=> 타겟 draggable에서는 새로운 아이템이 들어오더라도 move 함수 실행이 작동 x
 => 대신 change 이벤트에 added 이벤트로 접근 가능 (이미 added 된 상태이기 때문에 added 되기 전 이벤트를 감지하지는 못함.)



group의 name으로 드래그-앤-드롭이 가능한 리스트를 식별

pull : 'clone' => 아이템을 뺄 때 '복제'되어 이동 (원본 리스트에서는 삭제 x)
put : false    => 아이템이 드롭 불가능
:sort="false" => 내부 정렬 불가능 속성


move  => return 을 true로 하면 이동 허용, false는 이동 불가
(move 함수내에서 evt.relatedContext.list 내에 중복 element가 있는지 확인하여 중복 여부를 가지고 리스트 중복 제거 가능)

move 이벤트로 접근 가능한 속성은 다음과 같음

• evt.draggedContext : 드래그 한 element의 context 정보 
• evt.draggedContext.index : 드래그한 element의 인덱스 (draggable 태그의 :list(혹은 v-model)과 연결된 data에서의 인덱스
• evt.draggedContext.element : 드래그한 element
• evt.draggedContext.futureIndex : 드롭이 성공했을 때 들어갈 해당 draggable 태그의 :list(혹은 v-model)과 연결된 data에서의 인덱스 

• evt.relatedContext : 드롭 대상 element의 context 정보 
• evt.relatedContext.index : 드롭 대상의element의 인덱스 
• evt.relatedContext.element : 드롭 대상의 element
• evt.relatedContext.list : 드롭 대상의 list 정보 (해당 list 확인을 통해 중복 체크 확인 가능)
• evt.relatedContext.component : 드롭 대상의 VueComponent