IT/Vue.js
-
Vue.js - Vue Router의 라이프사이클IT/Vue.js 2020. 8. 4. 13:19
내비게이션 가드 내비게이션 가드는 라우터에서 다른 라우터로 이동하는 내비게이팅이 수행될 때 실행되어 라우터의 이동을 막거나 혹은 다른 라우터로 리다이렉팅 할 수 있는 기능입니다. 내비게이션 가드는 적용 범위에 따라 전역 가드, 라우트별 가드, 컴포넌트별 가드로 나뉘어집니다. 그리고 다시 가드의 호출 타이밍에 따라 before 훅과 after 훅으로 나뉘게 됩니다., before 훅은 라우터의 이동이 끝나기 전에 미리 호출되는 훅이며, after 가드는 라우터의 이동이 끝난 후 호출되는 훅입니다. beforeRouteLeave 컴포넌트 내에 선언하며, 기존에 존재하던 컴포넌트가 제거되기 전에 이 훅을 호출합니다. 이 훅은 주로 문서(게시글 등)를 저장하지 않은 상태로 다른 곳으로 이동하는 것을 방지하는 데..
-
Vue.js - Vue Router (개념 및 구현)IT/Vue.js 2020. 8. 3. 10:22
Vue.js는 그 자체로는 단순한 뷰 계층 라이브러리입니다. 그러므로 여러 페이지로 구성되고 복잡한 사용자 인터랙션을 갖는 애플리케이션 등을 개발할 경우에는 Vue.js만으로는 구현이 어려울 때가 있습니다. 공식 플러그인인 Vue Router를 사용하면 단일 페이지 애플리케이션(SPA)을 비롯한 URL 이동이 필요한 동작을 간단히 구현할 수 있습니다. 1. Vue Router를 이용한 SPA SPA란 최초에 HTML 페이지 하나를 로드한 다음, 그 이후로 사용자 인터랙션에 따라 Ajax로 정보를 받아오면서 동적으로 페이지를 업데이트하는 웹 어플리케이션을 말합니다. 일반적으로 웹 애플리케이션은 페이지 이동 시에 대상 URL을 서버에 요청해 전체 페이지에 해당하는 HTML 콘텐츠를 받아옵니다. 반면, SPA..
-
Vue.js - Vuex Actions 및 폴더구조화IT/Vue.js 2020. 7. 30. 13:31
1. Actions 이란? Mutations에는 순차적인 로직들만 선언하고 Actions 에는 비 순차적 또는 비동기 처리 로직들을 선언합니다. 그렇다면 왜 처리 로직의 성격에 따라 Mutations 과 Actions로 나눠 등록해야 할까요? Mutations의 역할 자체가 State 관리에 주안점을 두고 있습니다. 상태관리 자체가 한 데이터에 대해 여러 개의 컴포넌트가 관여하는 것을 효율적으로 관리하기 위함인데 Mutations에 비동기 처리 로직들이 포함되면 같은 값에 대해 여러 개의 컴포넌트에서 변경을 요청했을 때, 그 변경 순서 파악이 어렵기 때문입니다. 이러한 문제를 방지하기 위해 비동기 처리 로직은 Actions에 동기 처리로직은 Mutations에 나눠 구현합니다. 따라서, setTimeou..
-
Vue.js - Vuex getters, mutationsIT/Vue.js 2020. 7. 28. 15:20
1. Getter 란? 중앙 데이터 관리식 구조에서 발생하는 문제점 중 하나는 각 컴포넌트에서 Vuex의 데이터를 접근할 때 중복된 코드를 반복호출 하게 되는 것입니다. 예를들면 아래와 같은 코드가 있습니다. 여러 컴포넌트에서 같은 로직을 비효율적으로 중복 사용하고 있습니다. 이 때, Vuex의 데이터 (state) 변경을 각 컴포넌트에서 수행하는 것이 아니라, Vuex에서 수행하도록 하고 각 컴포넌트에서 수행 로직을 호출하면, 코드 가독성도 올라가고 성능에서도 이점이 생깁니다. 2. Getters 등록 상위 컴포넌트 : TestVueComponent.vue 하위 컴포넌트 : ChildVuex.vue getters를 Vuex에 추가합니다. export default new Vuex.Store({ // ...
-
Vue.js - Vuex 개념 및 statesIT/Vue.js 2020. 7. 27. 09:46
Vuex란? Vue.js의 상태 관리를 위한 패턴이자 라이브러리입니다. 다른 상태 관리 패턴이나 라이브러리와 비교했을 때 뷰의 반응성(Reactivity) 체계를 효율적으로 활용하여 화면을 업데이트 한다는 차이점이 있습니다. 정리하자면, - 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 상태 관리(State Management)가 왜 필요한가? 컴포넌트 기반 프레임워크에서는 작은 단위로 쪼개진 여러 개의 컴포넌트로 화면을 구성합니다. 예를들면, header, button, list 등의 화면 요소가 각각 컴포넌트로 구성되어 한 화면에서 많은 컴포넌트를 사용합니다. 이에 따라 컴포넌트 간의 통신이나 데이터 전달을 좀 더 유기적으로 관리할 필요성이 생깁니다. 상태 관리란? 상태..
-
Vue.js - 하위 컴포넌트에서 상위 컴포넌트 통신 ($emit)IT/Vue.js 2020. 7. 24. 11:09
전에 포스팅들은 부모에서 자식으로 데이터를 전달하는 것을 알아봤습니다. 때로는 하위 컴포넌트에서 상위 컴포넌트로 데이터를 보내거나 메소드를 호출하기도 합니다. 하위 컴포넌트로 상위 컴포넌트의 이벤트를 발생하여 메소드를 호출해보도록 하겠습니다. 이벤트 발생과 수신은 $emit과 v-on 속성을 사용합니다. 1. 이벤트 발생 코드 형식 하위 컴포넌트의 메소드에 아래와 같이 코드를 작성합니다. // 하위 컴포넌트의 내용 this.$emit('이벤트 명'); 그리고 나서 해당 이벤트를 수신하기 위해 상위 컴포넌트의 HTML을 아래와 같이 구현합니다. 그럼 예시로 구현을 해보겠습니다. 2. 하위 컴포넌트 작성 (ChildEmit.vue) 하위 컴포넌트는 'Emit 클릭 !' 이라는 버튼을 클릭하면 sendEven..
-
Vue.js - 컴포넌트 통신 동적 props 사용하기 (Daynamic props)IT/Vue.js 2020. 7. 23. 11:15
Vue를 사용할 때 부모 컴포넌트에 있는 데이터를 자식 컴포넌트에서 필요로 할 때가 있습니다. props 옵션을 사용하면 부모 컴포넌트에 있는 데이터를 자식 컴포넌트로 보낼 수 있습니다. 저번 포스팅에는 정적 porps에 대해서 다루었는데요. https://kshman94.tistory.com/125 Vue.js - 상위에서 하위 컴포넌트 데이터 전달 방법 (props) 컴포넌트간 통신 뷰의 경우는 컴포넌트로 화면을 구성하기 때문에 같은 웹페이지라도 데이터를 공유할 수 없는 경우가 많으며, 각 컴포넌트들의 scope(유효범위)가 독립적이기 때문에 다른 컴포� kshman94.tistory.com 항상 정적인 데이터만 자식에게 넘겨주시는 것이 아니므로, 동적으로 변하는 data를 자식에게 넘겨줘야 할 경우..
-
Vue.js - 상위에서 하위 컴포넌트 데이터 전달 방법 (props)IT/Vue.js 2020. 7. 22. 15:03
컴포넌트간 통신 뷰의 경우는 컴포넌트로 화면을 구성하기 때문에 같은 웹페이지라도 데이터를 공유할 수 없는 경우가 많으며, 각 컴포넌트들의 scope(유효범위)가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수가 없습니다. 상/하위 컴포넌트 관계 상위(Parent) 컴포넌트에서 props라는 속성으로 전달하게 됩니다. props : 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달할 때 사용하는 속성입니다. - 하위 컴포넌트의 속성에 정의 해야 합니다. - 상위 컴포넌트의 HTML 코드에 정의된 child-component 태그에 v-bind 속성을 정의 해야 합니다. 1. 하위 컴포넌트 작성 (ChildAndChild.vue) 상위 컴포넌트의 send 속성을 하위 컴포넌트에 props로 데이터를..