Chapter 6] Vue Router

블로그도 완성했고, 도메인도 구매했으니 이제 다른 사람들에게 저희 사이트를 자랑할 수 있게 되었습니다. 그 중에 “CSS는 스타일링 해줍니다.”의 글을 너무 잘 써서 다른 사람에게 고유하고 싶어졌습니다. 하지만 저희는 하나의 도메인 주소밖에 없다보니 CSS 카테고리에 들어가서 해당 글을 클릭해야만 합니다.

보통 다른 블로그 글들을 보면 글이나 목록 페이지를 위한 주소가 있습니다.

네이버 글 : blog.naver.com/유저아이디/글id

티스토리 글 : 유저아이디.tistory.com/글id

그 외에도 webisfree라는 분의 블로그의 경우 react라는 카테고리를 가진 글 목록들은 https://webisfree.com/?category=react 라는 주소값을 가지고 글 내용은 https://webisfree.com/2020-12-30/react에서-string-텍스트-문자열로-html-코드를-추가하는-방법 같은 형태의 주소를 가지고 있습니다.

우리도 이렇게 각 페이지에 대한 고유 주소를 넣어보는 작업을 해보도록 하겠습니다.

Vue Router

우리는 이미 a 태그와 같은 페이지 이동 방식도 있고, 페이지마다 HTML 파일을 만들면 될 것 같은데 왜 이런 라이브러리가 필요한지 궁금하실 수 있습니다. 기존 방식과 비교하면서 이런 것들이 왜 필요한지 살펴보겠습니다.

전통적인 페이지 이동 방식

보통 브라우저에서는 a 태그를 클릭하거나 주소창에 주소를 입력하여 서버에 웹 페이지를 요청합니다. 이 요청에 대해 서버는 해당 페이지를 위한 HTML, CSS, JavaScript 파일 등을 전송합니다.

      클라이언트(Client)와 서버(Server)는 웹 개발에서 매우 중요한 개념입니다. 클라이언트는 사용자가 사용하는 컴퓨터나 모바일 기기와 같은 디바이스를 의미하며, 서버는 사용자가 요청한 데이터나 서비스를 처리하는 컴퓨터를 의미합니다. 웹 페이지를 보여주는 것은 클라이언트의 역할이고, 이를 처리하는 데이터베이스나 서비스는 서버의 역할입니다.

만약 /post/1와 같은 주소를 요청하면, 서버는 새로운 HTML, CSS, JS 파일을 응답으로 보냅니다.

이 방식은 매번 새로운 파일들을 받아서 새로 그려야 하기 때문에 깜빡이는 현상이 발생합니다.

Vue Router 페이지 이동 방식

Vue Router도 주소나 a 태그를 통해 이동할 때 처음에 필요한 파일들을 받아온다는 점에서는 동일합니다.

하지만 Vue Router 의 기능인 RouterLink를 사용하게 되면 주소 변화를 인지하고 Vue를 이용해 새롭게 다르게 그려냅니다.

이 경우에는 서버에 응답이 필요하지 않기 때문에 더 빠르게 처리할 수 있으며, 페이지 일부분만 변경되기 때문에 전체적으로 깜빡이는 현상이 없어집니다. 제 블로그도 이러한 기능을 활용하고 있습니다.

그 외에도 여러 가지 장점이 있지만 활용해보면서 알아보도록 하고, 이제 설치를 해보겠습니다.

Vue Router 설치하기

이전에 npm으로 프로젝트를 만들 때, 설정에서 추가할 수 있습니다. Add Vue Router for Single page Application development? 에서 Yes를 하면 되죠.

하지만 저희는 만든 프로젝트가 있기에, 따로 설치해서 추가하겠습니다. 터미널에서 다음과 같이 명령어를 실행해주세요.

bash

      npm install vue-router@4

Vue Router 생성하기

우선 router 관련 내용을 쓰기 위해 src 폴더 안에 router 폴더를 만들고, 그 안에 index.js 파일을 만들겠습니다.

그리고 Router를 만드는 코드를 추가해보겠습니다.

javascript

router/index.js

      import { createRouter, createWebHistory } from "vue-router";

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

export default router;

Router를 생성했습니다! createWebHistory는 주소창을 어떻게 인식해서 화면을 바꾸는지에 대한 모드입니다. Hash 모드와 History 모드가 있는데, 이 함수는 History 모드입니다.

인스턴스에서 사용하기

외부 라이브러리를 가져와서 사용하려면 보통 인스턴스를 생성 후 use 함수를 사용해야합니다.

javascript

main.js

      import { createApp } from "vue";
import router from "./router"; // router 불러오기
import App from "./App.vue";

import "./assets/main.css";

const app = createApp(App);

app.use(router); // router 사용!

app.mount("#app");

      use 함수는 mount 이전에 실행되어야 합니다.

이제 Router를 사용할 준비가 되었습니다! 다음 글부터는 주소에 따라 어떻게 다르게 보여주는지 알려드리겠습니다.