- Datastar는 HTMX와 Alpine.js의 기능을 통합한 새로운 하이퍼미디어 프레임워크입니다. 🚀
- 서버 사이드 렌더링의 단순성과 SPA 프레임워크의 강력함을 결합하여 반응형 애플리케이션을 구축할 수 있습니다. 💡
- 단 14.12KB로 Alpine.js와 HTMX를 합친 것보다 작으면서도 두 라이브러리의 기능을 모두 제공하는 것이 핵심 강점입니다. 🤏
- HTML 속성(데이터 속성)을 사용하여 프런트엔드에 반응성을 선언적으로 추가하고 백엔드와 상호작용합니다. 🏷️
- '시그널(Signals)' 개념을 통해 상태를 관리하며, 값 변경 시 DOM에 자동으로 업데이트를 전파합니다. 📡
data-bind속성은 양방향 데이터 바인딩을 설정하고 시그널을 생성합니다 (예:data-bind="username"). 🔄data-text속성은 시그널 값을 표시하며, 유효한 JavaScript 표현식을 사용할 수 있습니다 (예:$username.toUpperCase()). ✍️data-show속성은 표현식의 참/거짓 여부에 따라 요소를 표시하거나 숨깁니다 (예:username.length > 2). 👀data-class속성은 표현식 또는 JavaScript 객체 조건에 따라 CSS 클래스를 동적으로 추가/제거합니다. 🎨data-on:event속성은 이벤트 리스너를 연결하여 특정 이벤트 발생 시 JavaScript 표현식을 실행합니다 (예:data-on:click="username = ''"). 👂- 데이터 속성은 DOM에 나타나는 순서대로 평가되므로, 시그널은 사용되기 전에 선언되어야 합니다. ➡️
- 백엔드와는 Server-Sent Events(SSE)를 사용하여 서버에서 브라우저로 이벤트를 스트리밍하며, SDK를 통해 DOM 조작을 지원합니다. 🌐
Recommanded Videos
