135. Route Alias
npm create vue@latest
이 강의에서는 지난 강의에서 마주한 문제에 대한 대안적인 해결책을 살펴볼 것입니다. 제가 말하는 문제는 사용자가 변경된 경로를 방문했을 때 받을 수 있는 404 오류입니다. 라우터 파일을 살펴보겠습니다. 우리의 라우트 배열에는 음악 관리 페이지를 렌더링하기 위한 레코드가 하나 있습니다. 또 다른 레코드는 사용자를 오래된 경로에서 새 경로로 리디렉션합니다. 이것이 우리가 문제를 해결한 방법입니다. 경로를 변경할 때, 사용자가 직접 오래된 경로를 방문하려고 할 경우 오래된 경로에서 새 경로로 리디렉션하는 것을 항상 확인해야 합니다.
이 문제를 해결하기 위해 우리는 다른 해결책을 구현할 수 있습니다. 우리는 별칭(alias)을 사용할 수 있습니다. 오래된 경로에서 새 경로로 사용자를 리디렉션하는 레코드에 대해 주석을 달겠습니다. 별칭은 동일한 컴포넌트를 렌더링하는 추가 경로입니다. 우리는 컴포넌트를 렌더링하는 레코드에 별칭을 추가할 수 있습니다. 'Manage music' 라우트에 'alias' 속성을 추가할 것입니다. 이 값은 경로가 될 것이며, 이 속성을 오래된 경로인 'Manage'로 설정할 것입니다. 사용자가 'Manage music' 또는 'Manage' 경로 중 하나를 방문하면 라우터는 'Manage' 컴포넌트를 렌더링할 것입니다. 별칭을 컴포넌트의 추가 경로로 생각할 수 있습니다.
'Manage' 페이지를 별칭 경로를 사용하여 방문해 봅시다. 'Manage' 컴포넌트가 렌더링되며 URL은 변경되지 않았습니다. 이것은 이전 솔루션과 비교할 때 중요한 차이점입니다. 이전 솔루션은 사용자가 오래된 경로를 방문하면 사용자를 리디렉션했습니다. 현재 솔루션은 다른 경로에 대해 컴포넌트를 렌더링할 수 있게 합니다. 사용자는 리디렉션되지 않습니다. 이것은 리디렉션을 수행하고 싶지 않은 경우 유용할 수 있습니다.
우리는 에디터로 돌아가 이전 솔루션을 계속 사용할 것입니다. 별칭 속성에 대해 주석을 달고 리디렉션 레코드의 주석을 해제할 것입니다. 검색 엔진이 가능한 빨리 새 URL을 색인하는 것이 더 좋기 때문에 별칭보다는 리디렉션을 선호합니다. 단기적으로는 해로울 수 있지만, 장기적으로는 검색 엔진이 URL 구조 변경을 인지하는 것이 유리하다고 생각합니다. 이 정도로 마치겠습니다. 다음 강의에서 앱 작업을 계속 진행할 것입니다.
요약
- 지난 강의에서 발생한 문제에 대한 대체 해결책 탐구
- 사용자가 변경된 경로를 방문했을 때 발생할 수 있는 404 오류 처리
- 음악 관리 페이지를 렌더링하기 위한 라우트 및 오래된 경로에서 새 경로로 리디렉션하는 라우트 존재
- 경로 변경시, 오래된 경로에서 새 경로로 사용자 리디렉션하는 것의 중요성 강조
- 별칭(alias) 사용을 통한 새로운 해결책 제시
- 'Manage music' 라우트에 'alias' 속성 추가하여 오래된 'Manage' 경로 처리
- 별칭 경로를 사용하여 'Manage' 페이지 방문시 동일 컴포넌트 렌더링
- 별칭은 이전 솔루션(리디렉션)과 다르게 사용자를 리디렉션하지 않음
- 리디렉션 대신 별칭을 사용할 경우의 이점 설명
- 최종적으로 리디렉션을 별칭보다 선호하는 이유 설명 (검색 엔진 최적화 관점)
- 다음 강의에서 앱 작업 계속 진행 예정