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

🎯 목표

• 백엔드 서버를 vue2-megagong-api 폴더에 따로 구성
• JSON 파일을 통한 데이터 저장
• 프론트(Vue 2)에서 Axios로 API 요청하여 메인 카드 데이터 불러오기

📁 폴더 구조

vue2-megagong/
  └── src/
      └── components/
      └── views/
      └── App.vue
      └── main.js

vue2-megagong-api/
  ├── data/
  │   └── mainCards.json
  ├── server.js
  ├── package.json

🛠️ 1. vue2-megagong-api Express 백엔드 서버 만들기

📦 vue2-megagong-api/package.json

{
  "name": "vue2-megagong-api",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "dev": "nodemon server.js"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^5.1.0"
  },
  "devDependencies": {
    "nodemon": "^3.1.10"
  }
}

혹은 아래처럼 명령어로 설치하시고 scripts의 dev 명령어(nodemon server.js)를 따로 작성하셔도 됩니다.

cd vue2-megagong-api
npm init -y
npm i express cors
npm i -D nodemon

저장소로 관리하시는 분들을 위해서 다음과 같이 파일을 생성하고 작성해줍니다.

.gitignore

node_modules

📄 vue2-megagong-api/data/mainSlides.json

[
  {
    "img": "https://img.megagong.net/m/2025/0724_pass/gong/pass_gong.png",
    "alt": "배너1"
  },
  {
    "img": "https://img.megagong.net/m/2025/0724_pass/tech/pass_tech.png",
    "alt": "배너2"
  },
  {
    "img": "https://img.megagong.net/m/2025/0724_pass/army/pass_army.png",
    "alt": "배너3"
  }
]

📄 vue2-megagong-api/server.js

const express = require('express');
const cors = require('cors');
const fs = require('fs');
const app = express();
const PORT = 4000;

app.use(cors());

app.get('/api/main-slides', (req, res) => {
  const data = fs.readFileSync('./data/mainSlides.json', 'utf-8');
  res.json(JSON.parse(data));
});

app.listen(PORT, () => {
  console.log(`🚀 API 서버 실행 중: http://localhost:${PORT}`);
});

🌐 2. vue2-megagong 프론트엔드에서 Axios로 API 요청

📦 설치

npm install axios

📄 src/components/MainSlide.vue

<template>
  <div class="main-slide">
    <swiper :options="swiperOption" class="swiper-container">
      <swiper-slide v-for="(item, i) in slides" :key="i">
        <img :src="item.img" :alt="item.alt" class="slide-img" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "MainSlide",
  data() {
    return {
      // slides: [
      //   { img: "https://img.megagong.net/m/2025/0724_pass/gong/pass_gong.png", alt: "배너1" },
      //   { img: "https://img.megagong.net/m/2025/0724_pass/tech/pass_tech.png", alt: "배너2" },
      //   { img: "https://img.megagong.net/m/2025/0724_pass/army/pass_army.png", alt: "배너3" },
      // ],
      slides: [],
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  async created() {
    try {
      const res = await axios.get("http://localhost:4000/api/main-slides");
      this.slides = res.data;
    } catch (error) {
      console.error("메인 슬라이드 데이터를 불러오지 못했습니다", error);
    }
  },
};
</script>

<style>
.main-slide {
  width: 790px;
}
</style>

✅ 실행 결과

1. vue2-megagong-api 서버를 실행하여 정상적으로 JSON 데이터를 제공해보세요.

cd vue2-megagong-api
npm run dev

1. 브라우저에서 http://localhost:4000/api/main-cards 접속해 JSON 확인

   

2. vue2-megagong에서 카드가 정상적으로 렌더링 되는지 확인

FE 저장소

GitHub - heroyooi/vue2-megagong at ch8

BE 저장소

GitHub - heroyooi/vue2-megagong-api at ch8

🎯 다음 과제

아래 컴포넌트에도 API를 추가해보세요!

1. src\components\MainTabs.vue(넥스트공무원 1위 강사진), src\components\TeacherPromoSection.vue(지금 주목할 선생님 기획전)
2. axios 요청을 http://localhost:4000/api/promo-list 주소가 포함된 방식이 아닌 /api/promo-list 방식으로 처리