전역 Auth Store (Zustand 권장)user, status, etag(캐시 비교 API용도), permissions(혹은 권한 관련 data) 위주로 저장Rotue GuardApp 진입 혹은 Routing시에 ensurePermissions()접근조건 확인이기 때문에 하위 Component에서는 호출금지.재검증 트리거새로고침(F5)/탭 포커스/online 이벤트 → 지정 TTL 이상시 ensurePermissions() 서버에서 권한 변경(추가/삭제 등 수정 시): WebSocket/SSE Event → ensurePermissions({ force:true })Server권한 API res에 ETag Headerreq if-None-Match가 같을 시 304 Not Modifed권한 수정 ..

1️⃣ ?: (Optional Property)📌 TypeScripttype User = { id: number name?: string // 있어도 되고 없어도 됨}const u1: User = { id: 1, name: "Tom" }const u2: User = { id: 2 } // name 생략 가능console.log(u2.name) // undefined👉 ?: 는 프로퍼티가 없어도 된다는 의미 (없으면 undefined)📌 C#public class User { public int Id { get; set; } public string? Name { get; set; } // null 허용}var u1 = new User ..

⚛️ React 프로젝트 구조, 빠르게 파악하는 방법새로운 React 프로젝트에 참여하거나, 오픈소스 프로젝트 코드를 처음 열어보면 “어디서부터 봐야 하지?” 하는 고민.짧은 시간 안에 전체 구조를 이해하려면 몇 가지 핵심 관문을 짚는 게 효율적.1️⃣ 최상위 설정 파일 확인package.json어떤 빌드도구를 쓰는지 (CRA, Vite, Next.js 등)주요 라이브러리 (React Router, Redux, Zustand, React Query 등)스크립트(dev, build, lint, test)환경/설정 파일vite.config.ts, webpack.config.js, next.config.js → 빌드 및 번들링 구조tsconfig.json → 경로 별칭(@/…) 확인.eslintrc, .pre..

1. React란?UI 라이브러리: 사용자 인터페이스를 효율적으로 만들기 위한 JavaScript 라이브러리컴포넌트 기반: UI를 재사용 가능한 컴포넌트 단위로 분리Virtual DOM: 변경된 부분만 효율적으로 업데이트2. React 시작하기설치 (Vite 예시)npm create vite@latest my-app -- --template reactcd my-appnpm installnpm run dev폴더 구조 예시src/ ├─ App.jsx ├─ main.jsx └─ components/3. JSXJavaScript + XML 문법반드시 부모 태그로 감싸야 함JS 표현식은 {} 안에 작성function Hello() { const name = "React"; return Hello, {name}..