Song Minu

이미 정의된 모델이 있는 상태에서 다시 또 모델을 정의하려는 경우 발생하는 에러다. 처음 이 에러 문구를 보고 내 로직상에서 이 상황 자체가 좀 이해가 안 됐었는 데 먼저 해결 방법부터 말하면 import mongoose from "mongoose"; const { Schema } = mongoose; const userSchema = new Schema({ email: { type: String, required: true, unique: true, }, password: { type: String, required: true, }, name: { type: String, required: true, }, nickName: { type: String, required: true, }, image: St..

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..

Nuxt, vue-cli 둘 다 모두 사용 가능하다. 먼저 Nuxt 방법 Nuxt 프로젝트 안에 static 디렉터리에 다운로드할 파일을 넣는다. 그리고 이벤트를 실행할 버튼과 경로를 아래와 같이 작성한다. 프로젝트 내부 파일 다운로드 이제 실행해서 저 버튼을 누르면 다운로드가 된다. vue-cli에서의 방법 cli 프로젝트 안에 public 디렉터리에 다운로드할 파일을 넣는다. 그리고 이벤트를 실행할 버튼과 경로를 아래와 같이 작성한다. 실행 후 버튼을 누르면 위에 처럼 똑같이 받아진다. 그리고 vuetify의 v-btn은 저런 식으로 v-btn에 href와 download를 넣으면 작동이 하지만 그냥 button 태그는 작동하지 않고, a 태그는 정상 작동한다.

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..

회사에서 옛날에 만들어진 BackboneJS + Spring 기반 프로젝트의 대부분 기능을 NuxtJS + NodeJS (+VuetifyJS)로 새로 만들면서 디자인, 기능 등 새롭게 만들었다. 기존 기능들 중에 window.open을 이용해서 팝업을 통해 처리되는 기능들이 정말 많았는데. 레이아웃 구조를 완전히 바꾸거나 모달을 이용해 대부분 처리했다. (개인적으로 팝업을 사용하는 것을 선호하지 않음) 하지만, 특정 몇몇 기능의 경우 이건 무조건 팝업으로 해야 사용자가 편하다는 부분이 있어서 만들게 되었는데, 하는 과정에서 생각해야 할 부분도 좀 있고, 생각지도 못한 부분들도 몇 가지 발생했던 김에 블로그에 글을 작성하기로 했다. 1. 생각해야할 부분 2. 소스코드 3. store 문제 1. 생각해야할 ..

NuxtJS 프로젝트를 빌드할 때 회사 프로젝트는 이런 현상이 없었고 버전 차이도 거의 없던 것 같았는데 내 개인 프로젝트는 빌드할 때마다 이런 에러가 미친 듯이 찍혔다. 평소에 개발 모드로만 이런저런 테스트만 했지 배포 버전 빌드를 안 해본 지 오래되어 당황스러웠다. env 관련 테스트 중에 개발 모드, 배포 모드 테스트가 필요해서 빌드를 하다 발견했다. sass 종속성이 없어서 발생한다는 문제라는 것 같고, 우선 nuxt 2.15.7, @nuxtjs/vuetify 1.12.1 이 버전들 이후로는 수정되었다고 한다. 내 프로젝트는 nuxt 2.15.3, @nuxtjs/vuetify 1.11.3 이었다. package.json에 devDependencies 안에다 sass 추가와 버전 앞에 물결(~)을 ..

nuxt와 vuetify를 이용해 프로젝트를 만들면서 alert 창을 띄우다 보니 기본 alert 창이 보기가 너무 싫었다. vuetify에서 제공하는 컴포넌트를 이용해서 만들어보면 괜찮지 않을까? 하는 생각으로 만들어봤다. 기왕 만들 거면 alert 컴포넌트를 만들어서 alert을 띄울 때 pages나 components 디렉터리에서 쉽게 사용할 수 있고, store에서도 쉽게 사용할 수 있게 만들고 싶었다. 그래서 생각한 건 store를 사용해보기로 했다. store/index.js 소스 export const strict = false; export const state = () => { return { alert : false, alert_data: { type: 'primary', //type은..

NuxtJS로 만든 웹 사용 중 페이지가 변경될 때마다(URL이 변경될 때마다) 특정 이벤트를 발생시키고 싶어서 찾아봄. watch를 쓰면 될 것 같긴 했는데 마땅한 방법이 생각 안 나서 찾아봤었는데 방법이 정말 간단했었다. watch: { $route(route) { console.log('$route : ', route); } } 방법은 이렇고 페이지를 이동할 때마다 console.log를 찍히는 걸 보면 이렇다. 이걸 이용해 만들어 본건 vuetify의 v-app-bar 안에 v-breadcrumbs를 써서 페이지를 이동할 때마다 페이지의 제목을 표시하고 싶어서 사용해봤었다. 이런 식으로 사용이 가능하다. 소스 일부분은 이렇다. mdi-chevron-right 메뉴를 클릭할 때마다 watch를 통해..

피치 못할 사정으로 NuxtJS에서 jQuery 기반의 슬릭그리드를 대체할 플러그인을 찾지 못해서 jQuery를 적용시킨 후 슬릭그리드를 적용해보려고 했었다. 먼저 jQuery 적용은 https://minu0807.tistory.com/90 여기처럼 적용했고, 슬릭그리드 적용은 해당 vue파일에 할까 하다가 그냥 nuxt.config.js에다 적용했다. head: { title: 'AF_Manager', htmlAttrs: { lang: 'en' }, meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', c..

NuxtJS와 VuetifyJS로 프로젝트를 만들면서 jQuery기반 프로젝트에서 유용하게 사용했던 datatablese.js나 datepicker 등 많은 것들이 VuetifyJS에서 제공을 해줘서 jQuery를 사용하지 않고 프로젝트를 만들고자 했었다. 하지만, 사정이 있어 jQuery기반 프로젝트에서 사용했던 기능들을 하나하나 Vue로 기능을 구현하고 있었는데 그중 몇몇 기능은 Vue 기반 오픈 소스들 중에서도 유사한 게 없고, 그럼 기존과 좀 다르게 하고자 했으나 꼭 구현을 해야 하는 상황이 몇 있었다. 비슷한 Vue 오픈 소스를 찾아서 해봤지만, 시간적 문제 때문에 포기해야 하는 상황이 왔었다. 결국은 jQuery를 사용하기로 했다... 1. 프로젝트 설치 설치는 https://minu0807...