Vue.js 실습 part.3

저번 포스팅까지 완료가 되었다면 프로젝트 내에서 모든것이 생성이 되어있고,

작성을 하기만 되면 되는 상태가 된다.

 

앞서 말한것처럼 페이지가 바뀔때마다 전체가 바뀌는것이 아니라 예를들어 네이버 뉴스라고 본다면

위에 빨간 박스는 변경될 필요없이 아래 내용만 바뀌면 된다.

 

이럴때는 header, sidebar, footer 등의 이름으로 레이아웃을 설정하는데 이렇게 저장될 레이아웃 폴더를 하나 만들도록 하겠다.

 

/test/src/components 안에 layout 이라는 폴더를 하나 생성 하도록 하자.

그리고 그 안에는 Header.vue라는 파일을 만들어보자.

그리고 그 파일 안에는 자신이 있다면 꾸며도 되지만 나는 프론트엔드에는 자신이 없어서....

부트스트랩을 그대로 가져다 쓸 예정이다.

부트스트랩이 뭔지 잘 모르시면 아래 참고포스팅을 확인해보면 된다.

 

https://bootstrap-vue.org/docs/components

 

바로 위 링크는 부트스트랩 에서 components 들을 볼수 있다.

해당 사이트에 들어가보면 vue에서 사용할수 있는 components 들을 모두 만들어서 정의를 해놓았다.

이것을 잘 사용할줄만 알면 정말 편해진다.

그래서 일단 실습 예제에서는 이것을 사용할것이다.

 

그럼 다시 메인페이지에서

https://bootstrap-vue.org/

BootstrapVue

Get started를 눌러보도록 한다.

 

그럼 설치법이 쭉보이는데 따라서 작성을 해보면서 설치를 한다.

npm install vue bootstrap bootstrap-vue

터미널에 작성을 하고 /test/src/main.js에 import 를 추가해야한다.

적용하고 난 후의 main.js 이다.

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import 'bootstrap/dist/css/bootstrap.css'

import 'bootstrap-vue/dist/bootstrap-vue.css'

createApp(App).use(router).mount('#app')

 

이렇게 설치가 되면 모듈이 /test/node_module 안에 들어가고 사용할수 있는 상태가 된다.

 

다음에 아까 만들어둔 Header.vue에는 bootstrap vue 사이트에서 components를 들어가서 찾아보면 Navbar가 있다.

클릭해서 예제를 그대로 가져가서 복사/붙여넣기를 해볼것이다.

 

근데 여기서 그냥 복사를 하면 안되고 vue는 기본적으로 구조가 있다.

template와 script로 나뉜다.

<template>

</template>
<script>
export default{

}
</script>

와 같은 형식인데 보여질 부분은 위의 template안에 명시를 해줘야하고, 작동할 동작은 아래 script부분에서 제어를 해주게 된다.

쉽게말하면 template에서는 html같은 디자인 담당 코드가,

script는 그 디자인의 데이터 바인딩이나 이벤트 캐치나 서버통신을 위한 js코드가 들어가게 된다.

 

그러므로 복사해온 값은 template안에 넣어줘야한다.

 

그리고 script 안쪽은 아래처럼 넣도록 한다.

<script>
export default{
    name:"header",
}
</script>

지금 작성하고 있는 부분은 어디까지나 헤더부분이다.

 

결국 실제로 보여질 페이지가 있어야 헤더는 보여질수가 있게 된다.

 

실제로 보여질 페이지를 작성하기 위해 /test/src/views 라는 폴더를 만들어준다.

여기엔 실제로 보여질 페이지들이 들어가게 될 예정이다.

 

그리고 나서 src 바로 아래 App.vue라는 파일이 있는데 해당 파일을 보면 말씀드린것처럼 template와 script로 되어있고,

전 포스팅에서 ip:8080으로 들어갔을때 보여진 페이지가 여기에서 구현이 되어있는것을 알수 있다.

 

이제는 이 기본 페이지는 필요가 없으니 template안을 지워주고 script부분에서도 Header를 import해줄것이다.

그리고 template안에서 header를 넣어볼것이다.

하게 되면 다음과 같이 App.vue가 된다.

<template>
    <div id="app">
        <Header />
        <div id="content" class="content">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import Header from './components/layout/Header.vue'
export default {
    name: 'App',
    components: {
        Header,
    }
}
</script>

 div 안에 app은 아래에 name에서 app을 가리키고

<Header/> 는 아래 컴포넌트가 Header와 import한 Header값을 가리킨다.

그 가리킨 헤더는 layout안의 Header.vue를 가리키는 방식이다.

 

그리고 같은 방식으로 views폴더 안에 Home.vue 파일을 만들고 아래와 같이 작성을 해두자.

<template>
    <div>
        <h1>welcome! vue home </h1>
    </div>
</template>
<script>
export default { }
</script>

변경을 확인하고자 똑같이 복사를 해서 about.vue라고 하여 같은 위치에 하나를 더 만들어서 보여질 h1부분만 좀 다르게 해서 하나를 더 만들도록 하자.

 

이렇게까지 하면 파일 트리는 다음과 같다.

 

여기까지 작성이 되었다면 마저 App.vue와 작동하는 구조 원리 설명 등은 다음 포스팅에서 이어 작업해보도록 하겠다.

---

참고 포스팅

https://thenicesj.tistory.com/65

bootstrap 오픈데이터 사용법