서버 렌더링된 템플릿 위에 동적 동작을 간편하게 추가할 수 있는 경량 라이브러리 Psatina가 소개되었습니다.

Psatina는 1.6KB 크기의 미니파이드 파일로, 속도보다는 간단한 사용성에 초점을 맞추어 설계되었습니다.

템플릿 내에 p:data 속성을 사용해 동적 영역을 정의하고, [| |] 구문으로 자바스크립트 표현식을 삽입해 데이터를 바인딩할 수 있습니다.

p:set: 접두어로 DOM 속성을 설정하고, p:on:으로 이벤트 리스너를 추가할 수 있으며, update() 함수로 상태 변경 시 UI를 갱신합니다.

조건부 렌더링과 반복문은 각각 p:if와 p:for: 속성으로 구현하며, p:init은 요소 생성 시 초기화 코드를 실행하는 데 활용됩니다.

또한, p:ref로 요소 참조를 저장하고, 내부에 p:data를 중첩해 서브 스코프를 생성할 수 있어 복잡한 UI 상태 관리에 유용합니다.

사용자 정의 지시문도 templateDirectives 맵에 추가해 확장 가능하며, 각 지시문은 렌더링 함수와 현재 데이터, 요소 정보를 인자로 받습니다.

Psatina는 서버 사이드 렌더링 결과에 가볍고 직관적인 동적 기능을 덧붙이고자 하는 개발자에게 적합한 도구입니다.