나만의 기록들

vueJS에서 제공해주는 v-cloak 디렉티브에 대해 알아보자.

vueJS를 사용하자마자 눈에 거슬리는게 있는데, 이게 바로 머스태쉬 태그{{}} 이다.

script 코드가 아직 실행되기 전이여서 값이 바인딩 되기 전에 깜빡이며 잠깐 보이는건데 이게 매우 거슬린다.

이럴때 사용하는게 v-cloak 디렉티브이다.

v-cloak 디렉티브를 사용하여 렌더링되어 바인딩 되기 전에 {{}}태그를 숨길 수 있다.

예제 코드를 통해 사용방법에 대해 알아보고 vueJS를 사용하면서 거슬렸던 깜빡임을 제거해보자.

▷ 예제1) v-cloak 디렉티브 기본 사용법

<div id="example">
  <p>메시지: "{{ message }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '안녕하세요'
  },
})

이렇게 간단하게 설정된 코드가 존재한다고 하면,

당연히 화면에서는 message값이 바인딩 되어 "안녕하세요"가 나오는게 정상이다.

허나, 그 바인딩 되는 과정에서 화면에는 흉측한 {{ message }} 코드가 보이게 된다.

▷ 결과 1 ) - 바인딩 되기 전

▷ 결과 2 ) - 바인딩 된 후 화면에 출력

여기서 이제 우리는 v-cloak 디렉티브를 사용할 것이다.

추가적으로 몇가지 작업을 해주자.

[v-cloak] { display: none; }

<div id="example" v-cloak>
  <p>메시지: "{{ message }}"</p>
</div>

▷ 결과 3 ) - 바인딩 된 다음에만 화면에 출력

css 에 v-cloak에 대한 display: none; 을 설정해주고, dom 태그 속성에 v-cloak을 걸어주면된다.

v-cloak 디렉티브에 대해 display: none;을 해줬는데 어째서 결과가 출력되냐면,

v-cloak 디렉티브는 vueJS의 처리가 완료되기 전까지는 존재하고 완료된 후에는 스스로 제거하기 때문이다.

즉, 바인딩 되기 이전 {{}}태그가 존재할때는 display:none의 효과를 받으면서 바인딩이 완료되면 스스로 사라지기 때문에 css 적용없이 그대로 보여지게 되는것이다.

vueJS 코드가 복잡하거나 시스템이 느린경우 v-cloak 디렉티브는 꼭 필수적으로 사용해주는 것이 좋아보인다.

vueJS의 기본 디렉티브 중 하나인 v-once에 대해 알아보자. 

제목처럼 v-once가 정적 디렉티브라 불리는 이유는 처음 한번만 렌더링을 수행하며, 그 이후 데이터가 변경되어도 그대로 유지되기 때문이다.

즉, 처음 렌더링 된 후 캐싱되도록 지정한다고 생각하면된다.

이러한 특성을 사용하여 정적 콘텐츠를 지정할 수 있다.

예제를 통해 실제 어떻게 적용되는지 알아보도록 하자.

▷ 예제1) v-once 기본 사용법

<div id="example">
  <p v-once>유지 메시지: "{{ message }}"</p>
  <p>변경 메시지: "{{ message }}"</p>
  <button @click="change()">내 블로그는 mine-it-record야</button>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '안녕하세요'
  },
  methods : {
    change : function(){
      this.message = '내 블로그는 mine-it-record야'
    }
  }
})

▷ 결과 1) 초기 출력

위 결과 1) 과 같이 출력된다고 할때 버튼을 클릭하면 message가 변경되도록 구성해 놓았다.

html 영역을 보면 유지 메시지에 v-once를 걸어두었는데, 이 때 버튼을 클릭하면 어떻게 될까?

다음 결과를 확인해보자.

▷ 결과 2) 버튼 클릭 후 출력

결과 2와 같이 v-once를 선언해둔 곳은 이후 값이 변경된다 하여도 처음 렌더링할때의 값을 유지한다.

상황에 따라 사용하면 매우 좋을것 같으나, 이러한 패턴을 남용하지 않는것을 권장한다.

아래 안내문구를 한번 읽어보고 마치도록하자.

다시 한번 강조하지만, 이러한 패턴을 남용하지 마세요. 이는 렌더링할 정적 컨텐츠가 굉장히 많은 경우에 편리하게 사용할 수는 있지만, 느리게 렌더링 되는 것을 인지하지 못할 정도라면 필수적이지 않습니다. -- 더해서, 이런 방식은 추후에 많은 혼란을 야기할 수 있습니다. 예를 들어, v-once에 친숙하지 않은 개발자이거나 실수로 놓치는 경우에 그들은 템플릿이 정상적으로 업데이트 되지 않는 문제에 대해서 많은 시간을 소비하게 될 수 있습니다.

