들어가며MF(Module Federation)은 Webpack 5의 핵심 기능으로, 여러 독립적인 애플리케이션 간에 코드와 리소스를 실시간으로 공유할 수 있게 해주는 기술입니다. 이 기술은 마이크로프론트엔드 아키텍처를 구현하는 데 매우 효과적인 도구이며, 대규모 프론트엔드 애플리케이션을 더 작고 관리하기 쉬운 단위로 분할할 수 있게 해줍니다.이에 대한 자세한 설명은 Micro Frontends와 MSA를 위한 Module Federation 글을 참고하시면 이해에 도움이 되실 것 같습니다.문제 상황마이크로프론트엔드 환경에서 MF를 사용하면서 다음과 같은 실제 문제들을 경험했습니다:로컬 개발 시 연결된 모든 서비스를 실행해야 하는 번거로움원격 서버 장애 발생 시 연관된 서비스까지 중단되는 문제컴포넌트 로딩..

현재 저희 회사에서는 마이크로 프론트엔드 아키텍처를 도입해 웹 애플리케이션을 개발하고 있습니다. 이 도입은 아직 1년이 채 되지 않은 과도기적인 상황이라 개발적인 이슈들이 존재하는데, 그중 하나를 "이렇게 개선할 수 있지 않을까?"에 대한 고민을 적어보겠습니다. - remote app: 컴포넌트를 제공하는 앱- host app: 컴포넌트를 사용하는 앱그 중에서도 주요 이슈 중 하나는 host app에서 remote app으로 세션 상태나 API 헤더 초기화 등을 어떻게 처리할 것인가였습니다. 현재는 prop을 통해 세션 키와 유저 정보 같은 global state를 컴포넌트로 전달 후, remote app에서 자체적인 부트스트랩(예: API 헤더 초기화, 상태 재가공 등)을 처리하는 방식을 사용하고 있습..

Overview폼 유효성 검사는 사용자 입력의 정확성과 데이터의 무결성을 보장하기 위한 필수적인 과정입니다. 하지만 복잡한 폼일수록 이 검사를 효율적으로 처리하기 어렵습니다. React Hook Form은 React에서 폼을 쉽게 관리할 수 있도록 돕는 라이브러리로, 간단한 API와 뛰어난 성능을 제공합니다. 하지만 폼 검증을 더욱 최적화하려면, Yup이나 Zod와 같은 유효성 검증 라이브러리와 결합하는 것이 필요합니다. 이 글에서는 Yup이 무엇인지, 왜 사용하는지, 그리고 Zod와 비교했을 때 어떤 차이점이 있는지 살펴보겠습니다. 또한, React Hook Form과 함께 Yup을 사용하여 폼 검증을 구현하는 방법을 예시를 통해 보여드리겠습니다. Yup이란 무엇이며 왜 사용하는가?Yup은 자바스크립트..

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

이 글에서는 화면 흔들림을 방지하고, 자연스러운 스크롤 경험을 제공하기 위한 방법을 설명합니다. 웹 페이지를 만들다 보면 종종 컴포넌트 내에 스크롤이 필요한 경우가 있습니다. 컴포넌트 안에서 스크롤을 최대로 내리면 부모 컴포넌트의 스크롤이 함께 움직이는 문제가 발생할 수 있습니다. 이를 방지하기 위해 HTML 및 Body 태그에 `overflow: hidden` 속성을 적용할 수 있지만, 이로 인해 스크롤바가 사라지면서 화면 크기가 변동되어 사용자에게 불편함을 줄 수 있습니다. 이 글에서는 이러한 문제를 해결하기 위한 방법을 소개합니다.  아래 코드는 리액트(React)에서 이 문제를 해결하기 위한 예제입니다. useEffect 훅을 사용하여 조건에 따라 바디의 패딩을 조정하여 화면 흔들림을 방지합니다...

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