본문 바로가기

Performance

C# ReaderWriterLockSlim으로 읽기/쓰기 성능 최적화 읽기 비중이 높고 쓰기 비중이 낮은 공유 데이터 구조에서는 일반적인 lock보다 ReaderWriterLockSlim이 더 높은 처리량을 제공합니다. 동시에 여러 읽기 작업을 허용하고, 쓰기 시점에만 단독 진입을 보장하기 때문입니다. 실전에서 안전하고 빠르게 쓰는 패턴과 주의점을 정리합니다.1. 언제 ReaderWriterLockSlim이 유리한가다음 조건을 만족할 때 효과가 큽니다. 읽기 비율이 매우 높고 쓰기가 드뭅니다. 읽기 작업 시간이 짧습니다. 잠금 경합이 존재합니다. 반대로 쓰기 비율이 높거나 경합이 거의 없으면 lock이 더 단순하고 빠를 수 있습니다.2. 기본 사용법: 다중 읽기, 단일 쓰기ReaderWriterLockSlim은 세 가지 핵심 잠금이 있습니다. EnterReadLock 다중.. 더보기
React 앱에서 Undo/Redo 상태 히스토리 기능 구현하기 Undo/Redo는 에디터, 디자인 툴, 폼 편집 등에서 필수적인 UX 요소입니다. React에서는 불변 상태 패턴을 활용해 비교적 간단히 구현할 수 있습니다. 이 글에서는 실무에서 바로 쓸 수 있는 커스텀 훅과 키보드 단축키, 최적화 포인트까지 다룹니다.1. 설계: past/present/future 스택핵심 아이디어는 현재 상태(present)를 기준으로 과거(past)와 미래(future)를 스택으로 관리하는 것입니다.- setState: 현재 상태를 과거 스택에 푸시하고 새로운 상태를 현재로 설정하며 미래 스택을 비웁니다.- undo: 과거에서 하나를 꺼내 현재로 설정하고 기존 현재를 미래에 푸시합니다.- redo: 미래에서 하나를 꺼내 현재로 설정하고 기존 현재를 과거에 푸시합니다.2. 커스텀 .. 더보기
React 앱에서 CSS Grid를 활용한 반응형 레이아웃 구현 CSS Grid는 2차원 레이아웃에 최적화된 강력한 도구입니다. React에서 카드형 목록부터 전체 페이지 프레임까지, 적은 코드로 강력한 반응형을 구현할 수 있습니다. 이 글은 실무에서 즉시 적용 가능한 패턴과 코드 예시를 중심으로 설명합니다.1. 왜 Grid인가?Flexbox는 단일 축 정렬에 강하고, Grid는 행과 열을 동시에 설계하는 데 강합니다. 카드 그리드, 대시보드, 헤더-사이드바-컨텐츠-푸터 구조 등 복잡한 페이지 레이아웃에는 Grid가 더 단순하고 예측 가능한 코드를 제공합니다.2. 프로젝트 셋업코드 예시는 styled-components를 사용합니다. CSS-in-JS로 JS 파일 안에서 Grid를 선언해, React 환경에서 한 파일로 관리하기 쉽습니다.// 설치// npm i st.. 더보기
React 앱에 GraphQL Federation 아키텍처 적용하기 GraphQL Federation은 여러 팀이 독립적으로 소유한 도메인 스키마를 하나의 Supergraph로 안전하게 결합해 단일 GraphQL 엔드포인트처럼 제공하는 아키텍처입니다. React 앱에서는 단일 클라이언트에서 다양한 백엔드 도메인을 유연하게 합성하고, 점진적 확장과 성능 최적화를 동시에 달성할 수 있습니다.1. Federation이 React 프런트엔드에 주는 이점단일 쿼리로 다양한 도메인의 데이터를 연결해 화면을 그릴 수 있습니다. 팀 별 독립 배포가 가능하며, 스키마 충돌은 컴포지션 단계에서 조기에 검출합니다. 클라이언트는 엔드포인트를 하나만 알면 되므로 라우팅과 캐싱 전략 수립이 단순해집니다.2. 핵심 용어 정리: Supergraph, Subgraph, Gateway/Router, E.. 더보기
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. 단일 비디오 컴포넌트 구현가장.. 더보기

티스토리툴바