프론트엔드 공부 블로그 프론트엔드 공부 블로그

UI 요소를 언마운트하지 않고 숨기면서 상태와 DOM을 보존하는 방법웹 애플리케이션을 개발하다 보면 다음과 같은 상황을 마주칠 때가 있다.사용자가 잠시 사이드바를 닫고 나중에 다시 열지 않을까 싶을 때탭 전환 시 입력 폼의 값이나 스크롤 위치를 유지하고 싶을 때숨겨진 구성요소는 렌더링 우선순위를 낮추고, 보이게 되는 순간 빠르게 표시되기를 원할 때이런 경우 기존에는 조건부 렌더링을 사용해 해당 컴포넌트를 마운트/언마운트 했지만, 언마운트되는 순간 내부 상태와 DOM이 사라지는 문제가 있다.React 19에서는 이런 문제를 해결하기 위해 경계(boundary)를 도입하여, 숨김 상태에서도 내부 상태와 DOM을 유지하면서, 보이는 순간 다시 활성화할 수 있게하는 기능을 추가해줬다 ! ❓ 는 무엇인가?는 자..

UI 컴포넌트를 만들 때, 때로는 기능별 래퍼(wrapper)를 여러 겹 쌓아야 할 때가 있다. 예를 들면 다음과 같은 케이스들이다. 🍙스타일 래퍼 (MarginLayout, PaddingWrapper 등)기능 래퍼 (HoverEffectWrapper, FocusTrapWrapper 등)UI 프레임워크 래퍼 (MUI Card 내부에 래핑된 컴포넌트 등)이런 구조에서는 아래와 같은 어려움을 종종 느낄 수 있다...이벤트가 어느 레이어에서 잡혀야 할지 헷갈림stopPropagation / preventDefault 남용래퍼들이 서로 이벤트 처리를 가로채 버림성능 저하나 복잡한 로직 반복이 글에서는 이런 중첩 구조에서 어떻게 하면 더 깔끔하고 유지보수성 높은 방식으로 이벤트 처리를 할 수 있는지, 참고할 패..

느린 첫 로딩을 줄이는 똑똑한 방법React 프로젝트를 만들다 보면, 어느 순간 빌드된 번들 크기가 커져서 페이지 진입이 느려지는 현상을 겪게 된다.그럴 때 자주 듣게 되는 말이 바로 "코드 스플리팅"React 공식적으로는 React.lazy()와 Suspense를 쓰는 걸 권장하지만, 여기엔 살짝 불편한 점도 있다.그래서 나온 게 바로 @loadable/component라고 한다 @loadable/component란?@loadable/component는 React 컴포넌트를 동적으로 불러오고, 필요할 때만 로드하는 방식으로 렌더링 최적화를 도와주는 라이브러리이다.공식 문서: https://loadable-components.com/ Loadable ComponentsThe recommended Co..

웹에서 우클릭하면 브라우저 기본 메뉴가 뜨는 건 너무나 당연하지만,가끔은 이걸 내 맘대로 커스터마이징하고 싶을 때가 있다.예를 들면 다음과 같은 케이스가 있다 💁특정 영역에서만 동작하는 우클릭 메뉴게임 UI처럼 우클릭 시 전용 액션을 띄우기우클릭으로 관리자 전용 기능 메뉴를 보여주기…같은 요구사항 말이다.이전에 그런 기능이 필요해졌고,그래서 시작된 삽질과 구현기를 공유해본다. 😎 📌 구현의 핵심 -> onContextMenu 이벤트 React나 Vanilla JS 모두에서 contextmenu 이벤트는 마우스 우클릭 시 발생한다.이걸 e.preventDefault()로 막으면?👉 브라우저 기본 메뉴가 안 뜬다.그리고 그 자리에 내가 만든 메뉴를 띄우면 원하는 스타일로 구현할 수 있다.const h..

공통 컴포넌트를 개발할 때, 특히 input이 있는 경우 자주 고민하는 문제가 있다. 바로, 상태를 어디서 컨트롤하게 할지 고민하게 되는 것이다. 공통 컴포넌트 외부에서 컨트롤을 주입하여 외부에서 사용하도록 하는 방법이 있고, 공통 컴포넌트 내부에서 자체적으로 컨트롤되도록 설정하는 방법이 있다. 전자의 경우는 좀 더 다양한 상황에서 사용할 수 있는 컴포넌트를 개발할 수 있다는 장점이 있다 🐥후자의 경우는 좀 더 선언적으로 컴포넌트를 생성하여 내부 구현이 어떻게 되었든 간에, 기능을 더 손쉽게 외부에서 가져다 사용할 수 있는 장점이 있다 🐣 근본적으로는 컴포넌트에서 상태 관리의 책임을 어디냐 두느냐, 에 대한 질문도 같이 포함되어 있다고 생각한다. Controlled VS Uncontrolled상태 소..

🎯 들어가며React로 Micro-Frontend architecture(MFA)를 구성할 때 Webpack 기반의 Module Federation은 꽤 강력한 옵션이다. 그런데 최근 등장한 Rspack은 Webpack과 API가 유사하면서도 훨씬 빠른 빌드 성능을 자랑한다.이번 글에서는 Rspack 환경에서 Module Federation과 Hot Module Replacement(HMR) 를 적용하여 MFE 구조를 만드는 방법을 간단하게 기록해봤다.Rspack으로 Module Federation 구성하기React 앱 간 모듈 공유 (Remote ↔ Host)HMR이 잘 적용되는 구조로 설정하기공식 문서와 module-federation-examples/rspack_hmr 예제를 바탕으로 예제를 만들..

개발을 하다 보면 마크다운 문서에 인터랙티브한 React 컴포넌트를 섞고 싶을 때가 있을 수 있다.(ex. 문서 안에 버튼을 넣거나, 경고 박스를 커스텀 컴포넌트로 만들고 싶을 때) 그럴 때 유용하게 쓰이는 게 바로 MDX이다 🍹 ✨ MDX란? MDX는 Markdown + JSX이다.즉, 마크다운 문법 안에서 React 컴포넌트를 직접 사용할 수 있는 포맷을 의미한다. 직접 예시로 확인해보자면, 다음과 같은 느낌이다.# 안녕하세요이건 일반 마크다운입니다.눌러보세요!+ markdown 문법 #과 컴포넌트 Button이 동시에 존재하는 특이한 문법이다 🚀 Next.js 15에서 MDX 사용하는 방법그렇다면 이번에는 App Router기반 Next.js 15버전에서 직접 MDX를 써보고자 한다. 먼저..

React를 쓰다 보면, HTML 문자열을 그대로 DOM에 삽입해야 하는 상황이 종종 있다. 예를 들어 CMS에서 내려오는 콘텐츠, 외부 라이브러리에서 생성된 HTML, 혹은 서버에서 렌더링된 일부 HTML 조각 등을 사용할 때 그렇다. 그런데 React에서는 일반적으로 HTML 문자열을 직접 넣을 수 없다.그래도 넣어야 하는 경우가 있다면 사용할 수 있는 게 바로 dangerouslySetInnerHTML인데, 이름부터 위험하듯, 조심스럽게 사용해야 한다. 🤔 왜 dangerouslySetInnerHTML일까?React는 XSS(Cross-Site Scripting) 공격을 방지하기 위해 JSX 내부에서 HTML 문자열을 직접 렌더링하지 못하게 막는다.그래서 HTML 문자열을 렌더링하려면 특별한 방법..