기록

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

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

AgGrid의 gridApi AgGrid의 gridApi는 AgGrid 인스턴스에 대한 프로그래밍적인 제어를 제공합니다. gridApi를 사용하면 셀, 행, 열 등의 요소들에 대한 액세스 및 조작이 가능해집니다. https://sumni.tistory.com/108 AgGrid Options AgGrid의 gridApi는 그리드 인스턴스에 대한 프로그래밍적인 제어를 제공하는 반면, columnApi는 그리드 컬럼에 대한 제어를 제공합니다. gridApi를 사용하여 할 수 있는 작업은 다음과 같습니다. 행 추 sumni.tistory.com AgGrid 컴포넌트에서 onGridReady 메소드가 호출될 때, gridApi와 gridColumnApi를 컴포넌트의 데이터에 할당하고 있습니다. 이 데이터는 Ag..

https://sumni.tistory.com/105 [Vue] 컴포넌트 동적 생성 (agGrid.vue) 그림판 같은 툴에서 요소를 화면에 동적으로 생성하는 기능이 필요한데 외부 라이브러리를 쓰는 AgGrid인 경우 vue의 컴포넌트로 등록되어 있어서 일반 요소와 다른 생성 로직이 필요했습니다. 1. sumni.tistory.com 위의 코드를 실행하던 중 TypeError: Cannot read property 'insertBefore' of null 이런 에러가 발생하였다. 검색 결과 1. 캐시문제 캐시를 비우거나 시크릿 창 열기. 저는 이렇게 했을 때 해결되지 않았습니다. 2. html 템플릿에 초기화 되지 않은 데이터 v-if="!!data"를 이용 v-if="!!data"는 Vue.js의 조건..

그림판 같은 툴에서 요소를 화면에 동적으로 생성하는 기능이 필요한데 외부 라이브러리를 쓰는 AgGrid인 경우 vue의 컴포넌트로 등록되어 있어서 일반 요소와 다른 생성 로직이 필요했습니다. 1. 라이브러리 파일 //AgGrid.vue Rows in this example do not move, only events are fired 2. agGrid를 여러군데서 커스텀해서 사용하기 위해 따로 sample파일을 만든 것 같습니다. //AgGridSample.vue 3. 컴포넌트를 사용하는 화면 v-for문을 사용하여 data()함수 안의 agGrids만큼 컴포넌트를 생성합니다. //Editor.vue 위 코드에서는 defineAsyncComponent 함수를 사용하여 AgGridSample.vue 파일을..

AngularJS의 $scope는 Vue.js에서의 데이터와 관련된 영역과 유사한 개념입니다. Vue.js에서는 $scope 대신 데이터 객체를 사용합니다. AngularJS의 $scope를 Vue.js로 변환하려면 다음과 같은 단계를 따를 수 있습니다. $scope에 정의된 데이터를 Vue.js 데이터 객체로 변환합니다. Vue.js에서 데이터 객체는 일반 JavaScript 객체입니다. Vue.js의 데이터 바인딩 구문(v-bind, v-model, {{}})을 사용하여 Vue.js 데이터 객체와 HTML 요소를 연결합니다. Vue.js의 v-on 디렉티브를 사용하여 HTML 이벤트와 Vue.js 메소드를 연결합니다. AngularJS의 $watch를 Vue.js의 watch 속성으로 변환합니다. A..