새로운세계

Vue 템플릿 내에서 이벤트 핸들러 함수 안에서 해당 태그 자신의 :속성 값을 확인하는 방법은 몇 가지가 있습니다.1. event.currentTarget 사용 (가장 직접적인 방법):JavaScript의 네이티브 이벤트 객체인 event에는 currentTarget이라는 속성이 있습니다. 이것은 이벤트 리스너가 실제로 부착된 요소를 참조합니다. 이 요소를 통해 해당 태그의 속성에 접근할 수 있습니다. 클릭하세요 설명: * event.currentTarget: 클릭 이벤트가 발생한 div 요소를 가리킵니다. * getAttribute('my-attribute'): HTML 요소의 getAttribute 메서드를 사용하여 my-attribute라는 이름의 속성 값을 가져옵니다. Vue의 :속성은..

Vue 3의 팝업 데이터 관리 데이터 1 추가 데이터 2 추가 저장된 데이터 {{ JSON.stringify(item) }} 설명: {{ JSON.stringify(item) }} 삭제 설명:findPopupData는 특정 키-값 쌍으로 데이터를 검색합니다.removePopupData는 배열에서 특정 인덱스의 데이터를 삭제합니다.에 삭제 버튼을 추가해 각 항목을 삭제할 수 있습니다.6. 팁과 주의사항타입 제한: PopupData의 값 타입을 특정 타입(예: string | number)으로 제한하려면 인터페이스를 ..

TypeScript에서 두 객체의 공통 요소만 복사하는 작업은 자주 필요한 기능입니다. 특히, 객체 안에 또 다른 객체가 내포되어 있을 때, 이를 올바르게 처리하려면 얕은 복사와 깊은 복사를 고려해야 합니다. 이번 포스트에서는 두 객체의 공통 키에 해당하는 요소를 복사하되, 내포된 객체도 복사하는 방법을 예제와 함께 설명하겠습니다.1. 문제 정의우리가 해결하고자 하는 문제는 다음과 같습니다:두 객체(source와 target)가 있을 때, 공통 키에 해당하는 값만 복사.값이 객체인 경우, 해당 객체도 깊게 복사하여 원본 객체와 독립적인 복사본 생성.TypeScript의 타입 안정성을 유지하면서 동적으로 처리. 예를 들어, 다음과 같은 두 객체가 있다고 가정해 봅시다: const source = { n..

안녕하세요, 프론트엔드 개발자 여러분! 오늘은 Vue 3의 코드 설명1. 과 TypeScript간결함: 은 defineProps, defineEmits 등을 생략하고 바로 반응형 상태를 정의할 수 있어 코드가 간결합니다.타입 안정성: TypeScript의 인터페이스(OrderDetail, CustomerData, CompoEvent)를 정의해 데이터 구조를 명확히 하고, 런타임 에러를 줄입니다.Vuetify 컴포넌트: VContainer, VCard, VAlert, VDataTable, VDialog 등을 사용해 반응형 UI를 구현.2. watch 로직다중 속성 감시: orderDetail 객체의 여러 속성(orderType, customerId, deliveryMethod, productList, pa..

TypeScript와 Vue 3를 활용해 강력하고 재사용 가능한 유효성 검증 로직을 구현하는 방법을 소개합니다. 이 글에서는 한글 조사를 처리하는 getParticle 함수와 다양한 검증 규칙(required, min, max, regex, date, dependency)을 포함한 Validator 클래스를 설계하고, Vue 컴포넌트에서 이를 사용하는 방법을 다룹니다. 특히, 반복적인 조사 처리를 리팩토링하여 코드를 간결하게 만든 과정을 강조합니다.1. 프로젝트 배경웹 애플리케이션에서 사용자 입력 폼은 필수적이며, 입력값의 유효성 검증은 사용자 경험과 데이터 무결성을 보장하는 핵심 요소입니다. 이 프로젝트에서는 TypeScript로 작성된 Validator 클래스를 통해 다양한 검증 규칙을 처리하고, 한..

Vue 3의 발주서 작성 발주자 {{ errors.orderer }} 발주 날짜 {{ errors.orderDate }} 품목 추가 품목 추가 품목 목록 품목명 수량 단가 합계 삭제 {{ item.productName }} {{ item.quantity ..

이 글에서는 Vue 3의 Composition API와 TypeScript를 사용하여 자식 2(팝업)에서 입력된 name과 type 데이터를 가져와 자식 1-1에 표시하는 방법을 설명합니다. 이전 예제를 수정하여 자식 2에서 데이터를 입력하고, 이를 부모를 통해 자식 1-1로 전달하는 흐름을 다룹니다.1. 프로젝트 설정Vue 3와 TypeScript로 구성된 프로젝트를 가정합니다. Vite로 설정된 프로젝트를 사용하는 경우, 설정 명령어는 다음과 같습니다: npm create vite@latest my-vue-app -- --template vue-tscd my-vue-appnpm installnpm run dev2. 컴포넌트 구조컴포넌트 구조는 다음과 같습니다:Parent.vue: 부모 컴포넌트로, 자..

Vue 3에서 Composition API와 TypeScript를 사용하여 부모 컴포넌트 아래 자식 컴포넌트 간의 통신을 구현하는 방법을 알아보겠습니다. 이 글에서는 부모 컴포넌트에 자식 1과 자식 2가 있고, 자식 1에서 자식 2(팝업)를 호출하는 예제를 다룹니다. 코드와 함께 단계별로 설명하겠습니다.1. 프로젝트 설정먼저, Vue 3 프로젝트를 TypeScript로 설정합니다. Vite를 사용하여 프로젝트를 생성하는 명령어는 다음과 같습니다:npm create vite@latest my-vue-app -- --template vue-tscd my-vue-appnpm installnpm run dev프로젝트가 준비되었다면, 이제 컴포넌트를 구성해 보겠습니다.2. 컴포넌트 구조아래와 같은 컴포넌트 구조를..

Vue 3의 설명:DataStructure를 ../types/DataStructure에서 임포트합니다.processData 함수는 DataStructure 타입의 데이터를 받아 처리합니다.defineExpose로 processData를 부모 컴포넌트에서 접근 가능하도록 노출합니다.설명:DataStructure를 ../types/DataStructure에서 임포트합니다.parentData는 DataStructure 타입으로 정의됩니다.ref로 자식 컴포넌트를 참조하며, InstanceType으로 타입을 명시합니다.handleButtonClick은 자식 컴포넌트의 processData 함수를 호출합니다.5. 동작 원리부모 컴포넌트에서 버튼을 클릭하면 handleButtonClick이 실행됩니다.childRe..

Vue 3에서 Composition API와 TypeScript를 사용해 RESTful API 데이터를 부모 컴포넌트에서 호출하고, 자식 컴포넌트 두 개(테이블 그리드와 상세 뷰)를 탭으로 구분해 바인딩하는 방법을 소개합니다. Vuetify를 활용해 깔끔한 UI를 구현하며, 실용적인 예제를 통해 배우고자 하는 분들께 도움이 되고자 합니다.이번 예제에서는 부모 컴포넌트에서 검색어 입력과 버튼으로 데이터를 가져오고, 두 자식 컴포넌트가 각각 데이터를 테이블 형태와 클릭 시 개별 행의 상세 정보를 표시하는 방식으로 동작합니다. Vuetify의 탭과 그리드 컴포넌트를 사용해 직관적인 UI를 구성합니다.프로젝트 개요우리의 목표는 다음과 같습니다:부모 컴포넌트: 검색어 입력 필드와 버튼으로 RESTful API 호..