Dev Diary 💻

Intro안녕하세요. 이번 시간에는 MUI Dialog Component 에서 화살표 키 (PgUp, PgDn) Internal scroll 을 추가하는 방법에 대해 알아보겠습니다. Mui Dialog Component Open full-screen dialog Sound save  MUI Full Dialog 예시는 다음과 같습니다. 위 코드 활용 시에 기본적으로 화살표 방향키 스크롤이 작동하지 않습니다. PgUp, Pg..

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를 사용해야 합니다. 이 규칙을..

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

Intro 안녕하세요. 앞선 포스팅에서 Multi type chart를 구현하는 방법에 대해 알아봤는데요, 이번 시간에는 Chart.js에서 Multi-Axis 를 설정하는 방법에 대해 알아보겠습니다. Multi-Axis 은 데이터의 단위 차이가 커서 한꺼번에 표현할 때 유용합니다. How to do 제 경우 series1, series2 두 데이터에 상응되는 y축을 오른쪽과 왼쪽에 표시하고 싶었습니다. 각각 사용하고자 하는 축이 다르기 때문에 yAxisID 속성을 활용하여 a, b 두개를 지정했습니다. 이후 options에서 해당 yAxisID를 사용해 position을 right, left로 설정해줬습니다. const series1: number[] = [] const series2: number[]..

Intro 안녕하세요. 이번 시간에는 react + typescript 에서 Chart.js 를 사용하는 방법에 대해 알아보겠습니다. How to do 제 케이스의 경우 막대(bar) 그래프와 선(line) 그래프를 함께 그려주고 싶었습니다. 이를 위해 먼저 MutiTypeChart 컴포넌트를 만들었습니다. # MutiTypeChart Component props로 data, height, options 을 정의합니다. 멀티타입 차트를 위해서는 Chart Component 를 사용하면 됩니다. import React from 'react' import { BarController, BarElement, CategoryScale, Chart as ChartJS, ChartData, ChartOptions,..

Intro 안녕하세요. 이번 시간에는 MUI Typography Component 에서 variant 속성을 커스텀 하는 방법에 대해 알아보겠습니다. MUI Typography variant Typography 의 기본 variant 속성은 다음과 같습니다. h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, body1, body2 가 있습니다. 이 외에도 직접 커스텀하여 variant를 추가하고 싶을 때가 있을 겁니다. const theme = createTheme({ components: { MuiTypography: { defaultProps: { variantMapping: { h1: 'h2', h2: 'h2', h3: 'h2', h4: 'h2', h5: 'h2', ..

Intro 안녕하세요. 이번 시간에는 MUI의 Dialog 에서 background color 를 바꾸는 방법에 대해 알아보겠습니다. How to do {/* ... your content ... */} 위와 같이 PaperPorps 속성을 사용하여 backgroundColor를 지정해줄 수 있습니다. https://stackoverflow.com/questions/41158325/how-to-create-material-ui-dialog-with-transparent-background-color

Intro 안녕하세요. 이번시간에는 React 에서 return 시 컴포넌트를 하나로 감싸는 이유에 대해 알아보도록 하겠습니다. Why? React에서 JSX를 사용하면 HTML과 유사한 구문으로 JavaScript를 작성할 수 있습니다. JSX는 JavaScript 표현식이므로, 리액트 컴포넌트의 반환 값으로 여러 요소를 사용하려면 이러한 요소들을 하나의 루트 요소로 묶어주어야 합니다. React의 가상 DOM(virtual DOM)이 기본적으로 단일 루트 노드만을 가지기 때문입니다. 컴포넌트가 여러 요소를 반환하면 React는 요소들을 단일 루트 노드로 꼭 묶어줘야 합니다. Method React에서 이러한 작업을 수행하기 위한 일반적인 방법은, 여러 요소들을 또는 와 같은 노드로 묶어주는 것입니다...

Intro 안녕하세요. 이번에 MUI 기반 회사 홈페이지 개발 업무를 지원하여 맡게 되었습니다. mui 를 사용하다보면 아래와 같은 소스코드를 많이 볼 수 있습니다. theme.spacing(1) 처음에는 2px인가 싶었는데, 2px이 아니더라고요. theme.spacing(2) 의미 Material-UI (mui) 에서 1은 theme.spacing(1)과 같은 의미를 갖습니다. 보통 theme.spacing()은 테마 설정에 따라 다르지만, 기본적으로 8px을 반환합니다. 1은 기본적으로 8px을 나타내며, 2는 16px, 3은 24px, ... 와 같이 8px 간격으로 증가합니다. 그렇다면 픽셀 커스텀이 불가능한가? 커스텀도 가능합니다. createTheme() 함수를 사용하여 수정할 수 있습니다...

Intro 안녕하세요. 저는 recharts chart 차트 라이브러리를 사용하여 차트의 넓이를 화면 100%에 맞춰서 뿌려주고 싶었는데요. width 값을 100%로 설정하자 다음의 에러가 발생했습니다. TS2322: Type 'string' is not assignable to type 'number'. import {NextPage} from "next"; import React from 'react'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts'; const data = [ { name: 'Jan', uv: 4000, pv: 2400, amt: 2400, }, { name: 'Feb'..