Dev Diary 💻

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-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안녕하세요. select element 에서 dropdown icon 바꾸는 방법에 대해 알아보도록 하겠습니다 :)  How to solve problem Option 1 Option 2 Option 3/* Hide the default dropdown arrow */.custom-select { appearance: none; /* For Firefox */ -webkit-appearance: none; /* For Chrome, Safari, Opera */ -moz-appearance: none; /* For Firefox */ background-image: url('custom-dropdown-icon.png'); /* Custom arrow icon */ backgrou..

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

Intro안녕하세요. React에서 MUI의 TextField를 사용하던 도중 아래와 같은 에러가 발생하였습니다.   Input elements should have autocomplete attributes (suggested: "current-password")   How to solve problem해당 에러가 발생한 이유는 autocomplete 속성을 명시하지 않아서입니다.  autoComplete 속성이란  폼 필드에 브라우저의 자동 완성 기능을 사용할지 여부를 지정합니다. 브라우저는 종종 사용자가 이전에 입력한 데이터를 기억하고, 유사한 입력 필드가 나타날 때 이를 자동으로 완성합니다. 예를 들어, 사용자가 이전에 입력한 이메일 주소나 사용자 이름을 기억하여 다음에 해당 필드에 다시 입력할..

Problem Description 중앙값은 어떤 주어진 값들을 크기의 순서대로 정렬했을 때 가장 중앙에 위치하는 값을 의미합니다. 예를 들어 1, 2, 7, 10, 11의 중앙값은 7입니다. 정수 배열 array가 매개변수로 주어질 때, 중앙값을 return 하도록 solution 함수를 완성해보세요. Restrictions. array의 길이는 홀수입니다. 0 < array의 길이 < 100 -1,000

Problem Description. 우주여행을 하던 머쓱이는 엔진 고장으로 PROGRAMMERS-962 행성에 불시착하게 됐습니다. 입국심사에서 나이를 말해야 하는데, PROGRAMMERS-962 행성에서는 나이를 알파벳으로 말하고 있습니다. a는 0, b는 1, c는 2, ..., j는 9입니다. 예를 들어 23살은 cd, 51살은 fb로 표현합니다. 나이 age가 매개변수로 주어질 때 PROGRAMMER-962식 나이를 return하도록 solution 함수를 완성해주세요. Restrictions. age는 자연수입니다. age ≤ 1,000 PROGRAMMERS-962 행성은 알파벳 소문자만 사용합니다. Input/Output Example. age result 23 "cd" 51 "fb" 100..

Intro 안녕하세요. react hook useSelector 를 사용하던 도중 아래의 에러가 발생했습니다. React Hook "useSelector" cannot be called inside a callback function YourComponent() { useEffect(() => { useSelector((state: RootState) => state.code[SOME_DATA]) }, []) } Why? react hook을 사용할 때는 중요한 2가지 규칙이 있습니다. 1️⃣ Only Call Hooks at the Top Level 루프 조건 또는 중첩된 함수 내에서 Hooks를 호출할 수 없습니다. 항상 React 함수의 Top Level에서 Hooks를 사용해야 합니다. 이 규칙을..

이 글은 원글을 참고하여 정리한 내용입니다. Definition TypeScript Generics는 재사용 가능한 구성요소를 생성하는 방법을 제공하는 도구입니다. generics는 프로그램이 장기적으로 확장가능할 뿐만 아니라 유연할 수 있도록 보장해줍니다. Example # Props interface Props { renderItem: (item: T) => React.ReactNode; keyExtractor: (item: T) => string; data: T[]; } data: 제네릭 타입 T를 받을 배열 요소 renderItem: 타입 T의 react 요소를 반환하는 함수 keyExtractor: 키를 추출하는 함수 # Component 정의 const GenericList = ({ data,..

Intro안녕하세요. 리액트를 사용하던 도중 Warning: validateDOMNesting(...): cannot appear as a child of 에러가 발생했습니다. How to solve the problem코드를 살펴보니 tbody 태그가 없었습니다. 아래의 코드로 수정한 결과 에러가 더이상 발생하지 않았습니다.