기록

Vue.js 2.3 버전부터는 v-for와 v-if를 함께 사용할 수 있도록 v-for 디렉티브에 v-if를 추가할 수 있는 기능이 추가되었습니다. 따라서 Vue.js 2.3 이상의 버전에서는 v-for와 v-if를 함께 사용하는 것이 가능합니다. 하지만 Vue.js에서는 v-for와 v-if를 함께 사용하는 것은 좋지 않습니다. 이유는 v-for 디렉티브가 먼저 수행되고, 그 후에 v-if 디렉티브가 실행되기 때문입니다. 이로 인해 원하지 않는 결과를 가져올 수 있습니다. computed v-for와 v-if를 함께 사용하려면 주의가 필요합니다. 만약 v-if를 사용하여 데이터를 필터링하려면, v-for를 사용하는 대신에 computed 속성을 사용하여 필터링 된 데이터를 반환하도록 하는 것이 좋습니다..

보통 부모-자식 컴포넌트 간에 통신에는 props와 $emit을 이용합니다. 하지만 아래 코드에서는 ref를 사용하여 자식컴포넌트의 데이터를 가져왔는데 동적으로 자식 컴포는트가 교체되는 모달에서 공통으로 필요한 기능인 getData 버튼을 부모 컴포넌트에 위치시켰기 때문입니다. 부모에서 $emit -> 자식에서 $emit -> getData 이런식으로 해도 될 것 같긴한데 코드가 어지러워서 ref를 이용하는 방식을 사용해봤습니다. Get Data from QueryLst 위의 예시에서 자식컴포넌트의 인스턴스에 접근하기 위해 this.$refs.childComp를 사용하고, 이를 통해 자식 컴포넌트의 data 속성에 접근하여 데이터를 가져오고 있습니다. 다만, ref를 사용하여 자식 컴포넌트의 인스턴스에 ..

