stein.log

현재 프론트 엔드 시장의 리더는? 프론트엔드 프레임워크(라이브러리) 시장은 react.js와 vue.js가 양분하는 형태로 변화하고 있다. 사장되고있는 angular는 정말로 더 이상 사용되지 않는 모습을 볼 수 있다. npm에서 살펴본 주간 다운로드수. react가 압도적으로 높고, 그 다음 vue가 따른다. angular와 svelte는 생각보다 더 다운로드 수가 적다. 확실히 react의 점유율이 압도적인 모습을 볼 수 있다. 요즘 떠오르는 svelte도 아직은 점유율이 매우 낮다. vue와 react는 분명히 다르지만, vue가 react의 개념을 많이 차용한 것이 사실이고, 이는 vue3의 composition api의 도입으로 react에게 한 발짝 더 가까워졌다. 이런 vue와 react가 ..

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

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

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

늘 AWS만 쓰다가 이번 기회에 처음으로 Azure를 쓰게 되었다. 현재 우리 사이트 구조가 Vue.js(FE) - Django(BE) - Azure(Storage) 로 넘어가는 구조다. 현재는 대용량 파일을 업로드 할 때 Django를 거치고, Azure로 업로드 하는 방식이어서 트래픽적으로도 손해였고, Django를 굴리는 서버 자체도 스케일 업을 해야할 수도 있는 상황이었다. 따라서 Vue.js에서 Azure Blob Storage로 바로 업로드 하는 방법을 찾게되었다. https://www.npmjs.com/package/vue-azure-blob-upload vue-azure-blob-upload VueJS service for multi-part uploading to MS Azure blob..

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)으로 지..