피드로 돌아가기
Dev.toBackend
원문 읽기
aiohttp와 Vanilla JS 기반의 초경량 HTML 워크벤치 설계 및 구현
Open Source Launch: DocCenter — A Cure for HTML Document Sprawl in the AI Era
AI 요약
Context
AI 생성 HTML 파일의 급증으로 인한 문서 관리 파편화 및 수정 프로세스의 비효율성 발생. 기존 IDE나 Notion, 정적 사이트 생성 도구는 실시간 편집과 런타임 보존이라는 상충하는 요구사항을 동시에 충족하지 못하는 한계 존재.
Technical Solution
- aiohttp 기반 Single File Backend 설계를 통한 Cold Start 시간 단축 및 메모리 점유율 최소화
- Build Step을 완전히 제거한 Vanilla JS 채택으로 수정 사항의 즉각적인 반영 및 개발 오버헤드 제거
- iframe 기반 런타임 격리 구조를 통한 원본 HTML의 CSS/JS 상호작용 보존 및 독립적 실행 환경 확보
- saver-runtime.js 주입 방식을 통한 원본 파일 오염 없는 편집 툴바 및 Auto-save 기능 구현
- _resolve_safe() 함수를 통한 Absolute Path 검증으로 Path Traversal 공격을 원천 차단하는 보안 레이어 구축
- User Interaction Window(800ms)와 MutationObserver를 결합한 Dirty Detection 로직으로 불필요한 자동 저장 방지
실천 포인트
- 로컬 도구 설계 시 과도한 프레임워크 대신 Single-file Backend와 Vanilla JS 조합 검토 - 외부 콘텐츠의 런타임을 보존해야 하는 경우 SPA 라우팅 대신 iframe 기반의 격리 구조 적용 - 파일 I/O 처리 시 단순 경로 체크가 아닌 resolve() 기반의 절대 경로 검증 및 Root 제한 로직 필수 적용