살펴보기React Hook Form은 간편하게 폼을 다룰 수 있는 라이브러리로, 폼 상태를 자동으로 관리하고 입력 요소를 간단하게 처리할 수 있게 도와줍니다. 이 라이브러리에서는 주로 사용되는 Controller 함수와 Register 함수에 대해 알아보겠습니다. 소개 및 기본 개념 설명React Hook Form에서의 Controller와 Register 함수는 모두 폼 요소를 등록하고 폼 상태를 제어하는 데 사용됩니다. Controller 함수는 주로 외부 라이브러리와 통합할 때 유용하며, Register 함수는 직접적으로 폼 요소를 등록할 때 사용됩니다. 코드 작성 방법Controller 함수import { useForm, Controller } from 'react-hook-form';const ..

FontFace란?Web API의 FontFace는 CSS에서 사용할 수 있는 외부 글꼴을 로드하고 관리하는 역할을 합니다. FontFace를 사용하면 다음과 같은 상황에서 유용하게 사용할 수 있습니다. 1. 웹사이트에 특정 글꼴을 사용하고 싶은 경우2. 웹사이트에서 지원하지 않는 글꼴을 사용하고 싶은 경우3. 사용자가 웹사이트에서 특정 글꼴을 선택하는 경우 해당 글꼴을 동적으로 로드하는 경우 예제 코드// MyComponent.jsimport React from 'react';const MyComponent = () => { // fonts 배열은 커스텀 폰트 정보를 담고 있습니다. // ex) 서버에서 불러온 font 정보들 const fonts = [ { family: 'Cust..

요약// Badconst queryClient = new QueryClient();queryClient.invalidateQueries();// Goodconst queryClient = useQueryClient();queryClient.invalidateQueries();   React Query에 대한 소개React Query는 데이터 관리와 캐싱을 위한 강력한 도구로, 애플리케이션에서 데이터를 효율적으로 관리하는 데 큰 도움을 줍니다. 그 중요한 부분 중 하나는 QueryClient 인스턴스의 적절한 관리와 사용입니다. React Query의 QueryClient는 앱 전반에서 데이터 캐싱과 관련된 주요 작업을 처리합니다. 이러한 인스턴스는 앱 내에서 하나의 전역적 상태로 유지되어야 하는데, 그 ..

원인React에서 한글을 입력할 때 두 번 입력되는 오류가 발생하는 경우가 있습니다. 이 오류는 한글이 자음과 모음으로 이루어져 있기 때문에 발생합니다. 자음과 모음을 입력할 때, IME가 입력 중임을 나타내는 isComposing 상태가 됩니다. 이 상태에서 또 다른 키가 입력되면, IME는 해당 키를 모음으로 인식하여 한 글자로 처리합니다. 해결 방법이 오류를 해결하려면, isComposing 상태를 확인하여 이벤트를 처리하는 방법을 사용할 수 있습니다. isComposing 상태가 true인 경우, 이벤트를 무시하거나, 다른 처리를 수행할 수 있습니다. // isComposing 상태를 확인하여 이벤트를 처리하는 예function MyInput(props) { const [value, setVal..

React + webpack5 + TypeScript는 React 개발을 위한 강력한 조합입니다. webpack5는 React 애플리케이션을 빌드하고 배포하는 데 필요한 모든 도구를 제공하며, TypeScript를 사용하여 React 애플리케이션의 코드를 더 안전하고 유지 관리하기 쉽게 만들 수 있습니다. 이 글에서는 React + webpack5 + TypeScript를 빠르고 쉽게 세팅하는 방법을 소개합니다. CRA(Create React App)를 사용하지 않고, 직접 세팅을 진행하므로, React 개발에 대한 기본적인 이해가 있는 경우 누구나 따라 할 수 있습니다.여러 블로그 글에서 세팅 방법을 찾아볼 수 있지만, 버전 차이 등 다양한 이유로 잘 안될 때가 있어서, 내가 직접 작성해 보려고 합니다..

이전글MutationObserver란? DOM 변화 감지 방법 MutationObserver란? DOM 변화 감지 방법DOM은 웹페이지의 구조와 내용을 나타내는 트리 구조입니다. 개발자는 DOM을 통해 웹페이지의 요소를 추가, 삭제, 변경할 수 있습니다. 이러한 DOM의 변화는 이벤트를 통해 감지할 수 있습니다. Mutatoby2009.tistory.com 살펴보기MutationObserver는 DOM 변화를 감지하는 API입니다. 이 API를 사용하여 클릭 이벤트 대상 요소가 동적으로 추가되거나 제거되더라도 click 이벤트를 감지할 수 있습니다.예제코드React.useEffect(() => { // 먼저, event 객체에서 타입을 확인하여 클릭 이벤트인지 확인합니다. 클릭 이벤트가 아니면 함수를 리..