본문 바로가기

localstorage

React 앱에 멀티 탭 브라우징 상태 동기화하기 사용자가 동일한 앱을 여러 탭에서 열 때, 필터 상태나 로그인 토큰, 다크모드, 폼 초안 등 UI 상태가 자연스럽게 동기화되면 경험이 크게 좋아집니다. 본 글은 BroadcastChannel과 storage 이벤트를 활용해 React 상태를 멀티 탭으로 안전·실용적으로 동기화하는 방법을 다룹니다.1. 언제 멀티 탭 동기화가 필요한가- 사용자 선호(다크모드, 언어), 필터/검색 상태, 알림 읽음 처리 같은 클라이언트 상태를 여러 탭에서 일관되게 유지하고 싶을 때입니다.- 서버 리소스 중복 요청 방지(한 탭만 폴링/동기화) 및 세션 만료/로그아웃을 모든 탭에 즉시 반영할 때 유용합니다.2. 구현 전략 개요- 1순위: BroadcastChannel API를 사용해 동일 origin의 탭 간 메시지를 실시간으로.. 더보기
React로 사용자 맞춤형 대시보드 구현하기 대시보드는 사용자마다 보고 싶은 데이터와 우선순위가 다릅니다. React로 사용자 맞춤형 대시보드를 구현하면 유지보수성과 성능을 지키면서 만족도와 업무 효율을 크게 높일 수 있습니다. 아래는 실무에서 바로 적용 가능한 설계 원칙과 코드 예시입니다.1. 목표 정의와 데이터 모델먼저 개인화 범위를 정의합니다. 위젯 추가/삭제, 위치/크기 변경, 테마/언어, 역할별 접근제어가 일반적입니다. 레이아웃과 위젯 구성을 분리해 모델링합니다.// layout: react-grid-layout 호환 구조 예시export const defaultLayout = [ { i: 'sales', x: 0, y: 0, w: 4, h: 3, minW: 3, minH: 2 }, { i: 'alerts', x: 4, y: 0, w:.. 더보기
React 앱에서 브라우저 저장소(Local Storage와 Session Storage) 활용하기 브라우저 저장소는 서버 왕복 없이 사용자 상태를 유지하고 UX를 개선하는 데 유용합니다. React에서는 Local Storage와 Session Storage를 적절히 선택해 퍼시스턴스와 탭 범위를 관리합니다. 실무에서 바로 쓸 수 있는 패턴과 커스텀 훅을 소개합니다.1. Local vs Session 핵심 차이Local Storage는 브라우저를 닫아도 남는 영구 저장소이며, 동일 도메인의 모든 탭에서 공유됩니다. Session Storage는 탭마다 분리되고 탭을 닫으면 삭제됩니다. 용량은 브라우저별로 대략 5~10MB이며 문자열만 저장 가능합니다. 민감한 데이터는 저장하지 않습니다.2. React에서 안전하게 읽기/쓰기SSR 환경(Next.js 등)에서는 렌더 중 window가 없을 수 있습니다... 더보기
React 앱에서 Dark Mode 토글 기능 구현하기 다크 모드는 브랜드 일관성, 접근성, 배터리 절약에 도움이 됩니다. 실무에서는 CSS 변수와 html의 dark 클래스 조합이 가장 단순하고 확장성이 좋습니다. 시스템 선호 감지, 로컬 저장, 초기 플래시 방지까지 한 번에 구현해보겠습니다.1. 전략 요약CSS 변수로 색상을 정의하고 html 요소에 dark 클래스를 토글합니다. 사용자의 선택은 localStorage에 저장하고, 선택이 없을 때만 시스템 선호(prefers-color-scheme)를 따릅니다. 초기 로드 시 스크립트로 dark 클래스를 먼저 붙여 FOUC(깜빡임)를 방지합니다.2. CSS 토큰 준비/* index.css 등 */:root { --bg: #ffffff; --fg: #0f172a; color-scheme: light;}.. 더보기

티스토리툴바