참고 : https://kr.vuejs.org/v2/guide/components-edge-cases.html#v-once%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%A0%95%EC%A0%81-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

script에서 사용하는 배열의 중복을 제거하는 방법에 대해 알아보자.

구글에 검색해봐도 대부분 비슷한 방법만이 존재해서 나 역시 그냥 기록해두고자 한다.

▷ 예제1) 배열 함수인 forEach() 와 includes() 활용 (ft. indexOf() 사용)

var arr = [1, 2, 3, 4, 2, 4, 5, 1];

//중복 제거 [1, 2, 3, 4, 5] - includes()
var removeOverLapArr1 = [];
arr.forEach(function(item, index){
	if(!removeOverLapArr1.includes(item)){
		removeOverLapArr1.push(item);
	}
});

//중복 제거 [1, 2, 3, 4, 5] - indexOf()
var removeOverLapArr2 = [];
arr.forEach(function(item, index){
	if(!(removeOverLapArr2.indexOf(item) >= 0)){
		removeOverLapArr2.push(item);
	}
});

사실 두번째 예제는 쉽게 사용할 수 있는 공통적인거라 생각하면 된다.

단순하게 반복문을 돌리고 포함여부만 체크해주면 되니 includes()를 사용하거나 indexOf()를 사용하거나 별 의미없고,

그냥 체크만 해줄수 있다면 뭐든 사용해도 상관없다.

▷ 예제2) 배열 함수인 filter() 와 indexOf() 활용

var arr = [1, 2, 3, 4, 2, 4, 5, 1];

//중복 제거 [1, 2, 3, 4, 5]
var removeOverLapArr = arr.filter(function(item, index){
	return arr.indexOf(item) === index;
});

//중복된 값만 불러오기 [2, 4, 1]
var overlapArr = arr.filter(function(item, index){
	return arr.indexOf(item) !== index;
});

배열 함수인 filter() 와 indexOf()를 활용한 것인데, indexOf() 함수 특징이 일치하는 데이터의 첫번째 index를 반환하는것이기때문에 이 특징을 이용하여 필터링 해주어 중복을 제거해 준것이다.

이를 반대로 활용하면 중복된 값만 불러올 수 있다.

▷ 예제3) Set 객체를 사용한 중복제거

var arr = [1, 2, 3, 4, 2, 4, 5, 1];

//중복 제거 [1, 2, 3, 4, 5]
var removeOverLapArr = Array.from(new Set(arr));

Set 객체는 ES6에서 등장한 새로운 data object 이며 중복 없는 데이터의 표현이 가능하다.

이러한 특징을 이용하여 배열의 중복을 제거한 것이다.

예제를 1번부터 3번까지 봤는데 사실 1번과 2번에는 별 차이가없다.

그리고 성능상으로 볼때 3번예제가 가장 좋다고 하기에 저 방법을 추천한다.

참고 : https://redcow77.tistory.com/556

- 다중 선택 기능 적용하고 기능 on/off 시키기 -

jqGrid를 옵션을 통해 multiselect(다중 선택) 기능을 적용시켜 보자.

https://mine-it-record.tistory.com/290

위 게시글을 들어가보면 알겠지만 기본적으로 제공해주는 옵션이 존재하는데 그게 multiselect이다.

하나하나 알아가 보도록 하자.

▷ 1. multiselect 옵션 설정

$('#data-grid').jqGrid({
  ...,
  multiselect : true, // 그리드 왼쪽부분에 체크 박스가 생겨 다중선택이 가능해진다.
  multiboxonly : false, // 다중선택을 단일 선택으로 제한
  ...
});

우선 jqgrid option을 설정해 줄때 multiselect 옵션을 true로 설정해준다.

여기서 보면 multiboxonly 를 설정해 주었는데, 이는 굳이 설정해주지않아도 기본적으로 false로 잡혀있으니 상관안해도 되나 이 옵션은 multiselect 기능을 on/off 시켜줄때 아주 큰 역할을 한다.

▷ 옵션 적용 결과

결과를 보면 알겠지만 그리드 좌측에 체크박스가 생성된다.

다중 선택한 row 데이터를 가져오는 방법은 아래 게시글을 참고하자.

https://mine-it-record.tistory.com/285

▷ 2. multiselect 기능 on/off 시키기

사실상 multiselect 옵션을 끄는건 불가능하다.

그렇지만 이는 여러가지 옵션을 통해 없는 기능처럼 만들어 버릴수가 있다.

우선 첫번째로 multiboxonly 옵션을 실행시켜줄것인데 이는 jqGrid 메서드를 통해 제어가 가능하다.

$('#data-grid').jqGrid('setGridParam',{multiboxonly : true});

