v-list-item-group 주의점

 v-list-item-group 사용시 v-model을 활용하여 선택된 데이터를 관리한다.

이 때, 관리되는 데이터는 Array 여야만 하고,  선택 된 리스트의 순서(인덱스)가 저장 됨.

v-list-item의 항목을 동적으로 변화시키는 과정에서 v-model의 값이 의도하지 않는 값으로 세팅되는 현상 발생..

해결법 :  v-list-item의 key 값을 index 값으로 할당하여야 정상 작동.. 

아무 생각 없이 list 값들 (항목들)이 고유해서 해당 값을 그대로 key 값으로 사용했었는데.. 

idx로 key를 변경하니 정상작동.. 개빡..

<기존 코드>

     <v-list-item-group

      v-model="fil.selected"

       multiple

     >

     <v-list-item  v-for="(v, k) in fil.list" :key="k" active-class="text--accent-4"  >

<변경 코드>

    <v-list-item-group

      v-model="fil.selected"

       multiple

     >

     <v-list-item  v-for="(v, k, idx) in fil.list" :key="idx" active-class="text--accent-4"  >

사소하지만 오랜 시간 걸린 버그다 --.. v-model에 들어가는 값 수정만 몇번을 했는지.. 에휴-오늘의 삽질 끝

쿠버네티스 클러스터 - (Google Cloud Platform)

 2022/01/11 현재 일자 기준 구글 클라우드 플랫폼기반으로 간단한 쿠버네티스 클러스터 구성과 쿠버네티스 웹 UI 연결까지를 정리한다.

GCP는 첫 가입시 일정기간 무료로 사용 가능.

간단하게 프로젝트를 하나 생성 (이름은 아무거나..)

왼쪽 상단 메뉴바를 클릭하면 아래쪽에 Kubernetes Engine 항목 선택

Kubernetes 클러스터 만들기 선택 (UI상으로 쉽게 만들 수 있음)

GKE standard 선택 

클러스터  위치, 이름 설정 (위치(리전)만 바꾸어서 실행 했다..)

조금만 기다리면 클러스터 상태가 초록색으로 변함

클러스터를 눌러보면 클러스터의 세부 정보가 나오고,  웹 UI 연결을 위해서는 클러스터에서 설정을 해야되기 때문에 쉘 연결을 해야한다. 이때 구글은 Cloud Shell이라는 기능을 제공하는데 이를 통해 클러스터에 연결 가능하다.

Cloud Shell에서 실행을 선택

웹 아래 쪽에서 Shell 창이 생기고 승인 버튼이 생긴다.

(승인 누르면 된다. - 가끔 구글 로그인 요청이 다시 생길 수 있다)

쿠버네티스 웹 UI(대쉬보드) 실행시키기 위해서는 다음과 같은 명령어를 수행

(참고 : https://github.com/kubernetes/dashboard)

대쉬보드 서비스 생성 (8001포트로 자동 생성 된다)

Localhost로 연결을 할 수는 없기 때문에 Cloud Shell 제공 기능을 활용해야한다.

Shell의 우측 상단에 세 번째 버튼을 누르면 xxxx포트에서 미리보기를 통해 웹 UI에 연결 가능한다. 포트를 8001 포트로 접속해야 되기 때문에 포트 변경을 선택한다.

                        포트를 8001 포트로 변경 후 변경 및 미리보기를 선택한다.

접속을 하게 되면  JSON이 리턴 되는 화면이 생성되고, URL을 변경해야한다.

/?authuser=0 부분을 아래와 같이 변경한다.

(api/v1/namespaces/kubernetes-dashboard/services/https:kubernetes-dashboard:/proxy/#/login)

(참고 : https://github.com/kubernetes/dashboard)

URL을 변경하고 접속하면 쿠버네티스 대쉬보드가 연결 되고, 연결을 위한 Token을 입력하라는 창이 생성된다. Token은 Cloud Shell에서 다시 확인 가능하다.

기존 창은 대쉬보드 웹 서비스가 실행된 상태이기 때문에, +버튼을 눌러 새로운 Shell 창을 연다.

                            kubectl config view를 통해 Token 확인 가능하다    

    아래쪽에  access-token 뒷 부분을 복사하고, 웹 Token 입력 창에 입력하여 연결한다.

정상적으로 웹 UI에 접속이 된다. 관리 중 컨테이너가 없어 별다른 내용은 안나온다.

쿠버네티스 클러스터로 생성되었기 때문에 클러스터 내의 노드 정보(성능 메트릭)는 확인 할 수 있다.

이상, 구글 클라우드 플랫폼을 활용한 쿠버네티스 클러스터 구성 및 대쉬보드 확인 방법을 정리하였다.

쿠버네티스 책을 보면서 설정을 하려다보니 잘 실행되지 않아 별도로 수행한 결과를 기록해본다.. 

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 */