From eb98216ddd0d2877bdb5ef9efba926a54ee7e9c8 Mon Sep 17 00:00:00 2001 From: Antigravity Agent Date: Sat, 25 Apr 2026 23:00:54 +0900 Subject: [PATCH] chore: remove duplicate placeholder files from Topics --- ...•„ํ‚คํ…์ฒ˜์™€ ๋™์‹œ์„ฑ (Concurrent Rendering).md | 35 +++++++++++++++++++ 00_Raw/Hydration ์„ฑ๋Šฅ ์ตœ์ ํ™”.md | 34 ++++++++++++++++++ 00_Raw/๊ฐ€์ƒ DOM๊ณผ ์žฌ์กฐ์ • (Reconciliation).md | 28 +++++++++++++++ 00_Raw/๋‹จ์ผ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ (SPA).md | 18 ++++++++++ 00_Raw/๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ํ”„๋กœ์„ธ์Šค (CRP).md | 21 +++++++++++ 00_Raw/์„ฑ๋Šฅ ๋ฐ SEO ์ตœ์ ํ™” ํ”„๋กœ์ ํŠธ.md | 28 +++++++++++++++ 00_Raw/์›น ํ”„๋ก ํŠธ์—”๋“œ ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„.md | 33 +++++++++++++++++ ...์š” ๋ Œ๋”๋ง ๊ฒฝ๋กœ (Critical Rendering Path).md | 23 ++++++++++++ .../ํ–‰๋™์ฃผ์˜ ์‹ฌ๋ฆฌํ•™ (Behaviorism).md | 25 ------------- .../Programming & Language/ํ–‰๋™์ฃผ์˜ ์‹ฌ๋ฆฌํ•™.md | 25 ------------- .../ABA(Applied Behavior Analysis).md | 25 ------------- .../Addiction Neuroscience.md | 25 ------------- .../Agent-Based-Modeling.md | 25 ------------- .../Agent-Based Modeling (ABM).md | 25 ------------- .../Algorithmic-Governance.md | 25 ------------- .../Software Architecture/API-First-Design.md | 25 ------------- .../Software Architecture/Nudge Theory.md | 25 ------------- 17 files changed, 220 insertions(+), 225 deletions(-) create mode 100644 00_Raw/Fiber ์•„ํ‚คํ…์ฒ˜์™€ ๋™์‹œ์„ฑ (Concurrent Rendering).md create mode 100644 00_Raw/Hydration ์„ฑ๋Šฅ ์ตœ์ ํ™”.md create mode 100644 00_Raw/๊ฐ€์ƒ DOM๊ณผ ์žฌ์กฐ์ • (Reconciliation).md create mode 100644 00_Raw/๋‹จ์ผ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ (SPA).md create mode 100644 00_Raw/๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ํ”„๋กœ์„ธ์Šค (CRP).md create mode 100644 00_Raw/์„ฑ๋Šฅ ๋ฐ SEO ์ตœ์ ํ™” ํ”„๋กœ์ ํŠธ.md create mode 100644 00_Raw/์›น ํ”„๋ก ํŠธ์—”๋“œ ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„.md create mode 100644 00_Raw/์ค‘์š” ๋ Œ๋”๋ง ๊ฒฝ๋กœ (Critical Rendering Path).md delete mode 100644 10_Wiki/Topics/Programming & Language/ํ–‰๋™์ฃผ์˜ ์‹ฌ๋ฆฌํ•™ (Behaviorism).md delete mode 100644 10_Wiki/Topics/Programming & Language/ํ–‰๋™์ฃผ์˜ ์‹ฌ๋ฆฌํ•™.md delete mode 100644 10_Wiki/Topics/Psychology & Behavior/ABA(Applied Behavior Analysis).md delete mode 100644 10_Wiki/Topics/Psychology & Behavior/Addiction Neuroscience.md delete mode 100644 10_Wiki/Topics/Psychology & Behavior/Agent-Based-Modeling.md delete mode 100644 10_Wiki/Topics/Simulation & Math/Agent-Based Modeling (ABM).md delete mode 100644 10_Wiki/Topics/Sociology & Tech/Algorithmic-Governance.md delete mode 100644 10_Wiki/Topics/Software Architecture/API-First-Design.md delete mode 100644 10_Wiki/Topics/Software Architecture/Nudge Theory.md diff --git a/00_Raw/Fiber ์•„ํ‚คํ…์ฒ˜์™€ ๋™์‹œ์„ฑ (Concurrent Rendering).md b/00_Raw/Fiber ์•„ํ‚คํ…์ฒ˜์™€ ๋™์‹œ์„ฑ (Concurrent Rendering).md new file mode 100644 index 00000000..007149aa --- /dev/null +++ b/00_Raw/Fiber ์•„ํ‚คํ…์ฒ˜์™€ ๋™์‹œ์„ฑ (Concurrent Rendering).md @@ -0,0 +1,35 @@ +# [[Fiber ์•„ํ‚คํ…์ฒ˜์™€ ๋™์‹œ์„ฑ (Concurrent Rendering)]] + +## ๐Ÿ“Œ Brief Summary +React์˜ **Fiber ์•„ํ‚คํ…์ฒ˜**๋Š” ๋‹จ์ผ ํ˜ธ์ถœ๋กœ ์ „์ฒด ํŠธ๋ฆฌ๋ฅผ ๋™๊ธฐ์ ์œผ๋กœ ๋ Œ๋”๋งํ•˜์—ฌ ๋ฉ”์ธ ์Šค๋ ˆ๋“œ๋ฅผ ์ฐจ๋‹จํ•˜๋˜ ๊ธฐ์กด์˜ ํ•œ๊ณ„๋ฅผ ๊ทน๋ณตํ•˜๊ธฐ ์œ„ํ•ด ์žฌ์ž‘์„ฑ๋œ ์žฌ์กฐ์ •(Reconciliation) ์—”์ง„์ž…๋‹ˆ๋‹ค [1, 2]. ์ด ์—”์ง„์€ ๋ Œ๋”๋ง ๊ณผ์ •์„ ์ž‘์€ '์ž‘์€ ์ž‘์—… ๋‹จ์œ„(Unit of work)'๋กœ ๋ถ„ํ• ํ•˜์—ฌ **๋™์‹œ์„ฑ ๋ Œ๋”๋ง(Concurrent Rendering)**์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค [2, 3]. ๊ฒฐ๊ณผ์ ์œผ๋กœ ๊ธด๊ธ‰ํ•œ ์‚ฌ์šฉ์ž ์ƒํ˜ธ์ž‘์šฉ(์˜ˆ: ํด๋ฆญ, ํƒ€์ดํ•‘)์ด ๋ฌด๊ฑฐ์šด ๋ Œ๋”๋ง ์ž‘์—…์— ์˜ํ•ด ์ง€์—ฐ๋˜์ง€ ์•Š๋„๋ก ์ž‘์—…์„ ์ผ์‹œ ์ค‘์ง€, ์žฌ๊ฐœ, ์šฐ์„ ์ˆœ์œ„ ์žฌ์กฐ์ •ํ•˜์—ฌ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค(UI)์˜ ๋ฐ˜์‘์„ฑ์„ ๊ทน๋Œ€ํ™”ํ•ฉ๋‹ˆ๋‹ค [4, 5]. + +## ๐Ÿ“– Core Content + +- **๊ธฐ์กด ๋ Œ๋”๋ง์˜ ๋ฌธ์ œ์ ๊ณผ Fiber์˜ ๋„์ž…:** + React 16 ์ด์ „์—๋Š” ์ „์ฒด ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ๋ฅผ ๋‹จ์ผ ์žฌ๊ท€ ํ˜ธ์ถœ๋กœ ์ฒ˜๋ฆฌํ•˜๋Š” '์Šคํƒ ์žฌ์กฐ์ •์ž(Stack Reconciler)'๋ฅผ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค [2]. ์ด ๋ฐฉ์‹์€ ๋ Œ๋”๋ง์ด ์™„๋ฃŒ๋  ๋•Œ๊นŒ์ง€ ๋ฉ”์ธ ์Šค๋ ˆ๋“œ๋ฅผ ์ฐจ๋‹จ(synchronous blocking)ํ•˜์—ฌ, ํฐ ๊ทœ๋ชจ์˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ๋Š” UI๊ฐ€ ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ์ด๋‚˜ ์• ๋‹ˆ๋ฉ”์ด์…˜์— ๋ฐ˜์‘ํ•˜์ง€ ๋ชปํ•˜๋Š” ๋ฌธ์ œ๋ฅผ ๋ฐœ์ƒ์‹œ์ผฐ์Šต๋‹ˆ๋‹ค [2]. ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋ Œ๋”๋ง์„ ์ค‘๋‹จ ๋ฐ ์žฌ๊ฐœํ•  ์ˆ˜ ์žˆ๋Š” Fiber ์•„ํ‚คํ…์ฒ˜๊ฐ€ ๋„์ž…๋˜์—ˆ์Šต๋‹ˆ๋‹ค [1, 2]. + +- **์ž‘์—… ๋ฃจํ”„(Work Loop)์™€ ์ž‘์—… ๋‹จ์œ„(Unit of Work):** + Fiber๋Š” ์ปดํฌ๋„ŒํŠธ๋‚˜ DOM ์š”์†Œ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” 'Fiber ๋…ธ๋“œ' ๋‹จ์œ„๋กœ ๋ Œ๋”๋ง ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค [2, 3]. ๋ Œ๋”๋ง์„ ์—ฌ๋Ÿฌ ํ”„๋ ˆ์ž„์— ๋ถ„์‚ฐ์‹œํ‚ค๊ธฐ ์œ„ํ•ด '์ž‘์—… ๋ฃจํ”„'๋ฅผ ์ž‘๋™ํ•˜๋ฉฐ, ๋‹ค์Œ ์ž‘์—…์„ ์„ ํƒํ•˜์—ฌ ์ฒ˜๋ฆฌ(beginWork)ํ•˜๋‹ค๊ฐ€ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋†’์€ ์ž‘์—…์ด ๋ฐœ์ƒํ•˜๋ฉด ๋ Œ๋”๋ง์„ ์ผ์‹œ ์ค‘๋‹จํ•˜๊ณ  ๋ธŒ๋ผ์šฐ์ €์— ์ œ์–ด๊ถŒ์„ ์–‘๋ณด(Yield)ํ•ฉ๋‹ˆ๋‹ค [3, 5]. + +- **์žฌ์กฐ์ •(Reconciliation) ๋‹จ๊ณ„์˜ ๋ถ„๋ฆฌ:** + ๋™์‹œ์„ฑ ๋ Œ๋”๋ง์„ ์œ„ํ•ด React์˜ ์žฌ์กฐ์ • ๊ณผ์ •์€ ์ค‘๋‹จ ๊ฐ€๋Šฅ์„ฑ์— ๋”ฐ๋ผ ๋‘ ๊ฐ€์ง€ ๋‹จ๊ณ„๋กœ ๋‚˜๋‰ฉ๋‹ˆ๋‹ค [6]. + * **๋ Œ๋”๋ง ๋‹จ๊ณ„(Render Phase):** ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ๋ฅผ ์ˆœํšŒํ•˜๋ฉฐ ์ด์ „ ์ƒํƒœ์™€ ์ƒˆ๋กœ์šด ์ƒํƒœ์˜ ์ฐจ์ด๋ฅผ ๊ณ„์‚ฐํ•˜๊ณ  ํšจ๊ณผ ๋ชฉ๋ก(Effect list)์„ ๊ตฌ์ถ•ํ•ฉ๋‹ˆ๋‹ค [6]. ์ด ๋‹จ๊ณ„๋Š” ์‹ค์ œ DOM์„ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š๋Š” ์ˆœ์ˆ˜ํ•œ ์—ฐ์‚ฐ ๊ณผ์ •์ด๋ฏ€๋กœ **์–ธ์ œ๋“ ์ง€ ์ผ์‹œ ์ค‘์ง€, ์ทจ์†Œ ๋˜๋Š” ์žฌ์‹œ์ž‘์ด ๊ฐ€๋Šฅ**ํ•ฉ๋‹ˆ๋‹ค [6, 7]. + * **์ปค๋ฐ‹ ๋‹จ๊ณ„(Commit Phase):** ๋ Œ๋”๋ง ๋‹จ๊ณ„์—์„œ ๋งŒ๋“ค์–ด์ง„ ๋ณ€๊ฒฝ ์‚ฌํ•ญ(ํšจ๊ณผ ๋ชฉ๋ก)์„ ์‹ค์ œ DOM์— ํ•œ ๋ฒˆ์— ์ ์šฉํ•ฉ๋‹ˆ๋‹ค [8]. ์ด ๊ณผ์ •์€ **๋™๊ธฐ์ ์ด๊ณ  ์ค‘๋‹จํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค** [7, 8]. + +- **์šฐ์„ ์ˆœ์œ„ ์ œ์–ด ๋ฐ ์ฐจ์„  ๋ชจ๋ธ(Lane Model):** + React๋Š” ํƒ€์ž„ ์Šฌ๋ผ์ด์‹ฑ(Time-slicing)๊ณผ ๋™์‹œ์„ฑ์„ ํšจ๊ณผ์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด 32๋น„ํŠธ ์ •์ˆ˜ ๊ธฐ๋ฐ˜์˜ '์ฐจ์„ (Lanes)' ์‹œ์Šคํ…œ์„ ํ™œ์šฉํ•ฉ๋‹ˆ๋‹ค [4, 9]. + * ๋™๊ธฐ์  ์ฐจ์„ (Sync Lane): ํƒ€์ดํ•‘, ํด๋ฆญ ๋“ฑ ์ฆ‰์‹œ ์ฒ˜๋ฆฌํ•ด์•ผ ํ•˜๋Š” ๊ธด๊ธ‰ํ•œ ์ž‘์—… [4, 10]. + * ์ž…๋ ฅ ์—ฐ์† ์ฐจ์„ (InputContinuous Lane): ์Šคํฌ๋กค, ๋งˆ์šฐ์Šค ํ˜ธ๋ฒ„ ๋“ฑ ์œ ๋™์ ์ธ ์›€์ง์ž„ [4, 10]. + * ๊ทธ ์™ธ์—๋„ ๋ฐ์ดํ„ฐ ํŽ˜์นญ ๊ฒฐ๊ณผ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ธฐ๋ณธ ์ฐจ์„ (Default Lane)๊ณผ ๋ฐฑ๊ทธ๋ผ์šด๋“œ ๋ Œ๋”๋ง์„ ์ฒ˜๋ฆฌํ•˜๋Š” ์œ ํœด ์ฐจ์„ (Idle Lane)์œผ๋กœ ๋‚˜๋‰ฉ๋‹ˆ๋‹ค [4]. + ์ด๋Ÿฌํ•œ ์„ธ๋ฐ€ํ•œ ๋ชจ๋ธ ๋•๋ถ„์— ์ž‘์—… ์ค‘์ธ Fiber(WIP Fibers)๋ฅผ ์šฐ์„ ์ˆœ์œ„์— ๋”ฐ๋ผ ์ง€์—ฐ์‹œํ‚ค๊ฑฐ๋‚˜ ์šฐ์„  ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [11]. + +- **๋™์‹œ์„ฑ ๊ธฐ๋Šฅ(Concurrent Features)์˜ ํ™œ์šฉ:** + Fiber์˜ ๋™์‹œ์„ฑ ๋ Œ๋”๋ง ๊ตฌ์กฐ๋Š” React 18, 19์˜ `useTransition` ๋ฐ `useDeferredValue`์™€ ๊ฐ™์€ ํ›…(Hook)์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค [12, 13]. ๊ธด๊ธ‰ํ•˜์ง€ ์•Š์€ ์—…๋ฐ์ดํŠธ์˜ ์šฐ์„ ์ˆœ์œ„๋ฅผ ๋‚ฎ์ถฐ ์ฒ˜๋ฆฌํ•จ์œผ๋กœ์จ ๋ฌด๊ฑฐ์šด ๋ฆฌ์ŠคํŠธ ํ•„ํ„ฐ๋ง์ด๋‚˜ ๋ฐ์ดํ„ฐ ๊ณ„์‚ฐ ์ค‘์—๋„ ์•ฑ์˜ ๋ฐ˜์‘์„ฑ์„ ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [12, 14]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[๊ฐ€์ƒ DOM๊ณผ ์žฌ์กฐ์ • (Virtual DOM and Reconciliation)]], [[์ฐจ์„  ๋ชจ๋ธ๊ณผ ์ž‘์—… ์šฐ์„ ์ˆœ์œ„ (Lane Model & Priorities)]], [[Time-Slicing]], [[React ๋™์‹œ์„ฑ ํ›… (useTransition, useDeferredValue)]] +- **Projects/Contexts:** [[๋ฉ”์ธ ์Šค๋ ˆ๋“œ ์ฐจ๋‹จ ๋ฌธ์ œ ํ•ด๊ฒฐ์„ ์œ„ํ•œ React 16์˜ Fiber ์—”์ง„ ๊ต์ฒด ๋ฐ React 18, 19์˜ ๋™์‹œ์„ฑ ๋ Œ๋”๋ง ์ ์šฉ ์‚ฌ๋ก€]] +- **Contradictions/Notes:** ์†Œ์Šค ์ „๋ฐ˜์— ๊ฑธ์ณ ๋‚ด์šฉ์ด ์ผ์น˜ํ•˜๋ฉฐ ์ƒ์ถฉ๋˜๋Š” ์˜๊ฒฌ์€ ์—†์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ์†Œ์Šค๋Š” Fiber ์•„ํ‚คํ…์ฒ˜๊ฐ€ ๋ Œ๋”๋ง์„ ์ž‘์€ ๋‹จ๊ณ„๋กœ ๋ถ„ํ• ํ•˜๊ณ  ์šฐ์„ ์ˆœ์œ„๋ฅผ ๋ถ€์—ฌํ•จ์œผ๋กœ์จ ๋ฉ”์ธ ์Šค๋ ˆ๋“œ์˜ ๋ถ€ํ•˜๋ฅผ ์ค„์—ฌ ๋™์‹œ์„ฑ๊ณผ ๋ฐ˜์‘์„ฑ์„ ๋‹ฌ์„ฑํ•œ๋‹ค๋Š” ์ ์„ ์ผ๊ด€๋˜๊ฒŒ ๊ฐ•์กฐํ•ฉ๋‹ˆ๋‹ค. + +--- +*Last updated: 2026-04-25* \ No newline at end of file diff --git a/00_Raw/Hydration ์„ฑ๋Šฅ ์ตœ์ ํ™”.md b/00_Raw/Hydration ์„ฑ๋Šฅ ์ตœ์ ํ™”.md new file mode 100644 index 00000000..05a683d4 --- /dev/null +++ b/00_Raw/Hydration ์„ฑ๋Šฅ ์ตœ์ ํ™”.md @@ -0,0 +1,34 @@ +# [[Hydration ์„ฑ๋Šฅ ์ตœ์ ํ™”]] + +## ๐Ÿ“Œ Brief Summary +Hydration์€ ์„œ๋ฒ„์—์„œ ๋ Œ๋”๋ง๋œ ์ •์  HTML ๋ผˆ๋Œ€์— JavaScript๋ฅผ ์‹คํ–‰ํ•˜๊ณ  ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋ฅผ ์—ฐ๊ฒฐํ•˜์—ฌ ์™„์ „ํ•œ ์ƒํ˜ธ์ž‘์šฉ์ด ๊ฐ€๋Šฅํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์œผ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ณผ์ •์ž…๋‹ˆ๋‹ค [1, 2]. ๊ธฐ๋ณธ์ ์œผ๋กœ React๋Š” ํŽ˜์ด์ง€ ์ „์ฒด๋ฅผ ํ•œ ๋ฒˆ์— Hydrationํ•˜๋ฉด์„œ ๋ฉ”์ธ ์Šค๋ ˆ๋“œ๋ฅผ ์ฐจ๋‹จํ•˜์—ฌ TBT(Total Blocking Time)์™€ TTI(Time to Interactive) ์ง€ํ‘œ๋ฅผ ์•…ํ™”์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [3]. ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์„ ํƒ์  Hydration, ์ง€์—ฐ ๋กœ๋”ฉ, React Server Components(RSC) ๋“ฑ์˜ ์ตœ์ ํ™” ๊ธฐ๋ฒ•์„ ๋„์ž…ํ•˜์—ฌ ์ดˆ๊ธฐ ๋กœ๋“œ ์„ฑ๋Šฅ๊ณผ ์ƒํ˜ธ์ž‘์šฉ์„ฑ์„ ๊ทน๋Œ€ํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [4-6]. + +## ๐Ÿ“– Core Content +* **Hydration์˜ ๊ฐœ๋… ๋ฐ ์ฃผ์š” ์„ฑ๋Šฅ ๋ณ‘๋ชฉ ํ˜„์ƒ:** + * Hydration์€ SSR(Server-Side Rendering) ํ™˜๊ฒฝ์—์„œ ์„œ๋ฒ„๊ฐ€ ์ƒ์„ฑํ•œ HTML์„ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ๋„˜๊ฒจ๋ฐ›์•„ ์ƒํ˜ธ์ž‘์šฉ์„ ๋ถ€์—ฌํ•˜๋Š” ํ•„์ˆ˜์ ์ธ ๊ณผ์ •์ž…๋‹ˆ๋‹ค [2, 3]. + * ๋ฌธ์ œ๋Š” React๊ฐ€ ๊ธฐ๋ณธ์ ์œผ๋กœ ์‹œ์•ผ์— ๋ณด์ด์ง€ ์•Š๋Š” ์ปดํฌ๋„ŒํŠธ๊นŒ์ง€ ํฌํ•จํ•˜์—ฌ ํŽ˜์ด์ง€ ์ „์ฒด๋ฅผ ํ•œ ๋ฒˆ์— Hydration ํ•˜๋ ค ํ•œ๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค [3]. ์ด๋กœ ์ธํ•ด JavaScript ์‹คํ–‰์ด ๋ฉ”์ธ ์Šค๋ ˆ๋“œ๋ฅผ ์žฅ์‹œ๊ฐ„ ์ ์œ ํ•˜๊ฒŒ ๋˜๊ณ , ๊ฒฐ๊ณผ์ ์œผ๋กœ TBT(Total Blocking Time), FID(First Input Delay), TTI(Time to Interactive) ๋“ฑ์˜ ํ•ต์‹ฌ ์›น ์„ฑ๋Šฅ ์ง€ํ‘œ๊ฐ€ ํฌ๊ฒŒ ์ €ํ•˜๋˜๋ฉฐ ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ ์ง€์—ฐ์„ ์ดˆ๋ž˜ํ•ฉ๋‹ˆ๋‹ค [3, 7]. + * ๋˜ํ•œ ์„œ๋ฒ„์—์„œ ๋ Œ๋”๋ง๋œ HTML๊ณผ ํด๋ผ์ด์–ธํŠธ์˜ ๋ Œ๋”๋ง ๊ฒฐ๊ณผ๊ฐ€ ๋‹ค๋ฅผ ๋•Œ ๋ฐœ์ƒํ•˜๋Š” 'Hydration Mismatch' ์˜ค๋ฅ˜์™€, ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๋ฅผ ์œ„ํ•œ ์ „์ฒด JavaScript๋ฅผ ๋‹ค์šด๋กœ๋“œํ•ด์•ผ ํ•ด์„œ ๋ฐœ์ƒํ•˜๋Š” ๋ฒˆ๋“ค ํฌ๊ธฐ ๋น„๋Œ€ํ™”(Bundle Size Bloat) ๋ฌธ์ œ๋„ ๊ฒช์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [4, 8]. + +* **์ ์ง„์  ๋ฐ ์„ ํƒ์  Hydration (Selective & Progressive Hydration):** + * ํŽ˜์ด์ง€ ์ „์ฒด๋ฅผ ์ผ๊ด„ ์ฒ˜๋ฆฌํ•˜๋Š” ๋Œ€์‹  ์Šคํฌ๋กค ์œ„์ชฝ(Above-the-fold)์˜ ์ค‘์š”ํ•œ ์ฝ˜ํ…์ธ ๋ฅผ ์šฐ์„  ์ฒ˜๋ฆฌํ•˜๊ณ , ๋œ ์ค‘์š”ํ•œ ์ปดํฌ๋„ŒํŠธ๋Š” Hydration์„ ์ง€์—ฐ์‹œํ‚ต๋‹ˆ๋‹ค [4]. + * Next.js ํ™˜๊ฒฝ์—์„œ๋Š” `next/dynamic`์„ ํ™œ์šฉํ•œ ๋™์  ์ž„ํฌํŠธ(Dynamic Imports)๋ฅผ ํ†ตํ•ด ๊ตฌํ˜„ํ•˜๊ฑฐ๋‚˜, IntersectionObserver API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์š”์†Œ๊ฐ€ ๋ทฐํฌํŠธ์— ๋“ค์–ด์˜ฌ ๋•Œ๋งŒ Hydration์„ ์ˆ˜ํ–‰ํ•˜๋Š” ์ง€์—ฐ(Lazy) ๋ฐฉ์‹์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [5, 9]. ์ด๋ฅผ ํ†ตํ•ด ๋ฉ”์ธ ์Šค๋ ˆ๋“œ ์ฐจ๋‹จ์„ ๋ถ„์‚ฐ์‹œ์ผœ TBT๋ฅผ ์ตœ๋Œ€ 40%๊นŒ์ง€ ์ค„์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [5]. + +* **React Server Components (RSC)์˜ ํ™œ์šฉ:** + * Next.js App Router ๋“ฑ์—์„œ ์ง€์›ํ•˜๋Š” React Server Components๋Š” ์˜ค์ง ์„œ๋ฒ„์—์„œ๋งŒ ์‹คํ–‰๋˜๋ฉฐ ํด๋ผ์ด์–ธํŠธ๋กœ JavaScript ํŽ˜์ด๋กœ๋“œ๋ฅผ ์ „ํ˜€ ๋ณด๋‚ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค [5, 10, 11]. + * ์ •์ ์ด๊ฑฐ๋‚˜ ์ƒํ˜ธ์ž‘์šฉ์ด ํ•„์š” ์—†๋Š” UI(์˜ˆ: ํ…์ŠคํŠธ, ์‚ฌ์ด๋“œ๋ฐ” ๋“ฑ)๋ฅผ RSC๋กœ ๊ตฌ์„ฑํ•˜๋ฉด ํ•ด๋‹น ์˜์—ญ์€ Hydration ํ”„๋กœ์„ธ์Šค ์ž์ฒด๊ฐ€ ํ•„์š” ์—†์–ด์ง€๋ฏ€๋กœ ํด๋ผ์ด์–ธํŠธ์˜ ๋ถ€๋‹ด๊ณผ ๋ฒˆ๋“ค ํฌ๊ธฐ๊ฐ€ ๋น„์•ฝ์ ์œผ๋กœ ๊ฐ์†Œํ•ฉ๋‹ˆ๋‹ค [6, 12, 13]. + +* **Streaming ๋ฐ Suspense ์ ์šฉ:** + * React์˜ Suspense API๋ฅผ ํ™œ์šฉํ•˜๋ฉด ์„œ๋ฒ„์—์„œ HTML์„ ์ ์ง„์ ์œผ๋กœ ์ŠคํŠธ๋ฆฌ๋ฐ(Streaming)ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [6]. + * ์ด๋ฅผ ํ†ตํ•ด ๋ Œ๋”๋ง์ด ์™„๋ฃŒ๋œ ์ผ๋ถ€ ํ™”๋ฉด์„ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋” ๋น ๋ฅด๊ฒŒ ๋ณด์—ฌ์ฃผ๋ฉด์„œ(FCP ๊ฐœ์„ ), ๋ณต์žกํ•œ ๋ถ€๋ถ„์— ๋Œ€ํ•œ Hydration ์ž‘์—…์€ ๋‚˜์ค‘์œผ๋กœ ๋ฏธ๋ฃจ์–ด ์ฒด๊ฐ ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [6, 14]. React 18์˜ ๋™์‹œ์„ฑ ๋ Œ๋”๋ง(Concurrent Rendering)์€ Hydration ์ž‘์—…์„ ์ž‘์€ ์ฒญํฌ๋กœ ์ชผ๊ฐœ์–ด ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋„๋ก ์–‘๋ณด(yield)ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค [15]. + +* **๋ถ€๋ถ„ Hydration (Partial Hydration) ๋ฐ ๊ธฐํƒ€ ํŒ:** + * ์ •์ ์ธ ์ฝ˜ํ…์ธ  ์˜์—ญ์„ ๊ณ ๋ฆฝ์‹œํ‚ค๊ณ  ์ƒํ˜ธ์ž‘์šฉ์ด ํ•„์š”ํ•œ ํŠน์ • ๋ถ€๋ถ„๋งŒ Hydrationํ•˜๋Š” ์„ฌ ์•„ํ‚คํ…์ฒ˜(Island Architecture)๋ฅผ ๋„์ž…ํ•˜๊ฑฐ๋‚˜, ์ ˆ๋Œ€์ ์œผ๋กœ ์ •์ ์ธ ์ฝ˜ํ…์ธ ์˜ ๊ฒฝ์šฐ `dangerouslySetInnerHTML`์„ ์‚ฌ์šฉํ•˜์—ฌ ํ†ต์งธ๋กœ Hydration ๊ณผ์ •์—์„œ ๋ฐฐ์ œํ•˜๋Š” ๊ฒƒ๋„ ์œ ์šฉํ•œ ์ „๋žต์ž…๋‹ˆ๋‹ค [16-18]. + * ๋ถˆ๊ฐ€ํ”ผํ•˜๊ฒŒ ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„ ๊ฐ„์˜ ๋ Œ๋”๋ง ๋ถˆ์ผ์น˜๊ฐ€ ์˜ˆ์ƒ๋˜๋Š” ๊ณณ์—๋Š” `suppressHydrationWarning`์„ ์ œํ•œ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜, Hydration ์™„๋ฃŒ ์ดํ›„์— ๋™์ž‘ํ•ด์•ผ ํ•˜๋Š” ๋กœ์ง์„ ์˜์กด์„ฑ ๋ฐฐ์—ด์ด ๋นˆ `useEffect` ๋‚ด์— ๋ฐฐ์น˜ํ•˜์—ฌ ๋ถˆ์ผ์น˜ ์—๋Ÿฌ๋ฅผ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [17, 19]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[Server-Side Rendering (SSR)]], [[React Server Components (RSC)]], [[Total Blocking Time (TBT)]], [[Concurrent Rendering]] +- **Projects/Contexts:** [[Next.js App Router]], [[Island Architecture]] +- **Contradictions/Notes:** SSR์€ ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ์™„์„ฑ๋œ HTML์„ ์ฆ‰์‹œ ์ œ๊ณตํ•˜์—ฌ FCP(First Contentful Paint)์™€ SEO๋ฅผ ํฌ๊ฒŒ ํ–ฅ์ƒ์‹œํ‚ค์ง€๋งŒ, JavaScript ๋ฒˆ๋“ค์ด ๋‹ค์šด๋กœ๋“œ๋˜๊ณ  Hydration์ด ์™„๋ฃŒ๋  ๋•Œ๊นŒ์ง€ ์‚ฌ์šฉ์ž๊ฐ€ ํŽ˜์ด์ง€์™€ ์ƒํ˜ธ์ž‘์šฉํ•  ์ˆ˜ ์—†์œผ๋ฏ€๋กœ TTI(Time to Interactive)๊ฐ€ ์˜คํžˆ๋ ค ์ง€์—ฐ๋˜๋Š” ์„ฑ๋Šฅ์  ํŠธ๋ ˆ์ด๋“œ์˜คํ”„(Trade-off)๊ฐ€ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค [20, 21]. + +--- +*Last updated: 2026-04-25* \ No newline at end of file diff --git a/00_Raw/๊ฐ€์ƒ DOM๊ณผ ์žฌ์กฐ์ • (Reconciliation).md b/00_Raw/๊ฐ€์ƒ DOM๊ณผ ์žฌ์กฐ์ • (Reconciliation).md new file mode 100644 index 00000000..bcdd9e6c --- /dev/null +++ b/00_Raw/๊ฐ€์ƒ DOM๊ณผ ์žฌ์กฐ์ • (Reconciliation).md @@ -0,0 +1,28 @@ +# [[๊ฐ€์ƒ DOM๊ณผ ์žฌ์กฐ์ • (Reconciliation)]] + +## ๐Ÿ“Œ Brief Summary +๊ฐ€์ƒ DOM(Virtual DOM)์€ ๋ฉ”๋ชจ๋ฆฌ ๋‚ด์— ์œ ์ง€๋˜๋Š” UI์˜ ์ด์ƒ์ ์ด๊ณ  ๊ฐ€์ƒ์ ์ธ ํ‘œํ˜„์œผ๋กœ, ReactDOM๊ณผ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ์˜ํ•ด ์‹ค์ œ DOM๊ณผ ๋™๊ธฐํ™”๋˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ฐœ๋…์ด๋‹ค [1]. ์ด ๊ฐ€์ƒ DOM์„ ์‹ค์ œ DOM๊ณผ ์ผ์น˜์‹œํ‚ค๋Š” ๊ณผ์ •์„ **์žฌ์กฐ์ •(Reconciliation)**์ด๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค [1, 2]. ์ง์ ‘์ ์ธ DOM ์ˆ˜์ •์ด ์œ ๋ฐœํ•˜๋Š” ํฌ๋ฆฌํ‹ฐ์ปฌ ๋ Œ๋”๋ง ํŒจ์Šค์˜ ๋น„์šฉ์„ ์ตœ์†Œํ™”ํ•˜๊ธฐ ์œ„ํ•ด ๋„์ž…๋˜์—ˆ์œผ๋ฉฐ [3], React๋Š” $O(n)$ ๋ณต์žก๋„๋ฅผ ๊ฐ€์ง€๋Š” ํšจ์œจ์ ์ธ ํœด๋ฆฌ์Šคํ‹ฑ ๋น„๊ต ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ํ†ตํ•ด ๋ณ€๊ฒฝ๋œ ๋ถ€๋ถ„๋งŒ ์„ ํƒ์ ์œผ๋กœ ์‹ค์ œ DOM์— ๋ฐ˜์˜ํ•œ๋‹ค [4, 5]. + +## ๐Ÿ“– Core Content + +* **๊ฐ€์ƒ DOM์˜ ํ•„์š”์„ฑ๊ณผ ์—ญํ• ** + ๊ธฐ์กด ๋ฐฉ์‹์ฒ˜๋Ÿผ ์‹ค์ œ DOM์„ ์ง์ ‘ ์ˆ˜์ •ํ•˜๋ฉด ๋ณ€๊ฒฝ์ด ์ผ์–ด๋‚  ๋•Œ๋งˆ๋‹ค ๋ธŒ๋ผ์šฐ์ €์˜ ๋ ˆ์ด์•„์›ƒ(Reflow)๊ณผ ํŽ˜์ธํŠธ(Repaint) ๋‹จ๊ณ„๊ฐ€ ๋ฐ˜๋ณต์ ์œผ๋กœ ๋ฐœ์ƒํ•˜์—ฌ ์„ฑ๋Šฅ์ด ์ €ํ•˜๋œ๋‹ค [3, 6]. ์ด๋ฅผ ๊ทน๋ณตํ•˜๊ธฐ ์œ„ํ•ด React๋Š” UI ์š”์†Œ๋ฅผ ์ผ๋ฐ˜ JavaScript ๊ฐ์ฒด๋กœ ์–•๊ฒŒ ํ‘œํ˜„ํ•œ ๊ฒฝ๋Ÿ‰ํ™”๋œ ํŠธ๋ฆฌ์ธ ๊ฐ€์ƒ DOM์„ ์‚ฌ์šฉํ•œ๋‹ค [1-3]. ๊ฐœ๋ฐœ์ž๋Š” ์›ํ•˜๋Š” UI ์ƒํƒœ๋ฅผ ์„ ์–ธ์ ์œผ๋กœ ์ง€์ •ํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ๋˜๋ฉฐ, ์ˆ˜๋™์ ์ธ DOM ์กฐ์ž‘๊ณผ ์†์„ฑ ๋ณ€๊ฒฝ, ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ๋Š” React๊ฐ€ ์ถ”์ƒํ™”ํ•˜์—ฌ ๋‹ด๋‹นํ•œ๋‹ค [1]. + +* **ํœด๋ฆฌ์Šคํ‹ฑ ๋น„๊ต ์•Œ๊ณ ๋ฆฌ์ฆ˜ (Heuristic Diffing Algorithm)** + ์ผ๋ฐ˜์ ์ธ ํŠธ๋ฆฌ ๋น„๊ต ์•Œ๊ณ ๋ฆฌ์ฆ˜์€ $O(n^3)$์˜ ์‹œ๊ฐ„ ๋ณต์žก๋„๋ฅผ ๊ฐ€์ง€์ง€๋งŒ, ์ด๋Š” ์ˆ˜์ฒœ ๊ฐœ์˜ ์š”์†Œ๋ฅผ ๋ Œ๋”๋งํ•  ๋•Œ ๋„ˆ๋ฌด ํฐ ๋น„์šฉ์„ ๋ฐœ์ƒ์‹œํ‚จ๋‹ค [5, 7]. ๋”ฐ๋ผ์„œ React๋Š” ๋‹ค์Œ ๋‘ ๊ฐ€์ง€ ๊ฐ€์ •์„ ๋ฐ”ํƒ•์œผ๋กœ $O(n)$ ๋ณต์žก๋„์˜ ์ตœ์ ํ™”๋œ ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ์‚ฌ์šฉํ•œ๋‹ค [4, 5]. + 1. **ํƒ€์ž…์ด ๋‹ค๋ฅธ ์š”์†Œ**: ์„œ๋กœ ๋‹ค๋ฅธ ํƒ€์ž…์˜ ์š”์†Œ๋Š” ์™„์ „ํžˆ ๋‹ค๋ฅธ ํŠธ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•œ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ``์—์„œ ``๋กœ ํƒ€์ž…์ด ๋ณ€๊ฒฝ๋˜๋ฉด React๋Š” ๊ธฐ์กด ํŠธ๋ฆฌ๋ฅผ ์™„์ „ํžˆ ํŒŒ๊ดดํ•˜๊ณ  ์ฒ˜์Œ๋ถ€ํ„ฐ ์ƒˆ ํŠธ๋ฆฌ๋ฅผ ๊ตฌ์ถ•ํ•˜๋ฉฐ, ์ด ๊ณผ์ •์—์„œ ๊ธฐ์กด DOM ๋…ธ๋“œ์™€ ์ปดํฌ๋„ŒํŠธ ์ƒํƒœ(State)๋Š” ๋ชจ๋‘ ์†Œ๋ฉธ๋œ๋‹ค [4, 5, 8]. ๋ฐ˜๋ฉด ๊ฐ™์€ ํƒ€์ž…์˜ DOM ์š”์†Œ์ผ ๊ฒฝ์šฐ, ๋™์ผํ•œ ๊ธฐ๋ณธ DOM ๋…ธ๋“œ๋ฅผ ์œ ์ง€ํ•œ ์ฑ„ ๋ณ€๊ฒฝ๋œ ์†์„ฑ(Attributes)๊ณผ ์Šคํƒ€์ผ๋งŒ ์—…๋ฐ์ดํŠธํ•œ๋‹ค [9, 10]. + 2. **Key ์†์„ฑ**: ๊ฐœ๋ฐœ์ž๊ฐ€ `key` ์†์„ฑ์„ ์ œ๊ณตํ•˜์—ฌ ์—ฌ๋Ÿฌ ๋ Œ๋”๋ง ์‚ฌ์ด์—์„œ ์–ด๋–ค ์ž์‹ ์š”์†Œ๊ฐ€ ์•ˆ์ •์ ์œผ๋กœ ์œ ์ง€๋˜๋Š”์ง€ ํžŒํŠธ๋ฅผ ์ค„ ์ˆ˜ ์žˆ๋‹ค [4, 5]. + +* **๋ฆฌ์ŠคํŠธ ๋ Œ๋”๋ง๊ณผ Key์˜ ์ค‘์š”์„ฑ** + ์ž์‹ ๋…ธ๋“œ๋“ค์„ ๋ฐ˜๋ณต์ ์œผ๋กœ ์ฒ˜๋ฆฌํ•  ๋•Œ, ๊ธฐ๋ณธ์ ์œผ๋กœ React๋Š” ๊ธฐ์กด ํŠธ๋ฆฌ์™€ ์ƒˆ ํŠธ๋ฆฌ์˜ ์ž์‹ ๋ฆฌ์ŠคํŠธ๋ฅผ ๋™์‹œ์— ์ˆœํšŒํ•˜๋ฉฐ ์ฐจ์ด๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ๋งˆ๋‹ค ๋ณ€ํ˜•์„ ์ผ์œผํ‚จ๋‹ค [11]. ๋ฆฌ์ŠคํŠธ์˜ ๋งจ ๋์— ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์€ ์›ํ™œํ•˜๊ฒŒ ์ž‘๋™ํ•˜์ง€๋งŒ, ๋ฆฌ์ŠคํŠธ์˜ ๋งจ ์•ž์— ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ๋ชจ๋“  ์ž์‹ ์š”์†Œ๊ฐ€ ๋ณ€๊ฒฝ๋œ ๊ฒƒ์œผ๋กœ ์ธ์‹๋˜์–ด ๋งค์šฐ ๋น„ํšจ์œจ์ ์ธ ๋ Œ๋”๋ง์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค [11, 12]. ๊ณ ์œ ํ•œ `key`๋ฅผ ๋ถ€์—ฌํ•˜๋ฉด React๊ฐ€ ๊ธฐ์กด ํŠธ๋ฆฌ์™€ ์ƒˆ ํŠธ๋ฆฌ์˜ ์š”์†Œ๋ฅผ ์ •ํ™•ํžˆ ์ผ์น˜์‹œํ‚ฌ ์ˆ˜ ์žˆ์–ด ์š”์†Œ์˜ ์ด๋™๋งŒ์œผ๋กœ ์—…๋ฐ์ดํŠธ๊ฐ€ ๊ฐ€๋Šฅํ•ด์ง„๋‹ค [12, 13]. ๋‹จ, ๋ฐฐ์—ด์˜ ์ธ๋ฑ์Šค๋ฅผ `key`๋กœ ์‚ฌ์šฉํ•˜๋ฉด ํ•ญ๋ชฉ ์žฌ์ •๋ ฌ ์‹œ ์ปดํฌ๋„ŒํŠธ ์ƒํƒœ๊ฐ€ ์˜ˆ๊ธฐ์น˜ ์•Š๊ฒŒ ๊ผฌ์ด๊ฑฐ๋‚˜ ์„ฑ๋Šฅ์ด ์ €ํ•˜๋˜๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค [13, 14]. + +* **Fiber ์•„ํ‚คํ…์ฒ˜ ๊ธฐ๋ฐ˜์˜ ์ง„ํ™”** + React 16๋ถ€ํ„ฐ๋Š” ๋™์‹œ์„ฑ(Concurrent) ๋ Œ๋”๋ง์„ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•ด ์žฌ์กฐ์ • ์—”์ง„์ด **'Fiber'** ์•„ํ‚คํ…์ฒ˜๋กœ ์™„์ „ํžˆ ์žฌ์ž‘์„ฑ๋˜์—ˆ๋‹ค [15-18]. ๋ Œ๋”๋ง ์ž‘์—…์„ ๋‹จ์ผ ๋™๊ธฐ์‹ ๋ธ”๋ก์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๋˜ ์ด์ „(Stack Reconciler)๊ณผ ๋‹ฌ๋ฆฌ, Fiber๋Š” ์ž‘์—…์„ ์ž‘์€ '์ž‘์—… ๋‹จ์œ„(Unit of work)'๋กœ ๋‚˜๋ˆ„์–ด ๋ฉ”์ธ ์Šค๋ ˆ๋“œ๊ฐ€ ์‚ฌ์šฉ์ž ์ž…๋ ฅ ๋“ฑ์˜ ๊ธ‰ํ•œ ์ž‘์—…์„ ๋จผ์ € ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•๋Š”๋‹ค [19, 20]. ์žฌ์กฐ์ • ๊ณผ์ •์€ ์ค‘๋‹จ ๋ฐ ์žฌ๊ฐœ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋ฉฐ DOM ๋ณ€๊ฒฝ์„ ๋ฐœ์ƒ์‹œํ‚ค์ง€ ์•Š๋Š” **๋ Œ๋” ๋‹จ๊ณ„(Render phase)**์™€, ๋ชจ๋“  ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ํ•œ ๋ฒˆ์— ๋™๊ธฐ์ ์œผ๋กœ ์‹ค์ œ DOM์— ๋ฐ˜์˜ํ•˜๋Š” **์ปค๋ฐ‹ ๋‹จ๊ณ„(Commit phase)**๋กœ ๋‚˜๋‰˜์–ด ์‹คํ–‰๋œ๋‹ค [21-23]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** `[[ํฌ๋ฆฌํ‹ฐ์ปฌ ๋ Œ๋”๋ง ํŒจ์Šค (Critical Rendering Path)]]`, `[[Fiber ์•„ํ‚คํ…์ฒ˜ (Fiber Architecture)]]`, `[[DOM (Document Object Model)]]` +- **Projects/Contexts:** `[[React ์„ฑ๋Šฅ ์ตœ์ ํ™” (React Performance Optimization)]]`, `[[React ์ปดํŒŒ์ผ๋Ÿฌ (React Compiler)]]`, `[[๋™์‹œ์„ฑ ๋ Œ๋”๋ง (Concurrent Rendering)]]` +- **Contradictions/Notes:** ์„€๋„์šฐ DOM(Shadow DOM)๊ณผ ๊ฐ€์ƒ DOM(Virtual DOM)์€ ํ˜ผ๋™๋˜๊ธฐ ์‰ฌ์šฐ๋‚˜ ์„œ๋กœ ๋‹ค๋ฅธ ๊ฐœ๋…์ด๋‹ค. ์„€๋„์šฐ DOM์€ ์›น ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ณ€์ˆ˜์™€ CSS์˜ ์Šค์ฝ”ํ”„๋ฅผ ์ง€์ •ํ•˜๊ธฐ ์œ„ํ•ด ์„ค๊ณ„๋œ ๋ธŒ๋ผ์šฐ์ € ๋„ค์ดํ‹ฐ๋ธŒ ๊ธฐ์ˆ ์ธ ๋ฐ˜๋ฉด, ๊ฐ€์ƒ DOM์€ ๋ธŒ๋ผ์šฐ์ € API ์œ„์— JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(React ๋“ฑ)์— ์˜ํ•ด ๊ตฌํ˜„๋œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ฐœ๋…์ด๋‹ค [24]. + +--- +*Last updated: 2026-04-25* \ No newline at end of file diff --git a/00_Raw/๋‹จ์ผ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ (SPA).md b/00_Raw/๋‹จ์ผ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ (SPA).md new file mode 100644 index 00000000..f74ae4c6 --- /dev/null +++ b/00_Raw/๋‹จ์ผ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ (SPA).md @@ -0,0 +1,18 @@ +# [[๋‹จ์ผ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ (SPA)]] + +## ๐Ÿ“Œ Brief Summary +๋‹จ์ผ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜(SPA)์€ ์„œ๋ฒ„์—์„œ ๋ผ์šฐํŠธ๋งˆ๋‹ค ์™„์ „ํ•œ HTML์„ ๋ฐ›์•„์˜ค๋Š” ๋Œ€์‹ , ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง(CSR)์„ ํ™œ์šฉํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ € ๋‚ด์—์„œ ์ฝ˜ํ…์ธ ๋ฅผ ๋™์ ์œผ๋กœ ์ƒ์„ฑํ•˜๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ž…๋‹ˆ๋‹ค [1-3]. ์ดˆ๊ธฐ ๋กœ๋“œ ์‹œ ํ•„์š”ํ•œ ๋ชจ๋“  HTML, CSS ๋ฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ๋‹ค์šด๋กœ๋“œํ•˜๋ฉฐ, ๊ทธ ์ดํ›„๋ถ€ํ„ฐ๋Š” ์„œ๋ฒ„๋ฅผ ํ†ตํ•œ ์ „์ฒด ํŽ˜์ด์ง€ ์ƒˆ๋กœ๊ณ ์นจ ์—†์ด ์‚ฌ์šฉ์ž์˜ ์ƒํ˜ธ์ž‘์šฉ์„ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค [4]. ์ด๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ์ž์—๊ฒŒ ํŽ˜์ด์ง€ ์ „ํ™˜์ด ์ฆ‰๊ฐ์ ์œผ๋กœ ์ด๋ฃจ์–ด์ง€๋Š” ๋งค๋„๋Ÿฌ์šด '์•ฑ๊ณผ ๊ฐ™์€(app-like)' ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค [1, 4]. + +## ๐Ÿ“– Core Content +* **์ž‘๋™ ๋ฐฉ์‹:** SPA๋Š” ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๊ธฐ๋ณธ ๊ตฌ์กฐ๋งŒ ๊ฐ–์ถ˜ ์ตœ์†Œํ•œ์˜ HTML ํ…œํ”Œ๋ฆฟ๊ณผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฒˆ๋“ค์„ ์ „๋‹ฌ๋ฐ›์Šต๋‹ˆ๋‹ค [1-3]. ์ดํ›„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋ฌธ์„œ์˜ ์ œ์–ด๊ถŒ์„ ๋„˜๊ฒจ๋ฐ›์•„ ๋ธŒ๋ผ์šฐ์ € ๋‚ด์—์„œ ๊ฐ ๋ผ์šฐํŠธ๋ฅผ ๋™์ ์œผ๋กœ ์ƒ์„ฑํ•˜๊ณ  ๋ฐ์ดํ„ฐ๋ฅผ ์ฑ„์›Œ ๋„ฃ์Šต๋‹ˆ๋‹ค [2, 3]. +* **์„ฑ๋Šฅ ๋ฐ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ์ธก๋ฉด์˜ ์žฅ์ :** SPA๋Š” ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ๊ณ ์นจํ•  ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ๋Š๊น€ ํ˜„์ƒ์„ ์ œ๊ฑฐํ•˜์—ฌ ๋งค์šฐ ์œ ๋™์ ์ด๊ณ  ๋ฐ˜์‘์„ฑ์ด ๋›ฐ์–ด๋‚œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค [4, 5]. ๋˜ํ•œ ๋ Œ๋”๋ง ์ž‘์—…์„ ํด๋ผ์ด์–ธํŠธ๋กœ ๋„˜๊ธฐ๋ฏ€๋กœ ์„œ๋ฒ„ ๋ถ€ํ•˜๊ฐ€ ๊ฐ์†Œํ•˜๋ฉฐ, ๋ณต์žกํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋Ÿฐํƒ€์ž„ ์„œ๋ฒ„ ์—†์ด ์ •์  ์„œ๋ฒ„(Amazon S3, Netlify ๋“ฑ)์— ํ˜ธ์ŠคํŒ…ํ•  ์ˆ˜ ์žˆ์–ด ๋น„์šฉ ํšจ์œจ์ ์ž…๋‹ˆ๋‹ค [5, 6]. +* **์ดˆ๊ธฐ ๋กœ๋”ฉ ๋ฐ SEO์˜ ํ•œ๊ณ„:** ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ชจ๋‘ ๋‹ค์šด๋กœ๋“œํ•˜๊ณ  ๊ตฌ๋ฌธ ๋ถ„์„ ๋ฐ ์‹คํ–‰์„ ์™„๋ฃŒํ•˜๊ธฐ ์ „๊นŒ์ง€๋Š” ์˜๋ฏธ ์žˆ๋Š” ์ฝ˜ํ…์ธ ๊ฐ€ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚˜์ง€ ์•Š์œผ๋ฏ€๋กœ ์ดˆ๊ธฐ ๋กœ๋“œ ์‹œ๊ฐ„(First Contentful Paint)์ด ๋А๋ฆฌ๋‹ค๋Š” ๋‹จ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค [1, 7]. ๋˜ํ•œ, ๋นˆ HTML ๊ป๋ฐ๊ธฐ๋งŒ ๋จผ์ € ์ „์†ก๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ผ๋ถ€ ๊ฒ€์ƒ‰ ์—”์ง„ ํฌ๋กค๋Ÿฌ๊ฐ€ ์ฝ˜ํ…์ธ ๋ฅผ ์ œ๋Œ€๋กœ ์ฝ์ง€ ๋ชปํ•ด ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”(SEO)์— ๋ถˆ๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [1, 7, 8]. ์‚ฌ์šฉ์ž ๊ธฐ๊ธฐ์˜ ์ปดํ“จํŒ… ์„ฑ๋Šฅ์— ๋”ฐ๋ผ ๋ Œ๋”๋ง ์„ฑ๋Šฅ์ด ํฌ๊ฒŒ ์ขŒ์šฐ๋˜๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค [9]. +* **์ด์ƒ์ ์ธ ํ™œ์šฉ ์‚ฌ๋ก€:** SEO๊ฐ€ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ์•„๋‹ˆ๋ฉฐ ๋ณต์žกํ•˜๊ณ  ํ’๋ถ€ํ•œ ์‚ฌ์šฉ์ž ์ƒํ˜ธ์ž‘์šฉ์ด ํ•„์ˆ˜์ ์ธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๋งค์šฐ ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค [10]. ์ฃผ๋กœ ๋กœ๊ทธ์ธ ์žฅ๋ฒฝ ๋’ค์— ์žˆ๋Š” ๋‚ด๋ถ€ ๋น„์ฆˆ๋‹ˆ์Šค ๋„๊ตฌ, ์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ๊ฐ€ ์—…๋ฐ์ดํŠธ๋˜๋Š” ์‚ฌ์šฉ์ž ๋Œ€์‹œ๋ณด๋“œ, SaaS ํ”Œ๋žซํผ ๋“ฑ์—์„œ ์ด์ƒ์ ์œผ๋กœ ํ™œ์šฉ๋ฉ๋‹ˆ๋‹ค [5, 10]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง (CSR)]], [[๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™” (SEO)]], [[์ดˆ๊ธฐ ๋กœ๋“œ ์‹œ๊ฐ„ (Initial Load Time)]] +- **Projects/Contexts:** [[SaaS ํ”Œ๋žซํผ ๋ฐ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ๋Œ€์‹œ๋ณด๋“œ ๊ฐœ๋ฐœ]] +- **Contradictions/Notes:** ์†Œ์Šค์— ๋”ฐ๋ฅด๋ฉด SPA์˜ ํ•ต์‹ฌ์ธ CSR ๋ฐฉ์‹์€ ์ƒํ˜ธ์ž‘์šฉ์„ฑ๊ณผ ๊ฐœ๋ฐœ ์†๋„ ๋ฉด์—์„œ ๋›ฐ์–ด๋‚˜์ง€๋งŒ SEO์™€ ์ดˆ๊ธฐ ๋กœ๋“œ ์‹œ๊ฐ„์—์„œ๋Š” ๋šœ๋ ทํ•œ ํ•œ๊ณ„๋ฅผ ๋ณด์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋‹จ์ ์€ ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง(SSR)์ด๋‚˜ ์ •์  ์‚ฌ์ดํŠธ ์ƒ์„ฑ(SSG)์ด ๊ฐ–๋Š” ์žฅ์ (๋น ๋ฅธ ์ดˆ๊ธฐ ํ™”๋ฉด ๋ฐ SEO ์ตœ์ ํ™”)๊ณผ ์ •ํ™•ํžˆ ๋Œ€์กฐ๋ฉ๋‹ˆ๋‹ค [1, 7, 8, 11]. + +--- +*Last updated: 2026-04-25* \ No newline at end of file diff --git a/00_Raw/๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ํ”„๋กœ์„ธ์Šค (CRP).md b/00_Raw/๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ํ”„๋กœ์„ธ์Šค (CRP).md new file mode 100644 index 00000000..7fb91638 --- /dev/null +++ b/00_Raw/๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ํ”„๋กœ์„ธ์Šค (CRP).md @@ -0,0 +1,21 @@ +# [[๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ํ”„๋กœ์„ธ์Šค (CRP)]] + +## ๐Ÿ“Œ Brief Summary +๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ํ”„๋กœ์„ธ์Šค, ์ฆ‰ ์ค‘์š” ๋ Œ๋”๋ง ๊ฒฝ๋กœ(Critical Rendering Path, CRP)๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ HTML, CSS, JavaScript๋ฅผ ํ™”๋ฉด์˜ ํ”ฝ์…€๋กœ ๋ณ€ํ™˜ํ•˜๊ธฐ ์œ„ํ•ด ์‹คํ–‰ํ•˜๋Š” ์ผ๋ จ์˜ ๋‹จ๊ณ„์ž…๋‹ˆ๋‹ค [1, 2]. ์ด ๊ณผ์ •์€ DOM ๋ฐ CSSOM ํŠธ๋ฆฌ ์ƒ์„ฑ, ๋ Œ๋” ํŠธ๋ฆฌ ํ•ฉ์„ฑ, ๋ ˆ์ด์•„์›ƒ(Reflow) ๊ณ„์‚ฐ, ๊ทธ๋ฆฌ๊ณ  ํ™”๋ฉด์— ํ”ฝ์…€์„ ๊ทธ๋ฆฌ๋Š” ํŽ˜์ธํŠธ(Paint) ๋ฐ ํ•ฉ์„ฑ(Composite) ๋‹จ๊ณ„๋กœ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค [2, 3]. ์ด ๊ฒฝ๋กœ๋ฅผ ์ตœ์ ํ™”ํ•˜๋Š” ๊ฒƒ์€ ์ฒซ ๋ Œ๋”๋ง ์‹œ๊ฐ„์„ ๋‹จ์ถ•ํ•˜๊ณ , ์›ํ™œํ•œ ์‚ฌ์šฉ์ž ์ƒํ˜ธ์ž‘์šฉ์„ ๋ณด์žฅํ•˜๋ฉฐ ์„ฑ๋Šฅ ๋ณ‘๋ชฉํ˜„์ƒ์„ ํ”ผํ•˜๊ธฐ ์œ„ํ•œ ํ”„๋ก ํŠธ์—”๋“œ ์—”์ง€๋‹ˆ์–ด๋ง์˜ ํ•ต์‹ฌ ๋ชฉํ‘œ์ž…๋‹ˆ๋‹ค [1, 4]. + +## ๐Ÿ“– Core Content +๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ํ”„๋กœ์„ธ์Šค๋Š” ์ฝ”๋“œ๊ฐ€ ํ™”๋ฉด์˜ ์‹œ๊ฐ์  ์š”์†Œ๋กœ ๋ณ€ํ™˜๋˜๋Š” ๊ณผ์ •์œผ๋กœ, ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ•ต์‹ฌ ๋‹จ๊ณ„๋“ค์„ ๊ฑฐ์นฉ๋‹ˆ๋‹ค: + +* **๋ฌธ์„œ ๊ฐ์ฒด ๋ชจ๋ธ(DOM) ๊ตฌ์ถ•:** ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ HTML ๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์‹ ํ•˜๋ฉด, ๋ฐ”์ดํŠธ๋ฅผ ๋ฌธ์ž, ํ† ํฐ, ๋…ธ๋“œ๋กœ ์ˆœ์ฐจ์ ์œผ๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ๊ณ„์ธต์ ์ธ DOM ํŠธ๋ฆฌ๋ฅผ ๊ตฌ์„ฑํ•ฉ๋‹ˆ๋‹ค [1, 5]. ์ด DOM ๊ตฌ์ถ•์€ ์ ์ง„์ ์œผ๋กœ ์ง„ํ–‰๋˜๋ฏ€๋กœ ๋ธŒ๋ผ์šฐ์ €๋Š” ๋„คํŠธ์›Œํฌ ์š”์ฒญ์ด ํ™œ์„ฑํ™”๋œ ์ƒํƒœ์—์„œ๋„ ํŠธ๋ฆฌ๋ฅผ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [1, 6]. ๊ทธ๋Ÿฌ๋‚˜ ๋…ธ๋“œ ์ˆ˜๊ฐ€ ๋งŽ์•„์งˆ์ˆ˜๋ก ์ดํ›„์˜ ๋ Œ๋”๋ง ๋‹จ๊ณ„์—์„œ ๋” ๋งŽ์€ ๊ณ„์‚ฐ ์‹œ๊ฐ„์ด ์†Œ์š”๋ฉ๋‹ˆ๋‹ค [6, 7]. +* **CSS ๊ฐ์ฒด ๋ชจ๋ธ(CSSOM) ๊ตฌ์ถ•:** CSS๋Š” ์ฝ˜ํ…์ธ ๊ฐ€ ์–ด๋–ป๊ฒŒ ์Šคํƒ€์ผ๋ง๋ ์ง€ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. DOM ๊ตฌ์ถ•๊ณผ ๋‹ฌ๋ฆฌ CSSOM ๊ตฌ์ถ•์€ ์ ์ง„์ ์ด์ง€ ์•Š์œผ๋ฉฐ ๋ Œ๋”๋ง์„ ์ฐจ๋‹จ(render-blocking)ํ•˜๋Š” ์ž‘์—…์ž…๋‹ˆ๋‹ค [6, 7]. ๋ธŒ๋ผ์šฐ์ €๋Š” ์Šคํƒ€์ผ์ด ์ ์šฉ๋˜์ง€ ์•Š์€ ์ฝ˜ํ…์ธ ๊ฐ€ ํ™”๋ฉด์— ๋…ธ์ถœ๋˜๋Š” ํ˜„์ƒ(FOUC)์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ์—ฐ๊ฒฐ๋œ ๋ชจ๋“  ์Šคํƒ€์ผ์‹œํŠธ๋ฅผ ๋‹ค์šด๋กœ๋“œํ•˜๊ณ  ํŒŒ์‹ฑํ•  ๋•Œ๊นŒ์ง€ ๋ Œ๋” ํŠธ๋ฆฌ๋ฅผ ๋นŒ๋“œํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค [6, 7]. +* **๋ Œ๋” ํŠธ๋ฆฌ(Render Tree) ํ•ฉ์„ฑ:** DOM๊ณผ CSSOM์ด ๋ชจ๋‘ ์ค€๋น„๋˜๋ฉด ๋ธŒ๋ผ์šฐ์ €๋Š” ๋‘ ํŠธ๋ฆฌ๋ฅผ ๊ฒฐํ•ฉํ•˜์—ฌ ๋ Œ๋” ํŠธ๋ฆฌ๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค [8, 9]. ์ด ํŠธ๋ฆฌ๋Š” ํ™”๋ฉด์— ๋ Œ๋”๋งํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ๋…ธ๋“œ๋งŒ ํฌํ•จํ•˜๋ฏ€๋กœ, `