stein.log

필자는 Vue에서 tiptap Editor를 사용하는데, 한가지 불편한 점이 있다. 바로 코드를 작성하다 무의식적으로 tab을 입력하는데, 그러면 focus가 이동해버리는 현상이다. IDE들 처럼 들여쓰기(indentation)이 된다면 얼마나 좋을까... 해결해봅시다. 1. focus 막고 tab을 띄워쓰기로 교체하기 먼저 html에서 어떻게 tab으로 focus 이동을 금지시키는지 찾아보았는데 두 가지 방법을 찾았다. 1. 이동하고 싶지 않은 곳에 tabindex=-1 속성 추가 2. keydown 이벤트를 찾아서 e.preventDefault() 걸기 첫 번째 방법은 우리가 원하는 것이 아니므로 패스(모든 elements에 걸수는 없으니). 꽤나 low한 방법이지만 2번으로 해결 가능해 보인다. h..

nuxt나 vue와 같은 곳에서 기본 세팅에 eslint를 넣어주는 경우가 많이 있는데, vscode와 동기화가 안되어서 저장만하면 에러가 날 때가 있다. 그런 상황에는 { "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.alwaysShowStatus": true, "editor.formatOnSave": true } 또는 formatOnSave를 지운 { "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.alwaysShowStatus": true, } 를 현재 작업중인 .vscode/settings.json 에 입력해주면 된다. 만약 파일을 못찾겠다면 ..

javascript에는 그래프를 위한 여러가지 라이브러리들이 존재한다. 오늘은 그 중 echarts를 소개한다. Examples - Apache ECharts echarts.apache.org 상당히 많은 양의 그래프가 존재하고, 디자인/애니메이션이 나름 트렌디하다고 생각한다. 물론 마음에 들지 않는 부분들도 있지만, 많은 요소들이 커스텀이 가능하기 때문에 사용성이 좋다. 위 예제들을 참고하자. vue-echart, nuxt-echart를 검색하면 다음과 같은 페이지를 찾을 수 있다. Vue-ECharts Apache ECharts component for Vue.js. ecomfe.github.io 아래로 스크롤을 내리다보면 nuxt.js의 setup이 나와있다. ... 자주 그러하듯, 작동하지 않는다..

nuxt.config.js에 다음 코드들을 저장한다. buildModules:{ '@nuxtjs/axios', '@nuxtjs/auth-next' } auth: { strategies: { google: { clientId: configFile.client_id, // client_id는 노출되지 않게 따로 관리하기 위해 configFile에서 가져옴 codeChallengeMethod: '', responseType: ['token', 'id_token'], }, }, redirect: { login: '/login', logout: '/', callback: '/login', home: '/', }, }, 그리고 pages에 login.vue를 추가하여야 한다. (그렇지 않으면 로그인 후 /login..

https://vuetifyjs.com/en/components/ratings/ Rating component The star rating component is a specialized widget for collecting user feedback via ratings. vuetifyjs.com vuetify의 v-rating 컴포넌트는 mdi-icon을 사용하면 아주 편리하지만, custom icon을 사용하기에는 까다롭다. 본 포스팅에서는 v-rating에서 custom-icon을 사용법과 size 조절까지 알아본다. 1. custom icon 적용 위 코드 처럼 평범하게 작성하면 v-rating이 위와 같이같이 나온다(색상은 무시해달라). mdi-heart-outline(mdi-icon)으로 지..