기록

1. v-model v-model 디렉티브는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 양방향 바인딩 할 수 있게 해줍니다. 자식 컴포넌트에서 이벤트를 발생시켜 부모 컴포넌트에 데이터를 전달할 수 있습니다. // Parent.vue // ChildComponent.vue 위의 코드에서 Parent.vue에서 ChildComponent를 호출할 때 v-model 디렉티브를 사용합니다. ChildComponent.vue에서는 localMessage 변수를 사용하여 자식 컴포넌트의 데이터를 다루고, watch 속성을 사용하여 localMessage 값이 변경될 때 input 이벤트를 발생시켜 Parent.vue에서 부모 컴포넌트에 데이터를 전달합니다. 2. prop prop은 부모 컴포넌트에서 자식 컴포넌트로..

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..

JXLS와 POI는 모두 Java 기반의 엑셀 처리 라이브러리입니다. JXLS 템플릿 기반의 엑셀 생성을 지원하며, 간단하고 직관적인 문법을 제공합니다. 템플릿을 작성하고 데이터를 채워 엑셀 파일을 생성하기 쉽습니다. 다양한 데이터 소스와의 통합이 가능하며, 데이터를 엑셀 파일에 쉽게 매핑할 수 있습니다. 엑셀 파일의 서식과 스타일을 자유롭게 제어할 수 있습니다. POI 엑셀 파일을 생성, 편집, 읽기, 쓰기, 서식 및 스타일 설정, 수식 처리, 그래프 생성 등 다양한 기능을 제공합니다. 다양한 엑셀 파일 버전을 지원하며, Excel 97부터 최신 버전까지의 파일을 처리할 수 있습니다. Apache Software Foundation에서 개발된 오픈 소스로 활발한 커뮤니티와 지속적인 업데이트 및 개선이 ..

Vue의 다국어 적용 Vue에서 다국어 적용을 위해 {{ $t("") }}문법을 사용합니다. {{ ... }}는 Vue.js 템플릿 문법에서 표현식(expression)을 사용할 때 사용되는 구문으로, 표현식은 Vue.js 인스턴스의 데이터(data)와 연결되어 동적으로 렌더링될 값이나 로직을 나타내는 것이 가능합니다. $t("")은 템플릿 내에서 텍스트의 다국어 변환을 위해 사용되는 헬퍼 함수(helper function)입니다. $는 Vue.js에서 전역적으로 사용되는 다국어 변환 객체(Translation Object)를 가리키는 변수로, 이를 통해 다국어 변환을 수행할 수 있습니다. $("")는 빈 문자열에 해당하는 다국어 변환을 수행하는 것을 의미하며, 여기에 실제 다국어 문자열을 넣어주면 해당..