react 썸네일형 리스트형 React 앱에서 폴더 구조 자동화와 절대 경로(alias) 설정하기 규모가 커지는 React 프로젝트에서 폴더 구조를 일관되게 유지하고, 절대 경로(alias)로 import를 간결하게 관리하면 유지보수와 온보딩이 크게 쉬워집니다. 이 글은 실무에서 바로 적용할 수 있는 폴더 구조 자동화 스크립트와, Vite/CRA/Next/Webpack 환경별 절대 경로(alias) 설정을 빠르게 안내합니다.1. 추천 폴더 구조(예시)도메인 중심(feature-first)을 기본으로 하되, 공용 계층(lib, hooks, components)을 분리합니다.// src/ 기준 추천 구조(예시)src/ app/ providers/ routes/ features/ auth/ cart/ components/ ui/ layout/ hooks/ lib/ .. 더보기 React에서 실시간 협업 에디터 구현하기 실시간 협업 에디터는 동시에 여러 사용자가 같은 문서를 편집할 수 있도록 하는 프런트엔드·백엔드 조합입니다. React에서는 CRDT 기반의 Yjs와 TipTap(프로즈미러)을 결합하면 낮은 러닝커브로 생산성 높은 협업 에디터를 구현할 수 있습니다. 본 글은 빠르게 동작하는 MVP를 만들고, 권한/프레즌스/오프라인/성능까지 확장하는 실무 가이드를 제공합니다.1. 아키텍처 선택: OT vs CRDT, 그리고 Yjs협업 에디터의 핵심은 충돌 해결입니다. OT(Operational Transform)는 중앙 조정 서버가 필요하고 구현 복잡도가 높습니다. CRDT는 분산 환경과 오프라인/재동기화 시 강합니다. React 실무에서는 Yjs(문서 CRDT) + WebSocket(동기화) + TipTap(편집기) 조.. 더보기 React 앱에서 브라우저 Wake Lock API 활용하기 화면 꺼짐을 방지해 지도, 영상, 운동/학습, 키오스크 등 장시간 상호작용이 필요한 React 앱에서 브라우저 Wake Lock API를 활용하는 방법을 안내합니다. 실무에서 바로 적용 가능한 훅과 UI 패턴, 비지원 브라우저 대안, 배포 체크리스트를 제공드립니다.1. 지원 현황과 주의점- 지원: Chromium 기반 브라우저(Chrome, Edge, Opera, Samsung Internet)에서 Screen Wake Lock을 지원합니다. 안드로이드와 데스크톱 일부 환경에서 동작하며 iOS Safari는 아직 미지원입니다.- 조건: HTTPS(secure context)와 사용자 제스처(클릭 등)로 요청해야 실패율이 낮습니다.- 수명: 탭이 백그라운드로 가거나 시스템 정책(배터리 절약 모드 등)으로 .. 더보기 React에서 OpenAPI 기반 API 클라이언트 자동 생성하기 React 애플리케이션에서 OpenAPI 스펙을 기반으로 API 클라이언트를 자동 생성하면 개발 생산성을 크게 향상시킬 수 있습니다. 본 글에서는 OpenAPI 스펙을 활용해 React 프로젝트 내에서 자동 생성된 API 클라이언트를 만드는 방법을 소개합니다.1. OpenAPI란?OpenAPI는 RESTful API를 구조화하여 표현하는 표준 명세입니다. API 요청, 응답, 인증 방식을 명확하게 정의해주므로 클라이언트와 서버 간 통신을 체계적으로 설계할 수 있습니다.2. API 클라이언트 자동 생성의 장점직접 API 요청 함수와 인터페이스를 작성할 필요 없이, OpenAPI 스펙을 읽어 자동으로 타입이 명확한 함수들을 생성합니다. 그 결과 다음과 같은 이점이 있습니다.타입 안정성 보장(TypeScrip.. 더보기 React 앱에서 OTP(일회용 비밀번호) 입력 UI 구현하기 React 앱에서 OTP(One-Time Password) 입력 UI를 구현하는 방법에 대해 알아보겠습니다. OTP 입력은 보안 인증에 자주 사용되며, 사용자 경험을 고려한 UI가 중요합니다.1. OTP 입력 UI 설계하기일반적으로 OTP는 4자리 또는 6자리 숫자로 구성됩니다. 각 숫자를 별도의 입력란에 입력받아 자동으로 포커스가 이동하는 인터페이스가 사용자 편의성을 높입니다.2. React 컴포넌트 구현 예제아래는 6자리 OTP 입력 UI의 기본 구현 예제입니다. 각 입력란은 숫자만 받도록 제한하며, 입력 시 다음 input으로 자동 포커스가 이동합니다.import React, { useState, useRef } from 'react';const OTPInput = ({ length = 6, onC.. 더보기 React에서 Canvas 기반 이미지 크롭 편집기 구현하기 이미지 크롭은 업로드 전 썸네일 만들기, 프로필 사진 자르기 등 곳곳에서 필요합니다. DOM 기반 솔루션도 있지만, Canvas를 이용하면 성능과 제어력이 뛰어납니다. 본 글은 React에서 Canvas 기반 크롭 편집기를 직접 구현하는 방법을 단계별로 정리합니다. 모바일 드래그/줌, 고해상도(DPR), 회전, 내보내기까지 실무에 필요한 포인트 위주로 설명합니다.1. 구현 목표- 드래그로 이동, 휠/핀치로 줌, 키보드 회전 지원합니다.- 고정 비율(aspect ratio) 크롭 프레임을 오버레이로 표시합니다.- 고해상도(디바이스 픽셀 비율) 대응합니다.- 크롭 결과를 Blob/DataURL로 내보냅니다.- 성능: requestAnimationFrame, useRef 기반 상태 관리로 리렌더 최소화합니다... 더보기 React 앱에서 Electron 연동하여 데스크톱 애플리케이션 개발하기 React로 만든 웹 앱을 Electron과 결합하면 Windows, macOS, Linux용 데스크톱 애플리케이션을 하나의 코드베이스로 배포할 수 있습니다. 이 글은 실무에서 바로 쓰는 최소 설정으로 개발, IPC 연동, 보안, 패키징까지 빠르게 구축하는 방법을 안내합니다.1. 목표와 개요목표는 다음과 같습니다. React는 UI를 담당하고, Electron 메인 프로세스는 윈도우 관리와 OS API 접근을 담당합니다. 보안을 위해 nodeIntegration은 끄고 preload에서 필요한 API만 노출합니다. 개발 중에는 Vite 개발 서버를 열고, 배포 시 정적 파일을 로드합니다.2. 프로젝트 초기화와 디렉터리 구조Vite + React 기준 예시입니다. CRA도 동일한 방식으로 적용 가능합니다... 더보기 React에서 Resize Observer API로 반응형 컴포넌트 만들기 React 애플리케이션에서 컴포넌트 크기에 따라 동적으로 UI를 변경하고 싶을 때, Resize Observer API가 매우 유용합니다. 이번 글에서는 Resize Observer API를 활용하여 반응형 컴포넌트를 만드는 방법을 자세히 설명합니다.1. Resize Observer API란?Resize Observer API는 요소의 크기 변화를 감지할 수 있는 브라우저 내장 API입니다. 기존 윈도우 사이즈나 CSS 미디어 쿼리만으로는 어려운, 특정 컴포넌트 크기에 따른 세밀한 반응형 처리가 가능합니다.2. React에서 Resize Observer 사용하기React에서는 useEffect와 useState를 조합하여 Resize Observer를 쉽게 사용할 수 있습니다. 요소에 ref를 걸고, r.. 더보기 이전 1 2 3 4 ··· 21 다음