하고싶은대로!

2024.01.15 - [뷰(Vue)] - Vue3 Validation 플러그인 적용하기(VeeValidate + yup + i18n)_1 Vue3 Validation 플러그인 적용하기(VeeValidate + yup + i18n)_1 Vue3에서 검색이나 입력에 대한 검증을 하나씩 하기보다는 공통적으로 적용되는 부분이 있었으면해서 찾아보았다. VeeValidate, Yup, Zod등이 있다. VeeValidate에서 자체적으로 Yup, Zod 등의 라이브러리와 lollaziest.tistory.com 이전에 작성한 1탄에 이어 2탄의 경우 VeeValidate와 yup 그리고 i18n모두 각각 언어설정이 필요한데 어떤식으로 적용했는지에 대해서 간략하게 정리를 해 두려고 한다. 여러가지 개념에 대한 정리..

Vue3에서 검색이나 입력에 대한 검증을 하나씩 하기보다는 공통적으로 적용되는 부분이 있었으면해서 찾아보았다. VeeValidate, Yup, Zod등이 있다. VeeValidate에서 자체적으로 Yup, Zod 등의 라이브러리와 함께 사용하는 기능등을 제공하기도 한다. 설치 npm install vee-validate 설치 후 별다른 후속절차없이 바로 사용 할 컴포넌트에서 사용하면 된다. Yup과 함께 사용 하려고 하기 때문에 Yup또한 설치한다. npm install yup 선제조건이 존재한다. Form 으로 감싸져있어야 한다. 현재 확인중인 사용방법은 다음과 같음 일단 사용한다고 명시를 한다. 여기선 searchText로 연결된 대상을 validation할것임. //validation import ..

I18n이란? 그저 국제화란 뜻입니다. 국제화와 현지화는 출판물이나 하드웨어 또는 소프트웨어 등의 제품을 언어 및 문화권 등이 다른 여러 환경에 대해 사용할 수 있도록 지원하는 것을 의미한다. 다음과 같이 I18n을 설치 및 적용하는 것에 대해서 정리하였다. vue-i18n 를 설치하면 Vue 2버전을 기준으로 동작한다. Vue3의 경우에는..? 공식문서주소 Vue I18n | Vue I18n Vue I18n Vue I18n Internationalization plugin for Vue.js Easy, powerful, and component-oriented for Vue.js vue-i18n.intlify.dev 공식홈페이지에서의 기준은 9버전인듯함. 설치 npm install vue-i18n@9 ..

Vue3를 기반으로하는 프로젝트에서 에디터 적용이 필요하여 여러가지 대조군을 비교하며 정리하였다. 최초에 대상이 되던 플러그인은 총 3가지로 다음과 같았다. Sun Editor —> 이미지 resize 선택하여 가능 (Vue지원) Tiptap Editor Ckeditor5 ckeditor5-Vue 지원. 그러나 이전 js버전의 경우 image resize가 정상적으로 동작안한다고 함. 확인이 필요하다. 위와 같은 리스트업중 필요성과 접근성 등등 여러가지를 고려해서 확인 해보았다. sun editor를 사용할까 했었는데.. Vue를 지원하는것 같지만 들어가보면 소스가 없다. (텅 비어있음.) Tiptap과 ckeditor5는 모두 image resize를 제공하는듯 보였다. 사람들이 이미 익숙하게 사용중인..

Vue Springboot API서버를 JWT를 사용한 형태로 구현하다가 서버쪽에서는 정상적으로 헤더에 심어서 값을 전달하였다. 그리고 F12를 눌러서 네트워크상에서 확인해보면 그 값을 볼 수 조차 있는데 JS에서 가져와서 사용하려고 하는 순간 값을 제대로 못 읽는 경우가 이번에 발생했다. 다음과같이 값이 잘만 보인다.(만료된 토큰입니다) 그러나 js에서 axios요청 후 다음과 같이 확인해보려고 하면? undefined로 떠버린다. const accessToken = res?.headers['authorization']; const refresh = res?.headers['authorization-refresh']; console.log('accessToken is :', accessToken); c..

처음에는 JS를 사용하거나 할 때 쉽게 쓰던 부트스트랩5를 사용하거나 하려고 했었다. 그러나 Vue에서 사용하거나 할 때에는 컴포넌트로 제공되는 경우 매우 간편하게 사용 할 수 있고 JS에서 직접적으로 데이터를 조작하거나 html을 그리거나 하는 부분들이 적어서 별로인듯 했다. 물론 BootstrapVueNext 라던지 Vue3를 기반으로 컴포넌트를 제공하는게 있었지만.... 아래와 같은 절차로 너무 힘들었다. 적용방법 정리... 그냥 JS 형태로 부트스트랩5 설치 개발자가 모든걸 짜야함. 번거로움 bootstrap-vue Vue2, bootstrap4를 지원하는 bootstrapVue이지만 Vue3에서는 안됨. bootstrap-vue-3 deprecated될 예정이고 공식홈페이지로 보여지는 해당 컴포..

Vue를 사용하더라도 캘린더나 이런부분들은 사용해야 하기때문에 기존에 jquery나 js를 사용할때 잘 쓰던 datepicker를 그대로 사용하려고 했다. 설치하는 부분의 경우에는 공식문서에서 자세하게 설명해주고 있기 때문에 간단하게만 정리하였다. Vue프로젝트에 date-picker 적용하기. 설치 npm install @vuepic/vue-datepicker main.js에 컴포넌트 및 css 추가적용. import VueDatePicker from '@vuepic/vue-datepicker'; import '@vuepic/vue-datepicker/dist/main.css'; createApp(App) .component('VueDatePicker', VueDatePicker) .use(router..

Toast alert 란 말그대로 토스트기에 빵을 넣으면 따악~ 튀어나오는 형태의 알림창을 말한다. 실제로 제공하는 깃허브에 들어가면 보이는 모습은 다음과 같다. 기존 프로젝트에서 PrimeVue에서 제공하는 Toast alert창을 사용하고자 했으나...뭔가 정상동작하지 않았다. 별도의 플러그인을 설치하여 Vue3에서 js에 사용하고자 하는 형태로 가공하여 사용하려고 한다. Vue3를 지원하는 Toast (MIT 라이센스) (2년전이 최종 git수정) Vue-Toastification Vue-Toastification vue-toastification.maronato.dev 깃 주소 https://github.com/Maronato/vue-toastification GitHub - Maronato/vu..

Vue에서 Pinia를 사용하여 정보를 관리하는 경우에 새로고침을 하는 경우 저장된 데이터가 날아간다. 새로고침시 store값 날아가는경우 pinia-persistedstate를 사용하여 초기화 방지가 가능하다. localStore에 저장 or 쿠키에 저장 선택가능하다 검색키워드 pinia-persistedstate store setup pinia-persistedstate with composition api 등등 참고중인 페이지 Composition API on pinia-plugin-persistedstate? From the vuejs community on Reddit Explore this post and more from the vuejs community www.reddit.com 공식사이..

vite 사용시 좋은점 개발중엔 ES Import를 직접지원 하고, 브라우저에서 이용하여 favicon.ico 가 명시된 부분도 변경해라. 기존에는 public 폴더 내부에 존재하던 index.html파일을 외부로 꺼내라. import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { fileURLToPath } from 'url'; import path from 'path'; const filename = fileURLToPath(import.meta.url); const pathSegments = path.dirname(filename); export default defineConfig({ plugins: [vu..