Song Minu

글 예시로 작성한 소스 및 프로젝트는 Vite, Vue3와 디자인 프레임워크 퀘이사를 사용하였습니다. 먼저 예제 화면 각 이미지 하단 캡션 글자가 vue-timeago3를 이용해 보여주었다. 사용방법은 매우 간단하다. # 모듈 설치 npm i vue-timeago # 한글 표시를 위한 모듈 설치 npm i date-fns 먼저 이렇게 2개를 설치. main.js를 열어서 아래 소스를 추가한다. import timeago from 'vue-timeago3'; app.use(timeago); 이러면 준비가 끝난다. 사용하고자 하는 컴포넌트를 열어서 코드를 작성 이게 끝이다. 데이터의 날짜도 new Date()를 이용해 값을 셋팅해도 되고, 위 소스에서 aDay2~6처럼 string으로 그냥 타이핑해도 된다...

defineEmits를 따로 import 하지 않아도 된다. defineEmits에 사용할 이름?을 배열로 먼저 담아두고 필요한 부분에 사용하면 된다. https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits TypeScript with Composition API | Vue.js Join in-person 1-3 November 2022, Toronto, Canada Join the Vue community ONLINE at VueConf Toronto from 1-3 November 2022! Use the code VUEJS to get 25% off on tickets! vuejs.org

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

지난번 글에서 Vite+Vue3 프로젝트에 jwt 로그인 기능 구현에 관한 글을 작성했었다. 디자인 프레임워크로 퀘이사를 사용해서 만들었었는데 기능을 구현하고 나중에 다시 봐보니 로그임 폼에 대한 유효성 검사 기능이 없어서 퀘이사에서 제공하는 유효성 검사 기능에 대해 한번 알아봤다. 유효성 기능 구현 자체는 Vuetify와 유사해서 크게 어려운 부분은 없었다. 1. form에 ref 추가 먼저 해야할 부분은 ref 추가이다. 공식 홈페이지에서 유효성 검사를 할 각 q-input에다가 ref를 추가해서 따로따로 하는 예시만 있어서 vuetify 처럼 한 번에 하는 건 안 되는 건가? 해서 해봤는데 잘 된다. 내가 작성한 방법은 이렇다. q-form에다가 ref값을 지정했고, 각 q-input에다가는 검증 ..

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

웹소켓 관련해서 직접 제대로 해본 적이 없어서 ws를 이용해 express와 nuxt에 만들어서 해본 뒤 socket.io도 해봤었다. socket.io가 ws에 비해 제공되는 기능이 많다고 해서 해봤고, nuxt에서는 nuxt-socket-io라는 모듈을 이용해 socket.io를 사용할 수 있길래 사용해봤다. 테스트는 vue2 기반의 nuxt 프로젝트에서 진행했습니다. 우선 socket.io를 열어둔 서버단 소스는 소켓 쪽 소스만..(넷 상에 참고할 소스들이 많기에...) const SocketIO = require('socket.io'); module.exports = (server) => { const io = SocketIO(server, { path: '/socket.io', cors: { o..

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