그랜파 개발자의 프론트엔드 공부

라우터 설정라우터(Router) 는 웹 애플리케이션에서 URL을 기준으로 화면을 전환하는 기능을 담당하는 시스템입니다. 기본적으로, 웹 애플리케이션에서는 URL을 통해 다른 페이지나 컴포넌트로 이동하게 되는데, 이 때 라우터가 URL을 해석하여 적절한 화면을 렌더링합니다. 라우터의 주요 기능URL과 컴포넌트 매핑: 라우터는 URL을 특정 컴포넌트에 매핑하여, 해당 URL을 요청했을 때 해당 컴포넌트를 렌더링합니다.페이지 전환 관리: 사용자가 웹 애플리케이션 내에서 다른 페이지로 이동할 때, 페이지 전환을 관리하고 상태를 유지하는 역할을 합니다.동적 라우팅: URL에 포함된 파라미터를 추출하여 동적으로 컴포넌트를 렌더링하거나 데이터를 로딩하는 기능도 제공합니다.네비게이션: 링크를 클릭하거나 프로그래밍적으로..

Vuetify에서 MDI(Material Design Icons) 아이콘 사용MDI (Material Design Icons) 는 구글의 머티리얼 디자인 가이드라인을 따르는 아이콘 세트입니다. 이 아이콘들은 웹과 모바일 애플리케이션에서 자주 사용되는 아이콘들을 모아놓은 라이브러리로, SVG 형식으로 제공되며 쉽게 커스터마이징할 수 있습니다. MDI는 구글의 머티리얼 디자인 철학을 기반으로 만들어져 있으며, 사용자 인터페이스(UI)에 적합한 다양한 아이콘을 제공합니다. 이 아이콘들은 웹 애플리케이션, 모바일 애플리케이션, 데스크탑 애플리케이션 등에서 일관성 있고 직관적인 디자인을 유지할 수 있도록 돕습니다.✅ 1. Vuetify 설정에서 아이콘 옵션 추가main.js 설정 파일을 열고, aliases와 m..

Vuetify로 UI 만들기Vue 3와 Vuetify를 사용해서 AppBar, Navigation Drawer, Footer가 포함된 기본 레이아웃 UI를 만들어 드릴게요.좋아요! 홈(Home), 로그인(Login), 계정 만들기(Register) 메뉴를 아이콘과 함께 Navigation Drawer에 배열로 만들어 표시하는 예제를 드릴게요. Vuetify 아이콘은 @mdi/js 기반이므로, v-icon에서 mdi-로 시작하는 이름을 사용해요. 🧱 기본 레이아웃 구조상단: App Bar좌측: Navigation Drawer중앙: Router View or Main Content하단: Footer💡 설치가 되어 있어야 할 것vue create my-appcd my-appvue add vuetify 또는..

🧩 Vuetify란?Vuetify는 Vue.js를 위한 머티리얼 디자인 UI 프레임워크입니다."머티리얼 디자인 UI 프레임워크"는구글의 머티리얼 디자인 가이드를 따르는 UI 컴포넌트들을 미리 만들어놓은 도구 모음이에요! Vuetify는 구글의 Material Design 가이드를 기반으로 만든 Vue.js UI 컴포넌트 라이브러리예요.Vue 2 또는 Vue 3에서 사용 가능버튼, 카드, 다이얼로그, 네비게이션 등 다양한 컴포넌트 제공반응형 레이아웃, 테마 지원, 아이콘 내장🧱 어떤 걸 제공하나요?v-btn: 버튼v-card: 카드v-dialog: 팝업v-text-field: 입력창v-app, v-main, v-container: 레이아웃 구성Dark mode, Grid system, Snackbar..