웹 개발을 하다 보면, 이미지에서 주된 색상을 추출해 텍스트나 배경 등 디자인 요소에 활용된 경우가 종종 있습니다.  예를 들어, 서버에서 OpenAPI 목록을 제공받아 GPT와 Gemini라는 두 가지 항목을 렌더링 한다고 했을 때를 가정하고 해 보겠습니다.서버에서는 보통 아래 데이터형식으로 보내줍니다.[ { title: 'GPT', logoUrl: 'https://...' }, { title: 'Gemini', logoUrl: 'https://...' }] 하지만 디자인을 구현하기 위해 이러한 색상 정보를 서버에서 매번 제공받는 것은 비용과 성능 면에서 비효율적일 수 있습니다.이미지가 많은 사이트에서는 색상 데이터를 저장하고 관리하는 것이 번거로울 뿐만 아니라, 서버 요청이 많아질수록 성능에도..

살펴보기 React Router는 라우팅을 위한 강력한 도구입니다. 라우팅을 사용하면 애플리케이션의 구조를 분리하고, 사용자에게 다양한 페이지를 제공할 수 있습니다. React Router DOM v6에 새로 생긴 기능인 loader를 활용하면 라우트와 관련된 데이터를 더 쉽게 관리할 수 있습니다. loader는 라우트의 데이터를 로드하기 위한 함수입니다. 이 함수에서 로드된 데이터는 useLoaderData와 useRouteLoaderData 훅을 사용하여 컴포넌트에서 사용할 수 있습니다. 이 글에서는 useLoaderData와 useRouteLoaderData의 차이점과 사용법에 대해 알아보겠습니다. 예제 코드 useLoaderData useLoaderData는 라우트의 로더에서 로드된 데이터에 접근..

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

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

요약 // Bad const queryClient = new QueryClient(); queryClient.invalidateQueries(); // Good const 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, setV..