React 썸네일형 리스트형 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에서 스크롤 위치 저장 및 복원 기능 구현하기 리스트·기사·문서 페이지에서 뒤로가기나 라우팅 후 원래 읽던 위치로 돌아가게 하는 스크롤 저장/복원은 UX 품질을 결정짓는 요소입니다. 실무에서는 라우터, 이미지 로딩, 컨테이너 스크롤 등 다양한 변수 때문에 일관된 동작을 만들기가 쉽지 않습니다. 이 글에서는 React에서 신뢰성 있게 스크롤 위치를 저장하고 복원하는 방법을 단계별로 정리합니다.1. 핵심 아이디어원리는 단순합니다. 스크롤 이벤트로 현재 위치를 저장하고, 화면 진입 시 저장된 위치로 스크롤합니다. 브라우저 기본 복원과 충돌하지 않도록 manual 모드로 바꾸고, 레이아웃/이미지 로딩 후 복원 타이밍을 조절합니다.// 브라우저 기본 복원 끄기 (충돌 방지)useEffect(() => { try { window.history.scrollRe.. 더보기 React 앱에 서버리스 함수(Function) 연동하기 React 단일 페이지 애플리케이션(SPA)에 서버리스 함수(Function)를 더하면, 백엔드 인프라 없이도 안전하고 확장 가능한 API를 빠르게 구축할 수 있습니다. 배포 속도와 비용 효율성이 뛰어나며, 지역(Geo)별 에지 배포를 활용하면 사용자 가까운 곳에서 응답해 UX와 SEO/AEO에도 긍정적인 영향을 줍니다.1. 서버리스 함수 개요서버리스 함수는 이벤트 기반으로 실행되는 짧은 수명(Stateless)의 백엔드 코드입니다. 인프라 관리 없이 요청이 올 때만 과금되며, React 프런트엔드가 호출하는 API 엔드포인트로 사용하기 적합합니다.- 장점: 자동 스케일, 저비용, 빠른 배포, 보안(비공개 환경 변수).- 주의점: 콜드 스타트, 연결 지속성 부족, 적절한 CORS/캐싱/인증 구현 필요.2.. 더보기 React에서 Chart.js를 사용한 동적 차트 생성 React에서 Chart.js를 활용하면 실시간 데이터 스트림, 사용자 상호작용, 반응형 레이아웃까지 손쉽게 구현할 수 있습니다. 이 글은 react-chartjs-2를 기반으로 동적(실시간) 차트를 만드는 실무형 예제와 성능/UX 최적화 팁을 제공합니다.1. 설치와 기본 셋업Chart.js와 React 바인딩 라이브러리인 react-chartjs-2를 설치합니다.// 설치npm i chart.js react-chartjs-2// (옵션) 시간 축, 줌/팬이 필요하다면npm i chartjs-adapter-date-fns chartjs-plugin-zoom필요한 스케일/플러그인을 등록합니다. 프로젝트 초기에 한 번만 등록하면 됩니다.// chartjs-setup.jsimport { Chart as Cha.. 더보기 React 컴포넌트에서 메모리 누수 디버깅하기 메모리 누수는 React 앱에서 스크롤이 버벅거리거나, 탭 전환 후 메모리가 계속 증가하는 증상으로 나타납니다. 실무에서는 Chrome DevTools와 React DevTools로 누수를 확인하고, useEffect 정리(cleanup) 누락, 이벤트 리스너, 타이머, 네트워크 요청 미중단 등 흔한 패턴을 점검해 해결합니다.1. 누수 징후 빠르게 파악하기1) 페이지를 몇 번 이동하거나 컴포넌트를 반복 마운트/언마운트 했을 때 메모리가 계속 증가합니다. 2) 콘솔에 "Can't perform a React state update on an unmounted component" 경고가 보입니다. 3) DevTools Memory 탭에서 Detached DOM 노드가 증가합니다.2. DevTools로 근거 .. 더보기 React에서 스타일링을 위한 CSS Modules 활용하기 CSS Modules는 컴포넌트 단위로 스타일을 로컬 스코프화하여 클래스 충돌을 방지하고 유지보수를 쉽게 만드는 실전 친화적 방법입니다. CRA, Vite, Next.js에서 기본 지원되어 설정이 가볍고, CSS-in-JS 대비 빌드/런타임 오버헤드가 적은 편입니다. 아래에서 바로 적용 가능한 패턴과 주의점을 정리합니다.1. 가장 빠른 시작 (Vite/CRA/Next.js 공통)파일명은 반드시 *.module.css로 작성합니다. 컴포넌트에서 import하여 className에 매핑합니다./* src/components/Button.module.css */.button { padding: 8px 12px; border-radius: 6px; border: none; cursor: pointer; .. 더보기 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.. 더보기 이전 1 2 3 4 ··· 13 다음