132. Tailwind Styles for Active Links
npm create vue@latest
이 강의에서 우리는 활성 링크에 스타일을 추가할 것입니다. 링크는 브라우저의 URL이 앵커 태그의 URL과 일치할 때 활성화됩니다. Vue 라우터를 사용하면 활성 링크의 모양을 변경할 수 있습니다. 이것은 사용자가 올바른 페이지에 있음을 알리는 좋은 방법입니다. 활성 링크를 만드는 것은 대부분의 애플리케이션에서 선택적인 단계입니다. 활성 링크를 만드는 것이 사용자 경험을 개선하는 미묘한 방법이기 때문에 저는 활성 링크를 만드는 것을 추천합니다. 이것은 사용자에게 애플리케이션 내에서 현재 어디에 있는지 알려줍니다. 활성 링크를 만들기 시작합시다. 우리는 Tailwind 프레임워크를 사용하고 있습니다. 활성 링크의 색상을 변경할 클래스를 선택해야 합니다. 저는 이미 클래스를 선택했습니다. 'text yellow five hundred' 클래스를 사용하여 링크의 색상을 노란색으로 변경할 것입니다. 이 클래스는 앵커 요소에 적용해야 합니다. 링크가 활성화되었을 때 클래스를 어떻게 적용하는지 보여드리겠습니다. 메뉴의 'about' 링크를 검사해보겠습니다. 앵커 태그에서 'text white' 클래스를 'text yellow five hundred' 클래스로 바꾸면 텍스트가 즉시 노란색으로 변합니다. Vue 라우터를 사용하여 링크에 'text yellow five hundred' 클래스를 토글할 것입니다. 링크를 자세히 보면 앵커 요소에 추가된 클래스가 있습니다. Tailwind 클래스 외에도 이러한 클래스들은 라우터 링크 컴포넌트에 의해 적용됩니다. 원하는 효과를 얻기 위해 이 동작을 사용자 정의하는 다양한 방법이 있습니다. 가장 간단한 방법은 클래스 이름을 덮어쓰는 것입니다. 우리의 클래스로 이러한 클래스들을 편집기에서 바꿀 수 있습니다. 라우터 파일을 열어보겠습니다. 라우터 변수로 스크롤 내려가세요. createRouter 함수로 전달되는 객체는 활성 링크에 적용되는 클래스를 구성할 수 있는 곳입니다. 라우터에 의해 추가되는 두 가지 클래스가 있습니다. 라우터는 부분적 일치와 정확한 일치를 수행합니다. 먼저 부분적 일치를 확인합니다. 유로와 경로가 완전히 일치하지 않더라도 URL에 경로가 포함되어 있다면 활성 클래스가 적용됩니다. 서브메뉴 내비게이션이 있는 경우에 이것은 좋습니다만, 우리는 그런 것이 없습니다. 이 예에서는 링크에 활성 클래스가 적용되는 것이 말이 되지 않습니다. 두 번째 유형의 일치는 정확한 일치입니다. 경로와 URL이 정확히 일치하면 활성 클래스가 적용됩니다. 우리는 어떤 클래스를 덮어쓸지 결정해야 합니다. 우리의 경우에는 정확한 일치를 덮어쓸 것입니다. 부분적 일치가 있는 경우 링크를 강조 표시할 이유가 없습니다. 구성 객체에 'link exact active class'라는 옵션을 추가할 것입니다. 이 옵션의 값은 사용하고자 하는 클래스의 이름이어야 합니다. 이 옵션을 'text yellow five hundred' 클래스로 설정할 것입니다. 완료되었습니다. 페이지를 새로 고치고 브라우저에서 확인해보세요. 'about' 페이지로 이동하면 'about' 링크가 노란색으로 강조 표시됩니다. 이것은 'text yellow five hundred' 클래스가 링크에 적용되었음을 나타냅니다. 'about' 페이지에서 벗어나면 링크가 다시 흰색으로 바뀝니다. 문제가 하나 있습니다. 홈페이지로 가는 링크가 노란색으로 바뀝니다. 이것은 어색하고 불필요해 보입니다. 우리는 앱 이름을 제외한 다른 링크의 색상이 변경되기를 원합니다. 다행히도 라우터 패키지를 사용하면 특정 링크에 대한 클래스를 덮어쓸 수 있습니다. 클래스를 전역적으로 적용할 필요는 없습니다. 편집기로 돌아가서 헤더 컴포넌트 파일을 엽니다. 홈 페이지로 가는 링크를 찾으세요. 그 위에 '앱 이름'이라고 적힌 주석이 있습니다. 'exact active class'라는 속성을 추가할 것입니다. 이 속성의 값은 정확한 일치가 있을 때 적용되는 클래스의 이름입니다. 라우터 라이브러리는 이 클래스를 전역 클래스보다 우선시할 것입니다. 이 속성을 'no active'로 설정할 것입니다. 'no active' 클래스는 우리 앱에 존재하지 않습니다. 이 이름을 사용하여 이 링크의 색상이 변경되지 않아야 함을 다른 개발자들에게 이해시키려고 합니다. 페이지를 새로 고치세요. 홈 페이지로 가는 링크가 다시 흰색으로 바뀌었습니다. 다른 링크를 탐색하면 다른 링크들이 노란색으로 바뀝니다. 원하는 효과를 달성했습니다. 자세한 정보가 필요하시다면 문서를 확인하세요. 이 강의의 리소스 섹션에서 API 참조 문서 페이지로 가는 링크를 제공합니다. 이 섹션을 마치신 후에 확인해 보시기 바랍니다.
요약
이 강의에서는 Vue 라우터와 Tailwind 프레임워크를 사용하여 활성 링크에 스타일을 추가하는 방법을 배웁니다. 활성 링크는 사용자가 현재 어떤 페이지에 있는지 알려주는 좋은 방법입니다. 'text yellow five hundred' 클래스를 사용하여 활성 링크의 색상을 노란색으로 변경할 예정입니다. 라우터 링크 컴포넌트에 의해 적용된 기본 클래스를 우리의 클래스로 덮어쓰는 방식으로 이를 구현합니다. 라우터 설정에서 'link exact active class' 옵션을 추가하여 정확한 URL 일치시 'text yellow five hundred' 클래스가 적용되도록 설정합니다. 그러나 홈 페이지 링크는 노란색으로 바뀌지 않도록 별도로 설정하여, 전역 설정과 다른 특정 링크에 대한 설정을 적용합니다. 이렇게 함으로써, 활성 링크에 대한 시각적 피드백을 사용자에게 제공하며, 필요한 경우 API 문서에서 추가 정보를 얻을 수 있습니다.