🧩 Vue 2로 배우는 프론트엔드 기초

🎯 학습 목표

• 기존 Vuex store를 auth, theme 모듈로 나눈다
• 각 모듈에서 state, mutations, actions, getters를 독립적으로 관리한다
• 모듈 구조를 통해 확장성과 유지보수성을 높인다

✅ 1단계: 디렉토리 구조 만들기

src/
└── store/
    ├── index.js       ← 루트 스토어
    ├── modules/
    │   ├── auth.js     ← 로그인/사용자 관련 상태
    │   └── theme.js    ← 다크모드 관련 상태

✅ 2단계: auth.js 모듈 생성

// store/modules/auth.js
import { isTokenExpired } from '@/utils/jwt';

const state = {
  isLoggedIn: false,
  username: localStorage.getItem('username') || '',
};

const mutations = {
  login(state, token) {
    localStorage.setItem('token', token);
    state.isLoggedIn = true;
  },
  setUsername(state, name) {
    state.username = name;
    localStorage.setItem('username', name);
  },
  logout(state) {
    localStorage.removeItem('token');
    localStorage.removeItem('username');
    state.isLoggedIn = false;
    state.username = '';
  },
  syncLoginState(state) {
    const token = localStorage.getItem('token');
    const name = localStorage.getItem('username');
    if (!token || isTokenExpired(token)) {
      localStorage.removeItem('token');
      localStorage.removeItem('username');
      state.isLoggedIn = false;
      state.username = '';
    } else {
      state.isLoggedIn = true;
      state.username = name || '';
    }
  },
};

export default {
  namespaced: true,
  state,
  mutations,
};

✅ 3단계: theme.js 모듈 생성

// store/modules/theme.js

const state = {
  isDark: localStorage.getItem('theme') === 'dark',
};

const mutations = {
  toggleDark(state) {
    state.isDark = !state.isDark;
    localStorage.setItem('theme', state.isDark ? 'dark' : 'light');
  },
};

export default {
  namespaced: true,
  state,
  mutations,
};

✅ 4단계: 루트 스토어 index.js에서 모듈 등록

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

import auth from './modules/auth';
import theme from './modules/theme';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    auth,
    theme,
  },
});

✅ 5단계: 컴포넌트에서 사용하는 방식 변경

모듈을 namespaced: true로 등록했기 때문에 접근 방식이 바뀝니다.

App.vue

import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState('auth', ['isLoggedIn', 'username']),
    ...mapState('theme', ['isDark']),
  },
  created() {
    this.syncLoginState();
  },
  methods: {
    ...mapMutations('auth', ['logout', 'syncLoginState']),
    ...mapMutations('theme', ['toggleDark']),
    handleLogout() {
      this.logout();
      this.$router.push('/login');
    },
  },
};

🔍 모듈 이름 ('auth', 'theme')을 첫 번째 인자로 반드시 넣어야 합니다!

🔧 1. data() 제거

data() {
  return {}; // 또는 생략
},

🔧 2. watch: $route() 제거

Vuex가 전역 상태를 관리하므로 route 변경 시 별도로 localStorage에서 읽어올 필요 없음.

🔁 3. 최종 리팩토링된 스크립트 부분

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  computed: {
    ...mapState('auth', ['isLoggedIn', 'username']),
    ...mapState('theme', ['isDark']),
  },
  created() {
    this.syncLoginState(); // 새로고침 시 로그인 상태 복원
  },
  methods: {
    ...mapMutations('auth', ['logout', 'syncLoginState']),
    ...mapMutations('theme', ['toggleDark']),
    handleLogout() {
      this.logout();
      this.$router.push('/login');
    },
  },
};
</script>

✅ 6단계: Login.vue도 수정

this.$store.commit('auth/login', res.data.token);
this.$store.commit('auth/setUsername', res.data.username);

✅ 7단계: router.js 수정

import store from './store';

// 기존과 동일

router.beforeEach((to, from, next) => {
  store.commit('auth/syncLoginState');

  const isAuthRequired = to.matched.some((record) => record.meta.requiresAuth);
  const isLoggedIn = store.state.auth.isLoggedIn;

  if (isAuthRequired && !isLoggedIn) {
    if (to.path !== '/login') {
      next('/login');
    } else {
      next();
    }
  } else if ((to.path === '/login' || to.path === '/register') && isLoggedIn) {
    if (from.path !== '/todos') {
      next('/todos');
    } else {
      next(false); // 현재 페이지에서 stay
    }
  } else {
    next(); // 정상 라우팅
  }
});

• router.beforeEach에서 정확한 조건 분기 + next()를 중복 호출하지 않도록 조정

📦 요약

이 강의에서는 Vuex 스토어를 auth, theme 모듈로 나누어 전역 상태를 역할별로 분리했다. 모듈화를 통해 더 구조적이고 유지보수에 강한 상태 관리 체계를 구축했다.

FE 저장소

GitHub - heroyooi/vue2-app at ch21