meng shao(@shao__meng)의 스레드

[오픈소스 추천] HMPL: React보다 가볍고, 기존 jQuery보다 현대적이며, HTMX와 유사하지만 템플릿 제어가 더 뛰어난 미니멀리스트 서버 기반 템플릿 언어입니다. 핵심 목표는 매우 명확합니다. 최신 웹 애플리케이션의 역동적인 상호작용 경험을 유지하면서 클라이언트 측 JavaScript 코드의 양과 복잡성을 크게 줄이는 것입니다. HTMX와 EJS의 중간 형태라고 할 수 있으며, 기존 템플릿 엔진의 직관성과 최신 "서버 기반 UI"의 기능을 모두 갖추고 있습니다. 💡 핵심 개념: HTML에서 "요청"을 정의합니다. HMPL의 가장 큰 혁신은 구문 논리에 있습니다. 기존 방식은 "JavaScript를 작성하여 요청을 보내고 -> 데이터를 가져오고 -> DOM을 업데이트하는" 방식이었지만, HMPL에서는 HTML 템플릿에서 "이 블록의 데이터가 어디에서 왔는지"를 직접 선언할 수 있습니다. • WYSIWYG 데이터 흐름: 긴 Fetch 코드나 Axios 코드를 작성할 필요가 없습니다. 템플릿에 특정 구문(예: {{src: "/api/component"}})만 사용하면 HMPL이 자동으로 요청을 처리하고, 서버에서 반환된 HTML 조각을 가져와 페이지에 안전하게 렌더링합니다. • 서버 중심: 클라이언트가 "요청 시 가져오기 및 표시"만 담당하도록 로직을 서버에 다시 배치하는 것을 권장합니다. 이를 통해 SSR과 유사한 효과를 자연스럽게 지원하면서도 복잡한 프레임워크의 부담을 덜 수 있습니다. ✨ 주요 기능 설명 1. 매우 가볍습니다 최신 프런트엔드 프레임워크(예: React 및 Vue)가 수십 KB 또는 그 이상이 될 수 있는 상황에서 HMPL의 코어는 매우 작습니다(gzip 후 약 24KB 또는 그 이하). 따라서 첫 번째 화면 로딩 속도와 성능에 대한 요구 사항이 높은 프로젝트에 매우 적합합니다. 2. 내장 보안(보안 우선) 서버 측 HTML을 직접 렌더링하는 것은 XSS 공격에 가장 취약합니다. HMPL은 렌더링된 콘텐츠를 기본적으로 정제하고 살균하는 DOMPurify를 효과적으로 통합하여 개발자들이 가장 우려하는 보안 위험을 해결합니다. 3. 우수한 개발자 경험(DX) 틈새 언어임에도 불구하고 VS Code 플러그인, Vite 플러그인, Webpack Loader 등 포괄적인 지원 도구를 제공합니다. 따라서 HMPL 작성 시 구문 강조 및 자동 완성과 같은 최신 개발 환경을 누릴 수 있습니다. 4. 유연성 전체 프레임워크를 대체하기 위한 것이 아닙니다. 단독 도구로 사용하거나 기존 Vue 또는 React 프로젝트에 임베드하여 동적으로 로드해야 하는 특정 서버 측 콘텐츠를 처리할 수 있습니다. ⚖️ 산업 가치 및 평가: 현재 프론트엔드 개발 분야에서 HMPL의 등장은 일종의 반성을 반영합니다. • 과도한 엔지니어링을 거부하세요. 모든 간단한 동적 페이지에 거대한 SPA 프레임워크를 도입해야 할까요? HMPL은 부정적인 답변을 내놓았습니다. • 학습 곡선 낮음: 백엔드 개발자나 풀스택 개발자의 경우, HMPL의 "템플릿 작성 = 로직 작성" 접근 방식은 React Hooks나 Vue Lifecycle 전체를 배우는 것보다 훨씬 직관적입니다. 오픈소스 주소: