Dev Diary 💻

Intro안녕하세요. 이번 시간에는 yarn berry 제거 방법에 대해 알아보겠습니다. 개발 환경은 Next.js + React 구성을 전제로 진행하겠습니다.혹시 yarn berry가 무엇인지 궁금하신 분들은 링크에 걸려있는 포스팅 참고 부탁드립니다 . How to remove yarn berryYarn Berry (Yarn 2+)를 제거하는 방법은 다음과 같습니다:1. Yarn Berry 설정 파일 삭제프로젝트의 루트 디렉토리에서 .yarnrc.yml 파일을 삭제합니다.#.yarnrc.yml filenodeLinker: node-modulesyarnPath: .yarn/releases/yarn-3.6.0.cjs 2. 패키지 매니저 변경Yarn 1.x로 돌아가려면, yarn을 다시 설치해야 합니다. 다..

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