Frontend 개요
- Frontend Wiki는 browser에서 application이 실행되는 맥락부터 state, template, component contract, URL navigation까지 연결한다.
- 현재 범위는 JavaScript 언어 규칙, 비동기 실행, browser DOM과 script 로딩이라는 기반층과, Vue course 6개 source를 전부 검증한 Vue application model이다.
처음 읽을 순서
- 언어 규칙과 브라우저 실행 환경을 먼저 읽고, Vue의 상태 갱신에서 컴포넌트 계약과 라우팅으로 이어진다. 아래 순서는 학습 안내이며 모든 항목 사이의 기술적 의존 관계를 뜻하지 않는다.
- JavaScript Language Model - 스코프, 값과 참조, 함수와
this, prototype, 모듈, Proxy의 언어 규칙.
- JavaScript Asynchronous Execution - 콜백, Promise, async/await와 이벤트 루프.
- Browser DOM and Script Loading - HTML에서 DOM이 만들어지는 과정과 script 실행 시점.
- SPA and CSR - Browser 중심 application/rendering model.
- Vue.js - State-driven UI를 만드는 framework root concept.
- Vue Reactivity - State change와 DOM update를 연결하는 mechanism.
- ref vs reactive - Reactive state API 선택 기준.
- Vue app instance - App mount, computed, watch, lifecycle 책임.
- Vue Directives - State를 template 표현과 interaction에 연결하는 API.
- Vue Component Architecture - SFC와 Props/Emit/Slots contract.
- Vue Advanced Components - Reusable component API 설계 pattern.
- Vue Router - URL과 component hierarchy를 연결하는 navigation model.
핵심 질문
- SPA와 CSR은 어떤 차이가 있으며 Vue와 어떤 관계인가?
- Vue reactivity는 state와 DOM update를 어떻게 연결하는가?
- Computed와 watch는 각각 derived value와 side effect를 어떻게 분리하는가?
- Props, emitted events, Slots는 component contract에서 어떤 방향을 가지는가?
- Router는 URL, component loading, navigation policy를 어떤 순서로 연결하는가?
- JavaScript 일반 함수의
this는 언제 정해지는가?
<head>의 script는 왜 DOM 접근에 실패하는가?
핵심 개념
- JavaScript Language Model - ECMAScript 문법과 호스트 API의 경계, 스코프·TDZ, 값과 참조,
this, prototype과 class, 모듈, Proxy를 설명한다.
- JavaScript Asynchronous Execution - UI를 멈추지 않는 비동기 처리와 콜백·Promise·async/await의 관계를 설명한다.
- Browser DOM and Script Loading - DOM 생성 단계, script가 DOM 생성을 멈추는 방식, 일반 script와 module script의 실행 시점을 설명한다.
- SPA and CSR - Application navigation과 rendering responsibility를 구분한다.
- Vue.js - Declarative rendering과 reactivity를 제공하는 root concept이다.
- Vue Reactivity - Reactive state dependency와 DOM update를 연결한다.
- Vue app instance - Mount boundary와 computed/watch/lifecycle 책임을 묶는다.
- Vue Directives - Template binding, conditional/list rendering, form/event handling을 설명한다.
- Vue Component Architecture - SFC 내부 구성과 component public contract를 설명한다.
- Vue Router - URL-to-component mapping과 navigation pipeline을 설명한다.
패턴
비교
종합
- 현재 독립 synthesis page는 없다.
- Vue source 6개의 통합 구조는 이 overview의 읽기 경로와 핵심 개념 목록에 유지한다. 다른 frontend framework source가 추가되어 반복 가능한 cross-framework 결론이 생기면 synthesis로 승격한다.
시각 자료