본문 바로가기
반응형

Development271

Vue.js - 슬롯(Slot) 존재여부 Vue.js 에서 컴포넌트를 다루는 작업에서 슬롯에 대한 존재여부 확인이 필요한 경우가 있다. 이에 Computed 로 슬롯존재여부를 다음과 같이 추적하면 된다. export default { name : 'example-component', computed : { hasDefaultSlot(){ // return this.$slots.default ? true : false; // !!this.$slots['default]; return !!this.$slots.default; } } } 2022. 3. 9.
Vue 3 / Vuetify.js / Electron.js 로 프로젝트를 하고자 한다면 이전 포스팅 https://www.jkun.net/659 을 통해서 개발환경을 구성해서 미니멀 프로젝트를 진행해보았다. 흠.. 짧은 경험이라면 짧지만.. 아직까진 Vue3/Electron + Vuetify.js (Alpha 3.0.0) 기준으로 프로젝트를 진행하기에는 무리가 있겠다는 생각이 든다. 사이드 이펙트에 대해서 대응하기엔 리소스가 부족하고 무엇보다 Vuetify.js 이전 버전에 비해서 상당히 부실함이 있다. 그리고 수동적으로 대응해 주어야 하는 상황이 상당히 빈번하게 발생한다. 차라리 UI Framework 는 다른 것을 택해서 하는 것이 안정적이란 생각이다. Element Plus 등 Vue3 에 대응해서 정상적으로 릴리즈가 된 프레임워크를 선택해서 간단한 프로토타입이라도 구성해보고 채택하는.. 2022. 3. 7.
Vue.js/Electron.js (Electron-Vue) 를 통한 개발환경 구성 Vue.js 와 Electron.js 데스크톱 어플리케이션을 개발하기 위한 환경을 구성해보려한다. UI Framework 는 Vuetify.js 로 하기로 한다... 익숙해짐인건가.. 가장깔끔;; 일단 진행해보자. * 그리고 사전에 기본적으로 필수사항을 확인한다. (Requirement : npm or yarn) 1. Vue CLI (제일먼저 Vue CLI 를 설치하고 버전을 확인해보자) "-g" 옵션이니 sudo (관리자 계정) 으로 설치하자. npm install -g @vue/cli vue --version 2. Create Electron App (Vue CLI 를 이용하여 프로젝트 생성) vue create MyProjectName 그럼 다음처럼 Vue.js 버전을 선택하라고 나오는데.. 이번 .. 2022. 3. 5.
[lodash / debounce / watch / delay] 디바운싱 예제 아이디 중복검사 같은 경우 키 입력이나 유효성 검사 플러그인에 포함시키는 경우가 다양하다. 하지만 입력시마다 통신하는 것은 결코 유쾌하지 않은 기분이다. 이럴때 lodash 의 debounce 를 사용하면 적절하다. import debounce from 'lodash/debounce'; export default { watch : { memberId:debounce((inputValue) => { const Vue = this; let emailRegExp = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0.. 2021. 11. 20.
반응형