Micro Frontends의 개념Micro Frontends는 대규모 프론트엔드 프로젝트를 더 작고, 관리 가능한 부분으로 나누는 접근 방식입니다. 이 개념은 백엔드의 마이크로서비스 아키텍처(MSA)에서 영감을 받았으며, micro-frontends.org에서 자세히 설명되어 있습니다. 이 방식의 핵심은 큰 애플리케이션을 분할하여, 각 팀이 독립적으로 작업할 수 있는 구조를 만드는 것입니다. 이렇게 하면 각 팀은 자신의 기술 스택을 선택하고, 애플리케이션의 특정 부분에 집중할 수 있습니다. 결과적으로, 마이크로 프론트엔드는 개발 효율성을 높이고, 코드베이스의 복잡성을 줄이며, 더 빠른 기능 출시를 가능하게 합니다.Module Federation 개념 설명Module Federation은 웹팩(Webpa..

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

살펴보기React에서 Custom Hook을 사용하는 것은 코드 재사용성, 관심사의 분리, 그리고 테스트 용이성을 개선하는 효과적인 방법입니다. 이러한 특성은 특히 대규모 애플리케이션의 유지보수성과 가독성에 큰 영향을 미칩니다. 아래의 예시를 통해 이를 더 자세히 살펴보겠습니다. 예시 코드useUsersQuery.tsimport { useRef } from 'react';import { useQuery } from '@tanstack/react-query';//////interface UseUsersQueryParams { /** * if you want to get specific page, pass page number */ usersPage?: number; /** * if you ..

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

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

살펴보기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 } =..