vueX
-
[Nuxt.js] Nuxt 학습기 - (4) Store, asyncData & fetchFront-End(Web)/Vue 2021. 11. 30. 02:28
Nuxt 학습기의 4번째 시리즈는 이전에 정리하지 못한 Nuxt.js의 주요기능들이다. Nuxt.js 역시 Vuex Store를 사용할 수 있으며, SSR의 핵심이라 할 수 있는 서버에서의 최초 비동기 요청 메서드인 asyncData, fetch 등을 학습해보고자 한다. 📗 Store (Vuex) Nuxt.js 역시 Vue와 같이 Vuex Store 전역 저장소를 패키지에서 기본적으로 제공한다. 특정 규모 이상의 프로젝트는 보통 전역상태가 필요하며, 세션 정보나 복수의 페이지에서 필요하는 공통 데이터를 저장하는 용도로 사용된다. Vuex는 기본적으로 비활성화 상태이다. 그렇기에, 프로젝트 구조에는 /store 디렉토리가 존재하나 이는 빈 폴더로 존재하고 있다. 여기에 index.js 파일을 생성하면 Vu..
-
[Vue.js] Vuex - (3) Store 모듈화Front-End(Web)/Vue 2021. 6. 13. 23:51
이전에 진행한 프로젝트는 Vuex Store에 state, getter, mutations 들이 일괄적으로 들어가는 형태였다. 아무래도 프로젝트의 규모가 커지면, 당연히 Store 자체의 코드량도 많아지고 유지보수도 힘들어질 것이다. 이러한 부분을 ES6 import/export 문법을 통해 좀 더 용이하게 분리하는 모듈화에 대해 간단하게 정리해보았다. (개념보다는 Vuex의 코딩기법의 내용이기에 분량이 많지 않다.) * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Getters, Mutations 분리 공식문서에서는, Vue.js 애플리케이션의 복잡한 컴포넌트들을 관리하는 상태관리 패턴 + 라이브러리로 정의한다. 컴포넌트들에 대한 중앙 집중식 저장소..
-
[Vue.js] Vuex - (2) Helper 함수Front-End(Web)/Vue 2021. 6. 11. 16:48
이번에는 Vuex에서 Store의 상태, getter, 메서드들을 좀 더 용이하게 사용하는 Helper 함수에 대해 알아보겠다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Helper 함수란? Vuex의 내장함수로, Store의 아래 네 가지 속성을 간편하게 코딩하는 방법이다. (Synthetic Sugar에 해당) state => mapState getters => mapGetters mutations => mapMutations actions => mapActions - 사용법 // App.vue import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' export defau..
-
[Vue.js] Vuex - (1) Vuex 기본Front-End(Web)/Vue 2021. 6. 10. 01:28
드디어, Vuex 라고 하는 Vue.js의 상태관리 라이브러리를 학습하는 단계에 돌입했다! 다행인 점은, Context나 Redux를 사용해 보았기에 Vuex를 처음 접하는데 위화감은 덜 할 것 같다. 심지어, Redux의 Flux 패턴과 어느 정도 유사하면서도, 좀 더 간소화된 절차를 가진다는 것으로 선임 개발자님께 대략적으로 들었다. Redux와는 또 다른, Vuex만의 특징과 장점은 어느 것이 있을지 한 번 학습하면서 정리해보겠다! (분량이 길 시 포스팅 분리하겠다.) * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vuex 란? 공식문서에서는, Vue.js 애플리케이션의 복잡한 컴포넌트들을 관리하는 상태관리 패턴 + 라이브러리로 정의한다. 컴포..