본문 바로가기

Performance

React 앱에서 Device Orientation API 활용하기 모바일에서 기기의 기울기와 방향을 읽어 게임, AR, 파노라마 뷰어, 컴퍼스 등 몰입형 UI를 만들고 싶다면 Device Orientation API를 활용하면 됩니다. React에서는 훅으로 추상화해 권한 요청, 이벤트 구독, 성능 최적화까지 깔끔하게 관리하는 것이 실무적으로 가장 안전합니다.1. 브라우저 지원과 권한 모델대부분의 모바일 브라우저가 deviceorientation 이벤트를 지원합니다. 다만 iOS Safari는 사용자 제스처를 통한 명시적 권한 요청이 필요하며, HTTPS 환경에서만 동작하는 점을 유의해야 합니다. iOS 13+에서는 DeviceMotionEvent.requestPermission, iOS 16+에서는 DeviceOrientationEvent.requestPermissi.. 더보기
React에서 스크롤 기반 Parallax 효과 구현하기 Parallax는 스크롤에 따라 배경과 콘텐츠의 이동 속도를 다르게 하여 깊이감을 주는 시각 효과입니다. React에서 성능을 고려해 구현하면 랜딩 페이지, 히어로 섹션, 갤러리 등에서 높은 몰입감을 제공할 수 있습니다.1. 핵심 개념과 설계기본 원리는 스크롤 위치에 비례한 오프셋을 계산해 요소의 transform 또는 backgroundPosition을 업데이트하는 것입니다. 성능을 위해 transform: translate3d와 requestAnimationFrame, passive 스크롤 리스너를 사용합니다. iOS에서 background-attachment: fixed가 제한적이므로 엘리먼트 기반 Parallax가 안전합니다.2. CSS 배경 Parallax (간단하지만 모바일 제한)배경 이미지를.. 더보기
React 앱에서 테마 변경 기능 다중 지원하기 라이트/다크를 넘어 세피아, 하이 콘트라스트 등 다중 테마를 지원하면 접근성(가독성), 브랜드 일관성, 사용자 선호 반영을 동시에 달성할 수 있습니다. 이 글은 CSS 변수와 React Context를 활용해 확장 가능한 다중 테마 토글을 구현하고, 초기 깜빡임 방지, 시스템 테마 연동, 대규모 테마 최적화까지 실무 팁을 정리합니다.1. 설계 원칙첫째, CSS 변수 토큰 기반으로 설계합니다. 둘째, DOM 루트에 data-theme 속성으로 테마 상태를 단일 소스로 관리합니다. 셋째, React에서는 테마 이름만 관리하고 스타일은 CSS 변수로 위임해 리렌더 비용을 줄입니다. 넷째, 시스템 테마와 동기화하며 사용자가 선택한 테마는 localStorage로 지속화합니다.2. 토큰 기반 CSS 변수 정의(다.. 더보기
React에서 Intersection Observer로 비디오 자동 재생 제어하기 스크롤에 따라 화면에 보이는 비디오만 자동 재생하고, 화면을 벗어나면 일시 정지시키는 UX는 피드·기사·제품 리스트에서 필수입니다. React에서는 Intersection Observer를 이용하면 성능 부담 없이 이를 안정적으로 구현할 수 있습니다.1. 핵심 아이디어와 브라우저 정책Intersection Observer는 특정 DOM이 뷰포트에 얼마나 노출되는지 비동기적으로 알려줍니다. 이 값을 기준으로 비디오를 play/pause 하면 됩니다. 단, 자동 재생은 브라우저 정책상 소리가 꺼진 상태(mutated)와 인라인 재생(playsInline)이 중요합니다. iOS Safari 등 일부 환경에서는 muted + playsInline 없이는 자동 재생이 거부됩니다.2. 단일 비디오 컴포넌트 구현가장.. 더보기
React에서 이미지 최적화를 위한 Responsive Image 구현하기 이미지는 LCP와 데이터 사용량에 직접적인 영향을 주기 때문에, 반응형 이미지(Responsive Images) 전략은 성능 최적화의 핵심입니다. React에서 srcset, sizes, picture를 올바르게 활용하고, 지연 로딩과 최신 포맷(WebP/AVIF)을 적용하는 실무 코드를 소개합니다.1. 핵심 개념 요약- srcset: 다양한 너비의 이미지를 제공하고 브라우저가 뷰포트/픽셀 비율에 따라 최적의 리소스를 선택하도록 합니다.- sizes: 현재 레이아웃에서 이미지가 차지할 예상 너비를 알려 브라우저의 선택을 정확하게 만듭니다.- picture/source: 포맷/아트 디렉션(화면 크기별 다른 크롭)을 제어합니다.- width/height 속성: 고정 값 제공으로 CLS를 방지합니다. styl.. 더보기
React에서 JSON Schema 기반 폼 생성하기 JSON Schema를 사용하면 폼 구조, 유효성 규칙, 표시 방식까지 데이터를 중심으로 선언적으로 정의할 수 있습니다. React에서는 라이브러리를 통해 스키마만으로 폼을 자동 생성하고 유지보수를 단순화할 수 있습니다. 실무에서 빠르게 적용하는 방법과 커스터마이즈 포인트를 정리합니다.1. 라이브러리 선택대표 옵션은 RJSF(@rjsf/core), JSON Forms, Uniforms입니다. RJSF는 문서와 생태계가 안정적이며 Ajv 기반 검증을 쉽게 붙일 수 있어 범용적으로 추천합니다. JSON Forms는 복잡한 엔터프라이즈 폼에 강하고, Uniforms는 스키마-UI 어댑터가 다양해 커스터마이징에 유연합니다.2. RJSF 빠른 시작// 설치// npm i @rjsf/core @rjsf/valida.. 더보기
React에서 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 차이 분석 SSR와 CSR은 동일한 React 컴포넌트를 어디서 렌더링하느냐(서버 vs 브라우저)에 따라 사용자 경험, SEO, 성능 프로파일이 달라집니다. 프로젝트 특성과 트래픽 패턴에 따라 전략을 섞는 것이 실무에서 일반적입니다.1. 개념 요약CSR(Client-Side Rendering)은 서버가 최소한의 HTML과 번들 JS를 보내고, 브라우저가 최초 렌더와 데이터 요청, 이벤트 바인딩까지 모두 수행합니다. 초기 TTFB는 빠를 수 있으나, JS 다운로드/파싱/데이터 로딩 전까지 빈 화면이 보일 수 있습니다.SSR(Server-Side Rendering)은 서버가 요청 시 HTML을 만들어 보내고, 브라우저는 즉시 마크업을 표시한 후 JS가 로드되면 하이드레이션으로 상호작용을 활성화합니다. 초기 인지 성능과.. 더보기
React 앱 성능 최적화를 위한 메모이제이션 기법 메모이제이션은 동일한 입력에 대해 계산 결과나 참조를 재사용해 불필요한 렌더와 연산을 줄이는 방법입니다. React에서는 React.memo, useMemo, useCallback이 핵심 도구입니다. 다만 남용하면 복잡도와 메모리 비용이 증가하므로 측정과 목적에 맞게 적용하는 것이 중요합니다.1. 언제 메모이제이션이 필요한가다음 중 하나라도 해당되면 고려합니다: 연산 비용이 큰 계산이 매 렌더마다 반복되는 경우, 자식 컴포넌트가 동일한 데이터로 자주 렌더되는 경우, 리스트 항목 수가 많아 렌더 비용이 큰 경우, props로 객체/함수 참조가 자주 바뀌어 불필요한 재렌더를 유발하는 경우입니다.2. React.memo로 컴포넌트 메모이제이션React.memo는 props의 얕은 비교로 변경이 없으면 자식 렌.. 더보기

티스토리툴바