현대 웹 애플리케이션은 점점 더 복잡해지고 있으며, 사용자 경험을 향상시키기 위해 데이터와 상태를 효과적으로 관리하는 것이 필수적입니다. 상태 관리와 컴포넌트 간 데이터 공유는 이런 복잡성을 해결하는 핵심적인 개념입니다.
myBlog의 상태 관리를 위하여 vuex를 사용합니다.
Vuex는 Vue.js 애플리케이션에서 상태(state) 관리를 위한 공식 라이브러리입니다.
앱 상태 관리의 중요성
상태란?
애플리케이션의 현재 상태를 나타내는 데이터입니다.
예: 로그인 여부, 사용자 프로필, 글 목록, 필터 옵션 등.
상태 관리의 필요성
1. 애플리케이션의 일관성 유지:
애플리케이션의 상태가 여러 컴포넌트에서 사용될 경우, 상태 관리 없이 각각 독립적으로 상태를 업데이트하면 일관성이 깨질 수 있습니다.
예: 장바구니에 아이템을 추가했지만 UI에 즉시 반영되지 않는 경우.
2. 코드 가독성 및 유지보수성 향상:
상태가 여러 컴포넌트에 분산되어 있으면 추적하기 어렵습니다. 중앙 집중식 상태 관리 도구를 사용하면 상태를 한곳에서 관리하여 유지보수성을 높일 수 있습니다.
3. 상태 변화 추적 가능:
상태 관리 도구를 사용하면 상태 변화의 원인을 쉽게 파악할 수 있습니다. 이는 디버깅과 테스트를 용이하게 만듭니다.
4. 비즈니스 로직 분리:
상태 관리 도구를 사용하면 비즈니스 로직(상태 변경 관련 코드)과 UI 로직을 분리하여 코드의 역할을 명확히 할 수 있습니다.
Vuex
myBlog의 상태 관리를 위하여 vuex를 사용합니다.
Vuex란?
Vuex는 Vue.js 애플리케이션에서 상태(state) 관리를 위한 공식 라이브러리입니다.
컴포넌트 간에 데이터를 효율적으로 공유하고 관리하기 위해 설계된 중앙 집중식 저장소(store) 를 제공합니다.
Vuex는 특히 대규모 애플리케이션에서 컴포넌트 간 데이터 흐름을 쉽게 관리할 수 있도록 돕습니다.
Vuex의 핵심 개념
State
애플리케이션의 공유 데이터(상태)를 저장합니다.
모든 컴포넌트가 이 데이터를 공유하며, 중앙에서 관리됩니다.
Getters
State에서 데이터를 가져오는 데 사용됩니다.
상태를 계산하거나 가공된 데이터를 반환할 수 있습니다.
Mutations
State를 변경하는 유일한 방법입니다.
동기적으로 실행되며, 특정 규칙에 따라 데이터를 수정합니다.
Actions
비동기 작업(예: API 호출)이나 복잡한 로직을 처리한 후 Mutations를 호출합니다.
Modules
대규모 애플리케이션에서 상태를 분리하여 구조화하는 방법입니다.
Vuex의 구조
Vuex는 아래와 같은 구조로 동작합니다:
- State: 중앙에서 관리되는 데이터
- Getters: State를 기반으로 가공된 데이터를 가져옴
- Mutations: State를 변경
- Actions: 비동기 로직 실행 후 Mutations 호출
- Modules: 상태를 모듈화하여 관리
myBlog의 상태 관리
// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import auth from './modules/auth';
import post from './modules/post';
import fcm from './modules/fcm';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
auth,
post,
fcm
}
});auth module
// src/store/modules/auth.js
import { auth } from "@/firebase";
import { createUserWithEmailAndPassword } from "firebase/auth";
const state = {
user: null, // 현재 로그인한 회원
};
const mutations = {
setUser(state, user) {
state.user = user;
},
};
const actions = {
// -- 계정 만들기
async register({ commit }, { email, password }) {
try {
const userCredential = await createUserWithEmailAndPassword(auth, email, password);
// 로그인 설정
commit("setUser", userCredential.user);
} catch (error) {
alert("register : " + error.message);
commit("setUser", null);
}
},
};
const getters = {
};
export default {
namespaced: true,
state,
mutations,
actions,
getters
};post.module
// src/store/modules/post.js
const state = {
};
const mutations = {
};
const actions = {
};
const getters = {
};
export default {
namespaced: true,
state,
mutations,
actions,
getters
};fcm module
// src/store/modules/fcm.js
const state = {
};
const mutations = {
};
const actions = {
};
const getters = {
};
export default {
namespaced: true,
state,
mutations,
actions,
getters
};