hyungju-lee

129. History Mode

npm create vue@latest

이번엔 히스토리 모드를 사용하여 애플리케이션에서 URL 작동 방식을 변경하는 방법을 살펴보겠습니다.
현재 우리 애플리케이션에는 탐색을 위한 링크가 없습니다.
라우터를 제대로 테스트하려면 모드를 전환해야 합니다.
이에 곧 설명하겠지만, 먼저 모드를 변경해 보겠습니다.
createWebHasHistory 함수로 import 문을 변역한 다음, history 속성을 이 함수로 업데이트합니다.
브라우저에서 앱으로 돌아가면 URL에 해시가 추가된 것을 볼 수 있습니다.
이는 페이지 새로고침 없이 내용을 변경할 수 있게 해줍니다.
Vue 개발자 도구에서 더 많은 정보를 볼 수 있으며, 히스토리 로깅 기능과 라우트 목록 등의 정보를 제공합니다.
해시 문제점은 대부분의 검색 엔진이 인덱싱하지 않고, 사용자가 일반적으로 주소 표시줄에 해시를 입력하지 않는다는 것입니다.
이 문제를 해결하기 위해 History API라는 새로운 API가 도입되었습니다.
라우터 라이브러리는 이 API를 대신 관리해줍니다.
이제 createWebHistory 함수로 다시 변경하고, 히스토리 모드로 전환할 것입니다.
변경 후 브라우저에서 확인하면 모든 것이 정상적으로 작동합니다.

히스토리 모드로 URL 작동 방식 변경하기

  • 라우터를 제대로 테스트하기 위해 모드를 전환합니다.
  • createWebHashHistory 함수를 사용하여 해시 모드로 변경합니다.
  • 애플리케이션의 URL에 해시(#)가 추가되어 페이지 새로고침 없이 내용 변경이 가능합니다.
  • Vue 개발자 도구에서 루트 이벤트와 로깅 기능을 확인할 수 있습니다.
// src/router/index.ts
import { createRouter, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import AboutView from '@/views/AboutView.vue'

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        component: HomeView
    },
    {
        path: '/about',
        component: AboutView
    }
]

const router = createRouter({
    history: createWebHashHistory(import.meta.env.BASE_URL),
    routes
})

export default router

해시와 히스토리 모드

  • 해시는 오래된 브라우저에서도 작동하지만, 검색 엔진에 의해 인덱싱되지 않는 문제가 있습니다.
  • History API가 이 문제를 해결하여, 라우터 라이브러리는 History API를 자동으로 관리합니다.
  • createWebHistory 함수로 변경하여 히스토리 모드를 사용합니다.

라우터 테스트 및 서버 설정

  • 변경 후 모든 것이 정상적으로 작동하는지 브라우저에서 확인합니다.
  • 서버는 항상 요청을 처리하는 우선순위를 가집니다.
  • Vue는 클라이언트 측 라이브러리이므로, 애플리케이션이 클라이언트에 전달된 후에 실행됩니다.
  • 따라서 URL에 관계없이 항상 index.html 파일로 응답하는 것이 중요합니다.
  • Vite를 사용하면 항상 index 파일을 제공합니다. 다른 백엔드를 사용하는 경우, 해당 설정을 수동으로 구성해야 할 수 있습니다.
  • 히스토리 모드 문서 페이지에는 히스토리 모드를 완전히 작동시키기 위한 백엔드 설정 예시가 있습니다.

이번 강의에서는 히스토리 모드와 해시 모드의 차이, 그리고 라우터 테스트 및 서버 설정에 대해 설명합니다.

