diff --git a/00_Raw/2026-04-26-Skybound_Audio_Unification_Title_Typography_UX_Hierarchy_Review.md b/00_Raw/00_Processed/2026-04-26-Skybound_Audio_Unification_Title_Typography_UX_Hierarchy_Review.md similarity index 100% rename from 00_Raw/2026-04-26-Skybound_Audio_Unification_Title_Typography_UX_Hierarchy_Review.md rename to 00_Raw/00_Processed/2026-04-26-Skybound_Audio_Unification_Title_Typography_UX_Hierarchy_Review.md diff --git a/00_Raw/2026-04-26-Skybound_Combat_HUD_Information_Hierarchy_Onboarding.md b/00_Raw/00_Processed/2026-04-26-Skybound_Combat_HUD_Information_Hierarchy_Onboarding.md similarity index 100% rename from 00_Raw/2026-04-26-Skybound_Combat_HUD_Information_Hierarchy_Onboarding.md rename to 00_Raw/00_Processed/2026-04-26-Skybound_Combat_HUD_Information_Hierarchy_Onboarding.md diff --git a/00_Raw/2026-04-26-Skybound_Combat_SFX_Weapon_Nerf_Background_Scroll_Stability.md b/00_Raw/00_Processed/2026-04-26-Skybound_Combat_SFX_Weapon_Nerf_Background_Scroll_Stability.md similarity index 100% rename from 00_Raw/2026-04-26-Skybound_Combat_SFX_Weapon_Nerf_Background_Scroll_Stability.md rename to 00_Raw/00_Processed/2026-04-26-Skybound_Combat_SFX_Weapon_Nerf_Background_Scroll_Stability.md diff --git a/00_Raw/2026-04-26-Skybound_Combat_Safe_Micro_HUD_Pass.md b/00_Raw/00_Processed/2026-04-26-Skybound_Combat_Safe_Micro_HUD_Pass.md similarity index 100% rename from 00_Raw/2026-04-26-Skybound_Combat_Safe_Micro_HUD_Pass.md rename to 00_Raw/00_Processed/2026-04-26-Skybound_Combat_Safe_Micro_HUD_Pass.md diff --git a/00_Raw/2026-04-26-Skybound_Desktop_Side_Dock_HUD.md b/00_Raw/00_Processed/2026-04-26-Skybound_Desktop_Side_Dock_HUD.md similarity index 100% rename from 00_Raw/2026-04-26-Skybound_Desktop_Side_Dock_HUD.md rename to 00_Raw/00_Processed/2026-04-26-Skybound_Desktop_Side_Dock_HUD.md diff --git a/00_Raw/2026-04-26-Skybound_Enemy_Movement_Jitter_Stabilization.md b/00_Raw/00_Processed/2026-04-26-Skybound_Enemy_Movement_Jitter_Stabilization.md similarity index 100% rename from 00_Raw/2026-04-26-Skybound_Enemy_Movement_Jitter_Stabilization.md rename to 00_Raw/00_Processed/2026-04-26-Skybound_Enemy_Movement_Jitter_Stabilization.md diff --git a/00_Raw/2026-04-26-Skybound_Global_HUD_Result_UI_Tone_Unification.md b/00_Raw/00_Processed/2026-04-26-Skybound_Global_HUD_Result_UI_Tone_Unification.md similarity index 100% rename from 00_Raw/2026-04-26-Skybound_Global_HUD_Result_UI_Tone_Unification.md rename to 00_Raw/00_Processed/2026-04-26-Skybound_Global_HUD_Result_UI_Tone_Unification.md diff --git a/00_Raw/2026-04-26-Skybound_HUD_Dock_Button_Fit_and_NoScroll_Tactical_Upgrade.md b/00_Raw/00_Processed/2026-04-26-Skybound_HUD_Dock_Button_Fit_and_NoScroll_Tactical_Upgrade.md similarity index 100% rename from 00_Raw/2026-04-26-Skybound_HUD_Dock_Button_Fit_and_NoScroll_Tactical_Upgrade.md rename to 00_Raw/00_Processed/2026-04-26-Skybound_HUD_Dock_Button_Fit_and_NoScroll_Tactical_Upgrade.md diff --git a/00_Raw/2026-04-26-Skybound_Hangar_Layout_Guardrails_Scroll_Islands.md b/00_Raw/00_Processed/2026-04-26-Skybound_Hangar_Layout_Guardrails_Scroll_Islands.md similarity index 100% rename from 00_Raw/2026-04-26-Skybound_Hangar_Layout_Guardrails_Scroll_Islands.md rename to 00_Raw/00_Processed/2026-04-26-Skybound_Hangar_Layout_Guardrails_Scroll_Islands.md diff --git a/00_Raw/2026-04-26-Skybound_Hangar_Loadout_Bay_Focused_UI_Redesign.md b/00_Raw/00_Processed/2026-04-26-Skybound_Hangar_Loadout_Bay_Focused_UI_Redesign.md similarity index 100% rename from 00_Raw/2026-04-26-Skybound_Hangar_Loadout_Bay_Focused_UI_Redesign.md rename to 00_Raw/00_Processed/2026-04-26-Skybound_Hangar_Loadout_Bay_Focused_UI_Redesign.md diff --git a/00_Raw/2026-04-26-Skybound_Hangar_Unified_Button_Legibility_System.md b/00_Raw/00_Processed/2026-04-26-Skybound_Hangar_Unified_Button_Legibility_System.md similarity index 100% rename from 00_Raw/2026-04-26-Skybound_Hangar_Unified_Button_Legibility_System.md rename to 00_Raw/00_Processed/2026-04-26-Skybound_Hangar_Unified_Button_Legibility_System.md diff --git a/00_Raw/2026-04-26-Skybound_Hangar_Upgrade_Scroll_and_Campaign_Footer_Stabilization.md b/00_Raw/00_Processed/2026-04-26-Skybound_Hangar_Upgrade_Scroll_and_Campaign_Footer_Stabilization.md similarity index 100% rename from 00_Raw/2026-04-26-Skybound_Hangar_Upgrade_Scroll_and_Campaign_Footer_Stabilization.md rename to 00_Raw/00_Processed/2026-04-26-Skybound_Hangar_Upgrade_Scroll_and_Campaign_Footer_Stabilization.md diff --git a/00_Raw/2026-04-26-Skybound_LevelUp_Modal_Text_Fit_and_Card_Layout_Fix.md b/00_Raw/00_Processed/2026-04-26-Skybound_LevelUp_Modal_Text_Fit_and_Card_Layout_Fix.md similarity index 100% rename from 00_Raw/2026-04-26-Skybound_LevelUp_Modal_Text_Fit_and_Card_Layout_Fix.md rename to 00_Raw/00_Processed/2026-04-26-Skybound_LevelUp_Modal_Text_Fit_and_Card_Layout_Fix.md diff --git a/00_Raw/2026-04-26-Skybound_Low_Count_High_Threat_Enemy_Curve_Settings_Intro_Refresh.md b/00_Raw/00_Processed/2026-04-26-Skybound_Low_Count_High_Threat_Enemy_Curve_Settings_Intro_Refresh.md similarity index 100% rename from 00_Raw/2026-04-26-Skybound_Low_Count_High_Threat_Enemy_Curve_Settings_Intro_Refresh.md rename to 00_Raw/00_Processed/2026-04-26-Skybound_Low_Count_High_Threat_Enemy_Curve_Settings_Intro_Refresh.md diff --git a/00_Raw/2026-04-26-Skybound_Pickup_Enemy_Bullet_Readability_Separation.md b/00_Raw/00_Processed/2026-04-26-Skybound_Pickup_Enemy_Bullet_Readability_Separation.md similarity index 100% rename from 00_Raw/2026-04-26-Skybound_Pickup_Enemy_Bullet_Readability_Separation.md rename to 00_Raw/00_Processed/2026-04-26-Skybound_Pickup_Enemy_Bullet_Readability_Separation.md diff --git a/00_Raw/2026-04-26-Skybound_Runtime_Asset_Path_Legacy_Background_Airframe_Fix.md b/00_Raw/00_Processed/2026-04-26-Skybound_Runtime_Asset_Path_Legacy_Background_Airframe_Fix.md similarity index 100% rename from 00_Raw/2026-04-26-Skybound_Runtime_Asset_Path_Legacy_Background_Airframe_Fix.md rename to 00_Raw/00_Processed/2026-04-26-Skybound_Runtime_Asset_Path_Legacy_Background_Airframe_Fix.md diff --git a/00_Raw/2026-04-26-Skybound_Stage1_Enemy_Reduction_and_UI_Readability_Pass.md b/00_Raw/00_Processed/2026-04-26-Skybound_Stage1_Enemy_Reduction_and_UI_Readability_Pass.md similarity index 100% rename from 00_Raw/2026-04-26-Skybound_Stage1_Enemy_Reduction_and_UI_Readability_Pass.md rename to 00_Raw/00_Processed/2026-04-26-Skybound_Stage1_Enemy_Reduction_and_UI_Readability_Pass.md diff --git a/00_Raw/2026-04-26-Skybound_Tactical_Bomb_SFX_Routing_Fix.md b/00_Raw/00_Processed/2026-04-26-Skybound_Tactical_Bomb_SFX_Routing_Fix.md similarity index 100% rename from 00_Raw/2026-04-26-Skybound_Tactical_Bomb_SFX_Routing_Fix.md rename to 00_Raw/00_Processed/2026-04-26-Skybound_Tactical_Bomb_SFX_Routing_Fix.md diff --git a/00_Raw/A-B 테스트 및 데이터 기반 UX 검증 환경.md b/00_Raw/00_Processed/A-B 테스트 및 데이터 기반 UX 검증 환경.md similarity index 100% rename from 00_Raw/A-B 테스트 및 데이터 기반 UX 검증 환경.md rename to 00_Raw/00_Processed/A-B 테스트 및 데이터 기반 UX 검증 환경.md diff --git a/00_Raw/ADA Website Compliance.md b/00_Raw/00_Processed/ADA Website Compliance.md similarity index 100% rename from 00_Raw/ADA Website Compliance.md rename to 00_Raw/00_Processed/ADA Website Compliance.md diff --git a/00_Raw/AI Answer Engine Optimization.md b/00_Raw/00_Processed/AI Answer Engine Optimization.md similarity index 100% rename from 00_Raw/AI Answer Engine Optimization.md rename to 00_Raw/00_Processed/AI Answer Engine Optimization.md diff --git a/00_Raw/AI Overviews (SGE).md b/00_Raw/00_Processed/AI Overviews (SGE).md similarity index 100% rename from 00_Raw/AI Overviews (SGE).md rename to 00_Raw/00_Processed/AI Overviews (SGE).md diff --git a/00_Raw/AI Overviews Visibility.md b/00_Raw/00_Processed/AI Overviews Visibility.md similarity index 100% rename from 00_Raw/AI Overviews Visibility.md rename to 00_Raw/00_Processed/AI Overviews Visibility.md diff --git a/00_Raw/AI Overviews.md b/00_Raw/00_Processed/AI Overviews.md similarity index 100% rename from 00_Raw/AI Overviews.md rename to 00_Raw/00_Processed/AI Overviews.md diff --git a/00_Raw/AI Search Optimization.md b/00_Raw/00_Processed/AI Search Optimization.md similarity index 100% rename from 00_Raw/AI Search Optimization.md rename to 00_Raw/00_Processed/AI Search Optimization.md diff --git a/00_Raw/AI 개인화 및 적응형 UX.md b/00_Raw/00_Processed/AI 개인화 및 적응형 UX.md similarity index 100% rename from 00_Raw/AI 개인화 및 적응형 UX.md rename to 00_Raw/00_Processed/AI 개인화 및 적응형 UX.md diff --git a/00_Raw/Accessibility Compliance (ADA-EAA).md b/00_Raw/00_Processed/Accessibility Compliance (ADA-EAA).md similarity index 100% rename from 00_Raw/Accessibility Compliance (ADA-EAA).md rename to 00_Raw/00_Processed/Accessibility Compliance (ADA-EAA).md diff --git a/00_Raw/Accessibility Compliance (WCAG).md b/00_Raw/00_Processed/Accessibility Compliance (WCAG).md similarity index 100% rename from 00_Raw/Accessibility Compliance (WCAG).md rename to 00_Raw/00_Processed/Accessibility Compliance (WCAG).md diff --git a/00_Raw/Adaptive UX.md b/00_Raw/00_Processed/Adaptive UX.md similarity index 100% rename from 00_Raw/Adaptive UX.md rename to 00_Raw/00_Processed/Adaptive UX.md diff --git a/00_Raw/Allbirds E-commerce Redesign.md b/00_Raw/00_Processed/Allbirds E-commerce Redesign.md similarity index 100% rename from 00_Raw/Allbirds E-commerce Redesign.md rename to 00_Raw/00_Processed/Allbirds E-commerce Redesign.md diff --git a/00_Raw/Allbirds PWA Redesign.md b/00_Raw/00_Processed/Allbirds PWA Redesign.md similarity index 100% rename from 00_Raw/Allbirds PWA Redesign.md rename to 00_Raw/00_Processed/Allbirds PWA Redesign.md diff --git a/00_Raw/Allbirds PWA 기반 E-commerce 재설계 사례.md b/00_Raw/00_Processed/Allbirds PWA 기반 E-commerce 재설계 사례.md similarity index 100% rename from 00_Raw/Allbirds PWA 기반 E-commerce 재설계 사례.md rename to 00_Raw/00_Processed/Allbirds PWA 기반 E-commerce 재설계 사례.md diff --git a/00_Raw/Americans with Disabilities Act (ADA) Compliance.md b/00_Raw/00_Processed/Americans with Disabilities Act (ADA) Compliance.md similarity index 100% rename from 00_Raw/Americans with Disabilities Act (ADA) Compliance.md rename to 00_Raw/00_Processed/Americans with Disabilities Act (ADA) Compliance.md diff --git a/00_Raw/Americans with Disabilities Act (ADA).md b/00_Raw/00_Processed/Americans with Disabilities Act (ADA).md similarity index 100% rename from 00_Raw/Americans with Disabilities Act (ADA).md rename to 00_Raw/00_Processed/Americans with Disabilities Act (ADA).md diff --git a/00_Raw/App Router.md b/00_Raw/00_Processed/App Router.md similarity index 100% rename from 00_Raw/App Router.md rename to 00_Raw/00_Processed/App Router.md diff --git a/00_Raw/Atomic Styling.md b/00_Raw/00_Processed/Atomic Styling.md similarity index 100% rename from 00_Raw/Atomic Styling.md rename to 00_Raw/00_Processed/Atomic Styling.md diff --git a/00_Raw/Base Web.md b/00_Raw/00_Processed/Base Web.md similarity index 100% rename from 00_Raw/Base Web.md rename to 00_Raw/00_Processed/Base Web.md diff --git a/00_Raw/CI-CD Pipeline.md b/00_Raw/00_Processed/CI-CD Pipeline.md similarity index 100% rename from 00_Raw/CI-CD Pipeline.md rename to 00_Raw/00_Processed/CI-CD Pipeline.md diff --git a/00_Raw/CLS (Cumulative Layout Shift).md b/00_Raw/00_Processed/CLS (Cumulative Layout Shift).md similarity index 100% rename from 00_Raw/CLS (Cumulative Layout Shift).md rename to 00_Raw/00_Processed/CLS (Cumulative Layout Shift).md diff --git a/00_Raw/Class Components.md b/00_Raw/00_Processed/Class Components.md similarity index 100% rename from 00_Raw/Class Components.md rename to 00_Raw/00_Processed/Class Components.md diff --git a/00_Raw/Clean Code Principles.md b/00_Raw/00_Processed/Clean Code Principles.md similarity index 100% rename from 00_Raw/Clean Code Principles.md rename to 00_Raw/00_Processed/Clean Code Principles.md diff --git a/00_Raw/Clean Code.md b/00_Raw/00_Processed/Clean Code.md similarity index 100% rename from 00_Raw/Clean Code.md rename to 00_Raw/00_Processed/Clean Code.md diff --git a/00_Raw/Client-Side Rendering (CSR) vs Server-Side Rendering (SSR).md b/00_Raw/00_Processed/Client-Side Rendering (CSR) vs Server-Side Rendering (SSR).md similarity index 100% rename from 00_Raw/Client-Side Rendering (CSR) vs Server-Side Rendering (SSR).md rename to 00_Raw/00_Processed/Client-Side Rendering (CSR) vs Server-Side Rendering (SSR).md diff --git a/00_Raw/Client-Side Rendering (CSR).md b/00_Raw/00_Processed/Client-Side Rendering (CSR).md similarity index 100% rename from 00_Raw/Client-Side Rendering (CSR).md rename to 00_Raw/00_Processed/Client-Side Rendering (CSR).md diff --git a/00_Raw/Client-Side Routing.md b/00_Raw/00_Processed/Client-Side Routing.md similarity index 100% rename from 00_Raw/Client-Side Routing.md rename to 00_Raw/00_Processed/Client-Side Routing.md diff --git a/00_Raw/Code Splitting and Lazy Loading.md b/00_Raw/00_Processed/Code Splitting and Lazy Loading.md similarity index 100% rename from 00_Raw/Code Splitting and Lazy Loading.md rename to 00_Raw/00_Processed/Code Splitting and Lazy Loading.md diff --git a/00_Raw/Code Splitting.md b/00_Raw/00_Processed/Code Splitting.md similarity index 100% rename from 00_Raw/Code Splitting.md rename to 00_Raw/00_Processed/Code Splitting.md diff --git a/00_Raw/Component Composition.md b/00_Raw/00_Processed/Component Composition.md similarity index 100% rename from 00_Raw/Component Composition.md rename to 00_Raw/00_Processed/Component Composition.md diff --git a/00_Raw/Component Lifecycle.md b/00_Raw/00_Processed/Component Lifecycle.md similarity index 100% rename from 00_Raw/Component Lifecycle.md rename to 00_Raw/00_Processed/Component Lifecycle.md diff --git a/00_Raw/Component-Based Architecture.md b/00_Raw/00_Processed/Component-Based Architecture.md similarity index 100% rename from 00_Raw/Component-Based Architecture.md rename to 00_Raw/00_Processed/Component-Based Architecture.md diff --git a/00_Raw/Content Delivery Network (CDN).md b/00_Raw/00_Processed/Content Delivery Network (CDN).md similarity index 100% rename from 00_Raw/Content Delivery Network (CDN).md rename to 00_Raw/00_Processed/Content Delivery Network (CDN).md diff --git a/00_Raw/00_Processed/Continuous Integration-Continuous Deployment (CI-CD).md b/00_Raw/00_Processed/Continuous Integration-Continuous Deployment (CI-CD).md new file mode 100644 index 00000000..f4d5eac9 --- /dev/null +++ b/00_Raw/00_Processed/Continuous Integration-Continuous Deployment (CI-CD).md @@ -0,0 +1,20 @@ +# [[Continuous Integration/Continuous Deployment (CI/CD)]] + +## 📌 Brief Summary +CI/CD(지속적 통합/지속적 배포)는 소프트웨어 개발에서 코드의 병합, 테스트 및 배포 과정을 자동화하는 파이프라인입니다 [1]. 프론트엔드 시스템에서 CI/CD는 코드가 메인 브랜치에 병합되기 전에 린팅, 포맷팅, 타입 검사 및 테스트를 자동으로 실행하여 코드 품질과 안정성을 보장합니다 [2, 3]. 또한 시각적 회귀 테스트 도구를 CI 파이프라인에 통합하여 의도치 않은 UI 버그가 프로덕션에 도달하는 것을 사전에 방지할 수 있습니다 [4, 5]. + +## 📖 Core Content +* **자동화된 거버넌스 및 빌드 오류 방지** + 현대적인 대규모 프론트엔드 시스템에서 CI/CD 파이프라인은 자동화된 거버넌스를 실행하는 핵심적인 역할을 합니다 [1]. 개발자가 코드를 커밋하기 전에 린팅, 포맷팅 및 타입 검사를 수행하여 고품질의 코드만 저장소에 들어가도록 보장합니다 [2]. 또한 로컬 환경(예: Windows, macOS)에서는 대소문자를 구분하지 않아 정상 동작하더라도, Linux 기반의 CI/CD 파이프라인에서는 파일 이름(PascalCase)과 임포트 구문(camelCase)의 대소문자 불일치로 인해 빌드 실패가 발생할 수 있으므로 이를 사전에 엄격히 검사합니다 [6]. +* **Git 워크플로우와의 통합** + 안정적인 협업을 위해 모든 기능 브랜치(Feature branch)의 코드는 동료의 리뷰와 CI/CD 검사를 모두 통과한 후에만 메인 브랜치로 병합되어야 합니다 [3, 7]. 소규모 팀이 성장함에 따라 기존 워크플로우에 CI 검사를 추가하여 안정성을 높일 수 있으며 [8], 트렁크 기반 개발(Trunk-based development) 워크플로우를 채택하려면 강력한 CI 환경이 필수적으로 뒷받침되어야 합니다 [9]. 작업 방식을 GitHub Flow로 마이그레이션할 때는 CI/CD 설정을 업데이트하여 메인 브랜치에서 직접 배포(Deploy)가 이루어지도록 구성해야 합니다 [10]. +* **시각적 UI 테스트(Visual Testing) 파이프라인 연동** + Storybook과 같은 환경에서 개발된 UI 컴포넌트는 Happo나 Chromatic과 같은 시각적 회귀 테스트 도구를 통해 CI에 통합될 수 있습니다 [4, 5, 11]. CI 파이프라인에 해당 도구들을 추가하면, 풀 리퀘스트(Pull Request)가 생성될 때마다 자동으로 스크린샷을 캡처하고 시각적 변경 사항을 비교하는 리뷰 링크를 제공합니다 [5, 12]. 이를 통해 코드 변경으로 인한 UI 깨짐이나 접근성 위반(Accessibility violations) 문제를 병합 전에 차단할 수 있습니다 [5, 13, 14]. + +## 🔗 Knowledge Connections +- **Related Topics:** [[Git Workflow]], [[Trunk-Based Development]], [[Automated Governance]], [[Visual Regression Testing]] +- **Projects/Contexts:** [[Scalable Frontend Systems]], [[Storybook Component Testing]] +- **Contradictions/Notes:** 소스에 관련 정보가 부족합니다. (소스 내에서 CI/CD의 역할이나 접근 방식에 대한 상충되는 주장은 발견되지 않았습니다.) + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/Conventional Commits.md b/00_Raw/00_Processed/Conventional Commits.md similarity index 100% rename from 00_Raw/Conventional Commits.md rename to 00_Raw/00_Processed/Conventional Commits.md diff --git a/00_Raw/Core Web Vitals Optimization Guide.md b/00_Raw/00_Processed/Core Web Vitals Optimization Guide.md similarity index 100% rename from 00_Raw/Core Web Vitals Optimization Guide.md rename to 00_Raw/00_Processed/Core Web Vitals Optimization Guide.md diff --git a/00_Raw/Core Web Vitals 최적화.md b/00_Raw/00_Processed/Core Web Vitals 최적화.md similarity index 100% rename from 00_Raw/Core Web Vitals 최적화.md rename to 00_Raw/00_Processed/Core Web Vitals 최적화.md diff --git a/00_Raw/Core Web Vitals.md b/00_Raw/00_Processed/Core Web Vitals.md similarity index 100% rename from 00_Raw/Core Web Vitals.md rename to 00_Raw/00_Processed/Core Web Vitals.md diff --git a/00_Raw/Create React App 기반 패션 E-commerce 플랫폼의 Next.js 전환 프로젝트.md b/00_Raw/00_Processed/Create React App 기반 패션 E-commerce 플랫폼의 Next.js 전환 프로젝트.md similarity index 100% rename from 00_Raw/Create React App 기반 패션 E-commerce 플랫폼의 Next.js 전환 프로젝트.md rename to 00_Raw/00_Processed/Create React App 기반 패션 E-commerce 플랫폼의 Next.js 전환 프로젝트.md diff --git a/00_Raw/Create React App.md b/00_Raw/00_Processed/Create React App.md similarity index 100% rename from 00_Raw/Create React App.md rename to 00_Raw/00_Processed/Create React App.md diff --git a/00_Raw/Cumulative Layout Shift (CLS).md b/00_Raw/00_Processed/Cumulative Layout Shift (CLS).md similarity index 100% rename from 00_Raw/Cumulative Layout Shift (CLS).md rename to 00_Raw/00_Processed/Cumulative Layout Shift (CLS).md diff --git a/00_Raw/Custom Hooks.md b/00_Raw/00_Processed/Custom Hooks.md similarity index 100% rename from 00_Raw/Custom Hooks.md rename to 00_Raw/00_Processed/Custom Hooks.md diff --git a/00_Raw/DRY Principle.md b/00_Raw/00_Processed/DRY Principle.md similarity index 100% rename from 00_Raw/DRY Principle.md rename to 00_Raw/00_Processed/DRY Principle.md diff --git a/00_Raw/Design-to-Code Workflow.md b/00_Raw/00_Processed/Design-to-Code Workflow.md similarity index 100% rename from 00_Raw/Design-to-Code Workflow.md rename to 00_Raw/00_Processed/Design-to-Code Workflow.md diff --git a/00_Raw/Domain-Driven Design.md b/00_Raw/00_Processed/Domain-Driven Design.md similarity index 100% rename from 00_Raw/Domain-Driven Design.md rename to 00_Raw/00_Processed/Domain-Driven Design.md diff --git a/00_Raw/E-Commerce Redesign Case Studies.md b/00_Raw/00_Processed/E-Commerce Redesign Case Studies.md similarity index 100% rename from 00_Raw/E-Commerce Redesign Case Studies.md rename to 00_Raw/00_Processed/E-Commerce Redesign Case Studies.md diff --git a/00_Raw/E-commerce Migration Case Study.md b/00_Raw/00_Processed/E-commerce Migration Case Study.md similarity index 100% rename from 00_Raw/E-commerce Migration Case Study.md rename to 00_Raw/00_Processed/E-commerce Migration Case Study.md diff --git a/00_Raw/E-commerce Migration to Next.js Case Study.md b/00_Raw/00_Processed/E-commerce Migration to Next.js Case Study.md similarity index 100% rename from 00_Raw/E-commerce Migration to Next.js Case Study.md rename to 00_Raw/00_Processed/E-commerce Migration to Next.js Case Study.md diff --git a/00_Raw/E-commerce Migration to Next.js.md b/00_Raw/00_Processed/E-commerce Migration to Next.js.md similarity index 100% rename from 00_Raw/E-commerce Migration to Next.js.md rename to 00_Raw/00_Processed/E-commerce Migration to Next.js.md diff --git a/00_Raw/E-commerce Optimization.md b/00_Raw/00_Processed/E-commerce Optimization.md similarity index 100% rename from 00_Raw/E-commerce Optimization.md rename to 00_Raw/00_Processed/E-commerce Optimization.md diff --git a/00_Raw/E-commerce Product Pages.md b/00_Raw/00_Processed/E-commerce Product Pages.md similarity index 100% rename from 00_Raw/E-commerce Product Pages.md rename to 00_Raw/00_Processed/E-commerce Product Pages.md diff --git a/00_Raw/E-commerce Web Development.md b/00_Raw/00_Processed/E-commerce Web Development.md similarity index 100% rename from 00_Raw/E-commerce Web Development.md rename to 00_Raw/00_Processed/E-commerce Web Development.md diff --git a/00_Raw/E-commerce Website Optimization.md b/00_Raw/00_Processed/E-commerce Website Optimization.md similarity index 100% rename from 00_Raw/E-commerce Website Optimization.md rename to 00_Raw/00_Processed/E-commerce Website Optimization.md diff --git a/00_Raw/E-commerce 랜딩 페이지 전환율 개선 및 이탈률 감소(CRO).md b/00_Raw/00_Processed/E-commerce 랜딩 페이지 전환율 개선 및 이탈률 감소(CRO).md similarity index 100% rename from 00_Raw/E-commerce 랜딩 페이지 전환율 개선 및 이탈률 감소(CRO).md rename to 00_Raw/00_Processed/E-commerce 랜딩 페이지 전환율 개선 및 이탈률 감소(CRO).md diff --git a/00_Raw/Error Handling in 2025.md b/00_Raw/00_Processed/Error Handling in 2025.md similarity index 100% rename from 00_Raw/Error Handling in 2025.md rename to 00_Raw/00_Processed/Error Handling in 2025.md diff --git a/00_Raw/European Accessibility Act (EAA).md b/00_Raw/00_Processed/European Accessibility Act (EAA).md similarity index 100% rename from 00_Raw/European Accessibility Act (EAA).md rename to 00_Raw/00_Processed/European Accessibility Act (EAA).md diff --git a/00_Raw/Explicit Contracts.md b/00_Raw/00_Processed/Explicit Contracts.md similarity index 100% rename from 00_Raw/Explicit Contracts.md rename to 00_Raw/00_Processed/Explicit Contracts.md diff --git a/00_Raw/FID (First Input Delay).md b/00_Raw/00_Processed/FID (First Input Delay).md similarity index 100% rename from 00_Raw/FID (First Input Delay).md rename to 00_Raw/00_Processed/FID (First Input Delay).md diff --git a/00_Raw/Fallback UI.md b/00_Raw/00_Processed/Fallback UI.md similarity index 100% rename from 00_Raw/Fallback UI.md rename to 00_Raw/00_Processed/Fallback UI.md diff --git a/00_Raw/00_Processed/Feature-Sliced Design (FSD).md b/00_Raw/00_Processed/Feature-Sliced Design (FSD).md new file mode 100644 index 00000000..9038dd9a --- /dev/null +++ b/00_Raw/00_Processed/Feature-Sliced Design (FSD).md @@ -0,0 +1,19 @@ +# [[Feature-Sliced Design (FSD)]] + +## 📌 Brief Summary +Feature-Sliced Design (FSD)은 프론트엔드 애플리케이션, 특히 대규모 React 프로젝트를 구축하기 위해 고안된 현대적인 아키텍처 방법론으로, 코드를 기술적인 역할이 아닌 범위(scope)와 비즈니스 책임(responsibility)에 따라 구성합니다 [1-3]. 이 방법론은 컴포넌트 기반 개발과 도메인 주도 설계(DDD)의 원칙을 결합하여 명확한 경계를 설정합니다 [1]. 또한 애플리케이션을 여러 계층(Layer)과 슬라이스(Slice)로 나누고 단방향 의존성 규칙과 공개 API(Public API) 규칙을 강제함으로써 결합도를 낮추고 유지보수성과 확장성을 크게 높이는 것을 목표로 합니다 [2, 4-6]. + +## 📖 Core Content +* **구조적 모델 (Layers, Slices, Segments):** FSD는 애플리케이션을 `app`(전역 설정 및 초기화), `pages`(라우팅 수준 컴포넌트), `widgets`(기능과 엔티티로 구성된 재사용 가능한 UI 블록), `features`(사용자 상호작용 및 비즈니스 워크플로우), `entities`(핵심 비즈니스 모델), `shared`(도메인에 구애받지 않는 재사용 가능한 유틸리티)와 같은 구체적 계층(Layers)으로 분류합니다 [2, 7, 8]. 각 계층 내에서는 특정 기능을 위한 개념적 경계인 '슬라이스(Slice)'와 논리, 컴포넌트 등을 더 세분화하는 '세그먼트(Segment)'로 나뉘어 구성됩니다 [6, 8]. +* **단방향 의존성 규칙 (Unidirectional Dependencies):** 상위 계층의 코드는 하위 계층에 의존하고 가져올 수 있지만, 하위 계층은 상위 계층에 의존할 수 없습니다 [2, 4]. 이 단일 제약 조건은 모듈 간의 순환 참조를 방지하고 아키텍처 내 규율을 강제하여 시스템 변경 시 파급 효과를 차단합니다 [4, 9]. ESLint와 같은 린팅(Linting) 도구를 통해 한 기능(Feature)이 다른 기능을 참조하는 것을 제한하는 방식으로 자동화할 수 있습니다 [10, 11]. +* **공개 API 및 캡슐화 (Public APIs and Encapsulation):** 각 슬라이스는 단일 진입점(주로 `index.ts`)을 노출하여 외부와 통신해야 합니다 [5, 12, 13]. 외부의 다른 모듈은 이 진입점을 통해서만 해당 코드를 가져올 수 있습니다. 이로 인해 내부 파일(특정 UI 요소 등)이 철저하게 캡슐화되며, 외부 의존성을 깨뜨리지 않고 모듈 내부를 안전하게 리팩토링할 수 있습니다 [12, 13]. +* **상태 관리의 위치 지정:** FSD는 특정 상태 관리 라이브러리(Context, Redux, Zustand 등)에 의존하지 않습니다 [14]. 대신 상태가 아키텍처적으로 어디에 위치해야 하는지만 정의합니다. 예를 들어 엔티티의 상태는 엔티티(entities) 계층에, 기능별 상호작용 상태는 기능(features) 계층에, 인프라의 전역 상태는 앱(app) 계층에 배치하여 상태 소유권을 명확히 합니다 [14]. +* **도입 시 학습 곡선과 고려사항:** 파일이나 컴포넌트 유형 위주로 개발하던 개발자가 '비즈니스 기능' 위주의 FSD 패러다임으로 전환할 때는 학습 곡선이 존재합니다 [15]. 특히 특정 컴포넌트가 '기능(Feature)'인지 '위젯(Widget)'인지 결정하는 등 경계를 찾는 의미론적 논의에서 오버헤드가 발생할 수 있습니다 [11]. + +## 🔗 Knowledge Connections +- **Related Topics:** [[Frontend Folder Structure]], [[Clean Code Principles]], [[Domain-Driven Design (DDD)]], [[Component-Based Architecture]], [[State Management in React]], [[React Refactoring]] +- **Projects/Contexts:** [[Scalable React Apps]], [[Enterprise-level Frontend Systems]], [[Monorepo Environments]] +- **Contradictions/Notes:** FSD는 명확한 기능 분리를 강조하지만, 실제 개발자들은 '인증(Auth)'과 같은 교차 관심사(Cross-cutting concerns)가 발생할 때 경계를 찾는 것이 가장 어렵다고 지적합니다. 인증을 단일 기능으로 볼 것인지, 아니면 로그인, 회원가입, 비밀번호 찾기 등 여러 기능의 집합으로 쪼개야 하는지에 대한 설계상 딜레마가 생길 수 있습니다 [16-18]. 더불어 팀원들이 이 아키텍처를 완벽히 숙지하지 않으면, 오히려 모호한 모든 코드를 `/shared` 폴더에 몰아넣어 거대한 의존성 문제를 일으킬 위험이 있다는 실무자들의 경고도 있습니다 [11, 18]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/Feature-Sliced Design.md b/00_Raw/00_Processed/Feature-Sliced Design.md similarity index 100% rename from 00_Raw/Feature-Sliced Design.md rename to 00_Raw/00_Processed/Feature-Sliced Design.md diff --git a/00_Raw/First Contentful Paint (FCP).md b/00_Raw/00_Processed/First Contentful Paint (FCP).md similarity index 100% rename from 00_Raw/First Contentful Paint (FCP).md rename to 00_Raw/00_Processed/First Contentful Paint (FCP).md diff --git a/00_Raw/Frontend App Development Architecture.md b/00_Raw/00_Processed/Frontend App Development Architecture.md similarity index 100% rename from 00_Raw/Frontend App Development Architecture.md rename to 00_Raw/00_Processed/Frontend App Development Architecture.md diff --git a/00_Raw/Frontend Application Debugging.md b/00_Raw/00_Processed/Frontend Application Debugging.md similarity index 100% rename from 00_Raw/Frontend Application Debugging.md rename to 00_Raw/00_Processed/Frontend Application Debugging.md diff --git a/00_Raw/Frontend Debugging.md b/00_Raw/00_Processed/Frontend Debugging.md similarity index 100% rename from 00_Raw/Frontend Debugging.md rename to 00_Raw/00_Processed/Frontend Debugging.md diff --git a/00_Raw/Frontend Folder Structure.md b/00_Raw/00_Processed/Frontend Folder Structure.md similarity index 100% rename from 00_Raw/Frontend Folder Structure.md rename to 00_Raw/00_Processed/Frontend Folder Structure.md diff --git a/00_Raw/Frontend Performance Checklist.md b/00_Raw/00_Processed/Frontend Performance Checklist.md similarity index 100% rename from 00_Raw/Frontend Performance Checklist.md rename to 00_Raw/00_Processed/Frontend Performance Checklist.md diff --git a/00_Raw/Frontend Performance Optimization.md b/00_Raw/00_Processed/Frontend Performance Optimization.md similarity index 100% rename from 00_Raw/Frontend Performance Optimization.md rename to 00_Raw/00_Processed/Frontend Performance Optimization.md diff --git a/00_Raw/Frontend Refactoring.md b/00_Raw/00_Processed/Frontend Refactoring.md similarity index 100% rename from 00_Raw/Frontend Refactoring.md rename to 00_Raw/00_Processed/Frontend Refactoring.md diff --git a/00_Raw/Frontend System Architecture.md b/00_Raw/00_Processed/Frontend System Architecture.md similarity index 100% rename from 00_Raw/Frontend System Architecture.md rename to 00_Raw/00_Processed/Frontend System Architecture.md diff --git a/00_Raw/Frontend Team Collaboration.md b/00_Raw/00_Processed/Frontend Team Collaboration.md similarity index 100% rename from 00_Raw/Frontend Team Collaboration.md rename to 00_Raw/00_Processed/Frontend Team Collaboration.md diff --git a/00_Raw/Garbage Collection.md b/00_Raw/00_Processed/Garbage Collection.md similarity index 100% rename from 00_Raw/Garbage Collection.md rename to 00_Raw/00_Processed/Garbage Collection.md diff --git a/00_Raw/Gatsby.md b/00_Raw/00_Processed/Gatsby.md similarity index 100% rename from 00_Raw/Gatsby.md rename to 00_Raw/00_Processed/Gatsby.md diff --git a/00_Raw/Generative Engine Optimization.md b/00_Raw/00_Processed/Generative Engine Optimization.md similarity index 100% rename from 00_Raw/Generative Engine Optimization.md rename to 00_Raw/00_Processed/Generative Engine Optimization.md diff --git a/00_Raw/Git Branching Strategies.md b/00_Raw/00_Processed/Git Branching Strategies.md similarity index 100% rename from 00_Raw/Git Branching Strategies.md rename to 00_Raw/00_Processed/Git Branching Strategies.md diff --git a/00_Raw/Google Page Experience 2025 Update.md b/00_Raw/00_Processed/Google Page Experience 2025 Update.md similarity index 100% rename from 00_Raw/Google Page Experience 2025 Update.md rename to 00_Raw/00_Processed/Google Page Experience 2025 Update.md diff --git a/00_Raw/Google Page Experience 2025.md b/00_Raw/00_Processed/Google Page Experience 2025.md similarity index 100% rename from 00_Raw/Google Page Experience 2025.md rename to 00_Raw/00_Processed/Google Page Experience 2025.md diff --git a/00_Raw/Hydration Mismatch.md b/00_Raw/00_Processed/Hydration Mismatch.md similarity index 100% rename from 00_Raw/Hydration Mismatch.md rename to 00_Raw/00_Processed/Hydration Mismatch.md diff --git a/00_Raw/INP (Interaction to Next Paint).md b/00_Raw/00_Processed/INP (Interaction to Next Paint).md similarity index 100% rename from 00_Raw/INP (Interaction to Next Paint).md rename to 00_Raw/00_Processed/INP (Interaction to Next Paint).md diff --git a/00_Raw/Image Optimization.md b/00_Raw/00_Processed/Image Optimization.md similarity index 100% rename from 00_Raw/Image Optimization.md rename to 00_Raw/00_Processed/Image Optimization.md diff --git a/00_Raw/Inclusive Design.md b/00_Raw/00_Processed/Inclusive Design.md similarity index 100% rename from 00_Raw/Inclusive Design.md rename to 00_Raw/00_Processed/Inclusive Design.md diff --git a/00_Raw/Inclusive UX Design.md b/00_Raw/00_Processed/Inclusive UX Design.md similarity index 100% rename from 00_Raw/Inclusive UX Design.md rename to 00_Raw/00_Processed/Inclusive UX Design.md diff --git a/00_Raw/Incremental Static Regeneration (ISR).md b/00_Raw/00_Processed/Incremental Static Regeneration (ISR).md similarity index 100% rename from 00_Raw/Incremental Static Regeneration (ISR).md rename to 00_Raw/00_Processed/Incremental Static Regeneration (ISR).md diff --git a/00_Raw/Interaction to Next Paint (INP).md b/00_Raw/00_Processed/Interaction to Next Paint (INP).md similarity index 100% rename from 00_Raw/Interaction to Next Paint (INP).md rename to 00_Raw/00_Processed/Interaction to Next Paint (INP).md diff --git a/00_Raw/JSON-LD.md b/00_Raw/00_Processed/JSON-LD.md similarity index 100% rename from 00_Raw/JSON-LD.md rename to 00_Raw/00_Processed/JSON-LD.md diff --git a/00_Raw/JavaScript Optimization.md b/00_Raw/00_Processed/JavaScript Optimization.md similarity index 100% rename from 00_Raw/JavaScript Optimization.md rename to 00_Raw/00_Processed/JavaScript Optimization.md diff --git a/00_Raw/KISS Principle.md b/00_Raw/00_Processed/KISS Principle.md similarity index 100% rename from 00_Raw/KISS Principle.md rename to 00_Raw/00_Processed/KISS Principle.md diff --git a/00_Raw/Kiwi.com Migration.md b/00_Raw/00_Processed/Kiwi.com Migration.md similarity index 100% rename from 00_Raw/Kiwi.com Migration.md rename to 00_Raw/00_Processed/Kiwi.com Migration.md diff --git a/00_Raw/LCP (Largest Contentful Paint).md b/00_Raw/00_Processed/LCP (Largest Contentful Paint).md similarity index 100% rename from 00_Raw/LCP (Largest Contentful Paint).md rename to 00_Raw/00_Processed/LCP (Largest Contentful Paint).md diff --git a/00_Raw/Large-scale Application Architecture.md b/00_Raw/00_Processed/Large-scale Application Architecture.md similarity index 100% rename from 00_Raw/Large-scale Application Architecture.md rename to 00_Raw/00_Processed/Large-scale Application Architecture.md diff --git a/00_Raw/Largest Contentful Paint (LCP).md b/00_Raw/00_Processed/Largest Contentful Paint (LCP).md similarity index 100% rename from 00_Raw/Largest Contentful Paint (LCP).md rename to 00_Raw/00_Processed/Largest Contentful Paint (LCP).md diff --git a/00_Raw/Lazy Loading.md b/00_Raw/00_Processed/Lazy Loading.md similarity index 100% rename from 00_Raw/Lazy Loading.md rename to 00_Raw/00_Processed/Lazy Loading.md diff --git a/00_Raw/Legacy Code Modernization.md b/00_Raw/00_Processed/Legacy Code Modernization.md similarity index 100% rename from 00_Raw/Legacy Code Modernization.md rename to 00_Raw/00_Processed/Legacy Code Modernization.md diff --git a/00_Raw/Legacy React Code Refactoring.md b/00_Raw/00_Processed/Legacy React Code Refactoring.md similarity index 100% rename from 00_Raw/Legacy React Code Refactoring.md rename to 00_Raw/00_Processed/Legacy React Code Refactoring.md diff --git a/00_Raw/Memory Leak Debugging.md b/00_Raw/00_Processed/Memory Leak Debugging.md similarity index 100% rename from 00_Raw/Memory Leak Debugging.md rename to 00_Raw/00_Processed/Memory Leak Debugging.md diff --git a/00_Raw/Micro-interactions.md b/00_Raw/00_Processed/Micro-interactions.md similarity index 100% rename from 00_Raw/Micro-interactions.md rename to 00_Raw/00_Processed/Micro-interactions.md diff --git a/00_Raw/Mobile-First Design.md b/00_Raw/00_Processed/Mobile-First Design.md similarity index 100% rename from 00_Raw/Mobile-First Design.md rename to 00_Raw/00_Processed/Mobile-First Design.md diff --git a/00_Raw/Mobile-First Responsive Design.md b/00_Raw/00_Processed/Mobile-First Responsive Design.md similarity index 100% rename from 00_Raw/Mobile-First Responsive Design.md rename to 00_Raw/00_Processed/Mobile-First Responsive Design.md diff --git a/00_Raw/Modern Frontend Engineering Architecture.md b/00_Raw/00_Processed/Modern Frontend Engineering Architecture.md similarity index 100% rename from 00_Raw/Modern Frontend Engineering Architecture.md rename to 00_Raw/00_Processed/Modern Frontend Engineering Architecture.md diff --git a/00_Raw/Modern Web Design Best Practices for 2025.md b/00_Raw/00_Processed/Modern Web Design Best Practices for 2025.md similarity index 100% rename from 00_Raw/Modern Web Design Best Practices for 2025.md rename to 00_Raw/00_Processed/Modern Web Design Best Practices for 2025.md diff --git a/00_Raw/Modern Web Design Best Practices.md b/00_Raw/00_Processed/Modern Web Design Best Practices.md similarity index 100% rename from 00_Raw/Modern Web Design Best Practices.md rename to 00_Raw/00_Processed/Modern Web Design Best Practices.md diff --git a/00_Raw/Modern Website Architecture.md b/00_Raw/00_Processed/Modern Website Architecture.md similarity index 100% rename from 00_Raw/Modern Website Architecture.md rename to 00_Raw/00_Processed/Modern Website Architecture.md diff --git a/00_Raw/Modular Monolith.md b/00_Raw/00_Processed/Modular Monolith.md similarity index 100% rename from 00_Raw/Modular Monolith.md rename to 00_Raw/00_Processed/Modular Monolith.md diff --git a/00_Raw/Monorepo.md b/00_Raw/00_Processed/Monorepo.md similarity index 100% rename from 00_Raw/Monorepo.md rename to 00_Raw/00_Processed/Monorepo.md diff --git a/00_Raw/Multi-Brand Marketplace Platform Onboarding Redesign.md b/00_Raw/00_Processed/Multi-Brand Marketplace Platform Onboarding Redesign.md similarity index 100% rename from 00_Raw/Multi-Brand Marketplace Platform Onboarding Redesign.md rename to 00_Raw/00_Processed/Multi-Brand Marketplace Platform Onboarding Redesign.md diff --git a/00_Raw/Nested Routing.md b/00_Raw/00_Processed/Nested Routing.md similarity index 100% rename from 00_Raw/Nested Routing.md rename to 00_Raw/00_Processed/Nested Routing.md diff --git a/00_Raw/Next.js App Router 환경에서의 확장 가능한 프론트엔드 스타일링 및 UI 컴포넌트 아키텍처 설계.md b/00_Raw/00_Processed/Next.js App Router 환경에서의 확장 가능한 프론트엔드 스타일링 및 UI 컴포넌트 아키텍처 설계.md similarity index 100% rename from 00_Raw/Next.js App Router 환경에서의 확장 가능한 프론트엔드 스타일링 및 UI 컴포넌트 아키텍처 설계.md rename to 00_Raw/00_Processed/Next.js App Router 환경에서의 확장 가능한 프론트엔드 스타일링 및 UI 컴포넌트 아키텍처 설계.md diff --git a/00_Raw/00_Processed/Next.js File Naming and Routing.md b/00_Raw/00_Processed/Next.js File Naming and Routing.md new file mode 100644 index 00000000..d74b8675 --- /dev/null +++ b/00_Raw/00_Processed/Next.js File Naming and Routing.md @@ -0,0 +1,18 @@ +# [[Next.js File Naming and Routing]] + +## 📌 Brief Summary +Next.js는 특정 파일 이름이 애플리케이션의 라우트와 UI 상태를 결정하는 파일 기반 라우팅 시스템을 사용합니다 [1]. 핵심 파일인 `page.js`, `layout.js`, `error.js`, `loading.js`를 통해 라우트, 공유 레이아웃, 에러 처리 및 로딩 상태를 정의합니다 [1]. 운영체제 간 호환성과 가독성을 위해 파일 이름에는 kebab-case를, 컴포넌트 이름에는 PascalCase를 사용하는 엄격한 명명 규칙을 따르는 것이 프론트엔드 확장성과 유지보수를 위해 필수적입니다 [1-3]. + +## 📖 Core Content +- **핵심 라우팅 파일**: Next.js의 라우팅 구조는 특정 역할이 지정된 파일명에 의존합니다 [1]. `page.js`는 개별 라우트를 정의하고, `layout.js`는 공유 레이아웃을, `error.js`는 커스텀 에러 화면을, `loading.js`는 로딩 상태를 나타내는 데 사용됩니다 [1]. +- **동적 라우트(Dynamic Routes)**: 대괄호를 사용하여 동적인 URL 경로를 처리합니다 [1]. 단일 매개변수를 받는 동적 라우트에는 `[param]`을 사용하고, 여러 경로 세그먼트를 모두 잡아내는 포괄적(catch-all) 라우트에는 `[...param]` 형식을 사용합니다 [1]. +- **파일 및 컴포넌트 명명 표준**: 파일 이름은 URL 친화적이고 대소문자를 구분하지 않는 운영체제에서의 충돌을 방지하기 위해 `user-profile.tsx`와 같이 kebab-case를 사용해야 합니다 [1-4]. 반면 해당 파일 내부에 정의된 React 컴포넌트는 `UserProfile`과 같이 PascalCase를 적용하여 HTML 요소와 시각적으로 구분해야 합니다 [3, 4]. 컴포넌트 내부의 변수, props 및 커스텀 훅은 camelCase를 따릅니다 [1, 4, 5]. +- **라우트 그룹(Route Groups)**: 폴더 이름을 `(folderName)`과 같이 괄호로 묶으면 라우트 그룹이 생성됩니다 [6]. 이 방식은 URL 경로 구조에 영향을 주지 않으면서 관련된 라우트를 논리적으로 그룹화할 수 있게 해줍니다(예: `(marketing)/about/page.tsx`는 여전히 `/about`으로 해석됨) [6, 7]. 이를 통해 특정 섹션별로 별도의 레이아웃을 적용하기 쉬워지나, 여러 그룹에서 동일한 URL 경로가 중복되지 않도록 주의해야 합니다 [6, 7]. + +## 🔗 Knowledge Connections +- **Related Topics:** [[React Folder Structure]], [[Naming Conventions in React]], [[Clean Code Principles]] +- **Projects/Contexts:** [[Next.js]], [[Frontend Scalability]] +- **Contradictions/Notes:** 제공된 모든 소스에서 Next.js 및 React 프로젝트의 파일명에는 kebab-case를, 컴포넌트명에는 PascalCase를 사용하는 것이 확장성을 위한 최상의 관행(Best Practice)임을 일관되게 주장하고 있으며, 모순되는 의견은 발견되지 않았습니다 [1-3]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/Next.js Framework.md b/00_Raw/00_Processed/Next.js Framework.md similarity index 100% rename from 00_Raw/Next.js Framework.md rename to 00_Raw/00_Processed/Next.js Framework.md diff --git a/00_Raw/Next.js Migration.md b/00_Raw/00_Processed/Next.js Migration.md similarity index 100% rename from 00_Raw/Next.js Migration.md rename to 00_Raw/00_Processed/Next.js Migration.md diff --git a/00_Raw/Next.js SEO Migration.md b/00_Raw/00_Processed/Next.js SEO Migration.md similarity index 100% rename from 00_Raw/Next.js SEO Migration.md rename to 00_Raw/00_Processed/Next.js SEO Migration.md diff --git a/00_Raw/Next.js SSR Implementation.md b/00_Raw/00_Processed/Next.js SSR Implementation.md similarity index 100% rename from 00_Raw/Next.js SSR Implementation.md rename to 00_Raw/00_Processed/Next.js SSR Implementation.md diff --git a/00_Raw/Next.js 또는 Remix를 활용한 E-commerce SEO 마이그레이션 적용 사례.md b/00_Raw/00_Processed/Next.js 또는 Remix를 활용한 E-commerce SEO 마이그레이션 적용 사례.md similarity index 100% rename from 00_Raw/Next.js 또는 Remix를 활용한 E-commerce SEO 마이그레이션 적용 사례.md rename to 00_Raw/00_Processed/Next.js 또는 Remix를 활용한 E-commerce SEO 마이그레이션 적용 사례.md diff --git a/00_Raw/Next.js 및 React 애플리케이션의 렌더링 방식 최적화 맥락.md b/00_Raw/00_Processed/Next.js 및 React 애플리케이션의 렌더링 방식 최적화 맥락.md similarity index 100% rename from 00_Raw/Next.js 및 React 애플리케이션의 렌더링 방식 최적화 맥락.md rename to 00_Raw/00_Processed/Next.js 및 React 애플리케이션의 렌더링 방식 최적화 맥락.md diff --git a/00_Raw/Next.js.md b/00_Raw/00_Processed/Next.js.md similarity index 100% rename from 00_Raw/Next.js.md rename to 00_Raw/00_Processed/Next.js.md diff --git a/00_Raw/Nuxt SPA SEO.md b/00_Raw/00_Processed/Nuxt SPA SEO.md similarity index 100% rename from 00_Raw/Nuxt SPA SEO.md rename to 00_Raw/00_Processed/Nuxt SPA SEO.md diff --git a/00_Raw/Online Learning Management System.md b/00_Raw/00_Processed/Online Learning Management System.md similarity index 100% rename from 00_Raw/Online Learning Management System.md rename to 00_Raw/00_Processed/Online Learning Management System.md diff --git a/00_Raw/POUR Principles.md b/00_Raw/00_Processed/POUR Principles.md similarity index 100% rename from 00_Raw/POUR Principles.md rename to 00_Raw/00_Processed/POUR Principles.md diff --git a/00_Raw/Performance Optimization.md b/00_Raw/00_Processed/Performance Optimization.md similarity index 100% rename from 00_Raw/Performance Optimization.md rename to 00_Raw/00_Processed/Performance Optimization.md diff --git a/00_Raw/Pull Request Workflow.md b/00_Raw/00_Processed/Pull Request Workflow.md similarity index 100% rename from 00_Raw/Pull Request Workflow.md rename to 00_Raw/00_Processed/Pull Request Workflow.md diff --git a/00_Raw/React Application SEO Migration.md b/00_Raw/00_Processed/React Application SEO Migration.md similarity index 100% rename from 00_Raw/React Application SEO Migration.md rename to 00_Raw/00_Processed/React Application SEO Migration.md diff --git a/00_Raw/React Applications.md b/00_Raw/00_Processed/React Applications.md similarity index 100% rename from 00_Raw/React Applications.md rename to 00_Raw/00_Processed/React Applications.md diff --git a/00_Raw/React Compiler.md b/00_Raw/00_Processed/React Compiler.md similarity index 100% rename from 00_Raw/React Compiler.md rename to 00_Raw/00_Processed/React Compiler.md diff --git a/00_Raw/React Context API.md b/00_Raw/00_Processed/React Context API.md similarity index 100% rename from 00_Raw/React Context API.md rename to 00_Raw/00_Processed/React Context API.md diff --git a/00_Raw/React Error Boundaries.md b/00_Raw/00_Processed/React Error Boundaries.md similarity index 100% rename from 00_Raw/React Error Boundaries.md rename to 00_Raw/00_Processed/React Error Boundaries.md diff --git a/00_Raw/React Hooks.md b/00_Raw/00_Processed/React Hooks.md similarity index 100% rename from 00_Raw/React Hooks.md rename to 00_Raw/00_Processed/React Hooks.md diff --git a/00_Raw/React Performance Optimization.md b/00_Raw/00_Processed/React Performance Optimization.md similarity index 100% rename from 00_Raw/React Performance Optimization.md rename to 00_Raw/00_Processed/React Performance Optimization.md diff --git a/00_Raw/00_Processed/React Project Setup.md b/00_Raw/00_Processed/React Project Setup.md new file mode 100644 index 00000000..41d2c383 --- /dev/null +++ b/00_Raw/00_Processed/React Project Setup.md @@ -0,0 +1,31 @@ +# [[React Project Setup]] + +## 📌 Brief Summary +React Project Setup은 확장 가능하고 유지보수가 용이한 프론트엔드 애플리케이션을 구축하기 위해 프로젝트의 폴더 구조, 파일 명명 규칙, 그리고 빌드 도구를 구성하는 초기 단계입니다. 2025년 기준으로는 파일 유형 중심의 분리보다는 기능(Feature) 중심으로 코드를 조직하는 것이 권장되며, 일관된 명명 규칙과 Vite 같은 최신 빌드 도구를 활용하여 개발 효율성을 높입니다. 이를 통해 대규모 애플리케이션에서도 코드의 결합도를 낮추고 응집도를 높여 프로젝트가 복잡해지는 것을 방지할 수 있습니다. + +## 📖 Core Content + +* **최신 빌드 도구 및 환경 설정 (Vite 도입):** + * 2025년 React 생태계에서는 기존의 Create React App(CRA)을 대신하여 Vite가 새로운 표준 빌드 도구로 자리 잡았습니다 [1]. + * Vite는 개발 중에는 코드를 네이티브 ES 모듈 형태로 브라우저에 직접 제공하여 빠른 시작 및 핫 모듈 교체(HMR)를 지원하고, 배포 시에는 Rollup을 사용하여 최적화된 번들을 생성합니다 [2-5]. + * 설정 파일(`vite.config.js`)에서 기존 Babel 대신 Rust 기반의 SWC 컴파일러 플러그인(`@vitejs/plugin-react-swc`)을 사용하여 대규모 프로젝트의 빌드 속도를 크게 향상시킬 수 있으며, 깔끔한 파일 임포트를 위한 경로 별칭(Path Aliases) 설정도 구성할 수 있습니다 [6-8]. + +* **확장 가능한 폴더 구조 설계 (Folder Structure):** + * 과거처럼 컴포넌트, 훅, 스타일 등 파일 유형별로 구조를 나누는 방식(Flat Structure 및 File-Type Based Structure)은 프로젝트 규모가 커질수록 확장에 불리하며 코드를 관리하기 어렵게 만듭니다 [9-11]. + * **기능 기반 구조(Feature-Based Structure):** 비즈니스 도메인이나 기능별로 관련 컴포넌트, 훅, 로직, 타입 등을 하나의 기능 폴더(예: `src/features/auth`) 내에 캡슐화하는 구조가 널리 권장됩니다 [11-14]. + * **하이브리드 방식:** 재사용 가능한 범용 UI 컴포넌트(`components/`), 전역 상태 관리(`store/` 또는 `context/`), 외부 통신 로직(`services/`), 공통 유틸리티(`utils/`) 등은 기능 폴더 외부에 배치하고, 특정 기능에 종속된 코드는 `features/` 아래에 두는 방식이 실무에서 가장 균형 잡힌 구조로 평가받습니다 [14-22]. + * **Feature-Sliced Design (FSD):** 더 엄격한 아키텍처가 필요한 경우, 시스템을 공유(shared), 엔티티(entities), 기능(features), 위젯(widgets), 페이지(pages), 앱(app) 등의 계층으로 나누어 상위 계층이 하위 계층에만 의존하도록 단방향 의존성을 강제합니다 [13, 23-25]. + +* **일관된 명명 규칙 (Naming Conventions):** + * **파일 및 폴더명:** OS 환경(Windows/macOS는 대소문자 구분 안 함, Linux는 구분) 간의 차이로 인한 CI/CD 빌드 오류를 막기 위해, 파일과 폴더 이름은 `kebab-case`를 사용하는 것이 안전하고 가독성이 높습니다 (예: `user-profile.tsx`) [26-29]. + * **컴포넌트 및 타입/인터페이스:** React 컴포넌트 이름과 TypeScript 타입은 일반 함수나 HTML 요소와 명확히 구분되도록 `PascalCase`를 사용합니다 [26, 28-31]. + * **함수, 변수, Props:** `camelCase`를 사용합니다. 특히 boolean 상태 변수는 `is`, `has`, `should` 등의 접두사를 사용하고, 이벤트 핸들러에는 `handle`이나 `on`을, 커스텀 훅에는 `use` 접두사를 붙여 의도를 명확히 합니다 [26, 28, 30, 32]. + * **상수(Constants):** 상수는 `UPPER_SNAKE_CASE`로 작성하여 식별성을 높입니다 [26, 33]. + +## 🔗 Knowledge Connections +- **Related Topics:** [[Frontend Folder Structure]], [[Feature-Sliced Design]], [[Clean Code Principles]], [[Vite Build Tool]] +- **Projects/Contexts:** [[대규모 React 애플리케이션 아키텍처 구성]], [[2025 프론트엔드 엔지니어링 표준 확립]], [[프론트엔드 리팩토링 및 코드 유지보수]] +- **Contradictions/Notes:** 도메인 및 기능별(Feature-Based) 폴더 분리는 대규모 앱의 확장에 매우 유리하지만, 규모가 매우 작은 소형 프로젝트의 경우 기능 기반의 중첩된 폴더 구조를 도입하는 것이 오히려 불필요한 오버헤드와 복잡성을 초래할 수 있다는 점이 지적됩니다 [34]. 또한, React 컴포넌트 내부의 함수명은 `PascalCase`를 강제하지만 이를 담고 있는 물리적 파일명은 `kebab-case`를 사용하는 것을 권장하므로 두 규칙 사이의 일관된 매핑 관리가 중요합니다 [28]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/React Project Structure.md b/00_Raw/00_Processed/React Project Structure.md similarity index 100% rename from 00_Raw/React Project Structure.md rename to 00_Raw/00_Processed/React Project Structure.md diff --git a/00_Raw/React Router URL Configuration.md b/00_Raw/00_Processed/React Router URL Configuration.md similarity index 100% rename from 00_Raw/React Router URL Configuration.md rename to 00_Raw/00_Processed/React Router URL Configuration.md diff --git a/00_Raw/React Router 기반의 중첩 라우트 및 코드 스플리팅 최적화 전략.md b/00_Raw/00_Processed/React Router 기반의 중첩 라우트 및 코드 스플리팅 최적화 전략.md similarity index 100% rename from 00_Raw/React Router 기반의 중첩 라우트 및 코드 스플리팅 최적화 전략.md rename to 00_Raw/00_Processed/React Router 기반의 중첩 라우트 및 코드 스플리팅 최적화 전략.md diff --git a/00_Raw/React Router.md b/00_Raw/00_Processed/React Router.md similarity index 100% rename from 00_Raw/React Router.md rename to 00_Raw/00_Processed/React Router.md diff --git a/00_Raw/React SEO Guide.md b/00_Raw/00_Processed/React SEO Guide.md similarity index 100% rename from 00_Raw/React SEO Guide.md rename to 00_Raw/00_Processed/React SEO Guide.md diff --git a/00_Raw/React SEO Optimization.md b/00_Raw/00_Processed/React SEO Optimization.md similarity index 100% rename from 00_Raw/React SEO Optimization.md rename to 00_Raw/00_Processed/React SEO Optimization.md diff --git a/00_Raw/React SEO Strategy.md b/00_Raw/00_Processed/React SEO Strategy.md similarity index 100% rename from 00_Raw/React SEO Strategy.md rename to 00_Raw/00_Processed/React SEO Strategy.md diff --git a/00_Raw/React SEO 및 성능 최적화.md b/00_Raw/00_Processed/React SEO 및 성능 최적화.md similarity index 100% rename from 00_Raw/React SEO 및 성능 최적화.md rename to 00_Raw/00_Processed/React SEO 및 성능 최적화.md diff --git a/00_Raw/React SEO.md b/00_Raw/00_Processed/React SEO.md similarity index 100% rename from 00_Raw/React SEO.md rename to 00_Raw/00_Processed/React SEO.md diff --git a/00_Raw/React State Management.md b/00_Raw/00_Processed/React State Management.md similarity index 100% rename from 00_Raw/React State Management.md rename to 00_Raw/00_Processed/React State Management.md diff --git a/00_Raw/Redux Toolkit.md b/00_Raw/00_Processed/Redux Toolkit.md similarity index 100% rename from 00_Raw/Redux Toolkit.md rename to 00_Raw/00_Processed/Redux Toolkit.md diff --git a/00_Raw/Refactoring Legacy React Codebases.md b/00_Raw/00_Processed/Refactoring Legacy React Codebases.md similarity index 100% rename from 00_Raw/Refactoring Legacy React Codebases.md rename to 00_Raw/00_Processed/Refactoring Legacy React Codebases.md diff --git a/00_Raw/Remix.md b/00_Raw/00_Processed/Remix.md similarity index 100% rename from 00_Raw/Remix.md rename to 00_Raw/00_Processed/Remix.md diff --git a/00_Raw/Render-Blocking Resources.md b/00_Raw/00_Processed/Render-Blocking Resources.md similarity index 100% rename from 00_Raw/Render-Blocking Resources.md rename to 00_Raw/00_Processed/Render-Blocking Resources.md diff --git a/00_Raw/Reusable UI Components.md b/00_Raw/00_Processed/Reusable UI Components.md similarity index 100% rename from 00_Raw/Reusable UI Components.md rename to 00_Raw/00_Processed/Reusable UI Components.md diff --git a/00_Raw/Rich Snippets.md b/00_Raw/00_Processed/Rich Snippets.md similarity index 100% rename from 00_Raw/Rich Snippets.md rename to 00_Raw/00_Processed/Rich Snippets.md diff --git a/00_Raw/SEO (Search Engine Optimization).md b/00_Raw/00_Processed/SEO (Search Engine Optimization).md similarity index 100% rename from 00_Raw/SEO (Search Engine Optimization).md rename to 00_Raw/00_Processed/SEO (Search Engine Optimization).md diff --git a/00_Raw/SEO Integration.md b/00_Raw/00_Processed/SEO Integration.md similarity index 100% rename from 00_Raw/SEO Integration.md rename to 00_Raw/00_Processed/SEO Integration.md diff --git a/00_Raw/SEO for React Applications.md b/00_Raw/00_Processed/SEO for React Applications.md similarity index 100% rename from 00_Raw/SEO for React Applications.md rename to 00_Raw/00_Processed/SEO for React Applications.md diff --git a/00_Raw/SEO for Single Page Applications.md b/00_Raw/00_Processed/SEO for Single Page Applications.md similarity index 100% rename from 00_Raw/SEO for Single Page Applications.md rename to 00_Raw/00_Processed/SEO for Single Page Applications.md diff --git a/00_Raw/SEO.md b/00_Raw/00_Processed/SEO.md similarity index 100% rename from 00_Raw/SEO.md rename to 00_Raw/00_Processed/SEO.md diff --git a/00_Raw/SEO와 모바일 우선 색인(Mobile-First Indexing).md b/00_Raw/00_Processed/SEO와 모바일 우선 색인(Mobile-First Indexing).md similarity index 100% rename from 00_Raw/SEO와 모바일 우선 색인(Mobile-First Indexing).md rename to 00_Raw/00_Processed/SEO와 모바일 우선 색인(Mobile-First Indexing).md diff --git a/00_Raw/SOLID Principles in React.md b/00_Raw/00_Processed/SOLID Principles in React.md similarity index 100% rename from 00_Raw/SOLID Principles in React.md rename to 00_Raw/00_Processed/SOLID Principles in React.md diff --git a/00_Raw/SOLID Principles.md b/00_Raw/00_Processed/SOLID Principles.md similarity index 100% rename from 00_Raw/SOLID Principles.md rename to 00_Raw/00_Processed/SOLID Principles.md diff --git a/00_Raw/SPA 기반 React 웹사이트의 기술적 SEO 개선 및 SSR 마이그레이션 전략.md b/00_Raw/00_Processed/SPA 기반 React 웹사이트의 기술적 SEO 개선 및 SSR 마이그레이션 전략.md similarity index 100% rename from 00_Raw/SPA 기반 React 웹사이트의 기술적 SEO 개선 및 SSR 마이그레이션 전략.md rename to 00_Raw/00_Processed/SPA 기반 React 웹사이트의 기술적 SEO 개선 및 SSR 마이그레이션 전략.md diff --git a/00_Raw/SPA(Single Page Application) 검색엔진 노출 및 색인화 프로젝트.md b/00_Raw/00_Processed/SPA(Single Page Application) 검색엔진 노출 및 색인화 프로젝트.md similarity index 100% rename from 00_Raw/SPA(Single Page Application) 검색엔진 노출 및 색인화 프로젝트.md rename to 00_Raw/00_Processed/SPA(Single Page Application) 검색엔진 노출 및 색인화 프로젝트.md diff --git a/00_Raw/SaaS & Technology Transformations.md b/00_Raw/00_Processed/SaaS & Technology Transformations.md similarity index 100% rename from 00_Raw/SaaS & Technology Transformations.md rename to 00_Raw/00_Processed/SaaS & Technology Transformations.md diff --git a/00_Raw/Scalable Frontend Architecture.md b/00_Raw/00_Processed/Scalable Frontend Architecture.md similarity index 100% rename from 00_Raw/Scalable Frontend Architecture.md rename to 00_Raw/00_Processed/Scalable Frontend Architecture.md diff --git a/00_Raw/00_Processed/Scalable React Applications.md b/00_Raw/00_Processed/Scalable React Applications.md new file mode 100644 index 00000000..ff2e8137 --- /dev/null +++ b/00_Raw/00_Processed/Scalable React Applications.md @@ -0,0 +1,26 @@ +# [[Scalable React Applications]] + +## 📌 Brief 시 Summary +확장성 있는 리액트 애플리케이션(Scalable React Applications)은 코드베이스와 팀의 규모가 커지더라도 유지보수성, 성능, 명확한 아키텍처 경계를 유지할 수 있도록 설계된 프론트엔드 시스템을 의미합니다 [1, 2]. 이를 달성하기 위해 개발자들은 단순한 파일 유형별 폴더 구조를 넘어 비즈니스 기능(Feature) 중심의 모듈식 아키텍처를 채택하며 [3, 4], 엄격한 명명 규칙과 클린 코드 원칙(SOLID, DRY)을 준수합니다 [5, 6]. 또한 상태 관리(State Management) 라이브러리의 적절한 선택과 렌더링 최적화 기술을 통해 복잡한 UI에서도 성능 저하를 방지합니다 [7, 8]. + +## 📖 Core Content + +* **아키텍처 및 폴더 구조 (Architecture & Folder Structure)** + 리액트는 구조에 대한 강제성이 없기 때문에, 앱이 확장될 때 아키텍처가 붕괴되는 경우가 빈번합니다 [1]. 작은 규모에서는 컴포넌트나 훅을 파일 유형별로 모으는 평면적인 구조(Flat Structure)가 작동하지만, 앱이 커지면 기능(Feature) 단위로 구조를 묶는 것이 필수적입니다 [9, 10]. 특히 2025년 프론트엔드 생태계에서는 모듈간의 결합도를 낮추는 **Feature-Sliced Design (FSD)**이 강력한 해결책으로 제시됩니다 [11, 12]. FSD는 앱을 `app`, `pages`, `widgets`, `features`, `entities`, `shared`의 계층으로 나누고, 상위 계층에서 하위 계층으로만 의존하도록 단방향 의존성 규칙을 강제하여 우발적인 코드 결합을 방지합니다 [13, 14]. + +* **효율적인 상태 관리 (State Management)** + 상태 관리는 애플리케이션의 크기에 따라 도구를 신중히 선택해야 합니다. React에 내장된 Context API는 테마나 다국어 설정처럼 자주 변경되지 않는 정적 데이터 공유에는 탁월하지만, 값이 변경될 때마다 하위의 모든 구독 컴포넌트를 리렌더링시키는 치명적인 단점이 있습니다 [15-17]. 반면 Zustand는 선택자(Selector) 패턴을 통해 필요한 상태 조각만 구독할 수 있어 리렌더링을 방지하며, 중대형 프로젝트에서 훌륭한 대안이 됩니다 [16, 18, 19]. 10명 이상의 개발자가 참여하거나 비동기 처리 로직이 얽힌 거대한 앱에서는 보일러플레이트가 있더라도 예측 가능성을 강제하는 Redux(및 RTK Query)를 사용하는 것이 오류를 방지하는 표준적인 접근입니다 [20-22]. 또한, 서버 상태는 TanStack Query를 활용하여 클라이언트 상태와 분리하는 것이 권장됩니다 [16]. + +* **성능 최적화 전략 (Performance Optimization)** + 현대의 확장성 있는 앱은 사용자 경험(UX)과 직결되는 초기 로딩 및 런타임 성능 최적화가 필수입니다 [23, 24]. 초기 번들 크기를 줄이기 위해 `React.lazy`와 `Suspense`를 활용한 라우트 및 컴포넌트 단위의 코드 스플리팅을 적용해야 합니다 [25-28]. 런타임 최적화를 위해서는 무분별한 리렌더링을 막기 위해 `React.memo`, `useCallback`, `useMemo`를 전략적으로 사용하되, 참조 안정성(Reference Stability)을 해치는 JSX 내 익명 함수 사용을 지양해야 합니다 [29-31]. 또한 방대한 목록을 렌더링할 때는 DOM 팽창을 막기 위해 가상화(Windowing/Virtualization) 기법을 사용하며, 리스트 렌더링 시에는 고유하고 안정적인 `key` 값을 제공해야 합니다 [24, 32, 33]. + +* **클린 코드 원칙 및 명명 규칙 (Clean Code & Naming Conventions)** + 리액트 컴포넌트는 단일 책임 원칙(SRP)을 준수해 한 가지 일만 하도록 300줄 이하로 작게 유지해야 합니다 [34]. 비즈니스 로직이 중복되면 Custom Hook으로 추출하여 DRY(Don't Repeat Yourself) 원칙을 지키되, 오버엔지니어링(KISS, YAGNI 원칙 위배)은 피해야 합니다 [35, 36]. 파일 명명 규칙 역시 협업 시 매우 중요합니다. 운영체제 간의 대소문자 구분 충돌을 막기 위해 파일명과 폴더명은 `kebab-case`를 주로 사용하고 [37-39], 리액트 컴포넌트명은 `PascalCase` [39, 40], 변수와 Props, 이벤트 핸들러(`handle`, `on` 접두사 사용)는 `camelCase`를 사용해야 코드의 가독성과 일관성을 확보할 수 있습니다 [41, 42]. + +## 🔗 Knowledge Connections +- **Related Topics:** `[[Feature-Sliced Design (FSD)]]`, `[[State Management (Context API, Zustand, Redux)]]`, `[[Performance Optimization (Memoization, Code Splitting)]]`, `[[Clean Code Principles (SOLID, DRY, KISS, YAGNI)]]` +- **Projects/Contexts:** `[[Modern Frontend Engineering 2025]]`, `[[Scalable React Folder Structure]]` +- **Contradictions/Notes:** 소스에 따르면 "Context API"는 상태 관리 도구라기보다는 데이터 전달(Transport) 메커니즘에 가깝고, 상태가 빈번하게 업데이트되는 규모에서는 전체 리렌더링(re-render storm) 문제를 야기하기 때문에 사용할 때 주의가 필요합니다 [43-45]. 또한, 소스들은 "Zustand"가 유연하고 가벼워 스타트업이나 중형 프로젝트에 가장 적합한 옵션임을 강조하지만, 팀 규모가 커지고 매우 복잡한 앱(1000개 이상의 컴포넌트)을 다룰 경우에는 엄격한 패턴을 강제하는 Redux가 더 나은 대안이 될 수 있다고 조언합니다 [46-49]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/Scalable React Architecture.md b/00_Raw/00_Processed/Scalable React Architecture.md similarity index 100% rename from 00_Raw/Scalable React Architecture.md rename to 00_Raw/00_Processed/Scalable React Architecture.md diff --git a/00_Raw/Scalable UI Systems.md b/00_Raw/00_Processed/Scalable UI Systems.md similarity index 100% rename from 00_Raw/Scalable UI Systems.md rename to 00_Raw/00_Processed/Scalable UI Systems.md diff --git a/00_Raw/Schema Markup.md b/00_Raw/00_Processed/Schema Markup.md similarity index 100% rename from 00_Raw/Schema Markup.md rename to 00_Raw/00_Processed/Schema Markup.md diff --git a/00_Raw/Search Engine Optimization (SEO).md b/00_Raw/00_Processed/Search Engine Optimization (SEO).md similarity index 100% rename from 00_Raw/Search Engine Optimization (SEO).md rename to 00_Raw/00_Processed/Search Engine Optimization (SEO).md diff --git a/00_Raw/Semantic HTML.md b/00_Raw/00_Processed/Semantic HTML.md similarity index 100% rename from 00_Raw/Semantic HTML.md rename to 00_Raw/00_Processed/Semantic HTML.md diff --git a/00_Raw/Semantic HTML5.md b/00_Raw/00_Processed/Semantic HTML5.md similarity index 100% rename from 00_Raw/Semantic HTML5.md rename to 00_Raw/00_Processed/Semantic HTML5.md diff --git a/00_Raw/Sentry-LogRocket Monitoring.md b/00_Raw/00_Processed/Sentry-LogRocket Monitoring.md similarity index 100% rename from 00_Raw/Sentry-LogRocket Monitoring.md rename to 00_Raw/00_Processed/Sentry-LogRocket Monitoring.md diff --git a/00_Raw/Server-Side Rendering (SSR).md b/00_Raw/00_Processed/Server-Side Rendering (SSR).md similarity index 100% rename from 00_Raw/Server-Side Rendering (SSR).md rename to 00_Raw/00_Processed/Server-Side Rendering (SSR).md diff --git a/00_Raw/Single Page Application (SPA).md b/00_Raw/00_Processed/Single Page Application (SPA).md similarity index 100% rename from 00_Raw/Single Page Application (SPA).md rename to 00_Raw/00_Processed/Single Page Application (SPA).md diff --git a/00_Raw/Single Page Applications (SPA).md b/00_Raw/00_Processed/Single Page Applications (SPA).md similarity index 100% rename from 00_Raw/Single Page Applications (SPA).md rename to 00_Raw/00_Processed/Single Page Applications (SPA).md diff --git a/00_Raw/Small Team Development.md b/00_Raw/00_Processed/Small Team Development.md similarity index 100% rename from 00_Raw/Small Team Development.md rename to 00_Raw/00_Processed/Small Team Development.md diff --git a/00_Raw/00_Processed/Small Team Workflow.md b/00_Raw/00_Processed/Small Team Workflow.md new file mode 100644 index 00000000..9f54e6e2 --- /dev/null +++ b/00_Raw/00_Processed/Small Team Workflow.md @@ -0,0 +1,29 @@ +# [[Small Team Workflow]] + +## 📌 Brief Summary +소규모 팀 워크플로우(Small Team Workflow)는 2~5명 규모의 개발 팀에 적합한, 가볍고 병합 충돌을 방지하는 버전 관리 전략입니다 [1, 2]. 복잡하고 무거운 Git Flow 대신 단순한 기능 브랜치(Feature-branch) 워크플로우나 단기 브랜치를 활용하는 트렁크 기반(Trunk-based) 개발을 주로 사용합니다 [2-5]. 'main' 브랜치의 안정성을 항상 유지하고, 수명이 짧은 브랜치에서 작업하며 풀 리퀘스트(PR)를 통한 동료 리뷰를 필수로 하는 것이 핵심입니다 [3, 6, 7]. + +## 📖 Core Content +* **전략 선택:** 소규모 팀에게는 프로세스 오버헤드가 큰 전체 Git Flow보다는, 최소한의 구조를 제공하면서도 가벼운 '단순 기능 브랜치 워크플로우' 또는 '단기 기능 브랜치를 동반한 트렁크 기반 워크플로우'가 권장됩니다 [2-5]. +* **브랜치 및 네이밍 규칙:** + * `main` (또는 `master`) 브랜치는 항상 배포 가능하고 안정적인 상태를 유지해야 하며, 직접 푸시(direct push)는 엄격히 금지됩니다 [2, 3, 6, 8, 9]. + * 각 작업(Task)마다 `main`에서 브랜치를 생성하며, 브랜치는 수명이 짧아야(short-lived) 합니다 [3, 6, 10]. + * 브랜치 이름은 `feature/`, `bugfix/`, `chore/` 등의 접두사와 티켓 ID(예: `feature/PROJ-123-user-auth`), 짧은 설명을 결합하여 일관되게 명명합니다 [2, 6, 11-14]. +* **커밋 규칙 (Atomic Commits):** + * 변경 사항은 하나의 논리적인 단위(Atomic)로 작게, 그리고 자주 커밋하여 리뷰와 히스토리 관리를 단순화해야 합니다 [3, 7, 11, 12]. + * 커밋 메시지는 '무엇'을 '왜' 변경했는지 명확히 설명해야 하며, `feat:`, `fix:`와 같은 컨벤션을 따르는 것이 좋습니다 [7, 12, 15]. +* **풀 리퀘스트(PR) 및 병합 (Merge):** + * 아주 작은 변경이라도 항상 PR을 통해서만 병합해야 합니다 [11, 16]. + * PR은 가능한 작게 유지(예: 200줄 미만 권장)하고 변경 사항, 변경 이유, UI 변경의 경우 스크린샷 등을 포함해야 합니다 [8]. + * 병합 전에는 반드시 모든 테스트 및 CI 검사를 통과해야 하며, 최소 1명 이상의 동료 리뷰(Peer Review) 승인을 받아야 합니다 [7, 8, 11, 12, 16]. +* **이력 관리 및 충돌 방지:** + * 커밋 히스토리를 깔끔하게 유지하기 위해 '스쿼시 병합(Squash Merge)'을 주로 사용하고, 병합이 완료된 기능 브랜치는 자동으로 삭제(Auto-delete)되도록 설정하는 것이 좋습니다 [7, 8, 11, 16]. + * 매일 작업을 시작하기 전에 최신 `main` 브랜치의 변경 사항을 동기화(Pull/Rebase)하여 대규모 병합 충돌을 예방해야 합니다 [4, 7]. + +## 🔗 Knowledge Connections +- **Related Topics:** [[Feature-branch workflow]], [[Trunk-based development]], [[Pull Request (PR)]], [[Git Flow]], [[Atomic Commits]] +- **Projects/Contexts:** [[Agile Software Development in Small Teams]], [[React Project Git Governance]] +- **Contradictions/Notes:** 소규모 팀 워크플로우의 명칭과 관련해 일부는 "단순 기능 브랜치 워크플로우(Simple feature-branch workflow)"라고 명명하고 [2, 6, 10], 다른 일부는 "단기 브랜치를 동반한 트렁크 기반 워크플로우(Trunk-based workflow with short-lived feature branches)"라고 칭합니다 [3, 16]. 하지만 보호된 main 브랜치 사용, 수명이 짧은 브랜치 운영, PR 리뷰 필수라는 실제 구현 규칙은 동일합니다. 두 접근 모두 Git Flow는 소규모 팀이 감당하기에 지나치게 무겁다는 점(Overhead)에 동의합니다 [3-5]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/State Management Migration.md b/00_Raw/00_Processed/State Management Migration.md similarity index 100% rename from 00_Raw/State Management Migration.md rename to 00_Raw/00_Processed/State Management Migration.md diff --git a/00_Raw/State Management.md b/00_Raw/00_Processed/State Management.md similarity index 100% rename from 00_Raw/State Management.md rename to 00_Raw/00_Processed/State Management.md diff --git a/00_Raw/Static Site Generation (SSG).md b/00_Raw/00_Processed/Static Site Generation (SSG).md similarity index 100% rename from 00_Raw/Static Site Generation (SSG).md rename to 00_Raw/00_Processed/Static Site Generation (SSG).md diff --git a/00_Raw/Structured Data (JSON-LD).md b/00_Raw/00_Processed/Structured Data (JSON-LD).md similarity index 100% rename from 00_Raw/Structured Data (JSON-LD).md rename to 00_Raw/00_Processed/Structured Data (JSON-LD).md diff --git a/00_Raw/Structured Data (Schema Markup).md b/00_Raw/00_Processed/Structured Data (Schema Markup).md similarity index 100% rename from 00_Raw/Structured Data (Schema Markup).md rename to 00_Raw/00_Processed/Structured Data (Schema Markup).md diff --git a/00_Raw/Structured Data Markup.md b/00_Raw/00_Processed/Structured Data Markup.md similarity index 100% rename from 00_Raw/Structured Data Markup.md rename to 00_Raw/00_Processed/Structured Data Markup.md diff --git a/00_Raw/Suspense.md b/00_Raw/00_Processed/Suspense.md similarity index 100% rename from 00_Raw/Suspense.md rename to 00_Raw/00_Processed/Suspense.md diff --git a/00_Raw/Tailwind CSS v4 도입.md b/00_Raw/00_Processed/Tailwind CSS v4 도입.md similarity index 100% rename from 00_Raw/Tailwind CSS v4 도입.md rename to 00_Raw/00_Processed/Tailwind CSS v4 도입.md diff --git a/00_Raw/Tailwind CSS vs Styled Components.md b/00_Raw/00_Processed/Tailwind CSS vs Styled Components.md similarity index 100% rename from 00_Raw/Tailwind CSS vs Styled Components.md rename to 00_Raw/00_Processed/Tailwind CSS vs Styled Components.md diff --git a/00_Raw/TanStack Query.md b/00_Raw/00_Processed/TanStack Query.md similarity index 100% rename from 00_Raw/TanStack Query.md rename to 00_Raw/00_Processed/TanStack Query.md diff --git a/00_Raw/Team Collaboration and Code Governance.md b/00_Raw/00_Processed/Team Collaboration and Code Governance.md similarity index 100% rename from 00_Raw/Team Collaboration and Code Governance.md rename to 00_Raw/00_Processed/Team Collaboration and Code Governance.md diff --git a/00_Raw/Technical SEO.md b/00_Raw/00_Processed/Technical SEO.md similarity index 100% rename from 00_Raw/Technical SEO.md rename to 00_Raw/00_Processed/Technical SEO.md diff --git a/00_Raw/Telemedicine Platform Redesign.md b/00_Raw/00_Processed/Telemedicine Platform Redesign.md similarity index 100% rename from 00_Raw/Telemedicine Platform Redesign.md rename to 00_Raw/00_Processed/Telemedicine Platform Redesign.md diff --git a/00_Raw/Time to First Byte (TTFB).md b/00_Raw/00_Processed/Time to First Byte (TTFB).md similarity index 100% rename from 00_Raw/Time to First Byte (TTFB).md rename to 00_Raw/00_Processed/Time to First Byte (TTFB).md diff --git a/00_Raw/Transient Props.md b/00_Raw/00_Processed/Transient Props.md similarity index 100% rename from 00_Raw/Transient Props.md rename to 00_Raw/00_Processed/Transient Props.md diff --git a/00_Raw/Turborepo 및 Nx 빌드 시스템.md b/00_Raw/00_Processed/Turborepo 및 Nx 빌드 시스템.md similarity index 100% rename from 00_Raw/Turborepo 및 Nx 빌드 시스템.md rename to 00_Raw/00_Processed/Turborepo 및 Nx 빌드 시스템.md diff --git a/00_Raw/UX Design.md b/00_Raw/00_Processed/UX Design.md similarity index 100% rename from 00_Raw/UX Design.md rename to 00_Raw/00_Processed/UX Design.md diff --git a/00_Raw/Uber Base Web React Component Library.md b/00_Raw/00_Processed/Uber Base Web React Component Library.md similarity index 100% rename from 00_Raw/Uber Base Web React Component Library.md rename to 00_Raw/00_Processed/Uber Base Web React Component Library.md diff --git a/00_Raw/Uber.md b/00_Raw/00_Processed/Uber.md similarity index 100% rename from 00_Raw/Uber.md rename to 00_Raw/00_Processed/Uber.md diff --git a/00_Raw/Uber의 Base Web 등 다양한 내부 앱 관리를 위한 디자인 시스템 도입.md b/00_Raw/00_Processed/Uber의 Base Web 등 다양한 내부 앱 관리를 위한 디자인 시스템 도입.md similarity index 100% rename from 00_Raw/Uber의 Base Web 등 다양한 내부 앱 관리를 위한 디자인 시스템 도입.md rename to 00_Raw/00_Processed/Uber의 Base Web 등 다양한 내부 앱 관리를 위한 디자인 시스템 도입.md diff --git a/00_Raw/Unit Testing.md b/00_Raw/00_Processed/Unit Testing.md similarity index 100% rename from 00_Raw/Unit Testing.md rename to 00_Raw/00_Processed/Unit Testing.md diff --git a/00_Raw/User Experience (UX) Design.md b/00_Raw/00_Processed/User Experience (UX) Design.md similarity index 100% rename from 00_Raw/User Experience (UX) Design.md rename to 00_Raw/00_Processed/User Experience (UX) Design.md diff --git a/00_Raw/User Experience (UX).md b/00_Raw/00_Processed/User Experience (UX).md similarity index 100% rename from 00_Raw/User Experience (UX).md rename to 00_Raw/00_Processed/User Experience (UX).md diff --git a/00_Raw/User-Centered Design Approach.md b/00_Raw/00_Processed/User-Centered Design Approach.md similarity index 100% rename from 00_Raw/User-Centered Design Approach.md rename to 00_Raw/00_Processed/User-Centered Design Approach.md diff --git a/00_Raw/User-Centered Design.md b/00_Raw/00_Processed/User-Centered Design.md similarity index 100% rename from 00_Raw/User-Centered Design.md rename to 00_Raw/00_Processed/User-Centered Design.md diff --git a/00_Raw/Visual Hierarchy.md b/00_Raw/00_Processed/Visual Hierarchy.md similarity index 100% rename from 00_Raw/Visual Hierarchy.md rename to 00_Raw/00_Processed/Visual Hierarchy.md diff --git a/00_Raw/Vite.md b/00_Raw/00_Processed/Vite.md similarity index 100% rename from 00_Raw/Vite.md rename to 00_Raw/00_Processed/Vite.md diff --git a/00_Raw/WCAG.md b/00_Raw/00_Processed/WCAG.md similarity index 100% rename from 00_Raw/WCAG.md rename to 00_Raw/00_Processed/WCAG.md diff --git a/00_Raw/Web Accessibility (WCAG).md b/00_Raw/00_Processed/Web Accessibility (WCAG).md similarity index 100% rename from 00_Raw/Web Accessibility (WCAG).md rename to 00_Raw/00_Processed/Web Accessibility (WCAG).md diff --git a/00_Raw/Web Accessibility.md b/00_Raw/00_Processed/Web Accessibility.md similarity index 100% rename from 00_Raw/Web Accessibility.md rename to 00_Raw/00_Processed/Web Accessibility.md diff --git a/00_Raw/Web Content Accessibility Guidelines (WCAG).md b/00_Raw/00_Processed/Web Content Accessibility Guidelines (WCAG).md similarity index 100% rename from 00_Raw/Web Content Accessibility Guidelines (WCAG).md rename to 00_Raw/00_Processed/Web Content Accessibility Guidelines (WCAG).md diff --git a/00_Raw/Web Performance Optimization Guidelines.md b/00_Raw/00_Processed/Web Performance Optimization Guidelines.md similarity index 100% rename from 00_Raw/Web Performance Optimization Guidelines.md rename to 00_Raw/00_Processed/Web Performance Optimization Guidelines.md diff --git a/00_Raw/Web Performance Optimization.md b/00_Raw/00_Processed/Web Performance Optimization.md similarity index 100% rename from 00_Raw/Web Performance Optimization.md rename to 00_Raw/00_Processed/Web Performance Optimization.md diff --git a/00_Raw/Website Compliance Audits and Remediation.md b/00_Raw/00_Processed/Website Compliance Audits and Remediation.md similarity index 100% rename from 00_Raw/Website Compliance Audits and Remediation.md rename to 00_Raw/00_Processed/Website Compliance Audits and Remediation.md diff --git a/00_Raw/Website Structure.md b/00_Raw/00_Processed/Website Structure.md similarity index 100% rename from 00_Raw/Website Structure.md rename to 00_Raw/00_Processed/Website Structure.md diff --git a/00_Raw/YAGNI Principle.md b/00_Raw/00_Processed/YAGNI Principle.md similarity index 100% rename from 00_Raw/YAGNI Principle.md rename to 00_Raw/00_Processed/YAGNI Principle.md diff --git a/00_Raw/Zero-runtime CSS.md b/00_Raw/00_Processed/Zero-runtime CSS.md similarity index 100% rename from 00_Raw/Zero-runtime CSS.md rename to 00_Raw/00_Processed/Zero-runtime CSS.md diff --git a/00_Raw/Zustand.md b/00_Raw/00_Processed/Zustand.md similarity index 100% rename from 00_Raw/Zustand.md rename to 00_Raw/00_Processed/Zustand.md diff --git a/00_Raw/eCommerce Store Optimization Case.md b/00_Raw/00_Processed/eCommerce Store Optimization Case.md similarity index 100% rename from 00_Raw/eCommerce Store Optimization Case.md rename to 00_Raw/00_Processed/eCommerce Store Optimization Case.md diff --git a/00_Raw/kiwi.com 마이그레이션 프로젝트.md b/00_Raw/00_Processed/kiwi.com 마이그레이션 프로젝트.md similarity index 100% rename from 00_Raw/kiwi.com 마이그레이션 프로젝트.md rename to 00_Raw/00_Processed/kiwi.com 마이그레이션 프로젝트.md diff --git a/00_Raw/구글 2025 검색 알고리즘 업데이트 대응.md b/00_Raw/00_Processed/구글 2025 검색 알고리즘 업데이트 대응.md similarity index 100% rename from 00_Raw/구글 2025 검색 알고리즘 업데이트 대응.md rename to 00_Raw/00_Processed/구글 2025 검색 알고리즘 업데이트 대응.md diff --git a/00_Raw/구글의 Page Experience 2025 업데이트 및 검색 랭킹 적용 프로젝트.md b/00_Raw/00_Processed/구글의 Page Experience 2025 업데이트 및 검색 랭킹 적용 프로젝트.md similarity index 100% rename from 00_Raw/구글의 Page Experience 2025 업데이트 및 검색 랭킹 적용 프로젝트.md rename to 00_Raw/00_Processed/구글의 Page Experience 2025 업데이트 및 검색 랭킹 적용 프로젝트.md diff --git a/00_Raw/구독 박스 서비스의 이탈률 감소(Churn Mitigation) 사례.md b/00_Raw/00_Processed/구독 박스 서비스의 이탈률 감소(Churn Mitigation) 사례.md similarity index 100% rename from 00_Raw/구독 박스 서비스의 이탈률 감소(Churn Mitigation) 사례.md rename to 00_Raw/00_Processed/구독 박스 서비스의 이탈률 감소(Churn Mitigation) 사례.md diff --git a/00_Raw/다국어 지원 및 글로벌 웹사이트 아키텍처 구축.md b/00_Raw/00_Processed/다국어 지원 및 글로벌 웹사이트 아키텍처 구축.md similarity index 100% rename from 00_Raw/다국어 지원 및 글로벌 웹사이트 아키텍처 구축.md rename to 00_Raw/00_Processed/다국어 지원 및 글로벌 웹사이트 아키텍처 구축.md diff --git a/00_Raw/대규모 React 애플리케이션 및 엔터프라이즈 시스템 확장성 관리.md b/00_Raw/00_Processed/대규모 React 애플리케이션 및 엔터프라이즈 시스템 확장성 관리.md similarity index 100% rename from 00_Raw/대규모 React 애플리케이션 및 엔터프라이즈 시스템 확장성 관리.md rename to 00_Raw/00_Processed/대규모 React 애플리케이션 및 엔터프라이즈 시스템 확장성 관리.md diff --git a/00_Raw/대규모 SaaS 대시보드 및 복잡한 계층적 UI 아키텍처 설계.md b/00_Raw/00_Processed/대규모 SaaS 대시보드 및 복잡한 계층적 UI 아키텍처 설계.md similarity index 100% rename from 00_Raw/대규모 SaaS 대시보드 및 복잡한 계층적 UI 아키텍처 설계.md rename to 00_Raw/00_Processed/대규모 SaaS 대시보드 및 복잡한 계층적 UI 아키텍처 설계.md diff --git a/00_Raw/독립적인 기능 소유권이 필요한 대규모 React 플랫폼.md b/00_Raw/00_Processed/독립적인 기능 소유권이 필요한 대규모 React 플랫폼.md similarity index 100% rename from 00_Raw/독립적인 기능 소유권이 필요한 대규모 React 플랫폼.md rename to 00_Raw/00_Processed/독립적인 기능 소유권이 필요한 대규모 React 플랫폼.md diff --git a/00_Raw/레거시 웹사이트 프론트엔드 최적화 및 마이그레이션 프로젝트.md b/00_Raw/00_Processed/레거시 웹사이트 프론트엔드 최적화 및 마이그레이션 프로젝트.md similarity index 100% rename from 00_Raw/레거시 웹사이트 프론트엔드 최적화 및 마이그레이션 프로젝트.md rename to 00_Raw/00_Processed/레거시 웹사이트 프론트엔드 최적화 및 마이그레이션 프로젝트.md diff --git a/00_Raw/레거시 웹사이트의 프론트엔드 성능(LCP, INP, CLS) 고도화.md b/00_Raw/00_Processed/레거시 웹사이트의 프론트엔드 성능(LCP, INP, CLS) 고도화.md similarity index 100% rename from 00_Raw/레거시 웹사이트의 프론트엔드 성능(LCP, INP, CLS) 고도화.md rename to 00_Raw/00_Processed/레거시 웹사이트의 프론트엔드 성능(LCP, INP, CLS) 고도화.md diff --git a/00_Raw/마이크로 프론트엔드를 대체하는 모듈식 모놀리스 아키텍처 설계.md b/00_Raw/00_Processed/마이크로 프론트엔드를 대체하는 모듈식 모놀리스 아키텍처 설계.md similarity index 100% rename from 00_Raw/마이크로 프론트엔드를 대체하는 모듈식 모놀리스 아키텍처 설계.md rename to 00_Raw/00_Processed/마이크로 프론트엔드를 대체하는 모듈식 모놀리스 아키텍처 설계.md diff --git a/00_Raw/모바일 퍼스트 디자인(Mobile-First Design).md b/00_Raw/00_Processed/모바일 퍼스트 디자인(Mobile-First Design).md similarity index 100% rename from 00_Raw/모바일 퍼스트 디자인(Mobile-First Design).md rename to 00_Raw/00_Processed/모바일 퍼스트 디자인(Mobile-First Design).md diff --git a/00_Raw/법적 규제 및 EAA 2025 마감 기한 대응 프로젝트.md b/00_Raw/00_Processed/법적 규제 및 EAA 2025 마감 기한 대응 프로젝트.md similarity index 100% rename from 00_Raw/법적 규제 및 EAA 2025 마감 기한 대응 프로젝트.md rename to 00_Raw/00_Processed/법적 규제 및 EAA 2025 마감 기한 대응 프로젝트.md diff --git a/00_Raw/복잡한 계층형 대시보드 및 SaaS 플랫폼 UI 네비게이션 설계.md b/00_Raw/00_Processed/복잡한 계층형 대시보드 및 SaaS 플랫폼 UI 네비게이션 설계.md similarity index 100% rename from 00_Raw/복잡한 계층형 대시보드 및 SaaS 플랫폼 UI 네비게이션 설계.md rename to 00_Raw/00_Processed/복잡한 계층형 대시보드 및 SaaS 플랫폼 UI 네비게이션 설계.md diff --git a/00_Raw/시각적 계층 구조(Visual Hierarchy).md b/00_Raw/00_Processed/시각적 계층 구조(Visual Hierarchy).md similarity index 100% rename from 00_Raw/시각적 계층 구조(Visual Hierarchy).md rename to 00_Raw/00_Processed/시각적 계층 구조(Visual Hierarchy).md diff --git a/00_Raw/싱글 페이지 애플리케이션(SPA) 클라이언트 사이드 렌더링 최적화.md b/00_Raw/00_Processed/싱글 페이지 애플리케이션(SPA) 클라이언트 사이드 렌더링 최적화.md similarity index 100% rename from 00_Raw/싱글 페이지 애플리케이션(SPA) 클라이언트 사이드 렌더링 최적화.md rename to 00_Raw/00_Processed/싱글 페이지 애플리케이션(SPA) 클라이언트 사이드 렌더링 최적화.md diff --git a/00_Raw/웹 성능 최적화 (Web Performance Optimization).md b/00_Raw/00_Processed/웹 성능 최적화 (Web Performance Optimization).md similarity index 100% rename from 00_Raw/웹 성능 최적화 (Web Performance Optimization).md rename to 00_Raw/00_Processed/웹 성능 최적화 (Web Performance Optimization).md diff --git a/00_Raw/웹 접근성 및 모바일 최적화.md b/00_Raw/00_Processed/웹 접근성 및 모바일 최적화.md similarity index 100% rename from 00_Raw/웹 접근성 및 모바일 최적화.md rename to 00_Raw/00_Processed/웹 접근성 및 모바일 최적화.md diff --git a/00_Raw/웹사이트 리디자인 및 모바일 우선주의 UX 최적화 프로세스.md b/00_Raw/00_Processed/웹사이트 리디자인 및 모바일 우선주의 UX 최적화 프로세스.md similarity index 100% rename from 00_Raw/웹사이트 리디자인 및 모바일 우선주의 UX 최적화 프로세스.md rename to 00_Raw/00_Processed/웹사이트 리디자인 및 모바일 우선주의 UX 최적화 프로세스.md diff --git a/00_Raw/이커머스 및 SaaS 플랫폼 리디자인 프로젝트.md b/00_Raw/00_Processed/이커머스 및 SaaS 플랫폼 리디자인 프로젝트.md similarity index 100% rename from 00_Raw/이커머스 및 SaaS 플랫폼 리디자인 프로젝트.md rename to 00_Raw/00_Processed/이커머스 및 SaaS 플랫폼 리디자인 프로젝트.md diff --git a/00_Raw/이커머스 웹사이트 속도 및 전환율 개선.md b/00_Raw/00_Processed/이커머스 웹사이트 속도 및 전환율 개선.md similarity index 100% rename from 00_Raw/이커머스 웹사이트 속도 및 전환율 개선.md rename to 00_Raw/00_Processed/이커머스 웹사이트 속도 및 전환율 개선.md diff --git a/00_Raw/접근성 법적 준수를 위한 WCAG 2.2 적용.md b/00_Raw/00_Processed/접근성 법적 준수를 위한 WCAG 2.2 적용.md similarity index 100% rename from 00_Raw/접근성 법적 준수를 위한 WCAG 2.2 적용.md rename to 00_Raw/00_Processed/접근성 법적 준수를 위한 WCAG 2.2 적용.md diff --git a/00_Raw/콘텐츠 우선 설계(Content-First Design).md b/00_Raw/00_Processed/콘텐츠 우선 설계(Content-First Design).md similarity index 100% rename from 00_Raw/콘텐츠 우선 설계(Content-First Design).md rename to 00_Raw/00_Processed/콘텐츠 우선 설계(Content-First Design).md diff --git a/00_Raw/프론트엔드 성능 최적화 (Frontend Performance Optimization).md b/00_Raw/00_Processed/프론트엔드 성능 최적화 (Frontend Performance Optimization).md similarity index 100% rename from 00_Raw/프론트엔드 성능 최적화 (Frontend Performance Optimization).md rename to 00_Raw/00_Processed/프론트엔드 성능 최적화 (Frontend Performance Optimization).md diff --git a/00_Raw/프론트엔드 성능 최적화 및 UX 개선 프로젝트.md b/00_Raw/00_Processed/프론트엔드 성능 최적화 및 UX 개선 프로젝트.md similarity index 100% rename from 00_Raw/프론트엔드 성능 최적화 및 UX 개선 프로젝트.md rename to 00_Raw/00_Processed/프론트엔드 성능 최적화 및 UX 개선 프로젝트.md diff --git a/00_Raw/홈페이지 UX 개선.md b/00_Raw/00_Processed/홈페이지 UX 개선.md similarity index 100% rename from 00_Raw/홈페이지 UX 개선.md rename to 00_Raw/00_Processed/홈페이지 UX 개선.md diff --git a/00_Raw/확장 가능한 프런트엔드를 위한 의존성 및 패키지 구조화.md b/00_Raw/00_Processed/확장 가능한 프런트엔드를 위한 의존성 및 패키지 구조화.md similarity index 100% rename from 00_Raw/확장 가능한 프런트엔드를 위한 의존성 및 패키지 구조화.md rename to 00_Raw/00_Processed/확장 가능한 프런트엔드를 위한 의존성 및 패키지 구조화.md diff --git a/00_Raw/Layered Architecture.md b/00_Raw/Layered Architecture.md new file mode 100644 index 00000000..4b2005a0 --- /dev/null +++ b/00_Raw/Layered Architecture.md @@ -0,0 +1,25 @@ +# [[Layered Architecture]] + +## 📌 Brief Summary +Layered Architecture(계층형 아키텍처)는 데이터, 로직, 프레젠테이션과 같은 기술적인 역할(Technical Role)에 따라 관심사를 분리하는 전통적인 소프트웨어 아키텍처 방식입니다 [1]. React 프로젝트에서는 주로 `components`, `hooks`, `services`, `store`와 같이 파일 유형별로 폴더를 구성하는 형태로 적용됩니다 [1, 2]. 이 구조는 초기 프로젝트 설정이 직관적이고 소규모 애플리케이션에는 적합하지만, 애플리케이션이 커질수록 단일 기능(Feature)이 여러 계층에 흩어지게 되어 코드 유지보수 및 확장성이 크게 떨어지는 단점이 있습니다 [1-3]. + +## 📖 Core Content +* **기술적 역할에 기반한 분리 (Separation by Technical Role):** + Layered Architecture는 MVC(Model-View-Controller), MVP(Model-View-Presenter), MVVM 등의 패턴처럼 애플리케이션을 데이터, 비즈니스 로직, 프레젠테이션 계층으로 나눕니다 [1, 4]. 프론트엔드 프로젝트에서는 주로 모든 컴포넌트를 하나의 폴더에, 모든 훅(Hooks)을 다른 폴더에, 스타일을 또 다른 폴더에 모아두는 방식(Type-Based Organization)으로 나타납니다 [1, 2]. +* **초기 직관성과 소규모 앱에 대한 적합성:** + 이 구조는 기술적인 명확성을 최적화하므로, 개발 초기의 작은 프로토타입이나 중소규모 애플리케이션(Small to medium applications)에서는 시작하기 쉽고 직관적인 장점이 있습니다 [1-3]. +* **확장성 및 유지보수의 한계:** + 프로젝트의 규모가 확장됨에 따라 여러 가지 구조적 결함이 발생합니다. + * 단일 기능(Logical feature)에 관련된 파일들이 프로젝트 디렉토리 전체에 파편화되어 분산됩니다 [1, 2]. + * 비즈니스 로직이 쪼개져 있어, 하나의 기능을 리팩터링하거나 수정할 때 관련이 없는 수많은 폴더와 파일들을 탐색하고 수정해야 하므로 개발자의 인지 부하(Cognitive load)가 증가합니다 [1, 2]. + * 기존 백엔드 중심적인 구조를 프론트엔드에 강제하는 경향이 있어, React와 같이 모던한 컴포넌트 기반 라이브러리의 본질과 완벽하게 부합하지 않습니다 [4]. +* **현대적 대안으로의 전환:** + 이러한 확장성(Scalability) 문제를 해결하기 위해, 2025년 프론트엔드 생태계에서는 기술적 파일 유형이 아닌 비즈니스 기능 자체를 중심으로 코드를 그룹화하는 기능 기반 폴더 구조(Feature-Based Organization) 또는 Feature-Sliced Design(FSD) 패러다임으로 전환하고 있습니다 [5, 6]. + +## 🔗 Knowledge Connections +- **Related Topics:** [[MVC/MVP/MVVM]], [[Feature-Sliced Design]], [[Feature-Based Organization]], [[React Folder Structure]] +- **Projects/Contexts:** [[대규모 React 애플리케이션 아키텍처 설계]], [[프론트엔드 폴더 구조 리팩터링 및 확장성 확보]] +- **Contradictions/Notes:** Layered Architecture는 초기 도입 시 기술적인 명확성을 제공하여 유용해 보일 수 있지만, React와 같은 컴포넌트 기반 UI 개발에서는 장기적인 기능 확장성(Feature scalability)을 저해하므로 Feature-Sliced Design 같은 현대적인 기능 중심 아키텍처가 더 나은 대안으로 평가받고 있습니다 [4, 7]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file