[Spring Boot +Vue.js] 게시판 만들기 3 - 화면 구상하기 (+라우터)

 

 

 

 

📑 화면 구상 하기

 

header, footer는 한 번 생성해두면 크게 변할일이 없기 때문에 따로 컴포넌트로 만들어서 App.vue에 고정으로 박아둔다. 

 

 

한 페이지에 다른 컴포넌트들을 보여주는 방법은 다음과 같다.

 

🎈 1. import로 Header와 Footer 페이지를 받아온다.

🎈 2. components 안에 import해올 때 지정한 컴포넌트 명칭을 선언해준다. (Header : Header , Header 둘다 가능)

🎈 3. 사용하고 싶은 곳에 컴포넌트 이름으로 태그를 써서 사용한다. <Footer> </Footer> 

 

 

<App.vue>

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <Header></Header>
  <router-view></router-view>
  <Footer></Footer>
  
</template>

<script>

import Header from './components/PageHeader.vue'
import Footer from './components/PageFooter.vue'
export default {
  name: 'App',
  components: {
    Header,
    Footer,

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

 

 

src/components/ 아래 PageHeader와 PageFooter.vue 파일을 생성한다. 

 

 

<PageHeader.vue>

<template>

  <div id="nav">
  <b-navbar toggleable type="light" variant="light">
    <b-navbar-brand href="#">Board</b-navbar-brand>

    <b-navbar-toggle target="navbar-toggle-collapse">
      <template #default="{ expanded }">
        <b-icon v-if="expanded" icon="chevron-bar-up"></b-icon>
        <b-icon v-else icon="chevron-bar-down"></b-icon>
      </template>
    </b-navbar-toggle>

    <b-collapse id="navbar-toggle-collapse" is-nav>
      <b-navbar-nav class="ml-auto">
        <b-nav-item><router-link to="/" >Home></router-link></b-nav-item>
        <b-nav-item><router-link to="/board/list" >Board</router-link></b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
  </div>
  <hr/>



</template>

<script>
export default {
  name: "PageHeader.vue"
}
</script>

<style scoped>

</style>

 

 

<PageFooter.vue>

<template>
  <hr/>
  This is Main Footer
</template>

<script>
export default {
  name: "PageFooter.vue"
}
</script>

<style scoped>

</style>

 

 

 

 

📑 라우터로 화면 이동하기 

 

라우팅이란, 웹 페이지 간의 이동 방법을 말한다. 싱글 페이지 애플리케이션(SPA)에서 자주 사용하는 방식이다. 여기서 뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다. 하나의 화면에서 뷰로 만든 여러 페이지 간에 자유로운 이동이 가능하다. 

 

라우터를 설치하려면 설치하고자하는 파일 경로에 다음 명령어를 입력한다. 

npm install vue-router@4

 

 

라우터 사용 방법이 궁금하다면 아래 링크 참고! 

 

https://wonisdaily.tistory.com/203

[Vue.js] vue-router란 ? 기본 개념과 설치 방법

 

 

 

---

 

설치한 후 src/router 폴더를 생성하고 index.js 파일을 생성해 아래 소스를 추가한다. 이름은 원하는대로 지으면 된다 router.js로 지어도 된다~ 

 

아래의 코드는 라우터를 사용하는 템플릿 같은 것이다. const routes안에 이동하고자 하는 경로만 적어주면 된다. 

Home, List를 import 해온 다음에 만약 path가 localhost:8082/board/list 이런 식으로 들어온다면 component 이름이 List인 컴포넌트로 이동해줘 이런 의미이다. 

 

import { createWebHistory, createRouter } from "vue-router";
//경로가 아닌 라이브러리 이름이 들어가면 라이브러리에서 가지고 오겠다.
import Home from '/src/view/Home.vue'
import List from '/src/view/board/List.vue'

const routes = [
    {
        path: "/",
        component: Home,
    },
    {
        path:"/board/list",
        component: List,
    }

];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

 

 

src/views 폴더를 생성하고 PageHome.vue와 src/views/board에  List.vue를 생성해준다. 

 

 

<Home.vue>

<template>
  This is Main HomePage
</template>

<script>
export default {
  name: "Home.vue"
}
</script>

<style scoped>

</style>

 

 

<List.vue>

<template>
This is boardList
</template>

<script>
export default {
  name: "List.vue"
}
</script>

<style scoped>

</style>

 

 

마지막으로 src/main.js에서 vue-router를 사용하도록 아래 소스로 변경한다. 

 

import { createApp } from 'vue'
import App from './App.vue'
import BootstrapVue3 from 'bootstrap-vue-3'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
import router from './router'

const app = createApp(App)
app.use(BootstrapVue3)
app.use(router).mount('#app')

 

 

 

/ 경로로 들어왔을 때는 Main Homepage

 

 

 

/board/list로 들어왔을 때는 board List 페이지가 같은 자리에 뜨는 걸 확인할 수 있다. 

 

 

frontend 프로젝트 구성을 보면 다음과 같다. 

 

 

 

 

📑 multi-word 에러 

 

npm run serve를 하려고 하니 다음과 같은 에러가 난다. 

Component name "List.vue" should always be multi-word vue/multi-word-component-names

 

컴포넌트 이름을 지정할 때 2글자 이상으로 지정해야 된다는 의미이다. 

 

 

 

 

이럴때는 package.json 파일의 "rules" 속성에 다음과 같이 multi-word-component를 off로 설정해주면 된다. 

 

 

"rules": {
  "vue/multi-word-component-names": "off"
}

 

 

 

 

 

참고 : https://onethejay.tistory.com/65