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

🎯 목표

• 메가공 메인 페이지 재구현을 위한 Vue 프로젝트 환경 구성
• 폴더 구조 설계 및 기본 라우팅 준비
• 글로벌 스타일, 컴포넌트 분리 전략 수립

🗂 추천 폴더 구조

vue2-megagong/
├── public/
├── src/
│   ├── assets/          # 공통 스타일(css/scss), 이미지 등
│   ├── components/      # 공통 컴포넌트
│   ├── views/           # 페이지 단위 뷰 컴포넌트
│   ├── router/          # Vue Router 설정
│   ├── store/           # Vuex (추후 통합)
│   ├── utils/           # axios 등 유틸
│   ├── App.vue
│   └── main.js
├── .env
├── package.json
└── vue.config.js

📦 1. 프로젝트 생성

vue create vue2-megagong
# 선택 → Manually select features
# 선택 → Babel, Router, Vuex, CSS Pre-processors(Sass/SCSS) 등 포함
# 선택 → 2.x, Use history mode, Prettier, Lint on save

# 만약 현재 폴더에 프로젝트를 생성한다면 vue create .
cd vue2-megagong
npm run serve

🛠 2. 기본 설정 작업

1) vue.config.js (API 프록시)

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 백엔드 API 서버 주소
        changeOrigin: true,
      },
    },
  },
};

2) main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './assets/base.scss';

Vue.config.productionTip = false;

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

3) assets/base.scss

body {
  font-family: 'Noto Sans KR', sans-serif;
  margin: 0;
  background: #f8f8f8;
  color: #222;
}
a {
  color: inherit;
  text-decoration: none;
}

4) .prettierrc 파일 생성 (Prettier 설정)

루트 폴더에 .prettierrc 파일을 추가하고 다음 내용을 입력하세요:

{
  "singleQuote": false,
  "semi": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2
}

5) .eslintrc.js 파일 수정

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "plugin:prettier/recommended"],
  parserOptions: {
    parser: "@babel/eslint-parser",
  },
  rules: {
    "prettier/prettier": "off", // 추가
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

🧩 3. 초기 페이지 구성 (router/index.js)

import Vue from 'vue';
import Router from 'vue-router';
import HomePage from '@/views/HomePage.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: HomePage,
    },
  ],
});

✅ 4. 첫 View 컴포넌트 생성

<!-- src/views/HomePage.vue -->
<template>
  <div class="home">
    <h1>메가공 메인 페이지 시작</h1>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
};
</script>

저장소

GitHub - heroyooi/vue2-megagong at ch1