7. Vue와 Firebase로 나만의 사이트 만들기 - SPA 알아보기

 

 

 

VF - 7강

 

 

 

---

• 이번 강에서는 SPA에 대하여 알아보자.
• SPA는 Single Page Application의 줄임말이다.
• 이것은 한 페이지에서 화면 내용이 변하는 것을 말한다.

 

• vue 프로젝트의 파일로서 더 알아보자.

• npm run serve 로 명령어를 실행했을 경우 entry point는 index.html이다.
• 여기서 index.html이 스크립트를 로드하면서 맨 처음 들어가는 것은 main.js 파일이다.
• index.html은 손대지 않을 것이며, 결국 제일 처음 시작하는 것은 main.js이다.
• main.js는 필요한 import 자원들을 여기서 넣어주면 되며, 그 다음 화면에서 제일 신경써야할 파일은 App.vue 파일이다.
• App.vue는 아래와 같이 Home과 About의 2개의 페이지일 뿐이다. (여기서 App.vue의 style 내용은 삭제함)

• 그 아래의 내용은 <router-view/>의 내용이다.
• 여기서 Home, About 그다음으로 xxx을 추가해본다.
• 위와 같은 링크를 관장하는 것의 핵심은 router 디렉터리의 index.js이다.
• 새로 추가한 xxx의 내용을 추가하기 위해서 views 디렉터리안에 xxxView.vue를 만들고 아래와 같이 내용을 작성한다.

<!-- xxxView.vue -->
<template>
  <div class="about">
    <h1>xxx</h1>
  </div>
</template>

• 그리고 서버에서 xxx링크를 눌러보아도 화면이 보이지 않는다. 그 이유는 router의 index.js에 추가를 해주지 않았기 때문이다.
• index.js의 /about 밑에 아래와 같은 코드를 추가한다.

// router의 index.js
{
    path: '/xxx',
    name: 'xxx',
    component: () => import('../views/xxxView.vue')
}

• 이렇게 추가하고 나면 서버에 아래와 같이 내용이 나타나게 된다.

• 이것으로 뷰 라우터에 대하여 간단하게 알아보았다.

 

• 그리고 index.js에서 아래의 history에 대해서 알아보자.

// router의 index.js
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

• history 모드는 위 그림처럼 주소 끝에 /xxx가 붙는 것을 말한다.
• 해시 모드일 경우는 /#xxx로 붙는다.
• 이렇듯 한 개의 페이지에서 URL이 실제로 이동하지는 않지만 이동하는 것처럼 느낄 수 있다.

 

• memi dev 유튜브 강의 보기
  • https://memi.dev/board/lecture/1597405425732
  • https://www.youtube.com/watch?v=nk6Ev2sYz_U 

7 SPA 알아보기 : memi

 

 

 

---

해당 글은 [memi dev] 유튜브 채널을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---