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

🎯 학습 목표

• App.vue에 있던 isDark 상태를 Vuex 또는 독립 스토어 파일로 분리
• 모든 컴포넌트에서 전역적으로 다크모드 상태를 공유하고 제어할 수 있도록 구성

✅ 1. 전역 상태 관리 방식 선택

Vue 2에서는 두 가지 방식이 있습니다:

✅ 먼저 간단한 store.js 모듈 방식으로 진행하겠습니다

📁 src/store.js 생성

import Vue from 'vue';

export const store = Vue.observable({
  isDark: localStorage.getItem('theme') === 'dark',
});

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

✅ Vue.observable()은 Vue 2에서 반응형 상태를 만들기 위한 방법입니다.

✅ 2. App.vue 수정

<script>
import { store, mutations } from './store';

export default {
  data() {
    return {
      isLoggedIn: !!localStorage.getItem('token'),
    };
  },
  computed: {
    isDark() {
      return store.isDark;
    },
  },
  methods: {
    toggleDark() {
      mutations.toggleTheme();
    },
    logout() {
      localStorage.removeItem('token');
      this.isLoggedIn = false;
      this.$router.push('/login');
    },
  },
  watch: {
    // 로그인 성공 시에도 갱신될 수 있도록 localStorage 감시
    $route() {
      this.isLoggedIn = !!localStorage.getItem('token');
    },
  },
};
</script>

✅ 이제 data() 대신 store.isDark를 computed로 연결해서 반응형 동작하도록 변경합니다.

✅ 3. 다크모드 클래스를 사용하는 기존 템플릿은 그대로 유지

<div :class="['app-container', { dark: isDark }]">

기존 클래스 바인딩도 그대로 작동합니다.

✅ 4. 다른 컴포넌트에서도 사용 가능

지금은 예시가 없지만 다른 컴포넌트에서도 다크 모드를 사용하게 된다면 아래처럼 가져와서 사용하면 됩니다:

import { store } from '../store';

computed: {
  isDark() {
    return store.isDark;
  },
},

📦 요약

기존 App.vue의 isDark 상태를 전역 store.js로 분리하고, 컴포넌트 어디서든 다크모드 상태를 공유할 수 있도록 구성했다. 이를 통해 앱 전체의 테마 설정을 효율적으로 관리할 수 있게 되었습니다.

FE 저장소

GitHub - heroyooi/vue2-app at ch17