본문 바로가기

conTeXt

React로 사용자 맞춤형 대시보드 구현하기 대시보드는 사용자마다 보고 싶은 데이터와 우선순위가 다릅니다. React로 사용자 맞춤형 대시보드를 구현하면 유지보수성과 성능을 지키면서 만족도와 업무 효율을 크게 높일 수 있습니다. 아래는 실무에서 바로 적용 가능한 설계 원칙과 코드 예시입니다.1. 목표 정의와 데이터 모델먼저 개인화 범위를 정의합니다. 위젯 추가/삭제, 위치/크기 변경, 테마/언어, 역할별 접근제어가 일반적입니다. 레이아웃과 위젯 구성을 분리해 모델링합니다.// layout: react-grid-layout 호환 구조 예시export const defaultLayout = [ { i: 'sales', x: 0, y: 0, w: 4, h: 3, minW: 3, minH: 2 }, { i: 'alerts', x: 4, y: 0, w:.. 더보기
React 컴포넌트에서 성능 저하 원인 분석 및 제거 방법 React 앱이 느려지는 주된 원인은 불필요한 재렌더, 비싼 계산, 거대한 리스트 렌더링, Context 전파, 잘못된 이펙트 사용 등입니다. 이 글은 DevTools로 병목을 찾고, 코드로 제거하는 실무 중심 방법을 정리합니다.1. 성능 저하 징후 빠르게 파악하기다음과 같은 징후가 보이면 렌더링 병목을 의심합니다.- 입력 시 딜레이가 느껴집니다.- 스크롤이 끊깁니다.- 특정 화면 전환이 버벅입니다.- 컴포넌트가 자주 재렌더됩니다.먼저 측정부터 합니다. 무작정 최적화는 낭비입니다.2. DevTools Profiler로 병목 찾기React DevTools Profiler로 렌더 타임을 기록합니다. Flamegraph에서 시간이 긴 컴포넌트와 재렌더가 반복되는 지점을 확인합니다. Highlight updat.. 더보기
React 앱에서 사용자 권한(Role-Based Access Control) 처리하기 RBAC는 복잡한 프론트엔드에서 페이지 접근, 버튼 노출, API 호출을 안전하게 통제하는 핵심 패턴입니다. 실무에서 바로 쓸 수 있는 권한 설계, 훅/컴포넌트, 라우팅 가드, 서버 연동까지 단계별로 정리합니다.1. 왜 RBAC인가역할(roles)과 권한(permissions)을 분리하면 기능 추가/변경 시 코드 수정 범위를 최소화할 수 있습니다. 또한 UI와 라우팅, API 레벨에서 일관된 통제가 가능합니다.2. 권한 모델 설계역할-권한 매핑을 한 곳에 선언합니다. 최소 권한 원칙을 지키고, 비즈니스 용어로 이름을 짓습니다.// permissions.jsexport const Roles = { ADMIN: 'admin', EDITOR: 'editor', VIEWER: 'viewer',}export.. 더보기
React와 TypeScript를 함께 사용할 때의 베스트 프랙티스 React와 TypeScript를 함께 사용하면 안정적이고 확장성 있는 프론트엔드 애플리케이션 개발이 가능합니다. 하지만 올바른 방법을 모르면 생산성이 떨어지고 코드가 복잡해질 수 있습니다.1. 컴포넌트 props에 인터페이스 활용하기props에 명확한 타입을 선언해 코드 자동완성과 타입 검사를 적극 활용해야 합니다. 보통 interface나 type alias를 사용합니다.interface ButtonProps { label: string; onClick: () => void; disabled?: boolean;}const Button: React.FC = ({ label, onClick, disabled }) => ( {label});2. React Hooks 타입 지정useState와 use.. 더보기

티스토리툴바