반응형

Web Front End/Vue

    Vue에서 'Leave Site?'를 구현하는 3가지 방법

    Vue에서 'Leave Site?'를 구현하는 3가지 방법

    Vue에서 'Leave Site?'를 구현하는 3가지 방법 웹사이트에서 내용을 입력하다가 창을 벗어나려고 하면 이 사이트에서 나가시겠습니까?와 같은 경고창을 본 적이 있을 것입니다. 이번 포스팅에서는 Vue를 사용하여 사이트를 벗어나지 못하도록 막는 방법 3가지를 간단한 예제 사이트를 만들면서 알아보겠습니다. 개요 예제 사이트 구성 다른 사이트로 나가는 것 감지하기 - beforeunload 이벤트 다른 라우터 주소로 이동하는 것 감지하기 - vue-router의 beforeRouteLeave 다른 쿼리스트링 주소로 이동하는 것 감지하기 - custom method 1. 예제 사이트 구성 다양한 상황에서 경고창을 띄우기 위해 라우터를 나누어 구성하였습니다. path: repository와 detail-i..

    회원가입 기능 만들며 React와 Vue 비교하기

    회원가입 기능 만들며 React와 Vue 비교하기

    회원가입 기능 만들며 React와 Vue 비교하기 저는 기존에 React를 중심으로 페이지 개발을 해 왔습니다. 그리고 Vue는 React와 닮은 점이 많습니다. 가장 큰 것은 View를 중심으로 컴포넌트를 쪼개서 관리할 수 있다는 것이죠. 다른 점은 어떤 것이 있는지 간단한 회원가입 기능을 React와 Vue로 각각 만들어 비교해 보겠습니다. 참고 React: 16.13버전, Function component Vue: 2.6버전, Single File component 사용법 차이 위주로 설명하고 있습니다. 스타일은 동일하게 적용했습니다. 개요 전체 코드 기본 구성과 형태 라이프 사이클 props 이벤트 전달 1. 전체 코드 React Codesandbox 링크: https://codesandbox.i..

    Vuex로 상태관리하기

    Vuex로 상태관리하기

    Vuex로 상태관리하기 컴포넌트 계층이 늘어나게 되면 props만으로 전달하거나 이벤트 버스만으로 해결되지 않는 상태 관리의 어려움이 생기게 됩니다. 이번 글에서는 이런 어려움을 해결한 Vuex 라이브러리의 패턴과 메소드를 알아 보도록 하겠습니다. 개요 Vuex 아키텍처 Store 영역 Vue Component 영역 1. Vuex 아키텍처 Vuex는 데이터가 단방향 흐름으로 되어 있습니다. 이 흐름은 Flux 아키텍처와 비슷한 양상을 보입니다. Vuex 아키텍처 Flux 아키텍처 Vue 아키텍처의 흐름에 대해 설명하겠습니다. 먼저, Vuex의 Store에서 관리하는 부분은 Actions, Mutations, State입니다. 컴포넌트에서 Action이 일어나면 통신을 통해 값을 Mutation시킵니다. ..

    [Vue 기초] Directive와 인스턴스 옵션

    [Vue 기초] Directive와 인스턴스 옵션

    [Vue 기초] Directive와 인스턴스 옵션 개요 Directive Vue 인스턴스 옵션 1. Directive란? HTML 태그에 들어가는 속성이다. v- 라는 접두사가 붙는다. 대표적인 디렉티브: v-bind, v-model, v-once, v-for, v-if, v-else, v-else-if, v-text, v-on v-bind 뷰 인스턴스, 데이터, 이벤트를 바인딩할 때 하위 컴포넌트에 데이터를 전달할 때 사용 예시 // 전체 표기 // 생략 표기 v-model 사용자에게 입력을 받을 때 뷰 데이터 속성에 자동으로 연결할 때 여기서 입력을 받는 종류는 폼의 input 태그로 받을 수 있는 text, textarea, radio, checkbox 등과 select 태그 등을 말한다. 사용 예..