[멋쟁이사자처럼] 부트챌린지: 11시간만에 트위터만들기 - Router

 

오늘은 Vue.js의 Router를 배웠다.

 

오늘 배운 것

`Router`에 대해서 배웠다. `Router`는 SPA의 핵심이라고 설명하셨는데 정확한 개념이 궁금해서 나도 확인해보기로 했다. 브라우저의 새로고침 없이 URL 주소에 따라 그에 맞는 화면(컴포넌트)을 동적으로 바꾸어 보여주는 라이브러리라고 한다. 이에 반대되는 개념은 MPA(Multip Page Application)인데, SPA와 MPA에 대해서는 React를 다루면서 다룬적이 있다.

 

[Java 풀스택 개발자] React의 언어체계

[Java 풀스택 개발자] React의 언어체계

 

결국에는 SPA가 가지는 문제를 극복하기 위해서 있는 게 `Router`라고 할 수 있다. 장점에 대해서는 URL 경로에 따른 컴포넌트 매핑, 페이지 간 전환, 히스토리 관리 지원 등등이 있다고는 하지만 근본적으로는 사용자에게 우리 이 페이지에 있습니다 하고 알려주기 위해서에 가깝다. 클라이언트에서 인지 및 관리하기 위함이기 때문에, `Router`가 라이브러리인 이유도 이를 위해서라고 할 수 있다. 만약 필수였다면 라이브러리가 아니었을 것이다.

 

`Vue.js`에서 router는 `npm install vue-router`로 쓰지만, 수업에서는 `yarn add vue-router@4`를 사용했다. 근본적으로 크게 다른 건 없지만 `yarn`을 사용하는 쪽이 더 안정적이고 빠르기 때문. 이렇게 선택하고 나서는 Routes' Matching Syntax를 알았다.

 

라우트 매칭 구문Routes' Matching Syntax은 브라우저 주소창에 이런 형식의 URL이 들어오면, 이 컴포넌트를 보여달라고 말하는 규칙이다. 매칭 구문에는 ① 정적 경로 뿐이 아니라 ② 동적 파라미터(`/user/:id`), ③ 맞춤형 정규식(`/user/:id(\\d+)`), ④ 와일드카드(`/:pathMatch(.*)*`) ⑤ 선택적 파라미터(`/users/:id?`)와 같은 형식을 지원하고 있다. 이런 다양한 형식을 지원하는 이유는 백엔드 서버 없이 브라우저 안에서 백엔드처럼 정교하게 URL을 제어하기 위함이다. 이러한 방식은 기존 Vanilla 환경에서의 고통을 많이 상쇄시켜준다고 할 수 있다.

 

예를 들어, 쇼핑몰 서비스에서 수백만 개의 상품 상세 페이지를 처리할 때 단 한 줄의 동적 파라미터(`:id`) 구문으로 해결할 수 있으며, 주소창에 잘못된 경로를 입력한 유저를 안전하게 404 페이지로 안내하는 와일드카드 처리 역시 이 문법 덕분에 직관적이고 견고하게 구현할 수 있다.

 

`Router`를 관리하기 위해서는 `src/router/index.js`를 통하여 js를 만든 뒤, 그 안에 다음과 같은 것을 적으면 된다. 이것은 레거시든 최근이든 비슷한 형태로 이루어져있다.

 

import {createMemoryHistory, createRouter, createWebHistory} from 'vue-router';
const router = createRouter({
    history: createWebHistory(), // 혹은 createMemoryHistory(),
    routes: [
        {
            path:'/',
            component: 컴포넌트명
        }
})

export default router

 

 

여기서 History부분이 꽤 신기할 텐데 두 가지 모드가 있다. 하나는 `createMemoryHistory()`, 다른 하나는 ` createWebHistory()`이다. 전자는 브라우저 주소에 URL이 표시되지 않고, 후자는 히스토리 API를 사용하여 표시된다. 전자는 왜 필요한가하면 서버사이드 렌더링SSR 처리를 할 때 사용되거나, 앱 등 URL 주소가 실존하지 않거나 할 필요가 없는 경우에 사용된다.

 

 

그리고 `src/main.js`에서 다음을 추가하면 된다.

 

import router from './router';

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

 

이러면 `Router` 세팅은 종료된다.

 

이후 실습에 들어갔는데, 회원가입 페이지를 만드는 것. 여기에는 위에서 배운 `Router`도 당연히 들어있지만 윗 부분만 알면 크게 어려운 게 아니라서 넘긴다. 오늘의 수업도 종료! 주말에는 쉴 예정이라 여기까지 한다. 🥱🥱