PWA 썸네일형 리스트형 React 앱에서 브라우저 Notification API로 알림 보내기 브라우저 Notification API는 사용자에게 네이티브 수준의 시스템 알림을 띄울 수 있게 해주는 표준 웹 API입니다. React 앱에서도 간단한 코드로 권한을 요청하고 알림을 보낼 수 있습니다. 이 글은 실무에서 바로 적용할 수 있는 최소 예제부터 서비스 워커를 통한 백그라운드 알림까지 단계별로 정리합니다.1. 개요: 동작 원리와 필수 조건Notification API는 두 가지 축으로 나뉩니다. 페이지 컨텍스트에서 new Notification(...)으로 즉시 알림을 띄우는 방법과, 서비스 워커(Service Worker) 컨텍스트에서 registration.showNotification(...)으로 백그라운드 알림을 띄우는 방법입니다. 전자는 페이지가 열려 있고 권한이 허용된 상태에서 사용.. 더보기 React 앱에서 QR 코드 생성 및 스캐닝 기능 추가하기 QR 코드는 로그인, 결제, 딥링크 공유 등 다양한 UX를 빠르게 개선할 수 있는 도구입니다. 이 글에서는 React 앱에 QR 코드 생성과 스캐닝(카메라 인식) 기능을 간단히 붙이는 실무 가이드를 제공합니다.1. 라이브러리 선택생성(Generate): react-qr-code 또는 qrcode.react를 권장합니다. 둘 다 가볍고 SVG 출력이 깔끔합니다. 여기서는 react-qr-code를 사용합니다.스캔(Scan): react-qr-reader가 접근성이 좋고 구현이 간단합니다. 모바일 브라우저 호환도 양호합니다.2. 설치// npmnpm i react-qr-code react-qr-reader// yarnyarn add react-qr-code react-qr-reader// pnpmpnpm a.. 더보기 React 앱에서 Web Share API 사용하여 콘텐츠 공유하기 Web Share API는 사용자의 네이티브 공유 시트(공유 패널)를 호출하여 링크, 텍스트, 파일을 간편하게 공유할 수 있게 해주는 브라우저 API입니다. 모바일 중심의 UX를 구현할 때 클릭 한 번으로 카카오톡/메시지/메일 등으로 공유할 수 있어 이탈을 줄이고 전환을 높이는 데 효과적입니다. 이 글에서는 React 앱에서 Web Share API를 안정적으로 사용하고, 미지원 환경을 위한 폴백까지 실무적으로 구현하는 방법을 정리합니다.1. 지원 범위와 핵심 포인트- navigator.share: 텍스트/제목/URL 공유를 지원합니다.- navigator.canShare 및 files 옵션: 이미지/파일 공유(레벨 2). 일부 브라우저/플랫폼에서만 동작합니다.- 사용자 제스처 필요: 클릭 등 명시적 사.. 더보기 React 앱에서 Web Push 알림 기능 추가하기 Web Push 알림은 사용자가 브라우저를 닫아도 서버에서 메시지를 전달할 수 있는 강력한 기능입니다. React 앱에 Web Push를 추가하려면 서비스 워커, Notification API, Push API, 그리고 VAPID 키를 사용하는 백엔드가 필요합니다. 아래 단계를 그대로 따라 하면 기본 구현을 완성할 수 있습니다.1. 동작 원리 이해전체 흐름은 다음과 같습니다. 1) 서비스 워커 등록 2) 알림 권한 요청 3) PushManager로 구독 생성 4) 구독 정보를 백엔드로 저장 5) 백엔드가 web-push로 푸시 전송 6) 서비스 워커가 push 이벤트에서 알림 표시합니다.2. 사전 준비 체크리스트1) HTTPS 환경 또는 localhost 2) React 빌드가 sw.js를 서비스할 수 .. 더보기 React에서 IndexedDB를 이용한 오프라인 데이터 저장 네트워크가 불안정한 환경에서도 사용자 경험을 지키려면 클라이언트 로컬에 데이터를 안전하게 저장해야 합니다. 브라우저 표준 로컬 DB인 IndexedDB는 대용량, 트랜잭션, 인덱스를 지원하며 React 앱의 오프라인 퍼스트(Offline-first) 전략에 적합합니다. 이 글은 실무에서 바로 쓸 수 있는 최소 구현부터 동기화 전략까지 간결하게 정리했습니다.1. 언제 IndexedDB를 써야 하나요?- API 읽기/쓰기 지연을 숨기는 캐시 레이어가 필요할 때- 네트워크 오프라인 상태에서도 생성/수정 작업을 허용하고 나중에 서버와 동기화할 때- 로컬스토리지로는 부족한 대용량, 구조화된 데이터가 있을 때2. 빠른 시작: idb로 안전하게 다루기IndexedDB의 네이티브 API는 콜백과 이벤트 기반으로 번거롭.. 더보기 React에서 Service Worker로 PWA 기능 추가하기 Service Worker를 추가하면 React 앱에 오프라인 지원, 설치 가능한 앱(웹 앱 설치 배너), 백그라운드 업데이트 등 PWA 핵심 기능을 빠르게 도입할 수 있습니다. 실무에서 바로 적용 가능한 최소 설정부터 업데이트 UX, 배포 체크리스트까지 정리했습니다.1. PWA 핵심과 배치 위치필수는 두 가지입니다. 1) 웹 앱 매니페스트(manifest.json), 2) 루트 스코프의 Service Worker입니다. Service Worker는 사이트 루트(/)를 제어해야 하므로 빌드 시 /service-worker.js가 공개 루트에 배치되어야 합니다. React(Vite/CRA)는 보통 public 폴더에 넣으면 빌드시 루트로 복사됩니다.개발 모드에서는 Service Worker가 제대로 동작하.. 더보기 이전 1 다음