Vue를 쓰면서 함께 Vuetify도 쓰고 있는데 쓰다보니 슬롯을 활용하는 VMenu 컴포넌트를 쓰게 됐는데 동작이 어떻게 되는지 헷갈려서 정리하는 김에 글을 쓴다. 공식 문서로 봤을 때는 React의 children 이랑 비슷한 느낌으로 알았는데 제대로 쓰려고 하니 오래돼서 그런지 헷갈린다.슬롯이란?슬롯(slot)은 Vue에서 제공하는 기능으로 컴포넌트의 재활용성과 유연성을 제공한다. 형태는 정해져 있고 내부 컨텐츠가 달라지는 경우에 유용하게 쓸 수 있다. 공식 문서의 예를 빌리면 다음과 같다. 위처럼 레이아웃이 정해져 있고 내부 컨텐츠가 동적으로 변해야 하는 상황에 슬롯을 사용하기 적합하다. 이런 경우에 슬롯을 적용하면 다음과 같이 사용할 수 있다. ..

Basic Vue using Component Vue에서 기본적으로 한 컴포넌트를 다른 컴포넌트에서 쓰려면 import를 해야 한다. 이런 import 문 없이 template에서 사용한 컴포넌트를 자동 import 해주는 플러그인이 unplugin-vue-components 이다.Using unplugin-vue-components 이렇게 되면 불필요한 import 를 원천적으로 막아주기 때문에 빌드 파일 크기도 줄일 수 있다.자세한 사항은 공식 깃허를 참고하기 바란다.https://github.com/unplugin/unplugin-vue-components GitHub - unplugin/unplugin-vue-components: 📲 On-demand components..

앞선 글과 같은 이유로 해당 플러그인을 알아보도록 한다.https://somuchthings.tistory.com/382 [Vue.js] Unplugin-Vue-Router포트폴리오의 프론트엔드 파트를 Vue & Vuetify & Pinia & Vite 스택으로 만들기로 해서 Vuetify에서 제공하는 프로젝트 생성 커맨드로 프로젝트를 만들었다. 설치하고 나니 vite.config.js와 route에 내가 모somuchthings.tistory.comBasic Vue ImportVue에서는 기본적으로 API를 사용할 때 'vue'에서 import 해서 사용한다.import { computed, ref } from 'vue'const count = ref(0)const doubled = computed((..

포트폴리오의 프론트엔드 파트를 Vue & Vuetify & Pinia & Vite 스택으로 만들기로 해서 Vuetify에서 제공하는 프로젝트 생성 커맨드로 프로젝트를 만들었다. 설치하고 나니 vite.config.js와 route에 내가 모르는 플러그인들이 이미 적용되어 있었다. 이제 Vue를 배운지 이틀 정도인데 모르는 것들이 적용되어 있어 당황스러웠고 하나씩 찾아보았다. 그 중 첫 번째로 눈에 띈 것이 unplugin-vue-router 였고 공식문서 기반으로 정리해보도록 한다.Basic Vue routingVue에서는 공식적인 라우터 기능을 Vue-Router에서 제공한다. 여러 페이지 컴포넌트들을 만들어놓고 이것들을 라우터에 등록해야 한다. 기본적인 라우터 코드는 다음과 같다.import { cr..

CSS 크기 단위 CSS 크기 단위는 대표적으로 px, %, em, rem 등이 있습니다. 하나하나 살펴보도록 합시다. px px는 픽셀 단위입니다. 1px은 화소 1개 크기를 의미하죠. 우리가 보는 디스플레이는 모두 아주 작은 픽셀이 모여 이루어져 있습니다. px은 디바이스 해상도에 따라 상대적은 크기를 갖습니다. 따라서 브라우저는 1px을 1/96 인치의 절대단위로 인식합니다. px은 요소의 크기나 이미지의 크기 지정에 주로 사용됩니다. % %는 백분율 단위의 상대적인 단위입니다. 요소에 지정된 사이즈에 상대적인 사이즈로 지정됩니다. em em은 배수 단위로 상대적인 단위입니다. 요소에 지정된 사이즈에 상대적인 사이즈로 지정됩니다. 예를 들어 1em은 요소에 지정된 사이즈와 같고 2em은 지정된 사이..

선택자(Selector) 선택자는 CSS에서 HTML 요소를 가리킬 때 사용합니다. 선택자를 활용하여 여러 요소 중 원하는 요소만 특정하여 CSS를 적용할 수 있습니다. 전체 선택자 ’*’을 사용하며 모든 요소를 선택합니다. 태그 선택자 태그명에 해당하는 요소를 모두 선택합니다. ID 선택자 요소 어트리뷰트의 id와 일치하는 요소를 선택합니다. id는 HTML 문서 내에서 유일한 값입니다. 클래스 선택자 요소 어트리뷰트의 class와 일치하는 요소를 선택합니다. class는 HTML 문서 내에서 중복될 수 있습니다. 어트리뷰트 선택자 선택자[어트리뷰트]: 선택자의 어트리뷰트가 일치하는 요소들을 선택합니다. 선택자[어트리뷰트=“값”]: 어트리뷰트의 값까지 일치하는 요소들을 선택합니다. 선택자[어트리뷰트~=..