FRONTEND/Vue.js

[Vue] 카드번호 자동 하이픈(-) 정규식

[ERROR] NavigationDuplicated: Avoided redundant navigation to current location

0. NavigationDuplicated Error 같은 페이지로 router.push('path') 를 하게 될때 발생 1. 해결방법 $router.push() 의 에러핸들링을 안해줘서 콘솔에 에러가 찍힌다. catch문으로 에러를 잡아주면 된다. this.$router.push('/') 에서 this.$router.push('/').catch(() => {}) ** 에러를 전부 무시하는코드

[Vue] 조건부 렌더링 v-if 와 v-show

Vue 에서 조건부 렌더링을 할 때 사용하는 디렉티브는 v-if와 v-show가 있다. v-if와 v-show의 가장 큰 차이점은 v-if는 주석, v-show는 display:none으로 처리된다. v-if (v-else, v-else-if) v-if는 조건에 만족하면 렌더링을 하고 조건에 만족하지 않으면 DOM 레벨에서 제거되며, 모든 감시 (watch 등..)도 제거된다. 또한, 컴포넌트라면 인스턴스가 제거되며 이 후 렌더링 할때 모든 상태가 초기화 된다. v-if는 내부에서 디렉티브 또는 컴포넌트를 많이 사용하는 경우, 특정한 데이터를 따로 가지고 있지 않다면 오류가 발생했을 때 v-if를 사용하는 것이 좋다. temp의 값이 true일 경우 보여집니다 temp의 값이 true일 경우 temp의 ..

[Vue] Vue.js 소개

Vus.js 란 Vue.js는 웹 페이지 화면을 개발하지 위한 Javascript 언어 기반의 Front-end Framwork 이다. Vue.js 의 장점 UI를 Component 단위로 개발하여, 기능의 재사용이 쉽다. SPA (Single Page Applicatioin, 단일 페이지 어플리케이션) 구성을 위해 필요한 라우터기능도 지원한다. Angular, React에 비해 매우 작고 가벼우며 복잡도가 낮다. Angular의 양방향 데이터 바인딩과 React의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크이다. 양방향 데이터 바인딩이란 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화 되어 한쪽이 변경되면 다른 한쪽도 자동으로 값이 변경되는 것을 의미한다. 단방향 데이터 흐름은 컴포넌..