이번엔 히스토리 모드를 사용해 우리 애플리케이션에서 URL이 어떻게 작동하는지를 변경하는 방법을 살펴봅니다.
현재 우리 앱에는 탐색을 위한 링크가 없습니다.
링크 없이 라우터를 제대로 테스트하려면 모드를 전환해야 합니다.
이에 대한 설명은 잠시 후에 하겠지만, 먼저 모드를 변경해봅시다.
우리는 라우터 구성 파일에서 계속 작업할 것입니다.
우리는 createWebHashHistory 함수를 불러오기 위해 import 문을 변경할 것입니다.
그런 다음 이 함수로 history 속성을 업데이트할 것입니다.
인자는 동일하게 유지됩니다.
일어나는 일을 자세히 설명하겠지만, 먼저 앱에서 그 영향을 브라우저에서 확인해 봅시다.
페이지를 새로고침하면, 주소 표시줄의 URL을 제외하고 모든 것이 같게 유지됩니다.
Vue 라우터 라이브러리는 URL에 해시(#)를 추가했습니다.
매우 신비롭습니다.

테스트해 봅시다.
네트워크 패널로 전환하기 전에 /about 경로가 작동하는지 확인해봅시다.
페이지가 새로고침되지 않아야 합니다.
Vue 라우터가 그것을 방지할 것이기 때문입니다.
우리는 자산을 다시 다운로드하지 않고도 페이지 간에 전환할 수 있어야 합니다.
네트워크 패널에 이미 로그가 있다면, clear 버튼을 눌러 지울 수 있습니다.
해시를 제거하지 않고 URL에 about을 추가해봅시다.
about 컴포넌트 안의 메시지가 나타날 것입니다.
네트워크 패널은 새로운 것을 로그하지 않을 것입니다.
이는 URL이 변경되었음에도 불구하고 페이지가 새로고침되지 않았음을 의미합니다.
대신 라우터가 내부적으로 자산을 다시 로드하지 않고도 내용을 변경할 수 있었습니다.
우리는 Vue 개발자 도구로 전환하여 루트에 대한 더 많은 정보를 볼 수 있습니다.
여기에는 타임라인이라는 섹션이 있습니다.
타임라인에서는 이벤트를 볼 수 있습니다.
히스토리는 애플리케이션에서 접근된 경로의 로그를 제공할 것입니다.
만약 브라우저에서 뒤로가기 또는 앞으로 가기 버튼을 누르면, 새로운 경로가 로그될 것입니다.
이 로깅 기능은 Vue 라우터를 사용하는 이점 중 하나입니다.
그것은 Vue 개발자 도구와 완벽하게 통합됩니다.
이 모든 정보는 애플리케이션 디버깅에 도움이 됩니다.
나는 각 경로를 클릭하여 더 많은 세부사항을 볼 수 있습니다.
우리는 이에 대해 너무 깊이 들어가지 않을 것입니다.
우리는 향후 강의에서 이를 더 탐구할 것입니다.
또 다른 섹션은 루트라고 합니다.
여기에는 우리 앱에 등록된 루트 목록이 포함될 것입니다.
현재 활성화된 라우트가 무엇인지 알려줄 것입니다.
세부사항을 보기 위해 라우트를 클릭할 수 있습니다.
우리는 루트를 간단하게 유지하기 때문에 많은 정보를 찾지 못할 것입니다.
이 도구는 애플리케이션을 이동하지 않고도 루트가 성공적으로 등록되었는지 확인하는 데 좋은 방법입니다.
이것은 라우팅의 기초입니다.
라우트를 생성하기 위한 최소 요구사항은 경로와 컴포넌트를 설정하는 것입니다.
라우터는 나머지를 처리할 것입니다.
우리는 기본을 다루었습니다.

이제 주소 표시줄에서 찾을 수 있는 해시에 대해 이야기해 봅시다.
이게 무엇을 하는지 더 잘 이해하기 위해, 저는 위키피디아로 전환할 것입니다.
저는 피자 페이지에 있지만, 어떤 위키피디아 항목이라도 괜찮습니다.
모든 위키피디아 페이지에는 목차가 있습니다.
페이지의 섹션으로 연결되는 링크가 있습니다.
이 목록 항목 중 하나를 클릭하면 페이지의 해당 섹션으로 자동으로 이동합니다.
이것은 기본 HTML로 수행됩니다.
이 트릭을 수행하기 위해 JavaScript는 필요하지 않습니다.
이 효과를 만드는 것은 어렵지 않습니다.
첫 번째 단계는 요소에 ID를 할당하는 것입니다.
ID를 할당한 후에는 해시를 사용하여 해당 요소를 가리키는 링크를 만들 수 있습니다.
내용 목록으로 다시 스크롤하여 링크 중 하나를 검사해 보겠습니다.
그리고 개발자 도구에서.
우리는 ref 속성이 섹션의 ID로 설정되어 있는 것을 분명히 볼 수 있습니다.
브라우저는 이를 전체 HTTP URL과 다르게 해석합니다.
페이지를 다시 로딩하는 대신, 해당 섹션으로 이동합니다.
이것이 바로 Vue 라우터가 사용하는 것입니다.
섹션으로 이동하는 것은 페이지를 새로고침하지 않기 때문입니다.
라우터는 컴포넌트를 교체함으로써 이 행동을 오버라이드할 것입니다.
라우터가 해싱 시스템을 사용하기로 선택한 이유가 궁금할 수 있습니다.
이는 해시 시스템이 대부분의 웹 API보다 오래되었고, 심지어 레거시 브라우저에서도 작동하는 시스템이기 때문입니다.
만약 여러분이 오래된 브라우저에서도 작동해야 하는 애플리케이션을 구축하고 있다면, 여러분은 이 행동을 원할 수 있습니다.
해시를 사용하는 문제는 대부분의 검색 엔진이 이를 인덱싱하지 않는다는 것입니다.
또 다른 문제는 사용자들이 주소 표시줄에 해시를 일반적으로 입력하지 않는다는 것입니다.

다행히 History API라고 하는 새로운 API가 이 문제를 해결하기 위해 도입되었습니다.
이 강의의 리소스 섹션에서는 History API 사용 방법을 다루는 사이트에 대한 링크open in new window를 제공합니다.
우리는 History API가 어떻게 작동하는지에 대한 세부 사항을 걱정할 필요가 없습니다.
왜냐하면 라우터 라이브러리가 우리를 위해 처리해 줄 것이기 때문입니다.
에디터로 돌아가서, 우리는 함수를 다시 createWebHistory 함수로 변경할 것입니다.
Vue 라우터는 History API 사용으로 전환할 것입니다.
메모리라고 하는 또 다른 모드가 사용 가능합니다.
이 모드는 URL 표시줄을 변경하지 않고 라우트 변경을 내부적으로 추적하고자 할 때 사용합니다.
이것은 흔히 사용되는 모드는 아니지만, 필요할 때 사용할 수 있습니다.
지금은 히스토리 모드로 충분할 것입니다.
변경 사항을 저장하고 브라우저를 보세요.
모든 것이 계속 작동할 것입니다.
경로를 다른 것으로 변경해 봅시다.
애플리케이션은 레코드와 연관된 컴포넌트를 계속 렌더링할 것입니다.

이 행동은 괜찮지만, 몇 가지 인식해야 할 사항이 있습니다.
첫 번째는 페이지가 새로고침된다는 것입니다.
만약 우리가 네트워크 패널을 보고, 그것을 지운 다음 경로를 변경한다면, 이것은 페이지 새로고침을 초래할 것입니다.
이것은 Vue나 심지어 JavaScript와는 문제가 없습니다.
이 행동은 브라우저가 어떻게 작동해야 하는지입니다.
주소 표시줄의 URL에 변경이 생길 때마다, 브라우저는 새 요청을 강제할 것입니다.
그렇지 않으면 웹을 탐색하는 것이 어려울 것입니다.
이전에 해시를 사용했을 때는 이러한 경우가 아니었습니다.
이는 브라우저가 해시 뒤의 모든 것이 페이지의 내용과 관련이 있고 다른 위치와는 관련이 없다는 것을 충분히 알고 있기 때문입니다.
만약 우리가 자산을 다시 로드하지 않고 페이지 간에 탐색하고 싶다면, 우리는 링크를 추가해야 합니다.
어쨌든 그것은 완벽하게 괜찮습니다.
사용자들은 일반적으로 주소 표시줄의 URL을 계속 변경하면서 사이트를 탐색하지 않습니다.
그들은 링크를 클릭하여 탐색합니다.
다음 강의에서 링크 생성 방법을 배울 것입니다.

마지막으로 언급하고 싶은 것은 페이지가 클라이언트에게 전달되는 방법입니다.
서버는 항상 요청을 처리하는 데 우선 순위를 가집니다.
Vue는 클라이언트 측 라이브러리입니다.
애플리케이션이 클라이언트에게 전달될 때까지 실행되지 않습니다.
따라서 URL에 관계없이 항상 인덱스된 HTML 파일로 응답하는 것이 중요합니다.
about 페이지에 요청을 한다고 해서 Vue 라우터가 자동으로 처리하는 것은 아닙니다.
인덱스 파일이 전달된 후, 서버는 이와 같은 것들에 대한 첫 번째 선택권을 가집니다.
우리 애플리케이션은 라우팅을 인수하고 올바른 콘텐츠를 표시할 수 있습니다.
우리는 Vite를 사용하여 서버를 만들기 때문에 이에 대해 걱정할 필요가 없습니다.
Vite는 항상 index 파일을 제공할 것입니다.
다른 백엔드를 사용하는 경우에는 직접 설정을 해야 하거나 백엔드 개발자가 처리하도록 할 수 있습니다.
이 강의의 리소스 섹션에서는 히스토리 모드 문서 페이지로의 링크를 제공open in new window합니다.
페이지에서 언급한 대로, 단순히 모드를 히스토리로 변경한다고 해서 자동으로 라우팅이 작동하는 것은 아닙니다.
백엔드에서 이를 완전히 작동시키기 위한 예제 설정을 할 수 있습니다.
이는 사용하는 서버에 따라 다릅니다.
이제 이를 언급하는 이유는 프로덕션 서버에서 이를 테스트하고 싶을 수도 있기 때문입니다.
예상대로 작동하지 않을 수도 있습니다.
그냥 Vue가 라우팅을 처리할 수 있도록 index 파일을 제공하는 것을 기억하세요.
만약 여러분이 Vue에서 히스토리 API가 어떻게 동작하는지 궁금하다면 해당 페이지를 더 읽어보시는 것을 추천합니다.

이는 Vue에서 클라이언트 측 라우팅을 구현할 때 서버 설정이 중요하다는 것을 강조합니다.
서버가 어떤 URL에 대해서도 index.html을 제공하도록 설정해야 Vue 라우터가 클라이언트 측에서 URL 경로에 따라 적절한 컴포넌트를 렌더링할 수 있습니다.
프로덕션 환경에서는 서버 설정을 올바르게 구성해야만 히스토리 모드가 제대로 작동할 것이며, 이를 위한 구체적인 설정 방법은 사용하는 서버 기술과 백엔드 구성에 따라 다를 수 있습니다.
따라서 히스토리 모드 문서를 참조하여 Vue 애플리케이션에 적합한 서버 설정을 확인하고 구현하는 것이 중요합니다.