Slowly, Steadily, Surely 👩‍💻

https://yejinrla.tistory.com/68 [ React ] AG-GRID applyTransaction 행추가(add), 행삭제(remove), 행수정(update) 기능 구현하기 AG-GRID를 이용해서 그리드 행추가, 행삭제, 행수정 기능을 구현하려고 했다. 검색을 해보니까 생각보다 잘 나와있지 않아서 포스팅해본다. import { GridApi } from 'ag-grid-community' 일단 GridApi를 import 해 yejinrla.tistory.com 예전에 이 글을 올린적이 있었다. 맨 마지막 줄에 보면 데이터셋은 반영되지 않는다고 써있다. 생각해보면 당연하긴 하다. 데이터셋은 useState로 따로 선언되고 관리되고 있으니... const selectedData: ..

* 구조 화면에 2개의 그리드가 존재. 왼쪽 그리드 행을 클릭하면 상세 정보가 오른쪽 그리드에 뜸. * 만들고자 했던 기능 왼쪽 그리드 행을 클릭한 후 상세 정보를 수정중에 왼쪽 그리드 다른 행을 클릭할 때 '작성중입니다. 저장하지 않고 조회 진행하시겠습니까?' alert 창이 뜰 수 있게 하고, 확인을 누르면 조회를 진행 / 취소를 누르면 현상태를 유지시키려고 했다.(return) * 문제 발생 return을 시켜도, 다른 행을 클릭했던게 계속 남아있었다. 왼쪽 그리드에서 클릭된 행과 오른쪽 그리드의 상세정보가 서로 맞지 않게 된 것. * 해결 방안 강제로 다시 기존 행을 클릭하도록 만들기로 했다. 이때 setSelected 함수를 사용했다. forEachNode는 모든 노드를 다 보는데 (map같은 ..

정규식 테스트 사이트 : https://regexr.com/ RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). regexr.com https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test RegExp.prototype.test() - JavaScript | MDN test() 메서드는 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false로 반환합니다. developer.mozilla.org 내가 사용할 ..

우리나라 축제에 대한 데이터가 들어있는 그리드가 있다고 해보자. 현재 진행중인 축제 행을 노란색으로 표시해주고자 한다. getRowStyle : rowStyles 추가하고, rowStyles에 구현해준다. activeParadeList에 진행중인 축제 리스트가 들어있고, 조건에 만족하는 행에 대해서 background : 'yellow' 해준다. const rowStyles = (params: any) => { if (activeParadeList.find((el) => el.paradeName === params.data.cdNm)) { return { background: 'yellow' }; } return { background: '' }; }; const gridCodeTypeProps = { ..

특정 시간이라는 행에 데이터를 입력할 때 입력 문자를 제한할 수 있다. { headerName: '시간', field: 'time', editable: true, valueParser: (params: ValueParserParams) => { if (new RegExp(/[^0-9+:]/).test(params.newValue)) { dispatch({ type: SNACKBAR_OPEN, message: 'hh:mm:ss 형식으로 입력해주세요.', alertSeverity: 'info' }); return params.oldValue; } return params.newValue; } }, 숫자와 : 문자가 아니면 'hh:mm:ss 형식으로 입력해주세요.' 라는 메세지가 뜨는 코드이다.

const arrList2: any[] = []; for (let i = 0; i < arrList?.length; i += 1) { for (let j = 0; j < list.length; j += 1) { if (arrList[i].cdNm === list[j].cdNm) { const temp = list[j]; temp.type = arrList[i].type; arrList2.push(temp); } } } 작업중인 코드를 조금 변환해왔다. arrList와 list의 cdNm을 비교하며 같은 cdNm일때의 list 값을 뽑고, arrList의 type을 추가해준다. 기존에 list object에는 type이라는 속성이 없는데, 저렇게 temp.type = arrList[i].type 해주면 알..

https://mui.com/store/items/minimal-dashboard-free/ Minimal Free – Client & Admin Dashboard - MUI Store Free React Admin Dashboard made with MUI Core components and React. Minimal Free Minimal 6 Demo pages 50+ demo pages - ✓ Multi-language - ✓ Dark/Light Mode ? mui.com 이 샘플의 chart 처럼 column, area chart가 섞여 있는 경우, area chart gradient 설정하는 방법..! fill: { type: ['gradient', 'solid'], gradient: { sha..

https://developer.mozilla.org/ko/docs/Web/CSS/z-index z-index - CSS: Cascading Style Sheets | MDN CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다. developer.mozilla.org 보여지는 순서 지정은 zIndex를 사용하면 된다. zIndex가 클 수록 더 앞에 오게 된다. 단, zIndex가 반영이 되려면 position 속성이 있어야 한다. (ex. position : 'relative' )

{statData}

https://developer-talk.tistory.com/246 [React]객체 배열에서 값 변경 이번 포스팅에서는 React에서 객체의 배열을 가지는 state 값을 변경하는 방법을 소개합니다. 다음과 같이 객체의 배열(objArray)을 가지는 state가 있다고 가정합니다. state = { objArray: [ { code: "", name:.. developer-talk.tistory.com