기록

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)를 가리키는 변수로, 이를 통해 다국어 변환을 수행할 수 있습니다. $("")는 빈 문자열에 해당하는 다국어 변환을 수행하는 것을 의미하며, 여기에 실제 다국어 문자열을 넣어주면 해당..

agGrid에는 전체 데이터를 가져오는 옵션이 없어서 전체 노드를 가져온 후 for문으로 데이터를 추출해야합니다. 1. forEachNode getAllRows() { let rowData = []; this.gridApi.forEachNode(node => rowData.push(node.data)); return rowData; } 2. getRenderNodes this.gridApi.getRenderedNodes()

ref ref는 Vue 3의 Composition API에서 제공되는 함수 중 하나로, 반응성(Reactivity)을 적용할 수 있는 변수를 생성합니다. ref 함수를 사용하여 생성된 변수는 값이 변경될 때마다 자동으로 해당 값을 참조하는 컴포넌트를 다시 렌더링하도록 만들어줍니다. 이를 통해 컴포넌트 내부의 데이터가 변경될 때마다 뷰(View)도 자동으로 업데이트되게 됩니다. ref 함수를 사용하여 변수를 생성하면, 해당 변수는 객체로 감싸지게 됩니다. 이는 Vue 3의 반응성 시스템이 객체의 프로퍼티 변경을 추적하기 위함입니다. 따라서 ref 함수를 사용하여 생성된 변수를 읽을 때에는 .value를 사용하여 내부의 값에 접근해야 합니다. ref 함수는setup 함수에서만 사용할 수 있습니다. 따라서 r..

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