유니네 Library

1. Vue 3에서 Vue Router란? Vue Router는 Vue.js 애플리케이션에서 페이지 간 이동(라우팅)을 관리하는 라이브러리이다.Vue 3에서는 Vue Router 4.x 버전을 사용하며, 기존 Vue 2와는 일부 차이점이 있다. 이 글에서는 Vue 3에서 Vue Router를 설정하는 방법을 단계별로 설명하고,기본적인 라우팅 설정부터 동적 라우트, Lazy Loading, 404 페이지 처리까지 알아본다. 2. Vue 3에서 Vue Router 설정하기 Vue 3에서 라우터 설정을 담당하는 index.js 파일을 생성해야 한다. 📌 기본적인 Vue Router 설정 (src/router/index.js)import { createRouter, createWebHistory } from ..

Vue.js 프로젝트에서 Module not found: Error: Can't resolve 'axios' 오류가 발생했다면,이는 axios 모듈을 찾을 수 없다는 의미이다. 이 오류가 발생하는 주요 원인과 해결 방법을 단계별로 알아본다. 📌 1. 오류 원인 분석 이 오류는 보통 다음 3가지 이유로 발생한다. 1️⃣ axios가 설치되지 않은 경우Vue 프로젝트에 axios 패키지가 설치되지 않았거나, package.json 파일에 포함되지 않은 경우. 2️⃣ 잘못된 설치 경로 문제 • axios가 프로젝트의 올바른 디렉터리에 설치되지 않았을 수 있다. • 프로젝트에서 패키지를 관리하는 node_modules 디렉터리의 구조가 깨졌을 수 있다. 3️⃣ 패키지 매니저(npm, yarn) 문제 • npm..

Vuetify의 v-text-field(입력 필드)와 v-btn(버튼)은 기본적으로 너비가 길게 설정되어 있다.이를 적절하게 조정하려면 Vuetify의 그리드 시스템, 유틸리티 클래스, 속성 활용이 필요하다. ✅ 이 글에서 다룰 내용1️⃣ 그리드 시스템 활용 (v-row, v-col)2️⃣ 유틸리티 클래스 (ma-2, max-width) 사용3️⃣ 속성 (block, width)으로 크기 조정 🟢 1. Vuetify 그리드 시스템을 사용한 크기 조정 Vuetify는 Flexbox 기반의 그리드 시스템을 제공하므로, v-row와 v-col을 사용하면 반응형 크기 조정이 가능하다. ✔ 기본 코드 예제  ✅ 설명: • cols="12" → 모바일에서 전체 너비 사용 • sm="..

Vue 3에서는 반응형 변수를 선언할 때 ref()를 사용한다.ref()는 Vue의 반응형(Reactivity) 시스템을 활용하여 데이터 변경을 감지할 수 있도록 도와준다. ✅ ref()를 사용한 변수 선언 및 데이터 할당 1️⃣ ref()로 변수 선언하기import { ref } from 'vue';// 빈 문자열을 초기값으로 설정const dataVal = ref('');✅ ref('') → Vue의 반응형 변수 선언 2️⃣ ref() 변수에 값 할당하기// 외부에서 주어진 데이터const dataLst = '1234567';// ref() 변수에 데이터 할당dataVal.value = dataLst;✅ .value를 통해 값 변경 → ref()로 선언한 변수는 .value를 통해 값을 변경해야 반응..