Dev Diary 💻

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 function Form 상태 관리 : useForm 훅을 사용하여 폼의 상태를 관리할 수 있습니다..

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

Intro 안녕하세요. 이번 시간에는 MUI Dialog Component 에서 화살표 키 (PgUp, PgDn) Internal scroll 을 추가하는 방법에 대해 알아보겠습니다. Mui Dialog Component Open full-screen dialog Sound save MUI Full Dialog 예시는 다음과 같습니다. 위 코드 활용 시에 기본적으로 화살표 방향키 스크롤이 작동하지 않습니다. PgUp, PgDn 버튼도 마찬가지고요. How to solve problem Modal title DialoContent 태그에 tabIndex={0} 속성을 추가하면 화살키 표를 통해 up & down 스크롤을 실행시킬 수 있습니다. PgUp, PgDn 버튼도 잘 작동하고요. Conclusion ..

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