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

hive 빡..

hive 2.3.3

1. hive-env.sh에 HADOOP_HOME 설정
2. hive 쉘 실행 => show tables;
=>
 FAILED: SemanticException org.apache.hadoop.hive.ql.metadata.HiveException: java.lang.RuntimeException: Unable to instantiate org.apache.hadoop.hive.ql.metadata.SessionHiveMetaStoreClient

해결책 : 

 1.hive 쉘 실행 위치에 metastor_db 폴더가 생김 -> rm으로 삭제

 2. schematool -initSchema -dbType derby 실행

 3. hive 쉘 실행 => show tables; => 정상 작동

공식 문서에는 아래 명렁어를 실행하라고 되어있음. 

(참고 : https://cwiki.apache.org/confluence/display/Hive/GettingStarted#GettingStarted-InstallationandConfiguration)

  $ $HADOOP_HOME/bin/hadoop fs -mkdir       /tmp
  $ $HADOOP_HOME/bin/hadoop fs -mkdir       /user/hive/warehouse
  $ $HADOOP_HOME/bin/hadoop fs -chmod g+w   /tmp
  $ $HADOOP_HOME/bin/hadoop fs -chmod g+w   /user/hive/warehouse

postgreSQL 설치

#postgres 설치 참조 : https://wiki.postgresql.org/wiki/Apt

sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt/ $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'
sudo apt-get install wget ca-certificates
wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install postgresql-9.5 pgadmin3



#유저 생성
sudo -u postgres createuser -W dojin

#유저 db 생성
sudo -u postgres createdb testdb -O dojin

#쉘 접속
psql testdb


#*.conf 파일 위치

sql ->  show config_file;

/etc/postgresql/9.5/main/*.conf

#*.conf 설정법

postgresql.conf
 =>  address = "*"
pg_hba.conf
 =>  host all all 0.0.0.0/0 md5


#기타

sudo service postgres [stop/start]


#설치 2 - yum 설치
#https://wiki.postgresql.org/wiki/YUM_Installation

exclude=postgresql*
yum localinstall http://yum.postgresql.org/9.4/redhat/rhel-6-x86_64/pgdg-centos94-9.4-1.noarch.rpm
yum install postgresql94-server

#data directory
ls /var/lib/pgsql/9.4/data/


#한번만 하면댐.
service postgresql-9.4 initdb
#만약 안된다면
/usr/pgsql-9.4/bin/postgresql94-setup initdb


#auto start .
chkconfig postgresql-9.4 on


#서비스 시작
service postgresql-9.4 start

#삭제
yum erase postgresql94*