8.22 (목)
1. Router
1-1. Router 초기세팅
- npm install vue-router@4
- pages 만들기
- main.js에 createRouter설정
- App.vue import
1-2. 라우터를 이용하면?
👉 vue application을 새로 시작하는것이 아닌(새창을 띄우는것이 아닌) history(주소)만 변경하여 사용된다.
1-3. 라우터 초기세팅
main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'
import MainPage from './pages/MainPage.vue'
import AboutPage from './pages/AboutPage.vue'
const routeConfig = createRouter({
history:createWebHistory(),
routes:[
{path: "/", component: MainPage},
{path: "/about", component: AboutPage}
]
})
createApp(App).use(routeConfig).mount('#app')
APP.vue
<script setup>
import { RouterView } from 'vue-router';
import { RouterLink } from 'vue-router';
</script>
<template>
<RouterView></RouterView>
<div>
<span><RouterLink to="/">Main</RouterLink></span>
<span><RouterLink to="/about">About</RouterLink></span>
</div>
</template>
<style scoped>
</style>
2-1. 코드 스플리팅이란?
👉 /main /about /post 의 3가지 페이지가있을때 /main을 사용할때는 나머지 페이지를 사용할 필요가 없으므로 필요없는 페이지는 로딩하지 않아야 속도가 증가하므로 로딩하지 않도록 하는것.
2-2. 레이지 로딩이란?
👉 특정 부분(컴포넌트)을 필요할때만 로드하는 기술
ex) const Mainpage = () => import('../pages/MainPage.vue')
3. Route / Router
3-1. Route
👉 현재 URL(라우터)에 대한 정보를 담고 있는 객체.
👉 params : URL의 경로 매개변수 값을 포함하는 객체로 예를 들어, /user/:id와 같은 경로에서 id가 매개변수이다.
👉 query : URL의 쿼리 매개변수를 포함하는 객체입니다. 예를 들어, /search?query=vue에서 query는 쿼리 매개변수이다.
params 예시
<template>
<div>
<h1>Todo Read Page</h1>
</div>
</template>
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute()
console.log(route.params.mno)
</script>
<style lang="scss" scoped>
</style>👉 route는 현재 라우터에 대한 정보를 담고있는데, route속성중에 params속성중에 mno의 값을 가져온다.
👉 http://localhost:5173/todo/read/2 를 했을때 console창에 mno값인 2의 값이 나옴
query 예시
const route = useRoute() // 현재 라우터의 정보에 접근
onMounted (() => { // 마운트 되자마자 메소드가 실행된다.
const page = route.query.page || 1 // 현재 라우터에 대한 페이지를 page변수에 담는데, 페이지가 없으면 1페이지로 하고
loadPageData(page) // 페이지 값을 loadPageData 메소드에 넣는다
})
👉 해당 url이 http://localhost:5173/todo/list?page=1 이렇게 되어있다면, query스트링으로 가져오는 값은 'page=1' 을 가져온다. 고로 1을 가져온다.
3-2. Router
👉 라우터는 URL을 변경하거나, 라우터 간 페이지 이동 할 수있다.
👉 Router.push : 메서드를 사용하여 다른 페이지로 이동 또는 매개변수 추가 가능.
Router.push 예시
const handleClickPage = (pageNum) => { // 이것에 역할은, pageNum을 매개변수로 받는 이벤트 메소드의 기능이 있는데
router.push({query: {page:pageNum}})
}
👉 메소드가 실행되면 router.push를 통해서 현재 route의 속성중에 query라는 속성중에서 page라는 속성을 만들어서 pageNum의 매개변수를 넣는다.
👉 이곳의 page의 url을 업데이트하는 역할(http://example.com?page=2)
4. 라우터를 이용한 ToList
4-0. App.vue
<script setup>
import { RouterLink, RouterView } from 'vue-router';
</script>
<template>
<div>
<span><RouterLink to="/">Main</RouterLink></span> <!--A태그 처럼 생긴 화면이동-->
<span><RouterLink to="/about">About</RouterLink></span>
<span><RouterLink to="/todo">Todo</RouterLink></span>
</div>
<RouterView></RouterView> <!--라우터로 이용된 페이지를 출력-->
</template>
<style scoped>
span{
margin-left: 1em;
}
</style>
👉 왼쪽 상단에 main, about, todo 버튼을 누를수있도록 만들어줌
4-1. main.js
import { createApp } from 'vue'
import App from './App.vue'
import routeConfig from './routers'
createApp(App).
use(routeConfig).
mount('#app') // use(routeConfig)으로 설정한 라우터로 사용하겠다
4-2. index.js
import { createRouter, createWebHistory } from 'vue-router'
import todoRouting from './todo'
const MainPage = () => import('../pages/MainPage.vue') // 코드스플리팅 - 레이지로딩
const AboutPage = () => import('../pages/AboutPage.vue')
const routeConfig = createRouter({
history: createWebHistory(), // url의 해시코드를 안보이게 하여 깔끔한 URL 사용가능
routes: [
{path: "/", component: MainPage},
{path: "/about", component: AboutPage},
todoRouting
]
})
export default routeConfig //다른파일에서 routeConfig를 쉽게 import👉 todo와 관련없는 main페이지와 about페이지에 대한 경로설정
4-3. todo.js
const IndexPage = () => import('../pages/todo/IndexPage.vue')
const TodoListPage = () => import('../pages/todo/TodoListPage.vue')
const TodoAddPage = () => import('../pages/todo/TodoAddPage.vue')
const TodoReadPage = () => import('../pages/todo/TodoReadPage.vue')
const todoRouting = {path: "/todo",
component: IndexPage, // Index가 가장위에있고, 그 아래에 todo list / todoadd가 있는것이다.
children: [
{path: "list", component: TodoListPage}, // 실제로는 path: /todo/list, component는 위에 const TodoListPage로 인해서 import연결이 되어있는것.
{path: "add", component: TodoAddPage},
{path: "", redirect: '/todo/list'}, // 이것때문에 Indexpage의 가장 기초페이지가 list페이지가 되는것.
{path: "read/:mno", component: TodoReadPage},
]
}
export default todoRouting //다른파일에서 todoRouting을 쉽게 import
👉 todo와 관련된 페이지에 대해 path설정
4-4. IndexPage.vue
<template>
<div>
<h1>Todo Index Page</h1>
<div>
<span> <RouterLink to="/todo/add">todoAdd</RouterLink></span>
</div>
<RouterView></RouterView> <!--TodoListPage는 IndexPage의 하위 페이지이므로-->
</div>
</template>
<script setup>
import { RouterView, RouterLink } from 'vue-router';
</script>
<style lang="scss" scoped>
</style>👉 Index페이지가 todoList페이지의 가장상단에 위치해있다.
4-5. TodoAddPage.vue
<template>
<div>
<h2>Todo Add Page</h2>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>4-6. TodoListPage.vue
<template>
<div>
<h2>Todo List Page</h2>
<todoListComponent></todoListComponent> <!--그냥 얘는 컴포넌트에서 출력하려고 세팅해놓은 애를 태그만 걸어줄뿐 징검다리 역할밖에 안돼-->
</div>
</template>
<script setup>
import todoListComponent from '../../components/todo/todoListComponent.vue';
</script>
<style lang="scss" scoped>
</style>👉 컴포넌트에서 만든 기능을 view만 해주는 역할 및 징검다리
4-7. TodoReadPage.vue
<template>
<div>
<h1>Todo Read Page</h1>
</div>
</template>
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute()
console.log(route.params.mno) // route는 현재 라우터에 대한 정보를 담고있는데, route속성중에 params속성중에 mno의 값을 가져온다.
// http://localhost:5173/todo/read/2 를 했을때 console창에 mno(2)의 값이 나옴
</script>
<style lang="scss" scoped>
</style>
👉 현재 다른 컴포넌트에 영향을 주는 기능은 없지만 페이지에 대한 mno를 route를 통해 알수있다.
4-8. AboutPage.vue
<template>
<div>
<h1>About page</h1>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>4-9. MainPage.vue
<template>
<div>
<h1>main page</h1>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>4-10. TodoListComponent.vue
<template>
<div>
<ul>
<li v-for="todo in todoList" :key="todo.mno">
{{ todo }}
</li>
</ul>
<div>
<span @click="() => handleClickPage(1)"> 1 </span>
<span @click="() => handleClickPage(2)"> 2 </span>
<span @click="() => handleClickPage(3)"> 3 </span>
<span @click="() => handleClickPage(4)"> 4 </span>
<span @click="() => handleClickPage(5)"> 5 </span>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
import { getList } from '../../apis/todoAPI';
const route = useRoute() // 현재 라우터의 정보에 접근
const router = useRouter() // 현재 라우터를 통해 페이지 이동
const handleClickPage = (pageNum) => { // 이것에 역할은, pageNum을 매개변수로 받는 이벤트 메소드의 기능이 있는데
router.push({query: {page:pageNum}}) // 메소드가 실행되면 router.push를 통해서 현재 route의 속성중에 query라는 속성중에서 page라는 속성을 만들어서 pageNum의 매개변수를 넣는다.
} // -> 이곳의 page는 url을 업데이트하는 역할(http://example.com?page=2)
const todoList = ref([]) // 언제 올지 모르니까 ref로 만든다
const loadPageData = async(page) =>{// api에서 받은 res.data중에서 content라는 속성을 todoList.value에 집어넣는다.
const data = await getList(page) // 애초에 getList의 메소드인 api데이터를 가져오는 메소드자체를 비동기(async)로 받아오기 때문에 해당 loadPageData도 비동기로 받아와야함
todoList.value = data.content //data의 content속성을 가져온다.
}
onMounted (() => { // 마운트 되자마자 메소드가 실행된다.
const page = route.query.page || 1 // 현재 라우터에 대한 페이지를 page변수에 담는데, 페이지가 없으면 1페이지로 하고
loadPageData(page) // 페이지 값을 loadPageData 메소드에 넣는다
})
onBeforeRouteUpdate((to, from, next) => { // 라우터가 변경되기 직전에 메소드가 실행된다. 다른 페이지로 이동하기 직전에
const page = to.query.page // to : 변경될 라우터의 객체가 담겨있다.
loadPageData(page)
next() // next로 인해서 라우터의 변경이 계속진행된다.
})
</script>
<style lang="scss" scoped>
</style>👉 라우터를 통한 페이지관련 기능
4-11. todoAPI.js
import axios from "axios"
const host = 'http://192.168.45.39:8088/api/v1/todos' // docker를 이용하여 네트워크 접속
export const getList = async (page) => { // todo에 접근하게 되면, getList가 실행되고
const res = await axios.get(`${host}/list`,{params: {page:page}}) // host 대한 속성중 params 안에 page라는 속성을 매개변수로 받아 넣는다.
return res.data // 여기서 현재 host에 대한 정보속성중에서 data라는 값을 res에 넣는다.
// 이 getList의 return값인 res.data는 todoListcomponent로간다.
// -> 이곳의 params의 page는 url에 대한 page를 가져오기 위해서 (http://example.com?page=2)
}👉 API를 통해 현재 host에 대한 params를 비동기화 방법으로 data속성을 가져오는 코드
5. page의 데이터 및 메소드 이동순서
5-1. 사용자 클릭 이벤트
@click="() => handleClickPage(2)"👉 사용자가 페이지 번호를 클릭하면 handleClickPage 메소드가 실행됩니다.
5-2. handleClickPage 메소드
const handleClickPage = (pageNum) => {
router.push({ query: { page: pageNum } });
}👉 이 메소드가 호출되면, router.push를 통해 새로운 페이지 번호를 쿼리 매개변수로 가진 URL로 내비게이션을 시도합니다. 이때, Router는 URL 변경을 준비합니다.
5-3. onBeforeRouteUpdate 훅
onBeforeRouteUpdate((to, from, next) => {
const page = to.query.page;
loadPageData(page);
next();
});👉 onBeforeRouteUpdate는 라우터 변경직전에 실행되므로, router.push가 실행되기 전에 onBeforeRouteUpdate 훅이 호출됩니다.
👉 이 훅에서 to.query.page를 통해 새로운 페이지 번호를 읽어오고, loadPageData(page) 메소드를 호출하여 데이터를 로드하고, next() 호출로 라우터의 페이지 업데이트(5-2번)을 계속 진행합니다.
5-4. loadPageData 메소드
const loadPageData = async (page) => {
const data = await getList(page);
todoList.value = data.content;
}👉 getList(page)를 호출하여 서버에서 데이터를 가져오고, 그 데이터를 todoList에 업데이트합니다.
5-5. getList 메소드
export const getList = async (page) => {
const res = await axios.get(`${host}/list`, { params: { page: page } });
return res.data;
}👉 getList는 주어진 페이지 번호를 파라미터로 받아서 API 호출을 합니다.
