요즘에 state library 뭐를 사용할까 하다가 redux 도 사용해보고 recoil 사용해보고 했는데그 어떤것보다도 Flux 패턴과 유사해 러닝커브가 낮다고 생각해서현재 가장 효율적으로 사용할 수 있는 zustand를 선택하게 되었다. [zustand 설치방법]npm install zustandyarn add zustand [type 부터 생성]// src/types.tsexport interface TotalCount { totalCount: number; setTotalCount: (count: number) => void;} [store 를 생성하는 법]// src/store.tsimport create from 'zustand';import { devtools } from 'zus..
분명히 평소에 개발을 하면서 적을 것들이 굉장히 많이 있었는데,블로그도 써야지 써야지 하면서 계속 미루다 보니 벌써 7월이 되었다. 하루에 한 개씩 쓰겠다는 내 다짐은 어디로 멀리멀리 사라져 버렸다.너무 많은 일들에 휩싸여 있었고, 지금도 그 일들을 처리해 나가는 과정 중 인 것 같다.하지만 더 이상 미루지 않고 하나씩 사소한 것이라도 작성해나 가보려고 한다.나태해지지 않기 위해서, 내가 나중에 찾아보기 위해서, 나와 같은 문제에 직면한 사람들을 위해서지금이라도 매일은 못 쓰더라도 포기는 하지 말고 꾸준히 조금이라도 하는 게 중요하다는 생각이 들었다. 2024년 1월부터 7월 나는 과연 보람 있게 살았는가?라고 나 스스로에게 물어보았을 때정말 그렇다라고 답할 수 있을 것 같다.2024년은 정말 열정적으로..
const testList: React.ReactNode[] = newTestList?.map( (m: BoxProps[], idx: number) => { return ( {m[0].tactics} {m.map((inner: BoxProps, idx: number) => ( ))} ) } ) const activeTestList: React.ReactNode[] = newTestList?.map( (m: MitreBoxProps[], idx: number) => { return ( {m[0].tactics} {m.map((inner: BoxProps, idx: number) => ( {inner.isActive && inner.type === 1? : ''} ))} ) } ) 원래 이런 코드 였는데 이..
저번 시간에 customModal 로 여러가지 커스텀 할 수 있는 모달을 만들었었는데.. 그 모달을 필요한곳에 여러개 만들게 되면 계속 상태값과 모달을 열고 닫는 함수가 점점 늘어나서 가독형부분에서 떨어지는 것 같아서.. 여러군데에 계속 한다면 차라리 hook 으로 만드는게 낫겠다 싶어서 hook으로 만들기로 결심했다. hook 으로 만들기 위해서는 일단 3개의 파일이 필요하다. 1.원천 modal component 2.hook으로 만들어서 공용컴포넌트로 내보낼 useModal 3.그리고 이 hook 을 만들어서 보여줄 page 화면 1.진짜 모달 컴포넌트 import React from 'react' import styled from '@emotion/styled' interface ModalProps..
[react] 나만의 customModal 만드는 방법 (with. MUI ,createPortal)
오늘은 modal 을 만들어보려고한다. 항상 modal 을 그냥 만들어서만 썼었는데 이번에 회사에서 MUI로 작업을 하게 되어서 MUI 를 활용한 modal 을 만들어볼것이다. 일단 어떤 modal 이든간에 modal 은 한곳에서만 필요한 컴포넌트가 아니기 때문에 무조건 공통컴포넌트를 만들 필요성있어보인다. 예전에 만들때는 정말 width, height 까지 다 포함해서 하나하나 만들었는데 이번에는 그냥 기본 틀만 만들어볼 생각이다. [1.default Modal ] 일단 CustomModal.tsx 을 만들어준다.(MUI 를 사용해준다.) HTML 삽입 미리보기할 수 없는 소스 이런식으로 만들어주는데 여기서 중요한 포인트는 파라미터 3개다. interface CustomModalProps { isOpe..
[flutter] : Failed assertion: line 858 pos 12: '!debugBuildingDirtyElements': is not true.
그냥 바로 Row 썼을때는 아예 화면에 아무것도 안떴는데 Widget flexibleExampleView() { return Row( children: [ Flexible(flex : 1, child: Container(color: Colors.yellowAccent)), Flexible(flex : 2, child: Container(color: Colors.blueAccent)), Flexible(flex : 3, child: Container(color: Colors.purpleAccent)) ], ); } return 해서 Container 안에 Row 썼을때는 잘 나온다.. Widget flexibleExampleView() { return Container( height: 100, color:..
ag-grid option 정의 rowIdKey: string; // columnDefs: any[]; // 정의된 컬럼정보 rowData?: any[]; //grid json Data 넣어주기 onGridReady: (e: GridReadyEvent) => void; 포인트 : javascript의 onload 이벤트와 유사한 것으로 ready 이 후 필요한 이벤트를 삽입한다. 보통 그리드 자동 사이즈 등을 지정한다. onGridReady: function (event) { event.api.sizeColumnsToFit(); }, onRowValueChanged?: (e: RowValueChangedEvent) => void; onCellValueChanged?: (e: CellValueChanged..