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

✅ 1. 백엔드 (vue2-megagong-api)

📄 data/stickyPanel.json

[
  {
    "img": "https://img.megagong.net/m/2025/0801_sticky/sticky1.png",
    "link": "https://megagong.net/event/sticky1"
  },
  {
    "img": "https://img.megagong.net/m/2025/0801_sticky/sticky2.png",
    "link": "https://megagong.net/event/sticky2"
  }
]

📄 routes/stickyPanel.js

const express = require("express");
const router = express.Router();
const fs = require("fs");
const path = require("path");

router.get("/", (req, res) => {
  const filePath = path.join(__dirname, "../data/stickyPanel.json");
  fs.readFile(filePath, "utf8", (err, data) => {
    if (err) return res.status(500).send("Error loading sticky panel");
    res.json(JSON.parse(data));
  });
});

module.exports = router;

📄 server.js 등록

const stickyPanelRoutes = require("./routes/stickyPanel");
app.use("/api/sticky-panel", stickyPanelRoutes);

✅ 2. 프론트엔드 (vue2-megagong)

📁 store/modules/stickyPanel.js

import axios from "@/libs/axios";

export default {
  namespaced: true,
  state: () => ({
    items: [],
  }),
  mutations: {
    SET_ITEMS(state, payload) {
      state.items = payload;
    },
  },
  actions: {
    async fetchStickyPanel({ commit }) {
      try {
        const res = await axios.get("/api/sticky-panel");
        commit("SET_ITEMS", res.data);
      } catch (err) {
        console.error("스티키 패널 데이터 로딩 실패", err);
      }
    },
  },
};

📄 store/index.js에 등록

import Vue from "vue";
import Vuex from "vuex";
import stickyPanel from "./modules/stickyPanel";

Vue.use(Vuex);

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

✅ 3. 컴포넌트 StickyPanel.vue 리팩토링

<template>
  <div class="sticky-panel">
    <a
      v-for="(item, i) in stickyItems"
      :key="i"
      :href="item.link"
      target="_blank"
      rel="noopener noreferrer"
    >
      <img :src="item.img" :alt="`스티키 배너 ${i + 1}`" />
    </a>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "StickyPanel",
  computed: {
    ...mapState("stickyPanel", ["items"]),
    stickyItems() {
      return this.items;
    },
  },
  created() {
    this.$store.dispatch("stickyPanel/fetchStickyPanel");
  },
};
</script>

<style scoped>
.sticky-panel {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sticky-panel img {
  width: 100%;
  border-radius: 8px;
}
</style>

FE 저장소

GitHub - heroyooi/vue2-megagong at ch9_resolve

BE 저장소

GitHub - heroyooi/vue2-megagong at ch9_resolve