본문 바로가기

react

React 앱에서 Web Share API 사용하여 콘텐츠 공유하기 Web Share API는 사용자의 네이티브 공유 시트(공유 패널)를 호출하여 링크, 텍스트, 파일을 간편하게 공유할 수 있게 해주는 브라우저 API입니다. 모바일 중심의 UX를 구현할 때 클릭 한 번으로 카카오톡/메시지/메일 등으로 공유할 수 있어 이탈을 줄이고 전환을 높이는 데 효과적입니다. 이 글에서는 React 앱에서 Web Share API를 안정적으로 사용하고, 미지원 환경을 위한 폴백까지 실무적으로 구현하는 방법을 정리합니다.1. 지원 범위와 핵심 포인트- navigator.share: 텍스트/제목/URL 공유를 지원합니다.- navigator.canShare 및 files 옵션: 이미지/파일 공유(레벨 2). 일부 브라우저/플랫폼에서만 동작합니다.- 사용자 제스처 필요: 클릭 등 명시적 사.. 더보기
React에서 Drag-and-Drop API로 파일 순차 업로드 구현하기 React 애플리케이션에서 파일 업로드 기능을 구현할 때, Drag-and-Drop API를 활용하면 사용자 경험을 크게 향상시킬 수 있습니다. 특히 여러 파일을 순차적으로 업로드하는 기능은 서버 부하를 관리하는 데도 유용합니다.1. Drag-and-Drop 기본 구성HTML5 Drag-and-Drop API를 React에서 사용할 때는 이벤트 핸들러를 적절히 설정하여 드래그 및 드롭 이벤트를 관리해야 합니다.function FileDropzone({ onFilesAdded }) { const handleDrop = (event) => { event.preventDefault(); const files = Array.from(event.dataTransfer.files); onFiles.. 더보기
React 앱에서 브라우저 성능 API 활용하여 로딩 속도 최적화하기 브라우저 Performance API는 React 앱의 실제 사용자 성능(RUM)을 가볍게 수집하고, 병목을 데이터 기반으로 개선하는 데 가장 실용적인 도구입니다. 이 글에서는 핵심 지표를 관측하고 서버로 전송하는 훅과 전환 시간 측정, 리소스 병목 파악, 그리고 그 데이터를 바탕으로 즉시 적용할 수 있는 최적화 방법을 다룹니다.1. 무엇을 왜 측정하나요검색/전환에 직결되는 Core Web Vitals와 네트워크/메인스레드 병목을 측정합니다. 대표 지표는 TTFB(첫 바이트 대기), FCP(첫 콘텐츠 페인트), LCP(가장 큰 콘텐츠 페인트), CLS(누적 레이아웃 이동), Long Task(메인 스레드 정체), 리소스 로딩 시간/용량입니다.2. React에 성능 메트릭 훅 추가아래 훅은 Performa.. 더보기
React에서 커스텀 렌더러 구현하기 DOM이 아닌 캔버스, WebGL, 터미널, PDF 같은 타깃에 React 컴포넌트를 그대로 쓰고 싶을 때 커스텀 렌더러를 만듭니다. 핵심은 react-reconciler로 Fiber가 생성하는 변경 내역을 우리의 타깃에 적용하는 HostConfig를 구현하는 것입니다. 실무에서 바로 쓸 수 있는 최소 Canvas 렌더러 예제를 통해 개념부터 코드까지 빠르게 정리합니다.1. 커스텀 렌더러가 필요한 순간다음과 같은 경우에 적합합니다. DOM 대신 2D 캔버스나 WebGL에 UI를 그려야 할 때, 게임 UI, 데이터 시각화 캔버스, CLI/TTY, PDF/이미지 출력, 네이티브 브릿지에 React 상태/동기화를 재사용하고자 할 때입니다.2. 핵심 개념 훑기Reconciler는 React 엘리먼트 트리의 변경.. 더보기
React 앱에서 파일 다운로드 및 저장 처리하기 파일 다운로드/저장은 대시보드, 리포트, 이미지/PDF 내보내기 등에서 자주 요구되는 기능입니다. 본 글에서는 React 환경에서 작은 파일부터 대용량까지 안정적으로 다운로드하고, 로컬 저장까지 처리하는 실무 패턴을 정리합니다.1. 최소 구현: Blob → a.click() → URL.revokeObjectURL가장 단순하고 호환성 좋은 방법은 Blob을 만들어 임시 URL을 만들고, 보이지 않는 앵커 태그로 클릭 이벤트를 트리거하는 방식입니다. 클릭 후 반드시 URL.revokeObjectURL로 메모리를 회수합니다.// utils/download.jsexport function downloadBlob(blob, filename) { const url = URL.createObjectURL(blob).. 더보기
React와 Supabase로 풀스택 앱 구축하기 Supabase는 Postgres 기반 인증, 스토리지, 리얼타임을 제공하는 BaaS입니다. React와 결합하면 서버 없이도 보안이 적용된 풀스택 앱을 빠르게 구축할 수 있습니다. 본 글은 최소 구성으로 인증, CRUD, 리얼타임까지 연결하는 실무 중심 가이드입니다.1. 프로젝트 부트스트랩Vite로 React + TypeScript 프로젝트를 생성하고 필요한 패키지를 설치합니다.# 프로젝트 생성npm create vite@latest react-supa-app -- --template react-tscd react-supa-app# 라이브러리 설치npm i @supabase/supabase-js @tanstack/react-query react-router-dom2. Supabase 프로젝트와 테이블 .. 더보기
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에서 비동기 데이터 다중 병합 처리하기 여러 API나 비동기 소스에서 데이터를 받아 하나의 리스트로 합치고, 일관된 UI로 보여주는 일은 프론트엔드에서 매우 흔합니다. 이 글은 Promise.all/Promise.allSettled, AbortController, 병렬 수 제한, React Query/SWR, 서버 컴포넌트까지 실무에서 바로 쓰는 병합 패턴을 정리합니다.1. 목표와 설계 기준목표는 다음과 같습니다. 1) 빠르게 병렬로 가져오되, 2) 부분 실패를 견디며, 3) 중복 호출과 경합을 피하고, 4) 병렬 수를 제어해 서버를 보호하고, 5) 캐시/선택자/메모이제이션으로 불필요한 리렌더를 줄이는 것입니다.2. 기본 패턴: Promise.all로 다중 리스트 병합여러 리스트를 id로 합치는 가장 단단한 기본기입니다. 우선 각 소스는 최대.. 더보기

티스토리툴바