뇌 채우기 공간

버튼으로 row 전체를 수정 상태로 바꾸고 싶다. 그리고 delete를 누르면 행이 삭제됐으면 좋겠다. 어떻게 하는지 살펴보자. 1. defaultColDef에 editable: true 설정 여기서 설정한 defaultColDef는 아래에 gridOptions에 들어간다. 2. gridOptions에서 아래의 설정 추가 gridOptions에는 그리드에 대한 전반적인 설정들이 들어가는데, 그중에서 row전체를 버튼으로 제어를 하고 싶으면 아래의 설정들을 모두 넣어준다. ag grid는 클린코드라서 그런지 함수명만 보고도 행동이 이해가 간다. 오늘도 클린코드의 중요성을 느낀다. 3. AgGridReact 컴포넌트에 props로 넣어주기 여기서 actionCellRenderer은 버튼 렌더링하는 컬럼에 필..

ag grid를 이용하여 그리드 페이지를 제작하는 중! 페이지를 떠났을때 마지막으로 테이블을 변경한 이력이 자동으로 저장되고, 다시 그 페이지를 들어왔을 때 저장된 테이블 변경 상태가 적용된 채로 보여지기를 원했다. 이것을 성공하여 기쁜 마음에 글을 쓴다! 1. filter, column state 저장 save 버튼을 만들고 싶지 않았기 때문에 filter와 column state 를 저장하는 방법은 2가지가 있었다. (column state 는 어딘가에 저장하지 않아도 자동으로 저장됨) 1) filter가 변경이 있을 때마다 저장하기 2) 페이지를 떠날때 저장하기 내가 만드는 서비스는 컬럼 수가 거의 20~30개 정도로 많고 filter가 변경될 가능성이 많았기 때문에 2번째 방법을 선택했다. use..

소개 redux는 새로고침 시에 상태들이 모두 날라가는 반면 redux-persist를 이용하면 로컬 스토리지에 저장이 된다. 그래서 원래 리덕스처럼 사용하는데 새로고침 시에 날라가지 않고 개발자도구에서 삭제 할 때 까지 유지된다. 설치 yarn add redux-persist 코드 store/index.js localStorage에 저장하고 싶으면 import storage from 'redux-persist/lib/storage session Storage에 저장하고 싶으면 import storageSession from 'redux-persist/lib/storage/session 이렇게 설정해주고 원래 쓰던대로 쓰면 됨

Moment와 date-fns 중에서 무엇을 사용할까하며 찾아본 자료 https://blog.bitsrc.io/date-fns-vs-momentjs-9833f7463751 Date-fns vs MomentJS: Choosing the Right Date Utility Library Comparing popular JavaScript date libraries. blog.bitsrc.io 이 블로그를 번역한 글입니다. Moment.js는 자바스크립트에서 날짜 라이브러리로 가장 많이 사용된 라이브러리이다. 하지만 몇년 전부터 이것을 대체할 만한 새로운 라이브러리가 나타났다. 이것은 바로 data-fns이다. Date-fns가 뭐야? 자바스크립트에서 날짜를 핸들링하는 것은 쉽지 않은 일이다. MomentJS를..

보호되어 있는 글입니다.

회사에서 어드민 쪽 페이지를 만들게 되어서 여러가지 그리드 라이브러리들을 살펴봤다. 집중적으로 본 것은 mui data grid, react-table, ag grid가 있다. 난이도는 mui data grid { const data = gridApi.getSelectedRows(); if (data.length > 0) { setBtnDisabled(false); } else { setBtnDisabled(true); } setSelectedRows(gridApi.getSelectedRows()); }; const onCellValueChanged = (e) => { console.log("changed", e.data); }; return ( editable table action1 action1 a..

[Recoil이란?] https://recoiljs.org/ko/docs/introduction/motivation 동기 | Recoil 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 가장 좋다. recoiljs.org 보통 리액트에서는 전역 상태 관리로 리덕스를 많이 사용했다. recoil은 리덕스와 마찬가지로 전역으로 데이터를 구독해서 컴포넌트에서 사용할 수 있는데 훨씬 간단한 라이브러리이다. [사용법] recoil/todo.ts 파일을 만든다. import { atom } from "recoil"; export interface ITodoTypes { id: number; contents: string; isComplete..

저번에는 MUI-DATA GRID를 사용해서 테이블을 만들어보았다. mui에서는 column hide, select , 등등 아주 쉽게 제공해주어서 개발하는데 정말 얼마 걸리지 않는다. 그런데 react-table을 사용하면 이것들을 하나하나 추가해주어야한다. 이번에는 react-table을 사용해보자 (개인적으로 data grid가 코드가 깔끔하고 아주 빠르게 개발할 수 있어서 더 좋다. ) [Row Selection] 참고: column과 rowData는 다른 폴더에 만들었음 export const reactTableColumn = [ { Header: "오더등록일", accessor: "orderDate", }, ... ]; export const rows = [ { id: "1", orderDat..

리덕스에서 타입스크립트를 사용하는 법을 알아보자 출처 : 벨로퍼트 [요약] 1. 모듈에서 액션에 as const붙이기 2. state와 action의 타입 정해주기 3. 리듀서의 반환값과 state의 반환값 일치 시키기 4. Root리듀서에서 RootState export하기 5. index.tsx에 provider에 루트리듀서로 만든 store주입시키기 6. 컴포넌트에서 props 타입 정하기 7. 컴포넌트에서 useSelector로 가져올때 RootState로 지정해서 가져오기 1. modules/counter.ts ★ action에 as const를 붙여준다. 나중에 액션 객체를 만들 때 action.type을 추론하는 과정에서 string으로 추론되지 않고 'counter/INCREASE'와 같이..

[Material Ui Data Grid] https://mui.com/components/data-grid/ React Data Grid component - MUI A fast and extendable react data table and react data grid. It's a feature-rich component available in MIT or Commercial versions. mui.com react에서 테이블을 만드는 라이브러리들은 여러개가 있는데 그 중에서 이번 시간에는 material ui 를 사용해보려고 한다. 사용해본 소감은 정말 세상에나 너무나 쉽다. 내가 구현해보고자 했던 기능은 1. row가 선택될 수 있어야 하지만 일부는 자동으로 선택 불가하도록 2. 일부 colu..