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

가장 기본적인 기능이면서 구현하기 까다로운 로그인 기능... vue2 기반의 vue-cli와 nuxt도 jwt 기능을 활용한 로그인 기능에 대한 글을 작성했었는데 솔직히 너무 초반에 공부하면서 만들어본 거라 내용 자체가 마음에 들지 않았다. (글을 다시 쓰고 싶지만 귀찮아서 못하고있다.) 최근 vite+vue3로 vue3에 대해 조금씩 접해보다 jwt를 이용한 로그인 기능을 구현해보자 해서 만들어봤다. 토큰을 발급, 검증하는 백엔드 부분은 다루지 않고 웹단만 작성했습니다. 우선 프로젝트에 axios, vue-router, vuex가 모두 세팅되었다는 가정하에 시작합니다. 그리고 디자인 프레임워크로 퀘이사를 사용했습니다. 추가적으로 설치가 필요한 건 vue3-cookies 이걸 설치해야 합니다. npm i..

vue3 공부 중 template refs를 보다 보니 vue2 컴포넌트에서 자식 컴포넌트 안의 methods를 실행시키는 걸 사용했던 게 생각나서 vue3의 compositon API에서는 어떻게 하는지 궁금해서 찾아봤었다. 테스트는 vite+vue3에 디자인프레임워크로 퀘이사를 사용했습니다. vue2에서 사용하던 optionsAPI 방식에서는 this.$refs.ref이름 형식으로 자식 컴포넌트에 접근이 가능했다. vue3에서 제공하는 compositionAPI 방식은 this를 사용할 수 없고, 컴포넌트에 입력된 ref와 이름이 같은 변수를 만들고 ref(null)을 주면 된다. 간단하게 보면 아래와 같다. ... //vue2 optionsAPI 의 접근 방법 this.$refs.child.~~ /..

적용하는 방법은 vue-cli에서 했던 방법과 유사했던 것 같다. 먼저 axios 설치 npm install axios vite.config.js에 proxy 설정 import { defineConfig, loadEnv } from 'vite' import vue from '@vitejs/plugin-vue' import { quasar, transformAssetUrls } from '@quasar/vite-plugin' export default ({mode}) => { process.env = {...process.env, ...loadEnv(mode, process.cwd())}; return defineConfig({ server: { proxy: { '/api': process.env.VITE..

2023-01-23 내용추가 최근 vite 4.0.0 버전으로 작업한게 있었는데 아래 글 본문 처럼 별도의 작업 없이 바로 .env 파일이 읽어지는게 확인 됐다. .env 파일안에 VITE_ 형식의 값을 넣으면 바로 import.meta.env로 불러올 수 있다. 혹시 몰라서 vite 3.1.0 버전의 프로젝트에서도 아래 작업을 지우고 해봤는데 정상적으로 불러와지는게 확인 됐다. 2023-02-06 내용추가 오늘 블로그 글 작성을 위해 vite 3.2.3버전의 프로젝트를 생성해서 확인해봤는데 별도의 작업없이 .env를 읽어지는게 확인됨 Vue2와 vue2 기반의 NuxtJS만 오랜 시간 사용을 하다 보니 vue3를 제대로 접해본 적이 없어 요즘 조금씩 알아보고 있다. 이번에는 웹프레임워크도 nuxt 말고..

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