Vuetify.js 1.5 버전 data table에 관한 몇 가지

  일단 공식 문서. https://v15.vuetifyjs.com/en/components/data-tables/ 1. slot을 쓰지 않으면 안보인다. 그런 주제에 공식 문서에 있는대로 쓰면 안보인다. 아래처럼 써야 한다. 자동으로 header의 value값을 키로 사용하지 않을 거면 header는 왜 쓰라고 하는건가... < v - data - table : headers = "headers" : items = "items" > < template slot = "items" slot - scope = "props" > < td > { { props . item . title } } < / td > < td > { { props . item . description } } < / td > < / template > < / v - data - table > 2. pagination을 안 하는 방법 버전 2에 있는 disable-pagination 옵션이 없다. 한 페이지에 몇 개씩 보여줄 것인지 설정하는 목록에 -1(전체)만 주면 된다. < v - data - table : headers = "headers" : items = "items" : rows - per - page - items = "[-1]" > ... < / v - data - table > #vue #vuejs #vuetifyjs #버전차이 #javascript #라이브러리 #migration #datatable #테이블 #html #개발 #코딩 #1일1개발 

Nuxt.js/Vue.js 에서 전역 함수를 사용할 때

 좋은 방법인지는 모르겠지만 나는 이렇게 사용중 1. js 파일 작성   예를 들면 아래 같이 assets/js/common.js 파일 하나를 작성 export function sum (a, b) {   return a + b; } 2. 플러그인 파일 작성   plugins 디렉토리에 아래처럼 플러그인 파일 작성. 이름은 예를 들면 global.js i mport Vue from 'vue' import * as Common from '../assets/js/common' Vue.prototype.$common = Common 3. 플러그인 등록   nuxt.config.js에 아래처럼 플러그인 등록. ssr 설정은 옵션 plugins: [   {src: '~/plugins/global.js', ssr: false}, ] 4. 컴포넌트에서 사용   html에서는 $common.sum(1, 2) 처럼 script에서는 this.$common.sum(1, 2) 처럼 사용하면 된다

Python3 base64 decode Incorrect padding 오류

1. Incorrect padding 오류   구글 로그인 시 받아온 id_token 값을 base64decode하려니까 incorrect padding오류 발생 -> decode하려는 문자열의 길이를 4의 배수 단위로 해야 한다는 말이 있어서 수정 text = text + '=' * (4 - (len(text) % 4)) 2. 그래도 안되면   decode하려고 base64.b64decode를 사용했는데 이걸 base64.urlsafe_b64decode로 바꾸니까 해결.

vue에서 v-html에 포함된 class의 css가 적용되지 않는 경우

<div class="container">       <div v-html="내용"></div>, </div> ... 내용 = <p class="line"></p> ... <style scoped>     .line {          color: red;      } </style> 이런식으로 v-html을 사용하면 .line의 css가 적용이 안되는 경우가 있는데, scoped 때문이다. <style>     .container .line {          color: red;      } </style> scoped를 제외하고 style 태그를 한 번 더 써서 정의해주면 된다. 단, 다른 컴포넌트에 같은 이름의 class가 있으면 영향받지 않게 정확하게 정의해줘야 한다.

Vuetify 정리

 [v1.5] 1. 왼쪽에 고정되고 상단바랑 content를 가리지 않는 navigation drawer  <v-app>   <v-navigation-drawer permanent app clipped fixed> ... </v-navigation-drawer   </v-app> 2. 고정된 상단바 <v-app>   <v-toolbar fixed app style="padding-left: 0;"> ... </v-toolbar>   <v-content> ... </v-content> </v-app> 자동으로 padding-left가 들어가는 것 같은데 없애주면 된다. [v2.4]

Ubuntu 18.04 + Nuxt 2 + Nginx + PM2 설정

0. 환경 - Ubuntu 18.04(AWS EC2의 기본 AMI) - Nuxt 2.13 - Nginx 1.10 - PM2  코드는 git으로 관리한다. 1. 패키지 설치   git clone 후 npm install로 패키지를 설치하려고 하면 nuxt가 설치되지 않는다. 기본으로 설치되어 있는 npm 버전(3.5.2)이 낮기 때문이라고 한다. https://askubuntu.com/questions/562417/how-do-you-update-npm-to-the-latest-version 를 참조해서 버전을 업그레이드 해준다. sudo npm install -g npm npm -v 로 확인해보면 여전히 3.5.2인데 bash cache가 남아있어서 그렇다고 한다. https://askubuntu.com/questions/1036278/npm-is-incorrect-version-on-latest-ubuntu-18-04-installation 를 참조해서 캐시를 지운다. sudo hash -d npm 이후 다시 패키지를 설치하면 정상적으로 설치된다. sudo npm install 2. nuxt 실행   뭐하나 넘어가는 법이 없다. nuxt가 실행되지 않으면 node 버전을 업그레이드한다. 8.xx 이상이면 된다고 했던것 같은데 왜 업그레이드해야하는지는 모르겠다. 이전에도 참고했던  https://github.com/nodesource/distributions/blob/master/README.md 를 보고 10.xx로 업그레이드한다. curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - sudo apt-get install -y nodejs 추가로 npm run dev는 되는데 빌드 후 npm start가 안된다면 nuxt.config.js의 target이 server인지 확인해보자.( https://nuxtjs.org/api/configuration-target ...

Git commit 전 git hooks를 사용하지 않도록 하는 방법

이미지
가끔 commit 전에 자동으로 git hooks를 실행하도록 설정한 repository가 있다. 실행하고 싶지 않으면 체크를 풀면 되지만 잊어버릴 때도 있고 귀찮으니 정말로 필요없다면 끄자. .git/hooks 폴더에 아래 파일을 지우면 된다.