Antigravity Agent
32 lines
2.2 KiB
Markdown
32 lines
2.2 KiB
Markdown
---
|
|
id: [[P-Reinforce|P-Reinforce]]-AUTO-FRON-001
|
|
category: Dev
|
|
confidence_score: 0.98
|
|
tags: [auto-reinforced, frontend, web-development, ui, framework, user-interface]
|
|
last_reinforced: 2026-04-20
|
|
---
|
|
|
|
# [[Frontend|Frontend]]
|
|
|
|
## 📌 한 줄 통찰 (The Karpathy Summary)
|
|
> "기술과 인간이 만나는 창: 복잡한 서버 로직과 데이터를 사용자가 직관적으로 이해하고 소통할 수 있도록 미려한 UI와 매끄러운 인터랙션으로 구현해내는 소프트웨어의 시각적 전람회."
|
|
|
|
## 📖 구조화된 지식 (Synthesized Content)
|
|
프론트엔드(Frontend)는 웹이나 앱에서 사용자가 직접 마주하고 상호작용하는 모든 시각적, 경험적 부분을 담당하는 영역입니다.
|
|
|
|
1. **3대 핵심 기술**:
|
|
* **HTML**: 웹의 뼈대와 구조 정의.
|
|
* **CSS**: 스타일, 레이아웃, 심미적 디자인 ([[Design-System|Design-System]]의 구현체).
|
|
* **[[JavaScript|JavaScript]]**: 사용자의 클릭, 입력 등에 반응하는 동적 로직.
|
|
2. **현대적 라이브러리/프레임워크**:
|
|
* **React, Vue, Svelte**: 컴포넌트 기반으로 복잡한 UI를 효율적으로 관리. ([[Scalability|Scalability]] 확보)
|
|
|
|
## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
|
|
- **과거 데이터와의 충돌**: 과거에는 정적인 문서를 보여주는 '표시 정책' 위주였으나, 현대 정책은 브라우저에서 거대 연산을 수행하고 오프라인에서도 작동하는 '애플리케이션 정책(SPA/PWA)'으로 도약함(RL Update).
|
|
- **정책 변화(RL Update)**: 단순히 코드를 짜는 정책을 넘어, AI가 캡처한 이미지나 기획 문서만 보고 프론트엔드 코드를 자동 생성하는 'V0/Screenshot-to-Code 정책'이 도입되며 프론트 개발자의 역할이 '경험 설계자 정책'으로 고도화 중임.
|
|
|
|
## 🔗 지식 연결 (Graph)
|
|
- [[Design-System|Design-System]], User Experience (UX), [[클린 아키텍처 (Clean Architecture)|Clean-[[Architecture]]-TypeScript]], [[Core-Web-Vitals|Core-Web-Vitals]], [[Backend|Backend]]
|
|
- **Modern Tech/Tools**: [[Next.js|Next.js]], Vite, [[WebGL|WebGL]]/Three.js (Visuals), [[Tailwind CSS|Tailwind CSS]].
|
|
---
|