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

🧩 강의 목표

• 메인 페이지에 사용하는 데이터를 모두 Vuex에서 중앙 관리하도록 리팩토링
• 기존 axios 요청 → Vuex에서 fetch → 컴포넌트에서는 mapState 및 mapActions으로 사용

📁 1. Vuex 설치 및 store 구성

① 설치

npm install vuex

② src/store/index.js 생성

import Vue from 'vue';
import Vuex from 'vuex';
import main from './modules/main';

Vue.use(Vuex);

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

③ src/store/modules/main.js 생성

import axios from '@/libs/axios';

export default {
  namespaced: true,
  state: {
    mainSlides: [],
    mainTabs: [],
    promoList: [],
  },
  mutations: {
    setMainSlides(state, slides) {
      state.mainSlides = slides;
    },
    setMainTabs(state, tabs) {
      state.mainTabs = tabs;
    },
    setPromoList(state, list) {
      state.promoList = list;
    },
  },
  actions: {
    async fetchMainSlides({ commit }) {
      const res = await axios.get('/api/main-slides');
      commit('setMainSlides', res.data);
    },
    async fetchMainTabs({ commit }) {
      const res = await axios.get('/api/main-tabs');
      commit('setMainTabs', res.data);
    },
    async fetchPromoList({ commit }) {
      const res = await axios.get('/api/promo-list');
      commit('setPromoList', res.data);
    },
  },
};

🛠 2. main.js에 store 등록

이미 되어있는 경우 패스

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/css/swiper.css"; // swiper 5용 css

import "./assets/base.scss";

Vue.use(VueAwesomeSwiper);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

🧩 3. MainSlide.vue에서 Vuex 연동

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: "MainSlide",
  computed: {
    ...mapState('main', ['mainSlides']),
  },
  created() {
    this.fetchMainSlides();
  },
  methods: {
    ...mapActions('main', ['fetchMainSlides']),
  },
};
</script>

🧩 4. MainTabs.vue에서 Vuex 연동

<template>
  <div class="main-tabs">
    <h3 class="title">넥스트공무원 1위 강사진</h3>
    <div class="tab-slide">
      <div class="tabs">
        <button
          v-for="(tab, idx) in mainTabs"
          :key="idx"
          :class="{ active: currentTab === idx }"
          @click="changeTab(idx)"
        >
          {{ tab.label }}
        </button>
      </div>

      <TabSlide
        v-if="mounted && mainTabs.length"
        :key="renderKey"
        :slides="mainTabs[currentTab].slides"
      />
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import TabSlide from "./TabSlide.vue";

export default {
  components: { TabSlide },
  data() {
    return {
      currentTab: 0,
      renderKey: 0,
      mounted: true,
    };
  },
  computed: {
    ...mapState('main', ['mainTabs']),
  },
  created() {
    this.fetchMainTabs();
  },
  methods: {
    ...mapActions('main', ['fetchMainTabs']),
    changeTab(index) {
      this.currentTab = index;
      this.mounted = false;
      this.$nextTick(() => {
        this.renderKey++;
        this.mounted = true;
      });
    },
  },

};
</script>

<style scoped lang="scss">
.main-tabs {
  width: 790px;
  .title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
  }

  .tab-slide {
    .tabs {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;

      button {
        background: #f2f2f2;
        border: none;
        padding: 8px 16px;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        color: #333;

        &.active {
          background: #0055ff;
          color: #fff;
        }
      }
    }
  }
}
</style>

🧩 5. TeacherPromoSection.vue에서 Vuex 연동

<template>
  <section class="teacher-promo-section">
    <h3 class="section-title">지금 주목할 선생님 기획전</h3>
    <div class="grid">
      <TeacherPromoCard v-for="(card, i) in promoList" :key="i" v-bind="card" />
    </div>
  </section>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import TeacherPromoCard from "./TeacherPromoCard.vue";

export default {
  components: { TeacherPromoCard },
  computed: {
    ...mapState('main', ['promoList']),
  },
  created() {
    this.fetchPromoList();
  },
  methods: {
    ...mapActions('main', ['fetchPromoList']),
  },
};
</script>

<style scoped>
.teacher-promo-section {
  padding: 0 20px;
  width: 790px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 24px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
</style>

GitHub - heroyooi/vue2-megagong at ch9

🎯 과제

• StickyPanel.vue 컴포넌트의 배너 데이터를 JSON 파일에서 가져와 Express API → Axios → Vuex로 상태 관리 구조를 구현하세요.
• 실제 출력되는 이미지 2~3개로 테스트하고, 서버/프론트 둘 다 정상 작동하는지 확인하세요.