메로그

Composition API 는 컴포넌트 코드 재사용성을 높여주는 API 입니다. 흔히들, Vue3 에서 사용하는 줄 알지만, 시작은 Vue2 에서 플러그인 형태로 지원하였습니다. 그렇기 때문에 Vue2, Vue3 에서 둘 다 사용가능합니다. 라이브러리 설치 이제 vue2 를 쓰는데, Composition API 가 쓰고 싶은 경우, nuxt2 를 쓰는데 Composition API 가 쓰고 싶은 경우 아래의 github 를 참고해서 설치해봅시다. https://github.com/vuejs/composition-api GitHub - vuejs/composition-api: Composition API plugin for Vue 2 Composition API plugin for Vue 2. Contr..

redirected when going from to via a navigation guard 뷰 라우터 이동시 다음과 같은 오류가 발생하는 경우가 있을 것이다. 이는 페이지 이동시 중간에 라우터 가드를 만났고 거기서 조건을 충족하지 못해 다른 페이지로 이동시에 발생하는 에러 문구라고 보시면 된다. 실제로 해당 오류가 발생해도 라우터 이동에는 큰 문제가 없다. 이처럼 발생하는 이유는 router.push 가 Promise 객체를 리턴하는데, 거기서 reject 발생시 catch 하지 못해 발생하는 문구로 보인다. 이의 경우 아래와 같이 설정하면 해결할 수 있다. this.$router.push('/home').catch(() => {})

보완 이슈 발생 소나큐브와 같은 지속적인 코드 품질 검사용 오픈 소스 플랫폼을 사용하다보면, 아래와 같이 a 태그에서 href 속성을 동적으로 넣는 코드에서 보안 이슈 발생함. {{ title }} 원인 (https://v2.vuejs.org/v2/guide/security#Injecting-URLs) 프론트엔드에서 URL 검사를 수행하는 경우 이미 보안 문제가 있습니다. 사용자가 제공한 URL은 데이터베이스에 저장하기 전에 항상 백엔드에서 검사해야 합니다. 네이티브 모바일 앱을 포함하여 API에 연결하는 모든 클라이언트에서 문제를 방지할 수 있습니다. 또한, 검사된 URL이 있더라도 Vue는 안전한 목적지로 연결된다는 것을 보장하는 데 도움을 줄 수 없습니다. 정리하면 href 로 이동하는 경로가 우리..

Vue3 Vue3 Router 의 경우, vue-router 가 아닌, vue-router@next 를 설치해주어야 합니다. yarn add vue-router@next router 폴더 밑에 index.js 를 생성합니다. 아래와 같이 기본 셋팅을 해줍니다. import { createWebHistory, createRouter } from 'vue-router' function getComponent(component) { return () => import(`../components/${component}.vue`) } const routes = [ { path: '/', name: 'Main', component: getComponent('MainComponent') }, // 404 페이지 { ..

Vue3 란 기존 Vue2 에서 버전업이된 상태, vuex, vue-router 등의 대한 버전업도 동시에 진행되어야함. Vue 에서는 기본으로 Vue3 를 지원 중. 실무에서는 아직 Vue2 를 많이 사용하고 있지만, 조금씩 추세가 Vue3 로 이동하고 있기 때문에 어느정도 스터디가 필요로 해보여 시작하였습니다. (아직 몇몇 라이브러리들이 Vue3를 제대로 지원하지 못하고 있음.) Vue2 와 Vue3 의 가장 큰 차이점은 setup 이라는 것만 알아두면 될 것 같습니다. 설치 vue3 의 경우, vite 기반의 create-vue 를 선호함. (vite 가 webpack 보다 빠르기 때문에) https://github.com/vuejs/create-vue script script setup 사용 //..

vue 에서 watch 사용시 중첩 데이터 감지 방법 배열, obejct 에 watch 를 걸고 내부가 변경되면 감지 하지 못하는 경우가 발생합니다. 이러한 경우에 watch 에 있는 deep 속성을 사용해주면 됩니다. watch: { arr: { deep: true, handler() { //... } } }