Dev Diary 💻

Intro안녕하세요. 이번시간에는 React MUI에서 anchorEl 란 무엇이며 사용 이유에 대해 알아보겠습니다.  anchorEl ?Material-UI (MUI)에서 팝오버(Popover)나 메뉴(Menu)와 같은 컴포넌트에서 사용되는 속성으로, 팝업의 위치를 지정하는 역할을 합니다. 이 속성은 팝업이 열릴 위치의 기준이 되는 요소(Element)를 지정합니다. 주요 컴포넌트에서의 anchorEl 사용1. PopoverPopover 컴포넌트는 기준 요소인 anchorEl의 위치를 기준으로 화면에 표시됩니다. The content of the Popover. 2. MenuMenu 컴포넌트는 주로 네비게이션 또는 드롭다운 메뉴를 만들 때 사용됩니다. anchorEl을 통해 메뉴가 나타날 위치를 지정..

Intro안녕하세요. 이번 시간에는 TableVirtuoso 사용 중 데이터가 빈 배열일 때 EmptyPlaceholder 속성을 활용하는 방법에 대해 알아보겠습니다.  Example현재 코드는 다음과 같다고 가정해봅시다. 이 상태에서 dataList가 null이거나 빈배열일 때 특정 데이터가 비어있다는 특정 텍스트를 표시해보겠습니다. const VirtuosoTableComponents = (totalColSpan: number): TableComponents => ({ Scroller: React.forwardRef((props, ref) => ( )), Table: (props) => ( ), TableHead: React.forwardRef((props, ref) => ( ..

Intro안녕하세요. 이번 시간에는 react-virtuoso 에서 동적 높이를 설정하는 방법에 대해 알아보겠습니다. 참고로 저는 third-party mui tabler과 결합하여 사용하였습니다.  My casereact-virtuoso mui table 사용법은 아래와 같습니다. height 를 설정해줄 때 다음과 같이 고정값이 들어가게 됩니다. export default function ReactVirtualizedTable() { return ( );} 제 케이스의 경우 여러 rows 데이터가 있고, 그 데이터들은 각각 높이가 달라서 height를 동적으로 설정해줘야 했습니다. 어떤 방법을 사용해야 할까요?  How to solve the problemimport Re..

Intro안녕하세요. 이번 시간에는 react-virtuoso 가 무엇이며, react virtuoso 를 사용하여 react table 렌더링 최적화하는 방법에 대해 알아보도록 하겠습니다. Issuemui react table을 사용하던 도중 데이터 양이 많아지면서 테이블이 그려지는 속도가 느려져 서비스 이용에 문제가 발생하였습니다.  따라서 react table의 성능을 개선하기 위해 개선 방안을 찾아야 했습니다.  관련 라이브러리를 서치하던 도중 TanStack 와, mui 공식 홈페이지에 Virtualized table 부분에 소개되어 있는 react-virtuoso 두개의 라이브러리를 발견하였습니다. star의 수 자체는 TanStack이 더 높았지만 사용방법이 더 쉽고, 기존 프로젝트에 용이하..

Intro안녕하세요. 이번 시간에는 react-apexcharts 의 y축 단위를 설정하는 방법에 대해 알아보겠습니다.  How to solve the problem기존 chart options 코드는 다음과 같습니다. 저의 경우 y축이 화폐 단위였기 때문에 보기 쉽게 자릿수 표시가 필요했습니다. const options: any = { chart: { height: 250, type: 'bar', stacked: false, toolbar: false, animations: { enabled: true, easing: 'easeinout', speed: 500, }..

Intro안녕하세요. react 사용 중 다음의 에러가 발생하였습니다. Warning: Failed prop type: Invalid prop checked of type string supplied to ..., expected boolean.  Why?const MemoizedCheckbox: React.FC = React.memo(({ checked, onChange, value }) => { return })... } label={data} labelPlacement='end' /> 오류의 원인은 MemoizedCheckbox 컴포넌트의 checked prop에 문자열 타입이 전달되었기 때문입니다. checked prop은 boolean 타입을 기대하고 있으며, 문자열이 전..

Intro안녕하세요. react-datepicker 를 사용하던 도중 아래와 같은 오류가 발생하였습니다. SyntaxError: Unexpected token 'export' How to solve the problem date-fns 를 사용해서 아래와 같이 ko (한국어)를 import 하여 사용하고자 했습니다. 하지만 이 부분에서 에러가 발생하더라고요~ import { ko } from 'date-fns/esm/locale' 그래서 이 부분을 다음과 같이 바꿔줬더니 더 이상 에러가 발생하지 않았습니다. 혹시 저와 같은 에러가 발생하는 분들이 있으시다면 이 방법을 활용해보세요 :)import { ko } from 'date-fns/locale'https://github.com/date-fns/date..

Intro안녕하세요. 이번 시간에는 react-datepicker 라이브러리에서 언어를 바꾸는 방법에 대해 알아보도록 하겠습니다. 참고로 react-datepicker 는 react에서 많이 사용하는 달력 라이브러리입니다.  How to Change lang 가장 먼저 date-fns를 설치해줍니다. npm을 사용하신다면 npm을 이용해주시면 됩니다. yarn add date-fns  이후 사용하고자 하는 언어를 import 해줍니다. import { ko } from "date-fns/esm/locale"; } />  local={ko}를 적용한 결과 아래와 같이 캘린더 언어가 한국어로 변경된 모습을 확인할 수 있습니다.

Intro안녕하세요. React에서 window.scroll 이벤트가 제대로 작동하지 않은 에러가 발생하였습니다. 아무리 window.scrollY 값을 구해도 0으로 나오더라고요.   코드는 다음과 같습니다. // stateconst [scrollTop, setScrollTop] = useState(0), headerRef = useRef(null), headerHeight = headerRef?.current?.clientHeight ?? 0, // useEffectuseEffect(() => { const handleScroll = () => { setScrollTop(window.scrollY); }; handleScroll(); window.ad..

Intro안녕하세요. 이번 시간에는 React useForm 라이브러리에 대해 간단히 정리해보려고 합니다. React mui 템플릿을 살펴보던 도중 useForm 라이브러리를 사용하는 부분을 처음 발견했거든요! :)  UseForm?useForm은 React에서 Form 관리를 간편하게 할 수 있도록 도와주는 라이브러리 중 하나입니다. React Hooks를 기반으로 동작합니다. useForm을 사용하면 상태 관리와 유효성 검사 등의 복잡한 폼 관련 작업을 간소화할 수 있어 개발자들이 폼을 더 빠르고 쉽게 작성할 수 있습니다. 이는 개발 생산성을 높이고 코드의 유지보수성을 향상시킵니다. UseForm's functionForm 상태 관리 : useForm 훅을 사용하여 폼의 상태를 관리할 수 있습니다. ..