Object.keys() 를 이용해 배열을 순회하려고 하는데 key값이 index로 들어가는 문제가 있었습니다. Object.keys() 함수는 객체의 키들을 배열로 반환합니다. 이 배열의 인덱스는 0부터 시작하므로, for...in 루프를 사용하여 객체의 키들을 순회할 때, 첫 번째 키는 0이 됩니다. 이 경우 for...in 루프 대신 for...of 루프를 사용하면, 배열의 각 요소를 직접 참조할 수 있습니다. for...of 루프는 배열의 값을 순회하며, 배열의 인덱스를 신경쓰지 않기 때문에 위와 같은 문제가 발생하지 않습니다. let data = this.data; let keys = Object.keys(data); for (let key of keys) { this.data[key] = da..

pinia는 Vue.js 3에서 사용되는 상태 관리 라이브러리로, Vuex와 비슷한 기능을 제공합니다. pinia에서 제공하는 storeToRefs와 mapStores는 pinia를 사용할 때 유용한 도우미 함수들입니다. storeToRefs(store: Store): object storeToRefs 함수는 pinia의 Store 객체를 Vue.js 3의 ref 객체로 변환하는 함수입니다. ref는 Vue.js 3의 반응적인(reactive) 데이터를 다루기 위한 객체로, storeToRefs 함수를 사용하면 Store 객체의 상태를 Vue.js 3 컴포넌트에서 ref로 사용할 수 있게 됩니다. useRuleStore()와 같이 pinia의 useStore() 훅을 사용하여 생성한 Store 객체를 s..

Pinia와 Vuex는 Vue.js 애플리케이션에서 상태 관리를 위한 라이브러리로, Vue.js 애플리케이션에서 상태(state)를 효율적으로 관리하기 위해 사용됩니다. 프로젝트의 구조와 요구사항에 따라 선택하여 사용할 수 있습니다. Vuex Vuex는 Vue.js 애플리케이션에서 공식적으로 제공되는 상태 관리 라이브러리로, Vue.js 애플리케이션에서 전역 상태를 중앙 집중화된 저장소(store)에 저장하고 관리합니다. Vue의 options API를 기반으로 동작하며 Vue.js 애플리케이션의 규모가 크고 복잡할 때 유용하게 사용됩니다. Vuex는 단일 소스의 진실된 상태(single source of truth)를 유지하고, 상태의 변화를 추적하며, 상태를 동기화하여 컴포넌트 간의 데이터 공유와 상..

modal창의 기본 틀을 만들어 두고 내용을 교체하는 코드 입니다. {{ contentsName }} OK Close component 태그와 defineAsyncComponent 그리고 computed 속성 내부에 있는 defineAsyncComponent는 동적으로 컴포넌트를 로드하고 내용을 교체하기 위한 Vue.js 3의 기능들입니다. 1. component 태그 이 부분은 Vue의 동적 컴포넌트를 나타내는 태그입니다. :is 속성을 사용하여 동적으로 로드되는 컴포넌트를 지정할 수 있습니다. 2. defineAsyncComponent return defineAsyncComponent(() => import('@/path/${this.contentsName}.vue')); defineAsyncComp..

기존 tree 라이브러리의 getNodeByKey함수를 사용하던 것을 div로 바꾸면서 만든 특정 key값를 가진 노드를 찾는 함수입니다. const objArr = [ { id: 1, name: 'Alice', children: [{ id: 11, name: 'Bob' }] }, { id: 2, name: 'Charlie', children: [{ id: 21, name: 'Dave' }] } ]; const key = 'Bob'; let node = getNodeByKey(objArr, key); function getNodeByKey(arr, value) { let result = null; for (let i = 0; i < arr.length; i++) { const obj = arr[i]; i..

methods는 Vue 2에서 사용되던 옵션 중 하나로, 컴포넌트 인스턴스의 메서드를 정의하기 위해 사용됩니다. 반면에 setup은 Vue 3에서 새로 추가된 컴포넌트 옵션으로, 컴포넌트의 로직을 정의하기 위해 사용됩니다. methods 컴포넌트에서 methods를 사용하면 해당 메서드는 컴포넌트 인스턴스에 속하게 됩니다. 즉, 해당 메서드는 this를 통해 컴포넌트 인스턴스 내부의 데이터나 다른 메서드에 접근할 수 있습니다. {{ count }} 위 코드에서 increment() 메서드는 data 옵션에 정의된 count 데이터에 접근하기 위해 this.count를 사용하고 있습니다. 이 increment() 메서드는 methods 객체에 정의되어 있기 때문에 컴포넌트 인스턴스에 속합니다. setup ..

위 코드에서 const newAgGrid = { id: newId }; this.agGrids.push(newAgGrid); agGrids에 데이터를 넣어 주었을 때 무한루프가 발생하여 컴포넌트가 여러개 추가되었습니다. 컴포넌트의 재랜더링을 방지하기 위해 적절한 key 값을 설정해야 합니다. ​ v-for문을 컴포넌트에 직접 걸면 해당 코드가 컴포넌트로 대체 될 때 key속성이 사라지기 때문에 이렇게 div로 감싸서 key를 사용해야합니다.

Modal 모달창은 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌 레이어를 까는 것을 말합니다. 기존의 페이지와 부모-자식 관계를 갖는 창이고 사용자가 모달 창을 닫기 전에는 부모창에서 다른 작업을 수행하지 못하도록 합니다. 메인 구조 일단 메인 구조는 left, center, right 영역으로 나누어져 있습니다. 여기서 right영역의 menu1Contents에서 모달을 띄우는 코드입니다. {{ $t('MenuTab1') }} {{ $t('MenuTab2') }} 부모창 1. 모달 open v-if를 을 사용하여 조건이 참일 때 모달을 오픈합니다. 예를들어, 아래는 v-if="isModalOpen"로 버튼을 클릭했을 때 isModalOpen이 true가 되도록한 코드입니다. 2. 모달 clos..