vue-router를 배우기 위해서 새로운 프로젝트 생성해본다.
강의는 Blog 레이아웃 같은거 만들면서 진행함.
vue create 프로젝트명설치끝
📕 Bootstrap
Bootstrap
bootstrap이라는 라이브러리를 이용해보자.
웹페이지에 필요한 버튼, 메뉴, 카드, 리스트 이런걸 쉽게 복붙해서 만들어낼 수 있다.
CSS 짜기 귀찮아서 사용하는 것임
강의에서는 Bootstrap 4,5 버전을 사용한다.
설치 방법은 두가지가 있다.
- 손수 css,js 파일 복붙하는 방법
- npm을 이용한 방법
설치
1. css,js 파일 복붙 설치
- Bootstrap 구글에 치면 나오는 사이트에 접속한다.
- 들어가면 우측상단 버전체크
(4.x 버전 혹은 5.x 버전 쓸건지 선택) - getting started 메뉴로 들어가기
- css, js 파일이 보이면 그걸 내 프로젝트 index.html에 그대로 복사 붙여넣기
2. npm 이용한 설치
- 에디터에서 프로젝트 폴더를 경로대로 오픈
- 터미널에 npm run serve 중인게 있다면 종료 (ctrl+c 누르면 종료됨)
- 명령어 입력
npm install bootstrap@5 (5버전 설치시)
또는
npm install bootstrap@4 jquery popper.js (4버전 설치시)둘중 하나 선택해서 설치하면 된다.
설치명령어는 버전 업데이트시 언제든지 바뀔 수 있으므로 설치시 꼭 getbootstrap.com 다운로드 메뉴를 참고하자
- main.js 파일에 다음 코드를 추가
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'main.js 맨 마지막줄보다 위에만 넣으면 됨.
(+ 이 외에도 BootstrapVue를 설치하는 방법도 있지만 아직 vue2 버전하고만 호환됨)
사용법
- getbootstrap.com 들어가서 원하는 UI를 검색
- button, navbar, card 등을 검색하면 html 예제 코드가 나옴
- 복사 붙여넣기
CSS 짜는 시간을 매우 단축시켜주기 때문에 자주 이용한다.
대용품으로 유명한건 Vuetify같은 material design 느낌의 라이브러리도 있음
📗 데이터바인딩, props 복습
페이지 나눌 때 쓰는게 router다.
그 전에 보여줄 목록페이지를 만들자.
컴포넌트 import 복습
저번에 배웠던 컴포넌트 분리하고 import 해와서 사용하는거 복습하는 타임.
(List.vue)
<template>
<div>
<h5>블로그 글 제목</h5>
<p>블로그 글 날짜</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>이렇게 생긴 컴포넌트가 있음.
(App.vue)
<template>
<List /> // 3. 사용
</template>
<script>
import List from './components/List.vue'; // 1. import
export default {
name : 'App',
component : {
List : List, // 2. 등록
}
}
</script>3 steps 규칙대로 사용한다.
- script 상단에 컴포넌트 import 해오기
- component에 이름 등록하기
- 사용하기
데이터바인딩
이제 HTML에 데이터 꽂아 넣는 데이터바인딩을 복습해보자.
(assets/blog.js)
export default [
{
title : '첫 째 프로젝트 : 허위매물 전문 부동산 앱',
content : 'Vue를 이용하면 비누같이 매끈한 앱을 만들 수 있습니다',
date : 'September 24, 2021',
number : 0
},{
title : '둘 째 프로젝트 : 오마카세 배달 앱',
content : '음식이 아니라 셰프를 직접 배달해드립니다',
date : 'October 20, 2020',
number : 1
},
...
]이렇게 생긴 데이터 더미가 있음.
assets이란 이름으로 폴더를 만들고 그안에 데이터 더미 파일을 만들어줬다.
export 설정도 돼있으므로 이제 assets/blog.js 파일을 원하는 컴포넌트에서import 해와서 사용하면 됨.
(App.vue)
<script>
import 가져온데이터 from './assets/blog.js';
export default {
name : 'App',
data() {
return {
블로그글 : 가져온데이터
}
}
}
</script>script 태그 안에서 import 해오고 data(){}에 등록해준다.
이제 사용하면 되는데 하위 컴포넌트에서 데이터를 사용할 것임.
이럴땐 props를 사용하자.
props
props도 3steps 지켜서 사용해주면 됨.
- 보내고
- 등록하고
- 사용함
<List :블로그글="블로그글" />- 하위 컴포넌트로 props 전송함
:작명="보낼데이터이름"형식
(List.jsx)
<script>
export default {
name : 'App',
props: {
블로그글 : Array,
}
}
</script>- props 등록함
등록할 때props이름 : 데이터형으로 작성
<template>
<div>
<h5>{{블로그글[0].title}}</h5>
<p>{{블로그글[0].date}}</p>
</div>
</template>- 사용
📘 vue-router
설치
vue-router 라는 라이브러리를 설치하면 라우터를 이용할 수 있다.
그럼 이제 누군가 도메인/list로 접속하면 List.vue를 보여주게 할 수 있음.
npm install vue-router@4터미널에 입력하고 설치한다.
(vue-router 4버전 설치함)
셋팅
router.js 파일 생성
설치됐다면 라우터파일을 만들어준다.
src폴더 안에 아무데나 router.js 파일을 만들고 아래 코드 복붙해준다.
import { createWebHistory, createRouter } from "vue-router";
import imoprt해온컴포넌트 from './컴포넌트경로' // 1. import
const routes = [
{
path: "/경로", // 2. 경로설정
component: import해온 컴포넌트, // 3. 컴포넌트 등록
}
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router; vue-router 만든사람이 정한 사용법일 뿐이라 굳이 이해할 필요는 없다.
그냥 위에서 1,2,3 부분인 import, path, component 부분만 수정해주면 나만의 페이지 만들 수 있음.
main.js 파일 셋팅
main.js파일에도 라우터를 사용한다고 등록해준다.
import router from './router'
createApp(App).use(router).mount('#app') main.js에 위와 같은 형태로 수정해주면 됨!
사용
<router-view> 태그 추가
셋팅이 끝났다면 사용법을 알아보자.
원하는 곳에 <router-view></router-view> 태그를 추가해주면 된다.
App.vue의 HTML내부 아무데나 저 태그를 추가해주면 라우터로 구분된 페이지를 그 자리에 보여준다.
예시를 들어보자.
(router.js)
import List from './components/List.vue';
import Login from './components/Login.vue';
const routes = [
{
path: '/list',
component: List.vue,
},
{
path: '/login',
component: Login.vue,
}
];위의 router.js 파일을 보면
누군가 /list로 접속했다고 했을 때 List.vue 컴포넌트를 보여주고,
만일 /login으로 접속했다면 Login.vue 컴포넌트를 보여주겠다고 라우터를 설정했다.
이 설정대로 html을 노출시키려면
(App.vue)
<template>
// <List />
<router-view></router-view>
</template>
<script>
// import List from './components/List.vue';
export default {
name : 'App',
component : {
// List : List,
}
}
</script>이렇게 <router-view>태그를 넣어주면 된다.
(주석처리는 기존 List 컴포넌트 데이터바인딩 지운것)
그럼 이제 /list 경로로 접근하면 저 router-view 영역에 List 컴포넌트가 노출되고
/Login 경로로 접근하면 router-view 영역에 Login 컴포넌트가 노출된다.
라우터 props 사용하는 법
만약 라우팅할 컴포넌트에 사용해야할 props가 있다면 똑같이 내려주면 됨.
<template>
<router-view :블로그글="블로그글"></router-view>
</template>라우트 링크 이동
다른 라우터 페이지로 이동링크 만들고 싶을 때 이거 쓰면 된다.
<template>
<router-link to="/list">이동하기</router-link>
</template><router-link>는 a 태그임.
to="/경로" 하면 라우터 페이지 이동함.
📙 라우터 URL 파라미터
:작명
상세페이지를 경로 하나만으로 100개 1000개 노출할 수 있도록 만들어보자.
URL 파라미터 사용하면 가능함.
(router.js)
const routes = [
{
path: '/detail/:id',
component: Detail.vue,
},
];:작명 이런식으로 작성하면 주소창에 /detail/뒤에 아무거나 작성했을 때 지정된 Detail.vue 컴포넌트를 보여달라는 뜻임.
하지만
/detail/0
/detail/1
했을때 컴포넌트를 보여주긴 하지만 전부 같은 컴포넌트가 노출되는게 문제다.
파라미터에 따라 각기 다른 내용이 노출되도록 해보자.
$route
{{ $route.params.파라미터명 }}컴포넌트 안에서 URL 파라미터에 뭐가 써있는지 알고 싶다면 이렇게 출력할 수 있다.
파라미터명은 path에 :작명 했던 이름으로 받아오면 됨.
즉, $route.params.id라고 쓰면 URL란에 id를 몇으로 입력해서 들어왔는지 출력해볼 수 있음.
<template>
<div>
<h5>{{블로그글[$route.params.id].title}}</h5>
<p>{{블로그글[$route.params.id].date}}</p>
</div>
</template>응용해서 이렇게 array 상품데이터 순번대로 URL에 들어온 상품에 맞게 출력할 수 있음!
