본문 바로가기

반응형

Development

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; } } } 더보기
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 에 대응해서 정상적으로 릴리즈가 된 프레임워크를 선택해서 간단한 프로토타입이라도 구성해보고 채택하는.. 더보기
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 버전을 선택하라고 나오는데.. 이번 .. 더보기
[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.. 더보기
쉘스크립트 정리 (지속적인 업데이트) 자주 사용하는 쉘 스크립트를 정리해서 업데이트 하도록 해야겠다. 구글링도.. 귀찮아져간다.. 물론 이 내용 업데이트 할때마다 구글링하겠지만.. ㅋㅋ 1. Split - 문자열 자르기 (쉘스크립트 split) # 출력 echo "jkun.net" | awk -F '.' '{print $1, $2}' # 변수에 담기 JKUN_NET_URL_FIRST=$(echo "jkun.net" | awk -F '.' '{print $1}') JKUN_NET_URL_SECOND=$(echo "jkun.net" | awk -F '.' '{print $2}') echo $JKUN_NET_URL_FIRST # 첫번째 출력 >> jkun echo $JKUN_NET_URL_SECOND # 두번째 출력 >> net 2. Functi.. 더보기
[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 |.. 더보기
[NPM] npm 패키지 업데이트 프로젝트에서 package.json 에 있는 패키지들을 버전 업데이트 할때 npm-check-updates 패키지 를 설치하면 된다. npm-check-updates Find newer versions of dependencies than what your package.json allows www.npmjs.com 심플간단 npm install -g npm-check-updates ncu -u npm install 더보기
[Nuxt.js] WARN : Babel 경고 메세지 자꾸 빌드할때마다 뜨는 짜증나는 메세지;; 이미 메세지 내용에 있는데 귀찮아서 안하다가 드디어 한다;; ㅡㅡ;; nuxt.config.js 파일에 build 속성에 다음과 같이 박아주자;; babel: { plugins: [ ['@babel/plugin-proposal-private-methods', { 'loose': true }], ['@babel/plugin-proposal-private-property-in-object', { 'loose': true }] ], } 드러워서 한다 ㅡㅡ; 더보기

반응형