오늘의 오전 학습 - HTMX

최근 프론트엔드 생태계의 추세는 React 가 지배적이며, Next.js 등의 프레임워크를 통해 일부 서버사이드 로직을 프론트엔드 단에서 처리하는 추세로 가고 있습니다.

점점 거대해져가는 프론트엔드 라이브러리/프레임워크 생태계는 복잡한 상태관리와 상호작용이 필요한 웹사이트에는 적합할 수 있지만, 상황에 따라 좀 더 간단한 웹 사이트를 생성하고자 할 때나, 백엔드 개발자로서 프론트엔드 부분을 리엑트까지 확장하여 모두 커버할 수 없는 경우가 존재할 것입니다.

이러한 상황에 HTMX 는 충분히 좋은 대안이 될 수 있다고 생각이 들었고, 잘 작성된 블로그 포스팅을 통해 간략하게 요약하고자 합니다.

참고문헌

https://www.builder.io/blog/htmx-vs-react

https://www.youtube.com/watch?v=-ptq9HCrI_U

요약

• HTMX 는 우리가 쉽게 접할 수 있는 HTML의 확장 문법입니다. 즉, 기존의 HTML 속성에 'hx-' 로 시작하는 새로운 속성이 추가될 뿐이며, 자바스크립트를 사용하지 않고도 AJAX와 같은 부분적인 업데이트가 가능합니다.

• HTMX는 기존 JSON 데이터를 응답받는것이 아니라, HTML 데이터를 응답받아 바로 적용시키는 방식입니다. 또한 대부분은 로직을 클라이언트측이 아닌 서버측에서 모두 처리하게 됩니다. (거진 UI 까지...)

• 서버와의 상호작용이 기존 거대한 리엑트 프레임워크를 통한 방식보다 더 직관적이고 심플합니다.

• 이러한 특징으로 살펴볼 때, 학습의 접근성이 좀 더 좋고 클라이언트 단의 복잡성을 감소시킬 수 있습니다.

• 실제 한 회사에서는 2달의 기간에 걸쳐 React 기반 웹사이트의 성능저하 부분을 HTMX로 환경을 변경하면서 대폭 개선한 사례도 있어, 좀 더 복잡한 웹 사이트에서도 HTMX의 활용도 기대할 수 있겠습니다

• 다만, 더 복잡한 상태관리가 필요한 웹 사이트에서는 적합하지 않을 수 있으며, 대부분의 API의 response 형식은 JSON 이기에 HTMX 를 활용하기는 쉽지 않습니다.

• 현재로서 간단한 웹 사이트를 구축할 필요성이 있는 백엔드 개발자에 한하여 HTMX 는 좋은 옵션이 될 수 있다 생각이 듭니다.