const submitFormData = new FormData() console.log('formData form data:', { work_date: formData.value.work_date, company: formData.value.company, title: formData.value.title, content: formData.value.content, status: formData.value.status, excel_file: formData.value.excel_file }) console.log('formData form data work_date:', formData.value.work_date) submitFormData.append('wo..

Quasar에서 사용할 수 있는 아이콘은 Material Icons을 기본으로 제공합니다. 자주 사용되는 아이콘들을 카테고리별로 정리기본 동작 아이콘:// 기본 동작'add' // 추가 (+)'remove' // 제거 (-)'edit' // 수정 (연필)'delete' // 삭제 (휴지통)'save' // 저장'cancel' // 취소'close' // 닫기 (X)'check' // 확인 (체크)'refresh' // 새로고침'search' // 검색'more_vert' // 더보기 (수직 점3개)'m..

각 방법의 장점:reactive 사용:간단하고 직관적반응성 자동 처리코드 간결성TypeScript 인터페이스:타입 안전성자동 완성 지원에러 사전 방지defineModel:양방향 바인딩컴포넌트 간 데이터 공유최신 Vue 3 기능Composable:로직 재사용관심사 분리테스트 용이실제 사용 예시:방법 1: reactive 객체 사용 방법 2: 인터페이스와 함께 사용 (TypeScript)방법 3: defineModel 사용 (Vue 3.4+)방법 4: Composable 사용// useForm.jsimport { reactive, computed } from 'vue'export function useForm() { const formData = reactive({ ..

Vue 3.3 이상의 최신 문법에 대해 구조, 정의, 사용법, 예제를 정리한 자료Vue 3.3 최신 문법1. defineModel구조const model = defineModel(name, options);정의defineModel은 컴포넌트에서 v-model을 간단하게 정의할 수 있는 문법입니다.다중 v-model을 쉽게 구현할 수 있습니다.사용법name: v-model 이름을 정의.options: 타입, 기본값 등을 포함하는 객체.예제1) 기본 사용 2) 다중 v-model 사용 3) 부모와 연결 2. defineOptions구조defineOptions(options);정의defineOptions는 컴포넌트의 옵션(name, inheritAttrs 등)을 설정하는 문법입니다.script set..

Vue 3.3 이상에서 사용하는 최신 문법 중 하나인 defineModel의 간단한 형태. 이건 컴포넌트에서 v-model을 쉽게 정의하기 위해 사용.이 코드가 하는 일const title = defineModel('title', { type: String, default: ''});이 코드는 다음을 의미해:v-model:title을 컴포넌트에서 받을 수 있도록 준비한다.부모 컴포넌트가 v-model:title로 데이터를 보내면, title이라는 반응형 데이터로 받아들인다.이 데이터는 String 타입이어야 하고, 기본값은 빈 문자열('')이야.용어 설명defineModel: 컴포넌트가 부모 컴포넌트로부터 v-model 데이터를 받을 수 있도록 정의하는 함수첫 번째 인자('title'): 부모가 사용..

Quasar와 Vue.js에서 .env 파일의 환경 변수를 자동으로 변경하여 API_BASE_URL과 같은 값을 환경에 따라 다르게 사용할 수 있습니다. Quasar에서는 .env 파일을 환경별로 분리하여 개발, 빌드, 배포 시 자동으로 설정되도록 지원합니다.1. .env 파일 구성하기Quasar는 환경별 .env 파일을 지원하므로 다음과 같이 환경별 .env 파일을 만들 수 있습니다:.env : 기본값(모든 환경에 적용).env.development : 개발 환경용 변수.env.production : 배포 환경용 변수.env.test : 테스트 환경용 변수예시:# .env.developmentVITE_API_URL=http://localhost:3000# .env.productionVITE_API_UR..