diff --git a/.obsidian/workspace.json b/.obsidian/workspace.json index 260dfc42..1cc6701a 100644 --- a/.obsidian/workspace.json +++ b/.obsidian/workspace.json @@ -178,6 +178,21 @@ }, "active": "5e19c94f304a33d1", "lastOpenFiles": [ + "Collaboration_Governance.md", + "Accessibility_Inclusivity.md", + "TypeScript_Type_Safety.md", + "Deployment_Final_Gate.md", + "Reliability_Safety_First.md", + "Modern_Environment_Ecosystem.md", + "Styling_Governance.md", + "API_Communication_Patterns.md", + "React_Testing_Strategy.md", + "React_Clean_Code_Best_Practices.md", + "React_State_Management_Strategy.md", + "React_Performance_Optimization.md", + "Component_Design_Patterns.md", + "React_Hooks_Deep_Dive.md", + "React_Mental_Model.md", "Tetris_Project_Retrospective.md", "System_Debugging_Protocol.md", "System_Protocol_Standard.md", diff --git a/API_Communication_Patterns.md b/API_Communication_Patterns.md new file mode 100644 index 00000000..52608e80 --- /dev/null +++ b/API_Communication_Patterns.md @@ -0,0 +1,19 @@ +--- +title: 효율적인 API 통신 패턴 (Axios & Interceptors) +category: Software Architecture +tags: [API, Axios, Interceptor, Error Handling, Network] +created: 2026-04-20 +--- + +# 효율적인 API 통신 패턴 + +## 📡 인프라 설계 +- **Service Layer**: API 호출 로직을 컴포넌트와 분리하여 별도 모듈화. +- **Interceptors**: 전역 요청 헤더 주입 및 전역 에러 핸들링. + +## 🚨 에러 대응 +401(토큰 만료), 500(서버 장애) 등 공통 에러에 대한 중앙 집중형 대응 시나리오 수립. + +## 🔗 연결된 지식 +- [[System_Protocol_Standard]] +- [[React_State_Management_Strategy]] diff --git a/Accessibility_Inclusivity.md b/Accessibility_Inclusivity.md new file mode 100644 index 00000000..0492f311 --- /dev/null +++ b/Accessibility_Inclusivity.md @@ -0,0 +1,17 @@ +--- +title: 웹 접근성 및 포용적 설계 (a11y) +category: Software Architecture +tags: [Accessibility, a11y, Semantic HTML, Inclusivity] +created: 2026-04-20 +--- + +# 웹 접근성 및 포용적 설계 + +## ♿ 설계 원칙 +- **Semantic HTML**: 기계가 이해할 수 있는 의미론적 태그 사용. +- **ARIA**: 표준 태그 외의 인터랙션에 대한 의미 보강. +- **Keyboard Navigation**: 마우스 없이도 모든 기능 접근 가능하게 설계. + +## 🔗 연결된 지식 +- [[Styling_Governance]] +- [[React_Clean_Code_Best_Practices]] diff --git a/Collaboration_Governance.md b/Collaboration_Governance.md new file mode 100644 index 00000000..941c783f --- /dev/null +++ b/Collaboration_Governance.md @@ -0,0 +1,17 @@ +--- +title: 협업 가이드라인 및 코드 거버넌스 +category: Software Architecture +tags: [Collaboration, PR, Code Review, Documentation, Governance] +created: 2026-04-20 +--- + +# 협업 가이드라인 및 코드 거버넌스 + +## 🤝 협업 문화 +- **PR Protocol**: 변경 목적과 기술적 고민을 상세히 기록. +- **Code Review**: 비판이 아닌 개선을 위한 커뮤니케이션. +- **Documentation**: 미래의 자신과 동료를 위한 지속적인 문서 관리. + +## 🔗 연결된 지식 +- [[React_Clean_Code_Best_Practices]] +- [[Deployment_Final_Gate]] diff --git a/Component_Design_Patterns.md b/Component_Design_Patterns.md new file mode 100644 index 00000000..150f4ede --- /dev/null +++ b/Component_Design_Patterns.md @@ -0,0 +1,17 @@ +--- +title: 컴포넌트 설계 패턴 (Atomic & Composition) +category: Software Architecture +tags: [Design Pattern, Atomic Design, Composition, Architecture] +created: 2026-04-20 +--- + +# 컴포넌트 설계 패턴 + +## 🧩 구조 설계 +1. **Atomic Design**: Atom(최소 단위) -> Molecule -> Organism -> Template -> Page 순으로 조립. +2. **Container-Presenter**: 로직 담당과 UI 담당의 분리. +3. **Component Composition**: Props Drilling을 방지하기 위해 자식을 통째로 넘기는 전략. + +## 🔗 연결된 지식 +- [[Project_Architecture_Guidelines]] +- [[Styling_Governance]] diff --git a/Deployment_Final_Gate.md b/Deployment_Final_Gate.md new file mode 100644 index 00000000..fb2d1b96 --- /dev/null +++ b/Deployment_Final_Gate.md @@ -0,0 +1,19 @@ +--- +title: 배포 프로토콜 및 CI/CD 자동화 +category: Software Architecture +tags: [Deployment, CI/CD, GitHub Actions, Vercel, DevOps] +created: 2026-04-20 +--- + +# 배포 프로토콜 및 CI/CD 자동화 + +## 🚀 파이프라인 +- **CI (Continuous Integration)**: 빌드 및 테스트 자동화. +- **CD (Continuous Deployment)**: 배포 자동화 (Vercel, AWS). + +## 🔒 보안 정책 +환경 변수(`.env`) 관리를 통한 민감 정보 보호 및 보안 사고 방지. + +## 🔗 연결된 지식 +- [[Modern_Environment_Ecosystem]] +- [[Collaboration_Governance]] diff --git a/Modern_Environment_Ecosystem.md b/Modern_Environment_Ecosystem.md new file mode 100644 index 00000000..75a4a057 --- /dev/null +++ b/Modern_Environment_Ecosystem.md @@ -0,0 +1,19 @@ +--- +title: 모던 개발 환경 및 프레임워크 생태계 +category: Software Architecture +tags: [Vite, Next.js, Ecosystem, Modern Stack] +created: 2026-04-20 +--- + +# 모던 개발 환경 및 프레임워크 생태계 + +## 🏗️ 도구의 선택 +- **Vite**: 초고속 번들링 및 개발 생산성. +- **Next.js**: SSR/SSG 지원을 통한 SEO 최적화 및 풀스택 기능. + +## 📁 디렉토리 구조 +프로젝트 전반의 일관성을 위한 폴더 레이아웃 표준 확립. + +## 🔗 연결된 지식 +- [[Deployment_Final_Gate]] +- [[Project_Architecture_Guidelines]] diff --git a/React_Clean_Code_Best_Practices.md b/React_Clean_Code_Best_Practices.md new file mode 100644 index 00000000..34ce7ae2 --- /dev/null +++ b/React_Clean_Code_Best_Practices.md @@ -0,0 +1,17 @@ +--- +title: 리액트 클린 코드 및 개발 에티켓 +category: Software Architecture +tags: [Clean Code, Etiquette, Best Practice, Readable Code] +created: 2026-04-20 +--- + +# 리액트 클린 코드 및 개발 에티켓 + +## 🧹 핵심 수칙 +- **Early Return**: 복잡한 조건문을 피하고 예외를 먼저 처리. +- **Destructuring**: Props 및 데이터 구조 분해 할당으로 가독성 확보. +- **Explicit Naming**: 변수와 함수명은 의도를 명확히 함 (e.g., `handleBtnClick` 대신 `handleSubmit`). + +## 🔗 연결된 지식 +- [[Collaboration_Governance]] +- [[System_Debugging_Protocol]] diff --git a/React_Hooks_Deep_Dive.md b/React_Hooks_Deep_Dive.md new file mode 100644 index 00000000..953720e9 --- /dev/null +++ b/React_Hooks_Deep_Dive.md @@ -0,0 +1,20 @@ +--- +title: 리액트 훅(Hooks) 심층 분석 및 활용 +category: Software Architecture +tags: [React, Hooks, useEffect, Custom Hooks] +created: 2026-04-20 +--- + +# 리액트 훅(Hooks) 심층 분석 + +## 📡 useEffect의 본질 +- 단순한 라이프사이클 함수가 아니라, **외부 시스템과의 동기화** 장치임. +- 의존성 배열(`deps`) 관리가 핵심. + +## 🛠️ Custom Hooks +- 컴포넌트에서 비즈니스 로직을 분리하여 재사용 가능하게 만드는 기술. +- UI 컴포넌트는 오직 데이터 전달과 렌더링에만 집중하게 함. + +## 🔗 연결된 지식 +- [[React_Mental_Model]] +- [[React_Performance_Optimization]] diff --git a/React_Mental_Model.md b/React_Mental_Model.md new file mode 100644 index 00000000..3c2fa037 --- /dev/null +++ b/React_Mental_Model.md @@ -0,0 +1,20 @@ +--- +title: 리액트 핵심 멘탈 모델 (UI as a Function of State) +category: Software Architecture +tags: [React, State, Mental Model, Immutability] +created: 2026-04-20 +--- + +# 리액트 핵심 멘탈 모델 + +## 🎯 핵심 개념 +리액트 앱은 단순히 DOM을 조작하는 것이 아니라, **상태(State)**가 바뀌면 UI가 자동으로 업데이트되는 구조를 가집니다. + +## 🧱 3대 원칙 +1. **Immutability (불변성)**: 상태는 직접 수정하지 않고 항상 새로운 복사본을 만들어 교체해야 함. +2. **Declarative UI (선언형 UI)**: "어떻게"가 아니라 "무엇을" 보여줄지에 집중. +3. **Unidirectional Data Flow (단방향 데이터 흐름)**: Props는 부모에서 자식으로만 흐름. + +## 🔗 연결된 지식 +- [[React_Hooks_Deep_Dive]] +- [[Component_Design_Patterns]] diff --git a/React_Performance_Optimization.md b/React_Performance_Optimization.md new file mode 100644 index 00000000..f4199c4d --- /dev/null +++ b/React_Performance_Optimization.md @@ -0,0 +1,20 @@ +--- +title: 리액트 렌더링 최적화 전략 +category: Software Architecture +tags: [Performance, Memoization, React.memo, Optimization] +created: 2026-04-20 +--- + +# 리액트 렌더링 최적화 전략 + +## ⚡ 주요 도구 +- **React.memo**: Props 변경이 없을 때 재렌더링 방지. +- **useMemo / useCallback**: 연산 결과 및 함수 객체의 메모이제이션. +- **Virtualization**: 대량의 리스트 렌더링 시 화면에 보이는 것만 처리. + +## 🚨 주의사항 +성급한 최적화(Premature Optimization)는 지양하며, 반드시 성능 측정을 선행해야 함. + +## 🔗 연결된 지식 +- [[WebWorker_Performance]] +- [[System_Debugging_Protocol]] diff --git a/React_State_Management_Strategy.md b/React_State_Management_Strategy.md new file mode 100644 index 00000000..f28fe0be --- /dev/null +++ b/React_State_Management_Strategy.md @@ -0,0 +1,20 @@ +--- +title: 전략적 상태 관리 가이드 (Global & Server State) +category: Software Architecture +tags: [State Management, React Query, SSOT, Architecture] +created: 2026-04-20 +--- + +# 전략적 상태 관리 가이드 + +## 🌐 상태의 분류 +1. **UI State**: 로컬 상태 (useState). +2. **Global State**: 전역 상태 (Context API, Zustand/Redux). +3. **Server State**: 서버 데이터 (React Query, SWR). + +## 🎯 원칙 +상태는 가능한 낮게(Lift State Down), 필요할 때만 높게(Lift State Up) 유지하여 복잡도를 관리함. + +## 🔗 연결된 지식 +- [[React_Hooks_Deep_Dive]] +- [[System_Protocol_Standard]] diff --git a/React_Testing_Strategy.md b/React_Testing_Strategy.md new file mode 100644 index 00000000..2dce3c56 --- /dev/null +++ b/React_Testing_Strategy.md @@ -0,0 +1,20 @@ +--- +title: 리액트 애플리케이션 테스트 전략 +category: Software Architecture +tags: [Testing, Vitest, RTL, Unit Test, QA] +created: 2026-04-20 +--- + +# 리액트 애플리케이션 테스트 전략 + +## 🧪 테스트 피라미드 +- **Unit Test**: 개별 유틸리티/함수 검증. +- **Integration Test**: 컴포넌트 간 상호작용 및 UI 흐름 검증. + +## 🛠️ 도구 +- **Vitest**: 고성능 테스트 러너. +- **React Testing Library**: 사용자 중심의 DOM 테스트 지향. + +## 🔗 연결된 지식 +- [[System_Debugging_Protocol]] +- [[Reliability_Safety_First]] diff --git a/Reliability_Safety_First.md b/Reliability_Safety_First.md new file mode 100644 index 00000000..eb50a016 --- /dev/null +++ b/Reliability_Safety_First.md @@ -0,0 +1,16 @@ +--- +title: 애플리케이션 안정성 및 로깅 (Error Boundary) +category: Software Architecture +tags: [Reliability, Error Boundary, Sentry, Logging, Stability] +created: 2026-04-20 +--- + +# 애플리케이션 안정성 및 로깅 + +## 🚑 장애 대응 +- **Error Boundary**: 국소적 에러가 전체 앱을 무너뜨리지 않도록 보호. +- **Logging (Sentry)**: 클라이언트 사이드 에러의 실시간 모니터링 및 추적. + +## 🔗 연결된 지식 +- [[System_Debugging_Protocol]] +- [[React_Testing_Strategy]] diff --git a/Styling_Governance.md b/Styling_Governance.md new file mode 100644 index 00000000..2e13b6bb --- /dev/null +++ b/Styling_Governance.md @@ -0,0 +1,19 @@ +--- +title: 스타일 거버넌스 및 디자인 시스템 +category: Software Architecture +tags: [Styling, Tailwind, CSS-in-JS, Design System, Responsive] +created: 2026-04-20 +--- + +# 스타일 거버넌스 및 디자인 시스템 + +## 🎨 스타일 전략 +- **Design Tokens**: 색상, 여백, 폰트를 변수화하여 유지보수성 확보. +- **Tailwind CSS**: 유틸리티 우선 방식으로 개발 속도 극대화. + +## 📱 반응형 설계 +Mobile First 원칙을 준수하여 상향식 미디어 쿼리 적용. + +## 🔗 연결된 지식 +- [[Component_Design_Patterns]] +- [[Accessibility_Inclusivity]] diff --git a/TypeScript_Type_Safety.md b/TypeScript_Type_Safety.md new file mode 100644 index 00000000..2ba4f7ee --- /dev/null +++ b/TypeScript_Type_Safety.md @@ -0,0 +1,20 @@ +--- +title: 타입스크립트 기반의 안정적 개발 (Type Safety) +category: Software Architecture +tags: [TypeScript, Interface, Type Safety, Generic] +created: 2026-04-20 +--- + +# 타입스크립트 기반의 안정적 개발 + +## 💎 핵심 장점 +- 컴파일 단계의 에러 포착으로 사후 버그 90% 이상 예방. +- 코드 자체가 문서가 되는 자동 명세 효과. + +## 🛠️ 고급 문법 +- **Generic**: 재사용성 높은 타입 설계. +- **Narrowing**: 런타임 타입 검사 및 좁히기를 통한 안전한 데이터 처리. + +## 🔗 연결된 지식 +- [[React_Clean_Code_Best_Practices]] +- [[React_Hooks_Deep_Dive]]