Blog
Writings & Thoughts
프론트엔드 개발, 아키텍처, 그리고 창작에 대한 기록
02.2026 WebAssembly
렌더 루프를 Rust로: Rc<RefCell> + Closure로 requestAnimationFrame 소유하기 JS에서 폴링하던 렌더 루프를 Rust가 직접 소유하도록 전환한 과정. CanvasInner/Canvas 래퍼 패턴, Closure 수명 관리, RefCell 빌림 안전성까지.
→ 02.2026 WebAssembly 그림판을 벡터 에디터로: 줌/팬, 도형 도구, SVG 내보내기 Stroke에서 Element로의 데이터 모델 리팩토링, 카메라 변환 기반 줌/팬, 도형 도구 추가, SVG 내보내기까지
→ 02.2026 WebAssembly Rust + WASM으로 브라우저 그림판 만들기: 아키텍처 설계부터 리팩토링까지 Canvas API의 Immediate Mode 한계를 Retained Mode로 극복하고, Figma의 렌더링 아키텍처와 비교하며 배운 것들
→ 02.2026 WebAssembly 그림판에 선택 도구 만들기: 히트 테스트부터 러버밴드까지 Retained Mode 데이터 모델 위에 선택, 이동, 복사, 붙여넣기, Undo/Redo를 구현하며 배운 것들
→ 02.2026 Render 나만의 렌더링 엔진 만들기: 가상 DOM부터 시그널까지 가상 DOM과 시그널 기반 반응성 시스템을 직접 구현하며 렌더링의 핵심 원리를 이해합니다.
→ 08.2025 Render 웹 렌더링의 진화: 명령형에서 선언적 함수형까지 웹 개발에서 DOM 렌더링 방식이 어떻게 진화해왔는지 살펴봅니다. 바닐라 JS부터 React까지, 각 시대의 문제점과 해결책, 그리고 가상 DOM을 사용하지 않는 최신 접근법까지 탐구합니다.
→ 08.2025 Vue Vue 반응성 유지하는 커링과 파이프 직접 구현하기 Vue의 ref와 computed를 지원하는 reactiveCurry, pipe 함수를 TypeScript로 구현하는 방법
→