기록

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

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

onGridReady: function (api) { this.gridApi = api; this.gridOption = this.girdApi.gridOptionsService.gridOptions; this.gridOption.onCellClicked = function (params) { // 기존 onCellClicked 함수 내용을 수행합니다. onCellClicked(params); // 새로운 내용을 추가합니다. console.log('Cell Clicked!', params); }; }, 1. agGrid의 html 요소 (wapper)에 접근하기 let wapper = api.gridOptionsService.eGridDiv; /* onGridReady(api) { let node = a..

팝업(Popup)과 모달(Modal)은 모두 웹 개발에서 자주 사용되는 UI 패턴 중 하나로, 사용자 인터페이스의 일부분을 가려서 중요한 정보를 강조하거나 다른 작업을 방해하지 않고 수행할 수 있도록 하는 것을 목적으로 합니다. 하지만 두 패턴은 목적과 특징에 따라 다른 차이점이 있습니다. 팝업 팝업은 브라우저 창 외부에 새로운 작은 창을 띄웁니다. 브라우저에서 팝업에 대한 열기 닫기 제어가 가능합니다. (브라우저의 팝업 차단 기능) 팝업 창은 보통 사용자 입력에 의해 닫히고, 다른 작업에 대한 차단 기능이 있습니다. 사용자에게 알림이나 경고 메시지, 광고 등을 보여주기 위해 사용됩니다. 모달 모달은 브라우저 내부에서 상위 레이어를 띄우는 방식으로, 해당 창이 부모 창 위에 표시됩니다. 이는 사용자가 모..

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

아래의 코드에서 setTimeout 함수를 이용하던 중 함수 내부의 this와 함수 외부의 this가 다른 것을 가르키는 것을 확인했습니다. let elem = document.querySelector('#' + this._id + ' #' + elemId); if (elem == null) { setTimeout(function () { elem = document.querySelector('#' + this._id + ' #' + elemId); }); } setTimeout 함수 setTimeout 함수는 비동기 함수로서, 일정 시간이 경과한 후에 함수를 실행하는 기능을 제공합니다. 따라서 setTimeout 함수 내부에서는 콜백 함수를 정의하여 사용해야 합니다. setTimeout 함수의 this..

AgGrid의 gridApi는 그리드 인스턴스에 대한 프로그래밍적인 제어를 제공하는 반면, columnApi는 그리드 컬럼에 대한 제어를 제공합니다. gridApi를 사용하여 할 수 있는 작업은 다음과 같습니다. 행 추가/삭제/갱신하기 셀 값 설정하기 열 너비/높이 조정하기 필터링 및 정렬하기 선택된 행/셀 가져오기 그리드 전체 데이터 가져오기 커서 이동하기 그리드 리사이즈하기 columnApi를 사용하여 할 수 있는 작업은 다음과 같습니다. 컬럼 추가/삭제하기 컬럼 순서 변경하기 컬럼 필터링하기 컬럼 그룹핑하기 컬럼 정렬하기 gridOptionsService는 그리드 인스턴스의 속성 값을 가져오거나 변경하는 기능을 제공합니다. 이를 통해 그리드의 기본 동작을 변경하거나 초기값을 설정할 수 있습니다. 예..

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