vite 썸네일형 리스트형 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와 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로 PDF 뷰어 및 다운로드 기능 구현하기 실무에서 PDF 문서 열람과 다운로드는 잦은 요구사항입니다. React에서 pdf.js 기반 라이브러리를 사용하면 빠르게 뷰어를 만들고, 인증이 필요한 파일도 안전하게 내려받을 수 있습니다. 아래 예제로 바로 적용해보세요.1. 개요목표는 다음과 같습니다: 브라우저 내 PDF 뷰어 구현, 페이지 이동/확대 기능 제공, 파일 다운로드 버튼 제공, 인증 및 CORS 고려, 모바일 대응과 성능 최적화입니다.2. 설치 및 준비pdf.js를 감싼 react-pdf 라이브러리를 사용합니다. 워커 설정이 필요합니다.// 설치// npm// npm i react-pdf// yarn// yarn add react-pdf// pdf.js 워커 설정 (전역 1회)import { pdfjs } from 'react-pdf';p.. 더보기 React에서 환경 변수 관리하기 프론트엔드 환경 변수는 "빌드 시점에 코드에 주입되는 값"이라는 점을 이해하는 것이 핵심입니다. 클라이언트 번들에 포함되는 변수는 결국 사용자에게 공개되므로, 절대 비밀 값을 넣지 않습니다. 아래에서는 React 애플리케이션에서 널리 쓰이는 도구별 환경 변수 관리 방법과 실무 팁을 정리합니다.1. 빌드 타임 vs 런타임 개념 이해대부분의 React 빌드 도구는 소스 코드에 있는 참조를 빌드 타임에 문자열로 대체합니다. 예를 들어 Vite의 import.meta.env, CRA의 process.env.REACT_APP_*, Next.js의 process.env.NEXT_PUBLIC_* 등이 빌드 시점에 번들에 인라인됩니다. 따라서 .env를 바꿨다면 개발 서버 재시작이나 다시 빌드가 필요합니다. 런타임에 .. 더보기 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 다음