Song Minu

최근 vue2 버전의 vue-cli와 vuetify를 이용해 프로젝트를 하나 만들어야 할 일이 생겼었다. 기존에 만들어 두었던 vue2의 vue-cli는 너무 오래전에 만들어 둔 거라 새로 만들고 싶었다. 그동안 vue2는 nuxt가 편해서 사용했었고 vue3는 vite를 이용해서 프로젝트를 만들었어서 별 생각 안 했었는데 오랜만에 vue-cli와 vuetify를 사용하려고 하니 생각이 나지않아 기록해둔 원노트와 노션을 봤지만, 옛 버전의 내용들이라 제대로 구현이 안 되는 상황이 발생해서 최신 날짜로 작성하고자 블로그에 글을 남기기로 했다. vue-cli 설치 먼저 @vue/cli를 설치한다. npm i -g @vue/cli 전에는 이 @vue/cli가 @붙은 건 vue3, @가 안 붙은 건 vue2로 ..

vuetify를 이용해 채팅창을 구현 중에 필요해서 찾았는 데 찾는 데 생각보다 시간이 걸린 김에 블로그에 작성... 정확한 이유를 모르겠는데. vuetify 컴포넌트에 ref 값을 주고 this.$refs.로 scrollHeight를 가져오는 게 안 된다. 다른 컴포넌트들 모두 테스트를 해보진 않았지만... 일단 v-card에서는 안됐다. 처음엔 ref를 사용하면 될 것 같아서 v-card에 ref="msgCard"를 넣고, watch 에서 메세지 데이터를 받을 때마다 스크롤 높이를 체크하면서 처리하려고 했었다. 하지만 계속 undefined가 떠서 찾아보니 id 값을 주고 처리해야 됐다. 이렇게 id 값을 넣어주고, 아래와 같이 작성하면 된다. vuetify 컴포넌트 말고 기본적으로 제공되는 html..

