diff --git a/.obsidian/app.json b/.obsidian/app.json new file mode 100644 index 00000000..9e26dfee --- /dev/null +++ b/.obsidian/app.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/.obsidian/appearance.json b/.obsidian/appearance.json new file mode 100644 index 00000000..9e26dfee --- /dev/null +++ b/.obsidian/appearance.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/.obsidian/core-plugins.json b/.obsidian/core-plugins.json new file mode 100644 index 00000000..639b90da --- /dev/null +++ b/.obsidian/core-plugins.json @@ -0,0 +1,33 @@ +{ + "file-explorer": true, + "global-search": true, + "switcher": true, + "graph": true, + "backlink": true, + "canvas": true, + "outgoing-link": true, + "tag-pane": true, + "footnotes": false, + "properties": true, + "page-preview": true, + "daily-notes": true, + "templates": true, + "note-composer": true, + "command-palette": true, + "slash-command": false, + "editor-status": true, + "bookmarks": true, + "markdown-importer": false, + "zk-prefixer": false, + "random-note": false, + "outline": true, + "word-count": true, + "slides": false, + "audio-recorder": false, + "workspaces": false, + "file-recovery": true, + "publish": false, + "sync": true, + "bases": true, + "webviewer": false +} \ No newline at end of file diff --git a/.obsidian/graph.json b/.obsidian/graph.json new file mode 100644 index 00000000..e56c2134 --- /dev/null +++ b/.obsidian/graph.json @@ -0,0 +1,22 @@ +{ + "collapse-filter": true, + "search": "", + "showTags": false, + "showAttachments": false, + "hideUnresolved": false, + "showOrphans": true, + "collapse-color-groups": true, + "colorGroups": [], + "collapse-display": true, + "showArrow": false, + "textFadeMultiplier": 0, + "nodeSizeMultiplier": 1, + "lineSizeMultiplier": 1, + "collapse-forces": true, + "centerStrength": 0.518713248970312, + "repelStrength": 10, + "linkStrength": 1, + "linkDistance": 250, + "scale": 0.08317427835927536, + "close": false +} \ No newline at end of file diff --git a/.obsidian/workspace.json b/.obsidian/workspace.json new file mode 100644 index 00000000..a2ee0147 --- /dev/null +++ b/.obsidian/workspace.json @@ -0,0 +1,187 @@ +{ + "main": { + "id": "59f0bd68c638b9ae", + "type": "split", + "children": [ + { + "id": "6e3e7f0212dd6d2e", + "type": "tabs", + "children": [ + { + "id": "5e19c94f304a33d1", + "type": "leaf", + "state": { + "type": "graph", + "state": {}, + "icon": "lucide-git-fork", + "title": "그래프 뷰" + } + } + ] + } + ], + "direction": "vertical" + }, + "left": { + "id": "b20f341b7d225db0", + "type": "split", + "children": [ + { + "id": "76facd68bdc37a30", + "type": "tabs", + "children": [ + { + "id": "697d93dc46e83f99", + "type": "leaf", + "state": { + "type": "file-explorer", + "state": { + "sortOrder": "alphabetical", + "autoReveal": false + }, + "icon": "lucide-folder-closed", + "title": "파일 탐색기" + } + }, + { + "id": "14386382787eb545", + "type": "leaf", + "state": { + "type": "search", + "state": { + "query": "", + "matchingCase": false, + "explainSearch": false, + "collapseAll": false, + "extraContext": false, + "sortOrder": "alphabetical" + }, + "icon": "lucide-search", + "title": "검색" + } + }, + { + "id": "6544f7f2d2bdb927", + "type": "leaf", + "state": { + "type": "bookmarks", + "state": {}, + "icon": "lucide-bookmark", + "title": "북마크" + } + } + ] + } + ], + "direction": "horizontal", + "width": 300 + }, + "right": { + "id": "eb1afd59f22726e4", + "type": "split", + "children": [ + { + "id": "cff2bf89b29bbdad", + "type": "tabs", + "children": [ + { + "id": "a06f05e29da92edb", + "type": "leaf", + "state": { + "type": "backlink", + "state": { + "collapseAll": false, + "extraContext": false, + "sortOrder": "alphabetical", + "showSearch": false, + "searchQuery": "", + "backlinkCollapsed": false, + "unlinkedCollapsed": true + }, + "icon": "links-coming-in", + "title": "백링크" + } + }, + { + "id": "461414a74ff42c5f", + "type": "leaf", + "state": { + "type": "outgoing-link", + "state": { + "linksCollapsed": false, + "unlinkedCollapsed": true + }, + "icon": "links-going-out", + "title": "나가는 링크" + } + }, + { + "id": "2c463caabad51324", + "type": "leaf", + "state": { + "type": "tag", + "state": { + "sortOrder": "frequency", + "useHierarchy": true, + "showSearch": false, + "searchQuery": "" + }, + "icon": "lucide-tags", + "title": "태그" + } + }, + { + "id": "e863614ec11ec6c0", + "type": "leaf", + "state": { + "type": "all-properties", + "state": { + "sortOrder": "frequency", + "showSearch": false, + "searchQuery": "" + }, + "icon": "lucide-archive", + "title": "모든 속성" + } + }, + { + "id": "0f1cc972aeac180a", + "type": "leaf", + "state": { + "type": "outline", + "state": { + "followCursor": false, + "showSearch": false, + "searchQuery": "" + }, + "icon": "lucide-list", + "title": "개요" + } + } + ] + } + ], + "direction": "horizontal", + "width": 300, + "collapsed": true + }, + "left-ribbon": { + "hiddenItems": { + "switcher:빠른 전환기 열기": false, + "graph:그래프 뷰 열기": false, + "canvas:새 캔버스 만들기": false, + "daily-notes:오늘의 일일 노트 열기": false, + "templates:템플릿 삽입": false, + "command-palette:명령어 팔레트 열기": false, + "bases:새 베이스 생성하기": false + } + }, + "active": "5e19c94f304a33d1", + "lastOpenFiles": [ + "Systemic_Simulation_Principles.md", + "DevOps_Environment_Setup.md", + "Separation_of_Concerns.md", + "Single_Source_of_Truth.md", + "WebWorker_Performance.md" + ] +} \ No newline at end of file diff --git a/DevOps_Environment_Setup.md b/DevOps_Environment_Setup.md new file mode 100644 index 00000000..c24517d5 --- /dev/null +++ b/DevOps_Environment_Setup.md @@ -0,0 +1,24 @@ +--- +title: 개발 환경 및 실행 프로세스 관리 (DevOps & Setup) +category: DevOps +tags: [DevOps, Environment, CI/CD, Process Management] +created: 2026-04-20 +--- + +# 개발 환경 및 실행 프로세스 관리 + +## 🎯 개요 (Overview) +코딩 완성도만큼이나 중요한 **실행 환경(Runtime Environment)**과 **설정 파일(Configuration)**의 무결성을 확보하여, '내 컴퓨터에선 되는데 왜 저기선 안 되지?'라는 문제를 해결하는 프로세스입니다. + +## 🚀 필수 체크리스트 (Checklist) +- **의존성 관리**: `npm install` 등 패키지 무결성 확인. +- **물리적 파일 구조**: `index.html` 등 필수 진입점 파일 존재 확인. +- **보안 및 권한**: OS 레벨의 실행 정책(`Execution Policy`) 및 권한 설정. + +## 💡 레슨 런 (Lesson Learned) +> [!NOTE] +> **"운영 환경에 대한 이해는 코딩 능력의 절반이다."** +> 논리적 로직의 완성뿐만 아니라, 그것이 실제로 구동되는 물리적 인프라 설정을 문서화하고 자동화하는 능력이 필수적입니다. + +## 🔗 연결된 지식 +- [[Systemic_Simulation_Principles]] diff --git a/Separation_of_Concerns.md b/Separation_of_Concerns.md new file mode 100644 index 00000000..e57cf8eb --- /dev/null +++ b/Separation_of_Concerns.md @@ -0,0 +1,25 @@ +--- +title: 시스템 아키텍처와 관심사 분리 (Separation of Concerns) +category: Software Architecture +tags: [Architecture, SoC, Modular Design, Design Pattern] +created: 2026-04-20 +--- + +# 시스템 아키텍처와 관심사 분리 (SoC) + +## 🎯 개요 (Overview) +복잡한 소프트웨어 시스템을 역할별로 구분된 독립적인 모듈로 나누어, 유지보수성과 확장성을 극대화하는 설계 철학입니다. + +## 🚀 계층구조 예시 (Layering Example) +1. **Logic Engine**: 순수 비즈니스 로직 및 규칙 수행 (예: `gameWorker.js`) +2. **State Manager**: 데이터의 중앙 집중 처리 (예: `TetrisGame.jsx`) +3. **View Layer**: 사용자 인터페이스 표현 및 렌더링 (예: React Components) + +## 💡 레슨 런 (Lesson Learned) +> [!IMPORTANT] +> **"코드의 경계가 명확할 때 시스템은 비로소 건강해진다."** +> 기능을 추가할 때 기존 코드를 수정하기보다 새로운 모듈을 덧붙일 수 있는 구조를 고민해야 합니다. + +## 🔗 연결된 지식 +- [[WebWorker_Performance]] +- [[Single_Source_of_Truth]] diff --git a/Single_Source_of_Truth.md b/Single_Source_of_Truth.md new file mode 100644 index 00000000..d62c92be --- /dev/null +++ b/Single_Source_of_Truth.md @@ -0,0 +1,24 @@ +--- +title: 상태 관리의 단일 진실 공급원 (Single Source of Truth) +category: Software Architecture +tags: [State Management, Data Consistency, Redux, Architecture] +created: 2026-04-20 +--- + +# 상태 관리의 단일 진실 공급원 (Single Source of Truth) + +## 🎯 개요 (Overview) +시스템의 핵심 데이터를 중앙 집중식으로 관리하여, 데이터 불일치(Inconsistency) 현상을 원천 차단하고 예측 가능한 데이터 흐름을 확보하는 설계 원칙입니다. + +## 🚀 주요 원칙 (Key Principles) +- **단일 지점 정의 (Defined at Single Point)**: 상태는 오직 한 곳에서만 정의되고 관리되어야 합니다. +- **예측 가능성 (Predictability)**: 상태 변경은 정해진 규칙(Action/Setter)을 통해서만 발생하여 디버깅을 용이하게 합니다. + +## 💡 레슨 런 (Lesson Learned) +> [!TIP] +> **"상태는 오직 한 곳에서만 정의하고, 모든 로직은 그 상태를 읽고 쓰는 방식으로 동작해야 한다."** +> 코드의 파편화를 막기 위해 데이터의 책임 범위(Responsibility)를 명확히 하는 것이 대규모 프로젝트 성공의 열쇠입니다. + +## 🔗 연결된 지식 +- [[Separation_of_Concerns]] +- [[Domain-Driven Design (DDD)]] diff --git a/Systemic_Simulation_Principles.md b/Systemic_Simulation_Principles.md new file mode 100644 index 00000000..3cf8eceb --- /dev/null +++ b/Systemic_Simulation_Principles.md @@ -0,0 +1,24 @@ +--- +title: 시스템 시뮬레이션 설계 원리 +category: Systemic Modeling & Fun +tags: [Simulation, Physics Engine, Systemic Modeling, Ruleset] +created: 2026-04-20 +--- + +# 시스템 시뮬레이션 설계 원리 + +## 🎯 개요 (Overview) +현실 세계의 물리 법칙이나 비즈니스 규칙을 수학적으로 정의하고, 이를 절대적으로 우회할 수 없는 시스템 내의 법(Law)으로 구축하는 설계 기법입니다. + +## 🚀 핵심 메커니즘 (Mechanisms) +- **규칙 강제 (Ruleset Enforcement)**: 모든 상태 변화는 사전에 정의된 물리 엔진 함수(`checkCollision` 등)를 거쳐야만 합니다. +- **수학적 모델링**: 변화를 시각적 묘사가 아닌 데이터와 수식으로 먼저 증명합니다. + +## 💡 레슨 런 (Lesson Learned) +> [!TIP] +> **"모든 시뮬레이션은 수학적 규칙을 절대 우회할 수 없도록 강제해야 한다."** +> 이를 통해 단순한 게임을 넘어 자율주행, 물리 엔진 등 고도의 결정론적 시스템 모델링이 가능해집니다. + +## 🔗 연결된 지식 +- [[WebWorker_Performance]] +- [[Separation_of_Concerns]] diff --git a/WebWorker_Performance.md b/WebWorker_Performance.md new file mode 100644 index 00000000..0dae6511 --- /dev/null +++ b/WebWorker_Performance.md @@ -0,0 +1,24 @@ +--- +title: WebWorker를 이용한 고성능 아키텍처 설계 +category: Web & Performance +tags: [Web Worker, Concurrency, Performance, UI responsiveness] +created: 2026-04-20 +--- + +# WebWorker를 이용한 고성능 아키텍처 설계 + +## 🎯 개요 (Overview) +실시간 상태 변화가 매우 빈번한 애플리케이션(예: 게임, 시뮬레이션)에서 UI 스레드와 복잡한 연산 로직을 분리하여 **프레임 드롭(Jank)**을 방지하는 아키텍처 설계 기법입니다. + +## 🚀 주요 원칙 (Key Principles) +- **스레드 분리 (Thread Isolation)**: 무거운 계산은 백그라운드 스레드(Web Worker)에서 수행하고, 메인 스레드는 렌더링에만 집중합니다. +- **메시징 기반 통신 (Messaging Architecture)**: `postMessage`와 `onmessage`를 통해 비동기적으로 데이터를 주고받아 결합도를 낮춥니다. + +## 💡 레슨 런 (Lesson Learned) +> [!IMPORTANT] +> **"성능 병목 현상은 종종 '스레딩(Threading)'의 문제이다."** +> 복잡한 물리 계산이나 루프가 UI 응답성을 해치지 않도록, 연산 엔진을 완전히 별도의 스레드로 격리하는 것이 부드러운 UX의 핵심입니다. + +## 🔗 연결된 지식 +- [[Separation_of_Concerns]] +- [[Systemic_Simulation_Principles]]