본문 바로가기
반응형

Development/Javascript | Vue.js17

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.
[Library] AG-Grid 본문링크 : https://eblo.tistory.com/32 1. AG-GRID GRID OPTIONS 정의 Attribute value description columnDefs 칼럼정보 정의된 칼럼 정보를 넣어줘야 합니다. rowData [{key:value}] 그리드 데이터, json data를 넣어 줘야 합니다. defaultColDef 기본정의 공통 기본 정의 * rowSelection 'single' or 'multiple' row data를 선택하는 경우의 옵션으로 하나만 선택하거나 복수개를 선택할 수 있습니다. enableColResize true | false 칼럼 리사이즈 허용 여부 enableSorting true | false 정렬 옵션 허용 여부 enableFilter true |.. 2021. 9. 18.
반응형