Dev Diary 💻

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

Intro 안녕하세요. 이번 시간에는 Zustand 설치 방법 및 예졔를 살펴보도록 하겠습니다. 그전에 앞서 zustand 가 무엇인지 궁금하신 분들은 위 포스팅 참고 부탁드립니다 :) How to install Zustand Zustand 설치방법은 아래와 같습니다. 각자 사용하는 패키지 관리 툴(npm / yarn)에 맞춰 설치해주시면 됩니다. 1. npm npm install zustand 2. yarn yarn add zustand Zustand Simple Example 간단한 예제로 카운터를 만들어 보겠습니다. zustand를 import하고, 상태 컨테이너를 생성해줍니다. 컨테이너 안에는 count, increment(), decrement()이 들어있습니다. import create fro..

Intro 안녕하세요. 리액트에서 innerHtml을 표시하는 방법에 대해 알아보겠습니다. 최근에 스마트에디터 관련한 작업을 진행하고 있었습니다. 에디터에 저장된 내용이 그대로 html tag로 저장되고, 저장된 html tag를 그대로 화면에 표시해야 했죠. 저장된 이 innerHtml를 어떻게 표시해야 할까요? 함께 알아봅시다 :) How to solve the problem React에서 innerHtml를 표시하는 위해서는 아래 코드와 같이 dangerouslySetInnerHTML를 활용할 수 있습니다. import React from 'react'; function MyComponent() { const sampleHtml = 'Hello world! '; return ( ); } 여기서 da..

Intro 안녕하세요. 이번 시간에는 react 에서 useRef 사용시 undefined / null 오류 발생 원인과 해결 방법에 대해 알아보도록 하겠습니다. 우선 제가 useRef를 사용한 코드 예제는 아래와 같습니다. clientHeight를 조절하기 위해 useRef를 사용하여 div tag에 적용했습니다. const divRef = useRef(null); const [handlePosition, setHandlePosition] = useState('300vh'); useEffect(() => { setHandlePosition(`${(divRef.current.clientHeight * 3) / 300}px`); }, []); return ( {/* some content */} ); 하지..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 97. 모듈 소개 연습 프로젝트 시작 98. "사용자" 컴포넌트 추가하기 Technically, the React import is not required in all React projects as you learned. But you're never wrong with adding it. import React from "react"; 99. 재사용 가능한 "카드" 컴포넌트 추가하기 두 개의 css 클래스를 적용하는 방법 import React from "react"; import classes from "./Card.module.css"; const Card = ..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 82. 모듈 소개 Conditional & Dynamic Styles Styled Components CSS Modules error error:03000086:digital envelope routines::initialization error 소스코드를 다운받아 실행하자 다음의 에러가 발생했다. 노드 17관련 에러로 nvm 을 사용하여 node 버전을 낮춰 다시 실행하니 정상 작동되었다. 83. 동적 인라인 스타일 설정하기 input 창에 입력 없이 Add Goal을 눌렀을 때 color를 동적으로 바꿔주도록 한다. Course Goal 하지만 inline 스타일은..