stein.log

ref로 width를 가져오는 걸 단순하게 생각하면 다음과 같이 생각할 수 있다. hihi 하지만 이렇게 하면 width가 출력되지 않을 것이다. 그래서 elem.value.style만을 출력해보면.. 이렇게 비어있다는 것을 알 수 있다. style로 설정해준 width는 없기 때문이다. 따라서 clientHeight, clientWidth 를 사용해야한다. {{elem.clientWidth}}

vuetify의 디자인들이 대부분 훌륭하지만 마음에 들지 않는 것들이 있다. 예를들면 table에서 너무 과하게 들어가있는 box-shadow와 같은 요소들. 이런 점을 vuetify도 잘 알고 있는지, vuetify의 api 문서 하단에 보면 다음과 같은 것들이 적혀져있다. 미리 변수들을 선언했으니 default 값에서 바꿔서 사용해라는 것 같으니, 한 번 시도해보면..? 사라지지 않는다. 그러면 document를 한 번 찾아보자. https://vuetifyjs.com/en/features/sass-variables/ SASS variables Customize Vuetify's internal styles by modifying SASS variables. vuetifyjs.com treeShake..

https://github.com/surmon-china/vue-quill-editor/issues/171#issuecomment-370253411

필자는 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 에 입력해주면 된다. 만약 파일을 못찾겠다면 ..

Canvas? 필자는 유튜브에서 Interactive Developer로 활동하시는 김종민님의 작품을 보면서 프론트의 canvas 기능의 존재를 처음 알게되었다. 그리고 프론트의 매력을 느껴 지금까지 프론트개발을 쭉 해오고있는데, 아이러니하게도 정작 canvas는 자주 다룰 일이 없었다. 프론트를 시작한지 1년이 다 되어가는 최근에야 다시 vanilla js를 사용하면서 canvas를 만져보는 중이다. 하지만 언제까지 vanilla에서만 놀것인가. 현재 진행중인 [개인 블로그 제작] 프로젝트를 하는 김에 canvas를 vue에서 편하게 사용하는 틀을 만들기로 했다. 자, 이제 내가 구현한 코드들을 살펴보자. Nuxt.js / Vue2 Composition-api를 사용했다. (🚶‍♀️ 아직 canvas에..

vue 관련 라이브러리들을 사용하다보면 변수.sync 로 작성된 코드들을 자주 만난다. 그냥 라이브러리 문법인가 보다 했는데 vue2->vue3 Migration Guide를 확인하는데 첫 번째 breaking change가 다음과 같다. v-model usage on components has been reworked, replacing v-bind.sync v-bind.sync를 v-model이 대신한다고 한다. 내용을 읽어보아도 잘 이해가 되지 않아서 다음 stackoverflow를 참고하였다. What is the difference between v-model and .sync when used on a custom component I don't understand the difference ..

, 사용법 select는 drop down menu가 나오면서 해당 항목을 선택할 수 있는 html tag이다. 이 때, 선택지들은 select tag 내부에 option tag로 작성한다. Volvo Saab Opel Audi 출처(테스트가능) vue를 사용한다면 다음과 같이 작성할 수 있다. ... {{car}} ... ... option에서 선택한 항목이 car라는 변수와 v-model로 동기화되어 변경된다. 그래서 style은 어떻게 변경? 위의 사진에서 볼 수 있듯이, select의 기본 디자인은 완전히 '기본'이다. 시스템에 따라 변경되지만 우리가 원하는건 현재 디자인에 자연스럽게 녹아드는 select이기 때문에 style 변경이 필요하다. ※ 참고 본격적으로 글에 들어가기 전에 vue를 사용..

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이 나와있다. ... 자주 그러하듯, 작동하지 않는다..

{{ item }}% // 이렇게 하면 헤더1,2,3 전부 object형식으로 나온다 {{ value }}% // 이렇게 하면 헤더2의 값만 나온다 headers: 컬럼명과, 그에 대응되는 object member name을 넣어준다 items: headers와 맞춰서 각 row에 들어갈 데이터를 object로, 그리고 각 obejct를 list로 묶어준다 그리고 템플릿을 작성할 때 주의 해야하는 것은 vuetify document에는 다음과 같이 적혀져있다 v-slot:item.헤더1="{ item }" // v-slot:item.calories="{ item } 하지만 위와 같이 작성하면 다음의 eslint에서 다음과 같은 에러를 보인다. error 'v-slot' directive doesn't s..