[프로젝트 기본 세팅] 레이아웃 & 메뉴 적용 및 라우터 생성

프로젝트 기본 세팅

5. [프론트엔드] 레이아웃 & 메뉴 적용 및 라우터 생성"

---

레이아웃 적용 & 라우터 생성

레이아웃 & 메뉴 적용

레이아웃은 vuetify에서 제공해 주는 Pre Made Layouts 중 하나를 사용한다.

미리 만들어진 레이아웃 중 Baseline 레이아웃을 사용한다.

Baseline의 코드 팬에 있는 html과 js 코드를 App.vue 파일로 옮겨준다.

Baseline code pen 링크

<v-list-item link router :to="{ name: 'home' }">
              <v-list-item-action>
                <v-icon>mdi-home</v-icon>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title>Home</v-list-item-title>
              </v-list-item-content>
            </v-list-item>

위와 같은 방식으로 v-list 하단에 메뉴들도 추가해 준다.

현재는 홈, 로그인, 로그아웃, 프로필 메뉴를 만들었다.

<script>
import { mapState, mapMutations } from "vuex"
export default {
  name: "App",
  data: () => ({
    drawer: null
  }),
  computed: {
    ...mapState(["isLogin", "userInfo"])
  },
  methods: {
    ...mapMutations(["logout"])
  }
}
</script>

인증 확인 기능을 vuex로 구현할 것이므로 미리 추가해 준다.

적용된 화면

app-bar와 footer에 원하는 타이틀 및 설명을 적어주고 indigo 색상을 적용시켰다.

라우터 생성

import Vue from "vue"
import VueRouter from "vue-router"
import store from "@/store"

Vue.use(VueRouter)

const rejectAuthUser = (to, from, next) => {
  if (store.state.isLogin === true) {
    alert("이미 로그인 하였습니다.")
    next("/")
  } else {
    next()
  }
}

// const onlyAuthUser = (to, from, next) => {
//   if (store.state.isLogin === false) {
//     alert("로그인이 필요합니다.")
//     next("/login")
//   } else {
//     next()
//   }
// }

const routes = [
  {
    path: "/home",
    name: "home",
    component: () => import(/* webpackChunkName: "home" */ "../views/Home.vue")
  },
  {
    path: "/login",
    name: "login",
    beforeEnter: rejectAuthUser,
    component: () =>
      import(/* webpackChunkName: "login" */ "../views/Login.vue")
  },
  {
    path: "/register",
    name: "register",
    beforeEnter: rejectAuthUser,
    component: () =>
      import(/* webpackChunkName: "register" */ "../views/Register.vue")
  }
]

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
})

export default router

src 하위에 router라는 폴더를 만들고 다음과 같은 index.js 파일을 작성한다.

그 뒤 main.js에도 router를 등록해 준다.

const rejectAuthUser = (to, from, next) => {
  if (store.state.isLogin === true) {
    alert("이미 로그인 하였습니다.")
    next("/")
  } else {
    next()
  }
}

const onlyAuthUser = (to, from, next) => {
  if (store.state.isLogin === false) {
    alert("로그인이 필요합니다.")
    next("/login")
  } else {
    next()
  }
}

계정이 인증되었는지 안되었는지 확인을 하고 필터링을 해주기 위한 코드이다.

axios 설치

api와의 통신은 axios를 이용할 것이므로 명령어를 입력하여 axios를 설치해 준다.

$ npm install axios

axios도 main.js에 등록되어 있어야 사용 가능하다.

axios.defaults.baseURL = "http://localhost:5000/api"

불필요한 파일 삭제

logo.png, logo.svg 등의 vuetify나 vue.js의 기본 이미지 파일,

HelloWorld.vue와 같은 사용하지 않을 컴포넌트 파일들도 다 삭제해 준다.