Modules : 자바스크립트 모듈화 방법
-자바스크립트 모듈 로더 라이브러리 (AMD, Commons JS)기능을 js 언어 자체에서 지원
-호출되기 전까지는 코드 실행과 동작을 하지 않는 특징이 있음
* Vuex : 상태 관리 라이브러리
개요
-복잡한 애플리케이션의 컴포넌트들을 효율적으로 관리하는 Vuex라이브러리 소개
-Vuex 라이브러리의 등장 배경인 Flux패턴 소개
-Vuex 라이브러리의 주요 속성인 state, gatters, mutations, actions 학습
-Vuex를 더 쉽게 코딩할 수 있는 방법인 Helper기능 소개
-Vuex로 프로젝트를 구조화하는 방법과 모듈 구조화 방법 소개
목차
-Vuex 라이브러리 소개
-Flux 패턴 소개
-Vuex 컨셉과 구조
-Vuex 설치 및 시작하기
-Vuex 기술 요소 (state, getter, mutations, actions)
-Vuex Helpers
-Vuex로 프로젝트 구조화 및 모듈화 하는 방법
- Vuex란?
1. 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리
2. React의 Flux패턴에서 기인함
3. Vue.js 중고급 개발자로 성장하기 위한 필수 관문
-Flux란?
: MVC패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴
[Undirectional data flow] 모든 데이터의 방향이 한방향, 단방향으로 흐름
Action -> Dispatcher -> Model -> View
1. action : 화면에서 발생하는 이벤트 또는 사용자의 입력
2. dispatcher : 데이터를 변경하는 방법, 메서드 / 모델을 바꾸기 위한 역할
3. model : 화면에 표시할 데이터
4. view : 사용자에게 비춰지는 화면
페이스북 예시)
채팅창, 상태 관리바, 메인화면의 여러가지 뷰 존재
한개의 뷰가 바뀌었을 때 다른 뷰에서 데이터를 추적하기 어려움
전체적인 앱의 흐름을 추적하기 어려움
MVC패턴의 한계점이라고 볼 수 있음 그래서 flux를 만듬
-MVC패턴의 문제점
1. 기능 추가 및 변경에 따라 생기는 문제점을 예측할 수 없음
2. 앱이 복잡해지면서 생기는 업데이트 루프
-Flux 패턴의 단방향 데이터 흐름
1. 데이터의 흐름이 여러 갈래로 나뉘지 않고 단방향으로만 처리
- Vuex가 왜 필요할까?
1. 복잡한 애플리케이션에서 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워진다
-이벤트 버스로 해결?
: 어디서 이벤트를 보냈는지 혹은 어디서 이벤트를 받았는지 알기 어려움
예시)
// Login.vue
eventBus.$emit('fetch', loginInfo);
// List.vue
eventBus.$on('display', data => this.displayOnScreen(data));
//chart.vue
eventBus..$emit('refreshData', chartData);
=> 컴포넌트 간 데이터 전달이 명시적이지 않음
-Vuex로 해결할 수 있는 문제
1. MVC패턴에서 발생하는 구조적 오류
2. 컴포넌트 간 데이터 전달 명시
3. 여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제
-Vuex 컨셉
1. state : 컴포넌트 간에 공유하는 데이터 data()
데이터는 여러 컴포넌트에서 사용하는 proportie
2. View : 데이터를 표시하는 화면 template
3. Action : 사용자의 입력에 따라 데이터를 변경하는 methods
-Vuex 구조
컴포넌트 -> 비동기 로직 -> 동기 로직 -> 상태
비동기 & 동기?
[참고]
'SPA > Vue' 카테고리의 다른 글
| Vuex - 헬퍼 함수 (0) | 2021.05.03 |
|---|---|
| Vuex- 주요 기술 요소 (0) | 2021.05.03 |
| ES6 for Vue.js - Enhanced Object Literals (향상된 객체 리터럴) (0) | 2021.04.30 |
| ES6 for Vue.js - 화살표 함수 (0) | 2021.04.30 |
| ES6 for Vue.js - const & let (0) | 2021.04.29 |
