134. Setting up 'Catch-All' and Redirect Routes
npm create vue@latest
이 강의에서는 존재하지 않는 경로를 처리하고 사용자를 다른 경로로 리디렉션하는 방법을 배울 것입니다. 사용자가 존재하지 않는 페이지에 접속했을 때 리디렉션하는 것은 매우 중요합니다. 이전 강의에서는 이름이 있는 라우트를 만드는 방법에 대해 배웠습니다. 이름이 있는 라우트를 사용하는 이점은 경로를 변경하더라도 애플리케이션 전체에 퍼져있는 링크를 업데이트할 필요가 없다는 것입니다. 이름을 사용하는 한 언제든지 경로를 업데이트할 수 있으며, 링크는 최신 변경 사항을 반영할 것입니다.
하지만 이 방법에는 문제가 있습니다. 무엇인지 살펴봅시다. 에디터에서 라우터 파일을 엽니다. 'Manage' 라우트 레코드의 경로를 'manage-music'으로 변경할 것입니다. 링크가 이름을 사용하도록 업데이트되었기 때문에 추가 변경 사항은 필요 없습니다. 경로를 자유롭게 변경할 수 있으며, 링크들은 자동으로 업데이트될 것입니다. 브라우저로 전환하여 로그인한 후 'Manage' 링크를 클릭합니다. 라우터가 올바른 페이지로 리디렉션합니다. URL은 라우터에서 만든 페이지를 반영합니다.
그러나 문제가 있습니다. 사용자들은 특정 페이지를 즐겨찾기 하거나 브라우저가 방문한 URL을 기억하는 것이 일반적입니다. 이전 URL이 브라우저 기록에 저장되었을 수 있습니다. 예를 들어, 'Manage'라는 단어를 입력하면 'manage'와 'manage music' 경로가 추천됩니다. 사용자는 어떤 경로가 정확한지 어떻게 알 수 있을까요? 오래된 경로를 클릭할 수도 있고, 그러면 빈 페이지가 표시될 것입니다.
여기에는 두 가지 해결책이 있습니다. 하나는 404 메시지를 표시하여 페이지가 더 이상 존재하지 않음을 사용자에게 알리는 것이고, 다른 하나는 사용자를 새 경로로 리디렉션하는 것입니다. 두 번째 해결책은 우리가 사용자가 어디로 가고자 하는지 알고 있기 때문에 잘 작동합니다. 사용자가 어디로 가고 싶어하는지 알고 있다면, 정확한 페이지로 리디렉션해야 합니다. 이는 SEO에도 좋습니다. 왜냐하면 검색 엔진이 새로운 URL 구조에 대해 빠르게 배울 수 있기 때문입니다.
라우터에서 사용자를 리디렉션하는 것은 쉽습니다. 라우터 파일에서 'Roots' 배열에 새 레코드를 추가합니다. 이전에 사용한 'Manage' 경로를 이 레코드의 경로로 설정합니다. 이번에는 컴포넌트를 렌더링하지 않고, 대신 사용자를 다른 경로로 리디렉션할 것입니다. 'redirect' 속성을 추가합니다. 이 속성을 통해 사용자를 다른 경로로 리디렉션할 수 있습니다. 객체에 'name' 속성을 설정하여 'manage'로 리디렉션합니다. 변경 사항을 저장하고 브라우저로 돌아가 'manage' 경로로 변경해봅니다. 새로운 'Manage' 페이지 경로로 리디렉션됩니다.
하지만 존재하지 않는 경로는 어떻게 처리할까요? 대부분의 사이트처럼 404를 표시하거나 사용자를 리디렉션하고 싶을 것입니다. 존재하지 않는 경로를 잡는 방법은 무엇일까요? Vue 라우터는 'catch all' 라우트를 제공합니다. 'catch all' 사용은 간단합니다. 에디터로 돌아가 'Routes' 배열에 새 레코드를 추가합니다. 경로 속성에 'catch all' 정규식을 설정합니다. 'catch all' 라우트는 마지막으로 확인됩니다. 다른 레코드에서 일치하는 것을 찾지 못하면 'catch all' 라우트가 사용됩니다. 'catch all' 라우트가 사용될 경우, 방문자를 홈페이지로 리디렉션할 것입니다. 원한다면 사용자 정의 404 페이지를 만들 수도 있습니다. 브라우저에서 무작위 경로를 입력하면 홈페이지로 리디렉션됩니다. Vue 라우터는 강력하고 유연하며, 리디렉션 속성을 설정함으로써 사용자를 쉽게 리디렉션할 수 있습니다.
요약
- 존재하지 않는 경로 처리 및 사용자를 다른 경로로 리디렉션하는 방법 학습
- 이름이 있는 라우트를 사용하여 경로 변경시 링크 업데이트 불필요
- 라우터 파일에서 'Manage' 라우트의 경로를 'manage-music'으로 변경
- 브라우저 기록에 저장된 이전 URL로 인해 사용자 혼란 발생 가능성
- 해결책: 404 메시지 표시 또는 사용자를 새 경로로 리디렉션
- 라우터에서 'redirect' 속성을 사용하여 사용자 리디렉션 구현
- 'Manage' 라우트의 이전 경로에 'redirect' 속성 추가하여 새 경로로 리디렉션
- 'catch all' 라우트 사용하여 존재하지 않는 경로 처리
- 라우터의 'Routes' 배열에 'catch all' 라우트 추가
- 'catch all' 라우트는 마지막으로 확인되며, 일치하는 라우트가 없을 때 사용됨
- 존재하지 않는 경로에 대해 사용자를 홈페이지로 리디렉션 또는 사용자 정의 404 페이지 표시
- Vue 라우터는 유연하고 강력하여 사용자 리디렉션을 쉽게 구현 가능