NuxtJS와 VuetifyJS를 이용해 만들었습니다. 최종 목표는 1. NuxtJS 웹에서 첨부한 파일을 Express로 넘겨준다. 2. Express에서 Multer를 이용해 ElasticSearch에 데이터를 생성한다. 이렇게이고, 이 글에서는 1번에 대해 작성. 2번에 대한 글은 (https://minu0807.tistory.com/112) 여기를 봐주세요. 우선 만든 화면은 이렇다. 파일 첨부 역할을 하는 컴포넌트 1개와 엘라스틱서치에 저장된 데이터를 가져와 리스트를 보여주는 테이블 컴포넌트 1개 이렇게 2개의 컴포넌트로 구성되어 있다. 리스트는 생략하고 등록 부분 소스 mdi-upload 파일 등록 mdi-upload 파일 등록 Vuetify에서 제공하는 v-file-input를 이용했다. h..

alert도 컴포넌트로 만들어본 김에 confirm도 만들어봤다. https://minu0807.tistory.com/99 [VueJS] NuxtJS+Vuetify alert 컴포넌트 만들어보기 nuxt와 vuetify를 이용해 프로젝트를 만들면서 alert 창을 띄우다 보니 기본 alert 창이 보기가 너무 싫었다. vuetify에서 제공하는 컴포넌트를 이용해서 만들어보면 괜찮지 않을까? 하는 생각으로 만들 minu0807.tistory.com 사용 방식을 다르게 만들었는데, 이유는 confirm은 확인이냐 취소냐 누른 후에 다음 로직으로 진행해야 하기 때문에 alert처럼 vuex방식이 아니라 부모에서 자식 컴포넌트로 접근하는 방식으로 처리했다. https://minu0807.tistory.com/9..

v-checkbox에 @click에다가 native.prevent.captuer 추가 그리고 메소드에서 confirm의 else 문에 다음 2줄 추가 e.stopPropagation(); e.preventDefault(); is_checkbox(item, e){ if (confirm('해제하시겠습니까?')) { const params = { _id : item._id, is_use : e.target.checked } console.log('data : ', params); } else { e.stopPropagation(); e.preventDefault(); } }, 이렇게 하면 잘됨. 2021-06-10 해결 방법을 팀장님이 찾아주셔서 기존 글은 접어 둡니다... 더보기 vuetify에서 제공하는 ..

VuetifyJS에서 제공하는 버튼이라던가 아이콘 등 대부분의 컴포넌트들에 :to="경로" 이런 식으로 작성하면 프로젝트 내에 해당되는 경로로 이동된다. v-bottom-navigation을 만들어보다가 버튼으로 다른 사이트 링크를 띄우고 싶었는데 vuetify 이것저것 쓰다 보면서 to="url" 이것만 계속 쓰고, html 태그도 아닌 것에 익숙해지다 보니 herf라는 속성이라는 게 생각이 안 났어서 구글링을 함... 외부 사이트를 띄우고 싶을 땐 :href를 사용 GitHub mdi-github Tstory mdi-alpha-t-circle Instagram mdi-instagram

전에 작성했었던 NuxtJS 웹팩을 받은 후 따로 VuetifyJS를 적용한 글이 있는데(minu0807.tistory.com/71) 버전이 낮은 웹팩에다 적용하다 보니 불편한 점이 몇 있었다. 그래서 그냥 한방에 NuxtJS와 VuetifyJS가 적용된 프로젝트를 만드는 방법이다. 설치 시 나름 최신 버전으로 받아진다. 방법도 쉽다. npm init nuxt-app name 이거 한 줄 이면 시작이다. name 부분에 입력한 텍스트로 디렉터리가 생성되며, 그 안에 설치가 된다. 프로젝트명을 입력하면 모두 설치 완료 후 웹 title 명으로 지정된다. (nuxt.config.js에서 수정 가능) 자신이 원하는 방식 선택 이것도 자신이 원하는 방식 선택 보통은 Npm을 선택하지 않을까 싶다. Package..

처음엔 컴포넌트로 로딩 파일을 만들고 Vuex를 이용하여 공통적으로 사용할 수 있게 만들었었다. 만들고 나서 괜찮은 것 같은데? 하고 있었는데 NuxtJS 공식 홈페이지 Docs를 쭉 보다가 loading이라는 게 있어서 봤다. nuxtjs.org/docs/2.x/configuration-glossary/configuration-loading The loading Property Nuxt.js uses its own component to show a progress bar between the routes. You can customize it, disable it or create your own component. nuxtjs.org nuxt.config.js에서 loading이라는 옵션을 사용하면..

v2.vuetifyjs.com/ko/components/forms/ Form component — Vuetify.js The form component provides a wrapper that makes it easy to process and control validation states of input components. v2.vuetifyjs.com 위 경로에서 제공해주는 정보를 확인해보면, vuetify 자체에서 제공해주는 form 유효성 검사 기능이 있고, npm 모듈을 사용해서 검사하는 2가지가 있다. (vuelidate, VeeValidate) 모듈 2가지는 한번 봤는데 설치하기도 귀찮고... 해서 그냥 자체 제공하는 걸로 사용해봤다. 사용 방법은 간단하다. 유효성 체크를 할 v-text..

return-object 속성을 주면 된다. 먼저 속성을 안 주고 사용했을 때의 값 예시 data() { return { authList: [ { name: '관리자', value: 'A'}, { name: '일반 사용자', value: 'M'} ], user_auth: '', user_auth_rule: [ v => !!v || '권한은 필수 선택 사항입니다.' ], } }, 이제 셀렉트 박스를 선택 후 버튼을 눌러서 this.user_auth를 console.log로 찍어보면 선택한 데이터의 value값만 가지고 온다. 보통의 경우에는 이렇게만 써도 상관은 없지만 종종 value값과 해당 text도 가지고 와야 할 때가 있는데 그럴 때 return_object를 사용하면 된다. 사용했을 때의 예시 r..