chore: extend specialized knowledge categories with additional mapping
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,60 @@
|
||||
# Datacollector - 인증 복구 후 자동 재개 상태 전환 수정
|
||||
|
||||
- 작성 시각: 2026-04-25 22:39:30 KST
|
||||
- 프로젝트: `/Volumes/Data/project/Antigravity/Datacollector`
|
||||
- 관련 파일: `src/components/AgentDashboard.tsx`, `src/lib/engine.ts`
|
||||
|
||||
## 상황
|
||||
|
||||
NotebookLM 인증 복구 로직을 강화했지만, 화면에서는 여전히 `CONTINUE MISSION` 버튼을 사용자가 눌러야 다음 큐가 이어지는 것처럼 보였다.
|
||||
|
||||
사용자 관찰:
|
||||
|
||||
- 작업은 일부 완료됨.
|
||||
- 큐에는 아직 작업이 많이 남아 있음.
|
||||
- 헤더 상태가 `IDLE`로 보임.
|
||||
- `CONTINUE MISSION` 버튼이 사용자의 수동 클릭을 기다림.
|
||||
|
||||
## 원인
|
||||
|
||||
프론트엔드 상태 전환에 빈틈이 있었다.
|
||||
|
||||
`AgentDashboard`의 `useEffect`는 `status !== 'running'`일 때 `KnowledgeEngine.stop()`을 호출한다. 그런데 기존 `stop()`은 내부 실행 플래그만 끄는 것이 아니라 항상 Zustand 상태까지 `idle`로 바꿨다.
|
||||
|
||||
그 결과 인증 오류 등으로 `paused` 상태를 유지해야 하는 경우에도 React effect를 지나면서 `paused -> idle`로 바뀌었다. 이렇게 되면 앱은 "복구 후 자동 재개 가능한 일시정지"가 아니라 "사용자가 다시 Continue를 눌러야 하는 대기 상태"처럼 동작했다.
|
||||
|
||||
## 조치
|
||||
|
||||
`src/lib/engine.ts`:
|
||||
|
||||
- `stop(updateStatus = true)` 형태로 변경했다.
|
||||
- 내부 엔진만 멈춰야 할 때는 UI 상태를 덮어쓰지 않도록 했다.
|
||||
|
||||
`src/components/AgentDashboard.tsx`:
|
||||
|
||||
- `status !== 'running'` effect에서는 `engine.stop(false)`를 호출하도록 변경했다.
|
||||
- `status === 'paused'`이고 큐가 남아 있으면 NotebookLM 연결 확인 후 자동으로 `running`으로 되돌리는 auto-resume effect를 추가했다.
|
||||
- 기존 버그로 이미 `idle`에 갇힌 화면도 구제하기 위해, 수동 정지나 작업 완료 로그가 없는 `idle + 남은 큐` 상태도 복구 가능한 멈춤으로 보고 자동 재개하도록 보강했다.
|
||||
- 중복 자동 재개를 막기 위해 `autoResumeRef` 잠금을 추가했다.
|
||||
|
||||
## 검증
|
||||
|
||||
다음 검증을 완료했다.
|
||||
|
||||
```bash
|
||||
npm run lint
|
||||
curl -sS -I http://127.0.0.1:3000
|
||||
curl -sS -X POST http://127.0.0.1:3002/api/check-connection
|
||||
```
|
||||
|
||||
결과:
|
||||
|
||||
- TypeScript 검사 통과
|
||||
- 프론트엔드 서버 응답 정상
|
||||
- NotebookLM 브리지 연결 확인 `success: true`
|
||||
|
||||
## 운영 메모
|
||||
|
||||
앞으로 인증 복구나 연결 복구로 인해 `paused` 상태가 되면 앱이 NotebookLM 연결을 확인하고 자동으로 다음 큐를 이어서 실행한다.
|
||||
|
||||
사용자가 직접 `STOP / PAUSE`를 누른 경우는 기존처럼 `idle`로 유지되므로, 수동 정지는 자동 재개 대상이 아니다.
|
||||
@@ -0,0 +1,32 @@
|
||||
# [[브라우저 렌더링 과정 최적화 및 UI 반응성 개선]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
브라우저 렌더링 과정은 브라우저가 HTML, CSS, JavaScript를 파싱하여 DOM과 CSSOM을 구축하고, 이를 기반으로 렌더 트리를 생성한 뒤 화면에 픽셀을 그리는 일련의 경로(Critical Rendering Path)를 의미합니다 [1, 2]. 이 과정에서 발생하는 불필요한 레이아웃 재계산(Reflow)과 화면 다시 그리기(Repaint)는 성능을 저하시키는 주요 원인이 되므로 이를 최소화하는 것이 필수적입니다 [3-6]. 현대의 프론트엔드 환경에서는 이러한 비용을 줄이고 UI 반응성을 극대화하기 위해 React의 Virtual DOM, Fiber 아키텍처, 자동 배칭(Automatic Batching), 그리고 React Compiler와 같은 고도화된 최적화 기술들이 활용되고 있습니다 [7-11].
|
||||
|
||||
## 📖 Core Content
|
||||
|
||||
**1. 브라우저 렌더링의 핵심 경로 (Critical Rendering Path)**
|
||||
* **파싱 및 트리 구축:** 브라우저는 서버로부터 받은 HTML을 점진적으로 파싱하여 문서의 구조를 나타내는 DOM(Document Object Model) 트리를 구축합니다 [1, 12-14]. 동시에 CSS를 파싱하여 스타일 정보를 담은 CSSOM(CSS Object Model) 트리를 생성하는데, CSSOM은 구축이 완료될 때까지 렌더링을 차단(Render-blocking)하는 특성을 가집니다 [15, 16].
|
||||
* **렌더 트리(Render Tree) 생성:** DOM과 CSSOM이 준비되면, 브라우저는 화면에 시각적으로 표시될 노드들만 모아 렌더 트리를 합성합니다 [2, 17, 18]. (`<script>` 태그나 `display: none` 스타일이 적용된 요소는 제외됩니다 [17, 18].)
|
||||
* **레이아웃(Layout)과 페인트(Paint):** 렌더 트리를 기반으로 기기 뷰포트에 맞춰 각 요소의 정확한 크기와 위치를 계산하는 레이아웃 과정을 거칩니다 [19-22]. 이후 변환된 기하학적 정보를 실제 화면의 픽셀로 변환하여 그리는 페인트(Paint) 단계와, 레이어들을 하나로 합치는 합성(Compositing) 단계가 수행됩니다 [23-25].
|
||||
|
||||
**2. 리플로우(Reflow)와 리페인트(Repaint) 최소화**
|
||||
* **성능 비용:** 요소의 너비, 높이, 마진 등을 변경하거나 DOM 구조를 조작하면, 브라우저는 레이아웃을 다시 계산하는 리플로우(Reflow)를 발생시킵니다 [5, 19, 26]. 리플로우는 트리 전체에 걸쳐 연쇄적인 재계산을 유발할 수 있어 연산 비용이 매우 높습니다 [3, 5, 27]. 배경색이나 가시성 등 시각적 요소만 변경될 때는 레이아웃 단계 없이 리페인트(Repaint)만 발생하지만, 이 역시 과도하면 프레임 저하를 초래합니다 [6, 23, 26].
|
||||
* **최적화 방법:** 불필요한 DOM 깊이를 줄이고 [28], DOM 상태 업데이트를 일괄 처리(Batching)하며 [3, 29], 애니메이션에는 레이아웃을 유발하지 않고 GPU 가속을 활용할 수 있는 `transform` 등의 속성을 사용하는 것이 권장됩니다 [6, 23, 29].
|
||||
|
||||
**3. React의 렌더링 최적화 아키텍처**
|
||||
* **Virtual DOM과 재조정(Reconciliation):** DOM을 직접 조작하는 것은 느리기 때문에, React는 메모리에 가벼운 Virtual DOM을 유지합니다 [10, 30]. 상태 변경 시 새로운 Virtual DOM 트리를 만들고 이전 트리와 비교(Diffing)하는 휴리스틱 $O(n)$ 알고리즘을 통해, 실제 변경된 부분만 실제 DOM에 반영하여 리플로우와 리페인트를 최소화합니다 [10, 30-32].
|
||||
* **Fiber 아키텍처와 동시성(Concurrent) 기능:** React 16부터 도입된 Fiber는 렌더링 작업을 'Fiber 노드' 단위로 쪼개어 중단 및 재개가 가능하게 만든 스케줄링 아키텍처입니다 [33-36]. 사용자 입력과 같은 긴급한 작업(Sync Lane)을 데이터 페칭 결과 등 덜 긴급한 작업보다 우선 처리함으로써 메인 스레드 차단을 막고 UI 반응성을 유지합니다 [37-39]. 이를 활용한 `useTransition` 훅 등은 무거운 연산 중에도 UI가 멈추지 않게 돕습니다 [7, 40, 41].
|
||||
|
||||
**4. 최신 React(18, 19)의 자동화된 성능 개선**
|
||||
* **자동 배칭(Automatic Batching):** React 18부터는 네이티브 이벤트뿐만 아니라 비동기 작업(Promise, `setTimeout` 등) 내에서 발생하는 여러 상태 업데이트를 단일 리렌더링으로 묶어서 처리(Batching)합니다 [8, 42-44]. 이를 통해 불필요한 리렌더링 횟수를 대폭 줄여 성능을 크게 향상시킵니다 [45, 46].
|
||||
* **React Compiler:** 잦은 리렌더링을 막기 위해 과거에는 개발자가 수동으로 `React.memo`, `useMemo`, `useCallback` 등을 적용해야 했습니다 [9, 47]. 하지만 React 19 컴파일러는 빌드 타임에 코드(AST)를 분석하여 데이터 흐름을 추적하고, 필요한 곳에 자동으로 세밀한 메모이제이션을 삽입해 개발자의 부담을 줄이고 렌더링을 최적화합니다 [9, 48-50].
|
||||
* **React Server Components (RSC):** 클라이언트 번들 크기와 파싱/실행 시간을 줄이기 위해, 서버에서 컴포넌트를 렌더링하고 직렬화된 UI 표현만 브라우저로 스트리밍하는 구조입니다 [51-53]. 인터랙션이 필요 없는 UI를 서버 컴포넌트로 분리함으로써, 브라우저가 처리해야 할 자바스크립트 양을 줄여 로딩 속도와 INP(Interaction to Next Paint) 지표를 개선합니다 [54-56].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[Critical Rendering Path]], [[Reflow and Repaint]], [[Virtual DOM]], [[React Fiber Architecture]], [[Automatic Batching]], [[React Compiler]], [[React Server Components]]
|
||||
- **Projects/Contexts:** [[Core Web Vitals Optimization (INP, LCP 개선)]], [[Next.js 기반의 Hybrid Rendering (SSR/CSR/RSC 혼합 적용)]]
|
||||
- **Contradictions/Notes:** CSS 선택자의 성능 최적화와 관련해, MDN 가이드에서는 브라우저가 매우 빠르기 때문에 선택자 성능 최적화(예: 특정성을 낮추는 작업)가 가져오는 이득이 마이크로초 단위에 불과하여 최우선 최적화 대상이 아닐 수 있다고 언급하지만 [57], 다른 구글 개발자 가이드에서는 불필요하게 복잡한 하위(descendant) 선택자를 피하는 것을 리플로우/렌더링 시간 단축을 위한 주요 지침 중 하나로 제시하고 있습니다 [28, 58].
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-25*
|
||||
Reference in New Issue
Block a user