multiboxonly 옵션은 저 1번 설명글의 결과 이미지처럼 좌측에 나오는 체크박스를 하나밖에 선택할 수 없게 만들어주는 옵션이다. 다중 선택 기능때문에 체크박스가 생겼지만 이 옵션이 true라면 하나씩만 선택이 가능하다.

이제 두번째로는 체크박스 컬럼을 눈에서 지워주는 것이다. multiselect 기능으로 인해 생겨났으니 일단 눈에서 지워주자.

$('#data-grid').jqGrid('hideCol', 'cb');

자세한건 아래 게시글을 참조하자.

https://mine-it-record.tistory.com/451

첫번째와 두번째 방법을 같이 실행하면 이는 multiselect 기능이 없는것과 동일하게 사용이 가능하다.

(기능을 on/off 시키고싶었지만 multiselect자체를 setGridParam으로 true/false시킬수가 없어서 찾다찾다 발견할 수가 없어서 위 방법들을 사용해서 on/off 처럼 구현해놨다.)

- 특정 컬럼 숨기고 보이기 -

jqGrid 표준 메서드를 사용하여 특정 컬럼을 보여주고 숨겨주는 방법에 대해 알아보자.

▷ 예제를 위한 그리드 테이블

▷ 특정 컬럼 숨기기 (hideCol)

$('#data-grid').jqGrid('hideCol', 'x'); //단일
$('#data-grid').jqGrid('hideCol', ['x','y']); //복수

▷ 결과

▷ 특정 컬럼 보여주기 (showCol)

$('#data-grid').jqGrid('showCol', 'x'); //단일
$('#data-grid').jqGrid('showCol', ['x','y']); //복수

▷ 결과

- setCell을 사용한 특정 컬럼의 값, 클래스, 스타일 등 속성 변경하기 -

jqGrid에는 특정한 컬럼의 셀을 수정하는데에 사용되는 다용도의 메서드가 존재한다.

setCell이라는 jqGrid 내장 메서드에 대해 알아보도록 하자.

이 setCell 메서드는 신기하게도 특정 컬럼 셀의 값을 변경하거나 스타일을 변경 등이 가능하여 자주 사용된다.

하나하나 사용법에 대해 알아보자.

▷ 특정 컬럼의 값 변경하기 (ft. 빈값으로 만들기)

// 기본 사용법
$('#mainGrid').jqGrid('setCell', rowid, cellname, data);

// jqg14의 id를 가진 row의 mine 컬럼/셀의 값을 record로 변경한다.
$('#mainGrid').jqGrid('setCell', 'jqg14', 'mine', 'record');

// jqg14의 id를 가진 row의 mine 컬럼/셀의 값을 비운다.
$('#mainGrid').jqGrid('setCell', 'jqg14', 'mine');

여기서 좀 당황스러운게 특정 컬럼의 값을 비우기 위해 data 매개변수 부분을 빈 쿼터('') 로 넣어주면 에러는 않나지만 아무 일도 일어나지 않아서 당황스럽다.

위 예제처럼 비우기 위해서는 그냥 비워두면 된다.

▷ 특정 컬럼의 스타일 추가/변경하기 (ft. 배경색 주기)

// 기본 사용법 (스타일을 줄때는 data 부분을 빈 쿼터로 넘겨준다.)
$('#mainGrid').jqGrid('setCell', rowid, cellname, data, properties);

// mine 컬럼의 배경 색상을 변경한다.
$('#mainGrid').jqGrid('setCell', 'jqg14', 'mine', '', {'background':'#fcfdfd'});

// mine 컬럼의 배경 색상과 글자 색을 변경한다.
$('#mainGrid').jqGrid('setCell', 'jqg14', 'mine', '', {'background':'#fcfdfd', 'color':'red'});

▷ 특정 컬럼의 클래스 추가하기

// 기본 사용법 (클래스를 줄때는 data 부분을 빈 쿼터로 넘겨준다.)
$('#mainGrid').jqGrid('setCell', rowid, cellname, data, class);

// mine 컬럼에 it 클래스를 추가한다.
$('#mainGrid').jqGrid('setCell', 'jqg14', 'mine', '', 'it');

// mine 컬럼에 record 클래스를 추가한다.
$('#mainGrid').jqGrid('setCell', 'jqg14', 'mine', '', 'record');

클래스 예제를 보면 의아한게 하나 있을텐데 스타일을 추가해줄때 사용한 위치에 그대로 클래스명을 주어 사용한다는 것이다. 아마 받는 매개변수 타입이 달라서 가능한 것인지도 모른다.

그리고 클래스를 추가했으면 삭제를 해줘야하는데 이는 표준 메서드에는 존재하지 않고 직접적으로 접근해서 지워줘야하는 번거로움이 존재한다.

참고 : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods