Song Minu

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 태그는 정상 작동한다.

csv 기능 구현 중 npm이 있을까? 하고 검색해보았는 데 있었다. 어지간한 건 다 있는 듯하다. json 형식의 데이터를 csv 파일로 생성해준다. > 설치 방법 npm install vue-json-csv https://www.npmjs.com/package/vue-json-csv vue-json-csv Download your JSON data as an CSV file directly from the browser www.npmjs.com > 적용 적용은 NuxtJS 기반 프로젝트에 적용했고, 아래와 같이 적용했다. plugins 디렉터리에 vue-json-csv.js 파일 생성 후 코드 작성 import Vue from 'vue'; import JsonCsv from 'vue-json-csv'..

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

먼저 믹스인은 간단하게 설명하면 믹스인 파일 내에 있는 요소들을 컴포넌트에 합치는 개념이다. 그래서 믹스인 안에 요소와 컴포넌트 요소가 중첩될 수 있으니 주의해서 작성해야 한다. https://kr.vuejs.org/v2/guide/mixins.html 믹스인 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org nuxt와 vuetify를 이용한 프로젝트를 만드는 중에 컴포넌트 height를 유동적으로 변환해주어야 하는 부분이 있었다. vuetify에서 제공하는 grid 시스템 v-layout, v-row, v-col을 이용하여 위치를 잡아주면 브라우저 크기를 조절했을 때 width는 자동으로 조절이 된다. 하지만 height는 따로 height 속성을 줘서 고정값을..

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

자식 컴포넌트가 부모 컴포넌트로부터 props를 전달받고 props 유효성 검사로 타입을 지정할 때 다른 타입에서는 못 봤던 것 같은데, Object 타입일 경우에는 기본 값을 반환해줘야 한다. 물론 공식 홈페이지에 나와있기는 하다. https://kr.vuejs.org/v2/guide/components-props.html#Prop-%EC%9C%A0%ED%9A%A8%EC%84%B1-%EA%B2%80%EC%82%AC Props — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 하지만... 마지막으로 본지도 오래됐고, 평소에 잘 안 쓰다 보니... 다른 타입들처럼 작성해서 계속 undefined가 출력되어 삽질하다 뒤늦게 알아낸 김에 블로그에도 작성하기로 했다. (..

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

이 둘의 차이를 정말 간단하게 생각한다면 화면상에 보여준다, 안 보여준다 정도이지만 차이가 조금 더 있다. v-if는 조건에 맞지 않으면 렌더링 자체가 안되거나, 조건을 충족해서 렌더링 되었다가 다시 바뀌면 엘리먼트가 삭제된다. v-show는 렌더링은 되지만 조건에 따라 style: display:none;으로 화면상에서만 안 보이게 하고, 바뀌면 다시 보이게 한다. 테스트 소스 AAA BBB CCC Button v-if is의 값이 true여서 v-card가 다 보이는 상태이고 버튼을 눌러 is 값을 false로 바꾸면? 화면에서도 사라졌고, 해당 v-card 엘리먼트도 사라졌다. 버튼을 다시 누르면 사라져서 로 표시되던 부분에 다시 렌더링 된 모습을 볼 수 있다. v-show 위 예제 소스에서 v-i..