뇌 채우기 공간

보호되어 있는 글입니다.

1. react-query React-Query는 React 애플리케이션에서 API 데이터를 쉽게 가져오고 관리할 수 있도록 도와주는 라이브러리입니다. React-Query를 사용하려면, 먼저 React-Query 라이브러리를 설치해야합니다. npm install react-query 다음으로, React-Query의 useQuery hook을 사용하여 데이터를 가져올 수 있습니다. useQuery는 3가지 인자를 받습니다. queryKey: 요청에 사용할 고유 키입니다. 이 값은 문자열 또는 배열일 수 있습니다. 배열을 사용하면 여러 개의 쿼리를 처리할 수 있습니다. queryFn: 실제 데이터를 가져오는 함수입니다. 이 함수는 Promise를 반환해야하며, 데이터를 가져오는 로직이 포함되어야합니다. ..

새로운 프로젝트 세팅을 하면서 어떤 상태관리 라이브러리를 쓸까 생각을 해보았다. 그 전에는 쌩 리덕스를 쓰고 있어서 보일러플레이트 코드가 매우 많이 필요했다. 그래서 비교적 쉽고 보일러플레이트가 적은 recoil을 쓰려고 했는데 zustand가 인기가 더 많아지고 있고 업데이트와 버전 업데이트도 recoil보다 더 활발하여 zustand를 사용해보기로 했다. 결론적으로는 매우 쉬움 따봉 100개 드립니다. 보일러플레이트가 거의 없고, redux devtools를 사용할 수 있다. 1. 설치 yarn add zustand 2. store생성 // store.js import create from 'zustand' // create로 zustand를 불러옵니다. const useStore = create(s..

그동안 프로젝트에서 5버전만 쓰다가 새로운 프로젝트를 세팅하면서 6.3.0 버전을 적용해보려고 한다. 이 프로젝트에서 필수로 가져가야할 것은 중첩라우팅, 리다이렉트, 에러페이지 이므로 이것을 중점으로 포스팅 하겠다. 1. 설치 yarn add react-router-dom 2. index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( , document.getElementById('root') ); 3. App.js (기본 규칙) 위에서..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

내가 이번에 ag grid를 쓰면서 구현하는데 참고했던 자료들 모음zip~ 1. external filter 그리드 바깥의 버튼이나 검색바로 그리드의 컬럼에 필터를 집어넣는 방법 참고 : http://54.222.217.254/javascript-grid-filtering/ https://www.ag-grid.com/react-data-grid/filter-external/ https://www.ag-grid.com/react-data-grid/filter-api/#example-get--set-all-filter-models 2. redux 연결 그리드와 리덕스 연결하는 방법 참고 : https://ag-grid.com/react-data-grid/redux-integration-pt1/ https:/..

오늘은 이렇게 ag grid에서 수정 버튼을 누르면 select box가 활성화되어 값을 변경할 수 있도록 구현해보겠습니다 1. cell Renderer 지정해주기 애초에 데이터를 받아올 때 휴직, 재직이라는 값을 받아와서 select box의 value로 넣어주어야합니다. 꼭 그래야한다는 건 아니고 그러고 싶다는 뜻 import { MenuItem, Select } from '@mui/material'; import clsx from 'clsx'; import React, { useState } from 'react'; import UserStyles from '../User.style'; const CellSelectRenderer = params => { const user_classes = Use..

버튼으로 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..