133. Naming Routes
npm create vue@latest
이 강의에서는 애플리케이션의 개발과 수명 동안 라우트에 이름을 지정하는 방법을 배울 것입니다. 여러분은 애플리케이션의 일부 라우트 경로를 변경해야 할 수도 있습니다. 이는 SEO 개선이나 더 나은 구조를 원하는 등 다양한 이유 때문일 수 있습니다. 이유가 무엇이든 각 컴포넌트에서 링크를 업데이트해야 합니다. 모든 컴포넌트에서 링크를 업데이트하는 것은 확장성이 떨어지며, 특히 수백 개의 컴포넌트가 있는 경우 더욱 그렇습니다. 애플리케이션에서 URL을 생성하는 더 나은 방법은 이름이 있는 라우트를 사용하는 것입니다. 라우트에는 애플리케이션의 다른 부분에서 참조할 수 있는 이름을 지정할 수 있습니다. 심지어 새로운 URL을 생성하는 데에도 사용할 수 있습니다. 라우트에 이름을 추가하는 것은 매우 간단합니다. 라우터 파일 내에서, 홈 라우트에 'name'이라는 속성을 추가할 것입니다. 이 속성을 통해 라우트 레코드에 이름을 지정할 수 있습니다. 이 라운드에는 짧고 관련성 있는 이름을 사용하는 것이 좋습니다. 'home'이라는 이름을 지정할 것입니다. 다른 라우트에도 이름을 지정해봅시다. 이름이 있는 라우트는 경로 대신 이름으로 참조될 수 있습니다. 앱 내의 링크를 경로 대신 이름을 사용하도록 업데이트할 것입니다. 헤더 컴포넌트 파일을 엽니다. 홈 페이지 링크를 경로 대신 이름을 사용하도록 변경할 것입니다. 라우터 링크 컴포넌트의 'to' 속성을 업데이트해야 합니다. 이 속성은 문자열이나 객체로 설정할 수 있습니다. 문자열을 전달하면 경로로 간주하고, 객체를 전달하면 이름을 사용하도록 컴포넌트에 지시할 수 있습니다. 객체에 'name' 속성을 전달할 것입니다. 'name' 속성은 레코드의 이름으로 설정해야 합니다. 홈 페이지의 경로 이름은 'home'입니다. 라우터 링크 컴포넌트는 홈 페이지로의 링크를 생성할 것이며, 객체에 설정한 이름과 일치하는 이름을 레코드에서 찾습니다. 일치하는 항목을 찾으면 해당 라우트에 지정된 경로와 함께 'name' 속성을 사용합니다. 'path' 속성을 추가할 수도 있습니다. 이 속성을 통해 객체에서 경로를 설정할 수 있지만, 속성을 바인딩함으로써 동적이고 복잡한 값을 가질 수 있습니다. 쿼리 매개변수와 같은 추가 값을 설정하고 싶은 경우도 있을 것입니다. 이에 대해서는 미래 강의에서 탐구할 것입니다. 'path' 속성은 추가하지 않을 것입니다. 이름을 사용하는 것은 링크를 생성하는 데 있어 경로를 사용하는 것보다 훨씬 더 확장 가능합니다. URL 구조를 변경하고 싶은 경우도 있을 수 있습니다. 경로를 변경할 때마다 같은 경로를 사용하는 모든 컴포넌트 파일의 링크를 업데이트해야 합니다. 이름을 사용하는 경우 이러한 문제를 걱정할 필요가 없습니다. 원하는 만큼 경로를 변경할 수 있으며, 이름을 사용하는 모든 링크에 변경 사항이 반영됩니다. 이는 더 많은 자유와 유연성을 제공합니다. 이름을 사용하는 또 다른 이유는 링크를 더 읽기 쉽게 만들기 때문입니다. 경로가 길 수도 있습니다. 긴 경로를 입력하는 시간을 절약하고 이름을 사용할 수 있습니다. 이것이 작동하는지 테스트해봅시다. 브라우저에서 앱을 열어보세요. 현재 저는 'about' 페이지에 있습니다. 홈 링크를 클릭하면 경로를 사용하지 않아도 홈 페이지로 이동할 것입니다. 라우터는 객체에 설정한 이름을 기반으로 홈 페이지로의 링크를 생성할 수 있습니다. 다음 강의로 넘어가기 전에 연습문제를 해보세요. 지금까지 생성한 모든 링크를 경로를 직접 입력하는 대신 이름을 사용하도록 업데이트해보세요. 프로세스는 여전히 동일해야 합니다. 이미 라우트에 이름을 지정했습니다. 해야 할 마지막 일은 라우터 링크 컴포넌트를 업데이트하여 경로 대신 이름을 사용하도록 하는 것입니다. 행운을 빌고 다음 강의에서 만나요.
요약
- 애플리케이션 개발 및 수명 동안 라우트에 이름 지정 방법 학습
- 여러 이유로 라우트 경로 변경 필요성 발생 (SEO 개선, 구조 개선 등)
- 각 컴포넌트에서 링크 업데이트 필요성, 하지만 이 방법은 확장성이 떨어짐
- 이름이 있는 라우트 사용이 더 나은 방법으로 제시
- 라우트에 이름을 지정하여 애플리케이션 내 다른 부분에서 참조
- 라우터 파일 내 홈 라우트에 'name' 속성 추가
- 이름이 있는 라우트는 경로 대신 이름으로 참조 가능
- 앱 내 링크를 경로 대신 이름으로 업데이트
- 라우터 링크 컴포넌트의 'to' 속성을 문자열 대신 객체로 바인딩하여 이름 사용
- 이름을 사용하는 것은 경로를 사용하는 것보다 확장 가능하고 유연
- 이름 사용으로 링크가 더 읽기 쉬워짐, 긴 경로 입력 시간 절약
- 앱에서 실제 테스트하여 작동 확인
- 연습문제: 생성한 모든 링크를 경로 대신 이름을 사용하도록 업데이트
- 라우터 링크 컴포넌트를 업데이트하여 이름을 사용하도록 변경 필요