요약// 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 객체에서 타입을 확인하여 클릭 이벤트인지 확인합니다. 클릭 이벤트가 아니면 함수를 리..

살펴보기React Hook Form은 React에서 폼을 쉽게 관리할 수 있도록 도와주는 라이브러리입니다. 이 라이브러리에는 폼의 상태를 추적하는 데 사용되는 두 가지 함수가 있습니다. 바로 useWatch와 watch 함수입니다.useWatch 함수useWatch 함수는 폼의 입력 값이 변경될 때마다 특정 작업을 수행할 수 있는 함수입니다. 이 함수는 다음과 같은 방식으로 사용됩니다.import React, { useState, useEffect, useWatch } from "react";import { Controller, useForm } from "react-hook-form";const MyForm = () => { const { control, register, handleSubmit } =..

문제 정의CSS 협업을 하다 보면 다른 개발자가 작성한 스타일 코드를 보게 됩니다. 하지만, 사람마다 스타일을 정의하는 방식과 순서가 다르기 때문에 해당 스타일을 찾는 데 시간이 소요됩니다. 이는 작은 시간 차이처럼 보이지만, 프로젝트가 커지면 큰 시간 낭비로 이어질 수 있습니다. 따라서 CSS 컨벤션을 정하여 협업하는 개발자들 간의 혼란을 방지하고, 코드의 가독성과 유지 보수성을 향상해야 합니다. CSS 컨벤션CSS는 축약형으로 작성합니다.// Goodpadding: 0 20px;// Badpadding-left: 20px;padding-right: 20px;CSS in JS를 사용할 때는 paddingY: 20px, py: 20px와 같이 축약형을 사용하는 경우가 있습니다. 이렇게 하면 코드가 간결해..