뇌 채우기 공간

회사에서 어드민 쪽 페이지를 만들게 되어서 여러가지 그리드 라이브러리들을 살펴봤다. 집중적으로 본 것은 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..

1. react forwardRef https://www.daleseo.com/react-forward-ref/ [React] forwardRef 사용법 Engineering Blog by Dale Seo www.daleseo.com 2. react project structure https://ko.reactjs.org/docs/faq-structure.html 파일 구조 – React A JavaScript library for building user interfaces ko.reactjs.org 3. slot machine animation https://stackoverflow.com/questions/62426257/creating-an-animation-for-a-basic-react-slo..

1. Delete ␍ 에러 https://noogoonaa.tistory.com/62 VSCode에서 발생하는 Delete `␍` eslint (prettier/prettier) 해결방법 Prettier와 ESLint를 프로젝트에 적용하던 중 아래과 같은 오류가 ESLint에서 발생했습니다. Delete `␍` eslint (prettier/prettier) 사실 ESLint에서 발생하는 오류라서 실행은 정상적으로 되지만, 이러한 오류.. noogoonaa.tistory.com 2. react-dom.development.js:67 Warning: validateDOMNesting(...): cannot appear as a descendant of . https://pythonq.com/so/react..

드라이퍼스 모델 https://shallaa.postach.io/post/deuraipeoseu-model-dreyfus-model 드라이퍼스 모델 Dreyfus model 철학자 드라이퍼스 (Hubert L. Dreyfus)가 저서 Mind Over Machine의 도입부에서 제안한 기술 습득의 5단계 모델 초급자(Novice), 초중급자(Advanced Beginner), 능숙자(Competent), 숙련자(Proficient) 그리고 전문가(Exper shallaa.postach.io http://blog.lastmind.io/archives/593 Dreyfus Model 모든 관리자의 이상 관리자의 입장에서 가장 예뻐 보이는 동료는 누구일까? 여러 가지 답이 있을 수 있겠지만, 그 중 하나는 아..

1. AG GRID 회사에서 쓸 테이블 라이브러리를 여러 비교 끝에 ag grid로 정하게 되었다. (거의?) 그래서 회사에서 쓰게 될 기능을 미리 한번 생각을 해보라고 하셨다. https://www.ag-grid.com/react-data-grid/context-menu/ React Data Grid: Context Menu The user can bring up the context menu by right clicking on a cell. Download v26 of the best React Data Grid in the world now. www.ag-grid.com enterprise기능을 실험해보고 싶으면 저 버튼을 클릭해서 plunker에 들어가서 해볼 수 있다. context기능 중에 ..

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

1. react recoil https://sso-feeling.tistory.com/742 [REACT] react + typescript + recoil todo list 만들기 [Recoil이란?] https://recoiljs.org/ko/docs/introduction/motivation 동기 | Recoil 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이.. sso-feeling.tistory.com 2. material table material table https://material-table.com/#/docs/install material table edit https://material-table.com/#/..

1. ag-grid react-table, mui data grid 외에 또 react 에서 data table 을 만들 수 있는 라이브러리가 있다. https://www.ag-grid.com/react-data-grid/getting-started/#getting-started-2 React Data Grid: Get Started with AG Grid AG Grid is the industry standard for React Enterprise Applications. Download v26 of the best React Data Grid in the world now. www.ag-grid.com https://eblo.tistory.com/32 AG-GRID GRID OPTIONS 정의 1...

저번에는 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..

QueryClientProvider안에는 이렇게 하나의 컴포넌트만 들어가야한다. div로 감싸서 하나로 리턴하는게 아니라 이렇게!!