본문 바로가기

728x90

vue

[Nuxt] meta 태그의 name과 property 차이점 웹 페이지를 만들다 보면 태그를 자주 보게 됩니다. 특히 Nuxt3나 Vue 기반 프로젝트에서 useHead를 사용할 때 meta 속성 안에 name과 property를 혼용하게 되는 경우가 많죠. 그런데 이 두 개, 정확히 어떤 차이가 있을까요?오늘은 meta 태그의 name과 property 속성이 어떻게 다르고, 언제 각각을 사용하는 게 맞는지 쉽게 정리해볼게요.✅ meta 태그란?먼저 간단히 짚고 넘어가자면, 태그는 HTML 문서의 "메타데이터"를 정의하는 태그예요. 페이지의 설명, 키워드, 작성자, 뷰포트 설정 등 눈에 보이지 않는 중요한 정보를 담고 있어요.예시:🔍 name vs property 차이점1. name: HTML 표준 메타데이터용도: 일반적인 페이지 정보 설정사용 예: 검색 .. 더보기
[Nuxt.js] <NuxtLink> 사용하는 이유 ! 🚀 NuxtLink를 써야 하는 이유1️⃣ 클라이언트 사이드 네비게이션 (CSR) 적용 태그는 기본적으로 서버에 요청을 보내고 새로고침(F5)하면서 페이지를 이동함.반면 는 페이지를 새로고침 없이 Vue Router를 이용하여 이동하기 때문에, 앱처럼 부드럽게 작동함.NuxtLink를 쓰면 라우트가 변경될 때 Vue의 가상 DOM을 활용하여 필요한 데이터만 업데이트함.✅ 결과적으로 속도가 빠르고 UX가 좋아짐.📌 비교 예시 About 페이지로 이동 About 페이지로 이동2️⃣ 자동 프리페치(Pre-fetch) 기능 지원를 사용하면, 브라우저가 화면에 보이는 링크를 미리 로드할 수 있음.Nuxt 3에서는 기본적으로 prefetch 기능이 활성화되어 있어, 사용자가 클릭하기 전에 이미 데이터를 로드함.. 더보기