Slowly, Steadily, Surely 👩‍💻

그리드 props에서 deselectAll (boolean) 으로 조절. const gridCodeTypeProps = { ...생략 deselectAll: isDeselectAll }; 근데 왜인지, deselect도 select의 일종이라 보는지 그리드 props onSelectionValue : onCellClicked 의 onCellClicked 메소드가 호출이 되더라.. 그래서 onCellClicked 맨 위에 deselect되어 타는 경우 예외처리를 해준다.. if (!params.length) { return; }

그리드 내에서 소계와 합계를 내고 싶을 때 ! column sum은 나오는데, row sum은 pinnedBottomRowdata를 사용해서 하는 예시만 보였다. https://dong-queue.tistory.com/69 vue ag Grid 합계 지정 하기 안녕하세요. 이전에 agGrid에 대한 기초와 컬럼 서식 정의에 대해 설명드렸는데 https://dong-queue.tistory.com/58 Vue ag-Grid : 컬럼 서식 정의 이전에 Vue에서 ag-Grid를 설치 사용하는 법에 대해 간략하게 적.. dong-queue.tistory.com 단점은.. 데이터 불러올 때 따로 합계를 내야 한다는 것. 그리고 소계를 구현하기 어렵다는 것. 그래서 다시 aggrid를 뒤졌는데, 딱 원하던 걸 발..

분명 회사에서 돌려봤을 때는 됐는데, Uncaught Error: useRoutes() may be used only in the context of a component. 이 에러가 떴다. import { Route, Routes } from "react-router-dom"; import Home from "./pages/Home"; import Start from "./pages/PJTest/Start"; import Question from "./pages/PJTest/Question"; import Result from "./pages/PJTest/Result"; const App = () => { return ( ); }; export default App; 해당 에러는 Router가 필요하다..

1. 컴포넌트 만들기 · GitBook (vlpt.us) 1. 컴포넌트 만들기 · GitBook 1. 컴포넌트 만들기 투두리스트의 기능을 구현하기 전에, 우리 프로젝트에서 필요한 모든 컴포넌트들의 UI 를 미리 만들어보겠습니다. 우선 create-react-app 을 사용하여 새로운 프로젝트를 만들어 react.vlpt.us 이 글을 참고하여 타입스크립트로 투두리스트를 만들어보려고 한다. 해당 글은 자바스크립트 기준이여서 그대로 따라하면 안 된다. react-icons 설치부터 달라서 막혀버린 김에, 기록하면서 해본다. ⛅ react-icons, styled-components 설치 https://www.npmjs.com/package/styled-components styled-components Vi..

https://kth990303.tistory.com/254 [typescript] JS에서 length가 undefined로 뜨는 현상 고치기 객체의 개수를 파악하기 위해 diaryList.length를 console.log하면 아래와 같이 나타나는 현상을 수정해보자. 문제점 일단 diaryList가 제대로 넘어온건 맞는지 확인하기 위해 console.log로 diaryList도 쳐보도. kth990303.tistory.com any[]로 선언된 배열의 length를 찍어보니 undefined가 나왔다. 도대체 왜일까 찾아보니 배열이 key, value로 짝지어지는 Object화가 되어서 그렇다고 했다..! 그래서 Object.keys(배열명).length 이런식으로 찍어주면 나온다!

[0,1] [0,1,2,3,4,5] 이런식으로 되어있는 요일 배열 format을 바꿔주려고 한다. 문자열 치환할 때는 replace 함수를 사용한다. const daysFormatter = (params: any) => { const days = params.value .replace('0', '일') .replace('1', '월') .replace('2', '화') .replace('3', '수') .replace('4', '목') .replace('5', '금') .replace('6', '토'); return days; }; 여러 개 치환하고 싶을 경우, .replace를 붙여나가면 된다. 참고로 요일 배열 특성상 안에 [0,0] 이렇게 중복될 일이 없기 때문에 replace 함수로도 충분히 커버..

리액트에서 그리드의 데이터셋에서 특정 칼럼의 특정 값을 찾아야하는 상황이 있었다. 이런 상황에서 xplatform에서는 lookup함수를 사용했었다. var name = studentList.lookup("studentId",1,"studentNm"); studentId(학생번호)가 1인 학생명을 찾은 소스이다. 리액트에서는 이런 함수가 뭐가 있을까, 하다가 find함수를 find했다. const list = studentList?.find((element) => element.studentId === 1); const name = list.studentNm; lookup과 다르게 find는 해당 row를 반환해준다. 그렇기 때문에 그 row에서 studentNm을 다시 찾아줘야 한다.

AG-GRID를 이용해서 그리드 행추가, 행삭제, 행수정 기능을 구현하려고 했다. 검색을 해보니까 생각보다 잘 나와있지 않아서 포스팅해본다. import { GridApi } from 'ag-grid-community' 일단 GridApi를 import 해주었다. 원하는 applyTransaction 이 없다.. 도대체 이건 어떻게 쓰는 건가 하고 소스를 뒤져보았다. const [gridApi, setGridApi] = useState(); useState로 사용을 하더라.. ➕행 추가 (add) const newRow = { JobNm: '', FromTm: '', ToTm: '', Use_YN: 'Y', Remark: '' }; gridApi?.applyTransaction({ add: [newRow..

https://www.ag-grid.com/javascript-data-grid/value-formatters/ JavaScript Data Grid: Value Formatters Value formatters allow you to format values for display. Download v28 of the best JavaScript Data Grid in the world now. www.ag-grid.com 시작시간 종료시간 0800 1700 이런 그리드가 있다. 둘다 시간이기 때문에 데이터를 넘길 때는 08:00, 17:00 으로 넘기고 싶다. 하지만 입력할 때는 ':' 콜론을 굳이 입력하고 싶진 않다. => 값의 포맷 지정해주기 AG GRID에는 valueFormatter 라는 포맷지..

Node.js 설치 Node.js (nodejs.org) Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Yarn 설치 Installation | Yarn (yarnpkg.com) Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com Visual Studio Code 설치 Visual Studio Code - Code Editing. Redefined Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined..