프론트엔드 엔지니어 관점에서
개발 과정에서 학습하고 고민한 개념, 패턴, 흐름, 시스템 구조를
직접 구조화하여 정리한 개인 지식 저장소입니다.
단순 문법이나 사용법보다:
- 왜 이런 추상화와 구조가 등장했는가
- 어떤 문제를 해결하기 위한 개념인가
- 브라우저 / runtime / framework / network가 어떻게 연결되는가
- 실제 서비스 구현에서 어떤 식으로 사고해야 하는가
- 개별 기술이 어떻게 하나의 시스템으로 이어지는가
를 중심으로 정리합니다.
개념 노트 저장소입니다.
더 이상 의미 있게 쪼개기 어려운 최소 단위 개념을 정리합니다.
예:
- callback
- Promise abstraction
- event loop
- JWT
- hydration
- cookie
- HTTP header
단일 개념의 정의, 등장 배경, 역할, 흐름을 다룹니다.
여러 atom 개념을 연결하여 하나의 시스템 흐름으로 정리합니다.
예:
- javascript-runtime
- frontend-auth-state
- persistence-storage
- javascript-ecosystem-evolution
개별 개념보다:
- 흐름
- 상태 전이
- runtime 구조
- 아키텍처 관점
에 집중합니다.
사용자 이벤트 또는 시스템 흐름을 단계별로 정리합니다.
예:
- auth-state-restore-flow
“어떤 순서로 상태가 전이되는가”를 중심으로 기록합니다.
학습 중 얻은 관찰이나 사고 확장을 기록합니다.
단순 개념 정리보다:
- 왜 헷갈렸는가
- 어떤 추상화 관점이 중요한가
- 실제 개발과 어떻게 연결되는가
를 다룹니다.
특정 개념들을 연결하는 Map of Content(MOC) 문서입니다.
관련 노트들을 하나의 탐색 진입점으로 연결합니다.
실무 및 UI 구현에서 반복적으로 사용하는 패턴을 정리합니다.
예:
- truncate + min-w-0
- sticky offset scroll
- flex-shrink: 0
- viewport threshold
단순 CSS 속성 설명보다:
- 왜 필요한가
- 어떤 상황에서 깨지는가
- 어떤 조합으로 사용하는가
를 중심으로 정리합니다.
질문 → 꼬리질문 → atom → system으로 이어지는 지식 연결 구조를 실험적으로 정리하는 공간입니다.
학습을 단순 암기가 아니라:
질문 기반 탐색 구조로 확장하는 방법을 고민합니다.
이 저장소는 단순 “공부 기록”보다:
- runtime 관점 이해
- 상태 전이 중심 사고
- 시스템 흐름 이해
- 개념 간 연결
- 구조화된 문서화
를 목표로 합니다.
특히 다음 관점을 중요하게 생각합니다.
개별 기술보다,
왜 그런 추상화와 구조가 필요했는가- JavaScript Runtime
- Browser Rendering
- Event Loop
- Promise & Async Flow
- Authentication & Authorization
- HTTP / Cookie / Storage
- React Rendering
- Hydration
- Routing
- Frontend Architecture
일부 실험적이거나 미완성인 노트가 포함될 수 있습니다.
지속적으로 구조를 개선하며 정리 중입니다.